Feat/#60 반복적으로 사용되는 버튼들을 아래에 고정합니다. (#86)

* refactor: 버튼을 아래에 고정합니다. * refactor: selectList에 여백을 추가합니다.
dnd-side-project · Oct 13, 2024 · 9810111 · 9810111
1 parent ccaaab5
commit 9810111
Show file tree

Hide file tree

Showing 9 changed files with 302 additions and 344 deletions.
diff --git a/app/(app)/project/detail.tsx b/app/(app)/project/detail.tsx
@@ -1,14 +1,25 @@
+import styled, { css } from '@emotion/native';
+import { AntDesign } from '@expo/vector-icons';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Suspense } from 'react';
+import { ScrollView } from 'react-native';
 
 import { MOCK_PROJECT_DETAIL } from '@/__mock__/project';
+import SolidButton from '@/components/common/button/SolidButton';
 import CustomHeader from '@/components/common/custom-header';
 import CustomLayout from '@/components/common/custom-layout';
+import SlideBar from '@/components/common/slide-bar';
 import Typography from '@/components/common/typography';
-import ProjectDetail from '@/components/project/ProjectDetail';
-import { PROJECT_URLS } from '@/constants';
+import { PROJECT_URLS, REVIEW_URLS } from '@/constants';
 import { useTabBarEffect } from '@/hooks';
+import {
+  flexDirectionColumn,
+  flexDirectionRow,
+  flexDirectionRowItemsCenter,
+} from '@/styles/common';
+import { shadow } from '@/styles/shadow';
 import { color } from '@/styles/theme';
+import { getSize, isMobile } from '@/utils';
 
 type InnerProps = {
   id: string;
@@ -19,7 +30,9 @@ function Inner({ id }: InnerProps) {
   const router = useRouter();
 
   return (
-    <CustomLayout backgroundColor={color.Background.Alternative}>
+    <CustomLayout
+      hasButton={true}
+      backgroundColor={color.Background.Alternative}>
       <CustomHeader
         mt
         backgroundColor={color.Background.Alternative}
@@ -40,10 +53,123 @@ function Inner({ id }: InnerProps) {
           </CustomHeader.Button>
         }
       />
-      <ProjectDetail
-        id={id}
-        data={data}
-      />
+
+      <ScrollView
+        style={{
+          flex: 1,
+        }}>
+        <S.Container>
+          <S.ProjectCard>
+            <S.ProjectImage
+              style={shadow[0]}
+              source={{ uri: data.profile }}
+            />
+            <S.ProjectIntro>
+              <Typography
+                variant='Heading1'
+                fontWeight='semiBold'
+                color={color.Label.Strong}>
+                {data.name}
+              </Typography>
+              <Typography
+                variant='Body1/Normal'
+                fontWeight='medium'
+                color={color.Label.Strong}>
+                {data.description}
+              </Typography>
+            </S.ProjectIntro>
+          </S.ProjectCard>
+
+          <S.ProjectItem>
+            <Typography
+              variant='Body1/Normal'
+              color={color.Label.Neutral}>
+              기간
+            </Typography>
+            <S.DateBox style={shadow[0]}>
+              <AntDesign
+                name='calendar'
+                size={20}
+              />
+              <Typography
+                variant='Body1/Reading'
+                fontWeight='medium'
+                color={color.Label.Strong}>
+                {data.startDate} - {data.endDate}
+              </Typography>
+            </S.DateBox>
+          </S.ProjectItem>
+
+          <S.ProjectItem>
+            <Typography
+              variant='Body1/Normal'
+              color={color.Label.Neutral}>
+              팀원
+            </Typography>
+            <S.ProjectTeamBox>
+              <S.SlideBarContainer style={shadow[0]}>
+                <S.SlideBarBox>
+                  <SlideBar
+                    max_value={data.userList.length}
+                    current_value={data.review_count}
+                  />
+                </S.SlideBarBox>
+                <S.SlideValueText>
+                  <Typography
+                    variant='Caption1'
+                    color={data.review_count === 0 ? color.Label.Assistive : color.Primary.Normal}>
+                    {data.review_count}
+                  </Typography>
+                  <Typography
+                    variant='Caption1'
+                    color={color.Label.Assistive}>
+                    /{data.userList.length}
+                  </Typography>
+                </S.SlideValueText>
+              </S.SlideBarContainer>
+              <S.ProjectUserList>
+                {data.userList.map((user: { id: number; name: string }) => (
+                  <S.ProjectUser
+                    style={shadow[0]}
+                    key={user.id}>
+                    <Typography
+                      variant='Body1/Reading'
+                      fontWeight='medium'
+                      color={color.Label.Strong}>
+                      {user.name}
+                    </Typography>
+                  </S.ProjectUser>
+                ))}
+              </S.ProjectUserList>
+            </S.ProjectTeamBox>
+          </S.ProjectItem>
+
+          <S.ProjectItem>
+            <Typography
+              variant='Body1/Normal'
+              color={color.Label.Neutral}>
+              프로젝트 링크
+            </Typography>
+            <S.LinkBox style={shadow[0]}>
+              <Typography
+                variant='Body1/Reading'
+                fontWeight='medium'
+                color={color.Label.Strong}>
+                {data.link}
+              </Typography>
+            </S.LinkBox>
+          </S.ProjectItem>
+        </S.Container>
+        <CustomLayout.ButtonBox />
+      </ScrollView>
+
+      <CustomLayout.BottomButton>
+        <SolidButton
+          onPress={() => router.navigate({ pathname: REVIEW_URLS.SELECT, params: { id } })}
+          full>
+          설문지 만들기
+        </SolidButton>
+      </CustomLayout.BottomButton>
     </CustomLayout>
   );
 }
@@ -63,4 +189,94 @@ function Page() {
   );
 }
 
+const ProjectUserListMobileStyle = css`
+  ${flexDirectionRow};
+  flex-wrap: wrap;
+`;
+
+const ProjectUserListWebStyle = css`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+`;
+
+const ProjectUserItemMobileStyle = css`
+  flex-basis: ${(getSize.screenWidth - 48) / 2 + 'px'};
+`;
+
+const S = {
+  Container: styled.View`
+    ${flexDirectionColumn};
+    gap: 24px;
+    padding: 20px;
+    margin-bottom: 16px;
+  `,
+  ProjectCard: styled.View`
+    ${flexDirectionRowItemsCenter};
+    gap: 12px;
+  `,
+
+  ProjectImage: styled.Image`
+    width: 80px;
+    height: 80px;
+    border-radius: 60px;
+  `,
+
+  ProjectIntro: styled.View`
+    ${flexDirectionColumn};
+  `,
+
+  ProjectItem: styled.View`
+    ${flexDirectionColumn};
+    gap: 8px;
+  `,
+
+  DateBox: styled.View`
+    ${flexDirectionRowItemsCenter};
+    gap: 8px;
+    padding: 16px;
+    background: ${({ theme }) => theme.color.Background.Normal};
+    border-radius: 8px;
+  `,
+
+  ProjectTeamBox: styled.View`
+    ${flexDirectionColumn};
+    gap: 8px;
+  `,
+  SlideBarContainer: styled.View`
+    ${flexDirectionRowItemsCenter};
+    gap: 8px;
+    justify-content: space-between;
+    width: 100%;
+    padding: 13px 21px;
+    background: ${({ theme }) => theme.color.Background.Normal};
+    border-radius: 8px;
+  `,
+
+  SlideBarBox: styled.View`
+    flex-grow: 1;
+  `,
+
+  SlideValueText: styled.View`
+    ${flexDirectionRow};
+  `,
+
+  ProjectUserList: styled.View`
+    ${isMobile ? ProjectUserListMobileStyle : ProjectUserListWebStyle}
+    gap: 8px;
+  `,
+
+  ProjectUser: styled.View`
+    ${isMobile ? ProjectUserItemMobileStyle : flexDirectionColumn};
+    padding: 18px 16px;
+    background: ${({ theme }) => theme.color.Background.Normal};
+    border-radius: 8px;
+  `,
+
+  LinkBox: styled.View`
+    padding: 16px;
+    background: ${({ theme }) => theme.color.Background.Normal};
+    border-radius: 8px;
+  `,
+};
+
 export default Page;
diff --git a/app/(app)/project/review/complete.tsx b/app/(app)/project/review/complete.tsx
@@ -50,12 +50,13 @@ function Complete() {
           </Typography>
         </S.TextContainer>
       </S.Container>
-      <S.ButtonWrapper>
+      <CustomLayout.ButtonBox />
+      <CustomLayout.BottomButton>
         <SolidButton
           onPress={() => router.replace({ pathname: PROJECT_URLS.DETAIL, params: { id } })}>
           요청하기
         </SolidButton>
-      </S.ButtonWrapper>
+      </CustomLayout.BottomButton>
     </CustomLayout>
   );
 }

diff --git a/app/(app)/project/review/create.tsx b/app/(app)/project/review/create.tsx
@@ -199,15 +199,16 @@ function Wrapper({ id, categories }: WrapperProps) {
           selectedQuestions={selectedQuestions}
           getRandomNewQuestion={getRandomNewQuestion}
         />
+        <CustomLayout.ButtonBox />
       </S.ListWrapper>
 
-      <S.ButtonWrapper>
+      <CustomLayout.BottomButton>
         <SolidButton
           onPress={() => router.navigate({ pathname: REVIEW_URLS.COMPLETE, params: { id } })}
           full>
           다음
         </SolidButton>
-      </S.ButtonWrapper>
+      </CustomLayout.BottomButton>
     </CustomLayout>
   );
 }
@@ -217,9 +218,6 @@ const S = {
     flex-grow: 1;
     justify-content: center;
   `,
-  ButtonWrapper: styled.View`
-    padding: 12px 20px 52px;
-  `,
   GuideTextWrapper: styled.View`
     padding: 20px;
   `,

diff --git a/app/(app)/project/review/select.tsx b/app/(app)/project/review/select.tsx
@@ -56,46 +56,40 @@ function Select() {
           </CustomHeader.Button>
         }
       />
-      <S.Container>
-        <S.TitleContainer>
-          <S.ReviewTitle>
-            <S.TitleText
-              variant='Title3'
-              fontWeight='bold'>
-              받고 싶은 리뷰의{`\n`}카테고리 5개를 골라주세요
-            </S.TitleText>
-            <S.SubTitleText
-              variant='Label1/Normal'
-              fontWeight='medium'>
-              카테고리 별로 설문이 구성돼요
-            </S.SubTitleText>
-          </S.ReviewTitle>
+      <S.TitleContainer>
+        <S.ReviewTitle>
+          <S.TitleText
+            variant='Title3'
+            fontWeight='bold'>
+            받고 싶은 리뷰의{`\n`}카테고리 5개를 골라주세요
+          </S.TitleText>
+          <S.SubTitleText
+            variant='Label1/Normal'
+            fontWeight='medium'>
+            카테고리 별로 설문이 구성돼요
+          </S.SubTitleText>
+        </S.ReviewTitle>
 
-          <SelectCategoryChipList
-            item={selectedCategoryList}
-            addItem={addCategory}
-            removeItem={removeCategory}
-            error={error}
-          />
-        </S.TitleContainer>
+        <SelectCategoryChipList
+          item={selectedCategoryList}
+          addItem={addCategory}
+          removeItem={removeCategory}
+          error={error}
+        />
+      </S.TitleContainer>
 
-        <S.ButtonBox>
-          <SolidButton
-            onPress={selectCategory}
-            full>
-            다음
-          </SolidButton>
-        </S.ButtonBox>
-      </S.Container>
+      <CustomLayout.BottomButton>
+        <SolidButton
+          onPress={selectCategory}
+          full>
+          다음
+        </SolidButton>
+      </CustomLayout.BottomButton>
     </CustomLayout>
   );
 }
 
 const S = {
-  Container: styled.View`
-    flex: 1;
-    justify-content: space-between;
-  `,
   TitleContainer: styled.View`
     ${flexDirectionColumn};
     gap: 32px;
@@ -106,10 +100,6 @@ const S = {
     ${flexDirectionColumn};
     gap: 8px;
   `,
-  ButtonBox: styled.View`
-    padding-horizontal: 20px;
-    padding-bottom: 52px;
-  `,
   TitleText: styled(Typography)`
     color: ${({ theme }) => theme.color.Label.Normal};
   `,