Merge pull request #186 from KNU-HAEDAL/Design/#185

챌린지 상세 페이지 UI #185
KNU-HAEDAL · Oct 3, 2024 · 77c239d · 77c239d
2 parents 6f06d83 + 25f5f5c
commit 77c239d
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 91 deletions.
diff --git a/src/components/common/tabs/index.tsx b/src/components/common/tabs/index.tsx
@@ -74,12 +74,15 @@ export const Tab = forwardRef<HTMLDivElement, TabProps>(
 // displayName 설정으로 경고 해결
 Tab.displayName = 'Tab';
 
+// 스타일 정의
+export const TABS_HEIGHT = '46px';
+
 export const StyledTabs = styled.div<{
   position?: string;
 }>`
   display: flex;
   position: relative;
-  height: 46px;
+  height: ${TABS_HEIGHT};
   margin: 0 16px;
   padding: 4px 0;
   border-radius: 10px;
@@ -95,7 +98,7 @@ export const TabSlider = styled.div<{
   top: 4px;
   left: 4px;
   width: ${({ width }) => `${width}px`};
-  height: 38px;
+  height: calc(${TABS_HEIGHT} - 8px);
   background-color: var(--color-white);
   border-radius: 10px;
 

diff --git a/src/pages/challenge-detail/components/challenge-item/index.tsx b/src/pages/challenge-detail/components/challenge-item/index.tsx
@@ -6,7 +6,7 @@ import { type Challenge } from '@/apis/challenge-detail/challenge.detail.respons
 import { Chip } from '@/components/common/chip';
 import CTA from '@/components/common/cta';
 import { getDynamicPath } from '@/routes/protected-route';
-import { Box } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 
 type Props = {
   challenge: Challenge;
@@ -42,25 +42,22 @@ const ChallengeItem = ({ challenge, maxDifficulty }: Props) => {
   return (
     <S.Wrapper>
       <S.ContentGrid>
-        <S.BoldText>난이도</S.BoldText>
+        <S.BoldText alignSelf='flex-start'>난이도</S.BoldText>
         <S.DifficultyBox>
           <S.BarBox>
             <S.Bar width={difficultyRate} />
             <S.MaxBar />
           </S.BarBox>
-          <S.Text>
+          <Text as='span' fontSize='var(--font-size-sm)'>
             {challenge.difficulty}
-            <S.SubText>&nbsp;/ {maxDifficulty}</S.SubText>
-          </S.Text>
+            <S.SubText as='span'>&nbsp;/ {maxDifficulty}</S.SubText>
+          </Text>
         </S.DifficultyBox>
 
-        <S.BoldText>
-          참여 횟수 및
-          <br /> 기간
-        </S.BoldText>
-        <S.TimesPeriodContent>
+        <S.BoldText>참여 횟수 및 기간</S.BoldText>
+        <Text fontSize='var(--font-size-sm)' margin='0 0 0 auto'>
           {challenge.count}회 / {challenge.period}일
-        </S.TimesPeriodContent>
+        </Text>
 
         <S.BoldText>참여 경험치</S.BoldText>
         <Chip margin='0 0 0 auto' color='var(--color-green-05)'>

diff --git a/src/pages/challenge-detail/components/challenge-item/styles.ts b/src/pages/challenge-detail/components/challenge-item/styles.ts
@@ -1,3 +1,4 @@
+import { Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
@@ -12,31 +13,27 @@ export const Wrapper = styled.div`
 export const ContentGrid = styled.div`
   display: grid;
   grid-template-columns: max-content 1fr;
-  gap: 8px;
+  gap: 8px 16px;
   align-items: center;
 `;
 
-export const BoldText = styled.span`
+export const BoldText = styled(Text)`
   font-size: var(--font-size-sm);
   font-weight: 600;
   flex-shrink: 0;
 `;
 
-export const Text = styled.span`
-  font-size: var(--font-size-sm);
-`;
-
-export const SubText = styled.span`
+export const SubText = styled(Text)`
   font-size: var(--font-size-sm);
   color: var(--color-grey-02);
   flex-shrink: 0;
 `;
 
 export const DifficultyBox = styled.div`
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
 `;
 
 export const BarBox = styled.div`
@@ -64,7 +61,3 @@ export const Bar = styled(MaxBar)<{ width: number }>`
   width: ${({ width }) => `${width}px`};
   z-index: 1;
 `;
-
-export const TimesPeriodContent = styled(Text)`
-  margin: 0 0 0 auto;
-`;
diff --git a/src/pages/challenge-detail/description-section/styles.ts b/src/pages/challenge-detail/description-section/styles.ts
@@ -1,10 +1,14 @@
+import { TABS_HEIGHT } from '@/components/common/tabs';
+import { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
+  flex: 1;
+  padding: 16px 0;
+  /* min-height: calc(100vh - ${HEADER_HEIGHT} - ${TABS_HEIGHT}); */
   text-align: left;
-  margin: 16px 0 0;
 `;
 
 export const Category = styled.div`

diff --git a/src/pages/challenge-detail/index.tsx b/src/pages/challenge-detail/index.tsx
@@ -10,7 +10,7 @@ import DefaultImage from '@/assets/Default-Image.svg';
 import ChallengeTitle from '@/components/common/challenge-title';
 import { Tabs, Tab } from '@/components/common/tabs';
 import { TabPanels, TabPanel } from '@/components/common/tabs/tab-panels';
-import TopBar from '@/components/features/layout/top-bar';
+import TopBar, { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
 import { formatCategory } from '@/utils/formatters';
 import styled from '@emotion/styled';
 
@@ -106,6 +106,7 @@ export default ChallengeDetailPage;
 
 export const Wrapper = styled.div`
   width: 100%;
+  min-height: calc(100vh - ${HEADER_HEIGHT});
 `;
 
 export const ImageList = styled.div`

diff --git a/src/pages/challenge-detail/ranking-section/index.tsx b/src/pages/challenge-detail/ranking-section/index.tsx
@@ -7,6 +7,7 @@ import { getChallengeRanking } from '@/apis/challenge-detail/challenge.ranking.a
 import { type ChallengeRankingData } from '@/apis/challenge-detail/challenge.ranking.response';
 import EmptyState from '@/components/common/empty-state';
 import * as Base from '@/styles/baseStyles';
+import { Text } from '@chakra-ui/react';
 
 type RankingSectionProps = {
   id: number;
@@ -55,7 +56,7 @@ export const RankingSection = ({ id }: RankingSectionProps) => {
     <S.Wrapper>
       {rankingList.length > 0 ? (
         // 랭킹 있을 때
-        <>
+        <S.RankingList>
           {rankingList.map((item, index) => (
             <div key={item.ranking}>
               <RankingItem item={item} />
@@ -65,18 +66,21 @@ export const RankingSection = ({ id }: RankingSectionProps) => {
               {/* 마지막 요소 뒤에는 Line을 넣지 않음 */}
             </div>
           ))}
-        </>
+        </S.RankingList>
       ) : (
         // 랭킹 없을 때
         <EmptyState>
-          <span>
-            아직 챌린지를 성공한 유저가 없습니다. <br />
+          <p>아직 챌린지를 성공한 유저가 없습니다. </p>
+          <p>
             챌린지에 참여해 <span className='highlight'>첫 번째 완료자</span>가
             되어보세요!
-          </span>
+          </p>
         </EmptyState>
       )}
-      <EmptyState ref={ref}>{isFetching ? '로딩 중...' : ' '}</EmptyState>
+      {/* <div ref={ref}>{isFetching ? <Spinner /> : <></>}</div> */}
+      <Text fontSize='var(--font-size-md)' ref={ref}>
+        {isFetching ? '로딩 중...' : ' '}
+      </Text>
     </S.Wrapper>
   );
 };
diff --git a/src/pages/challenge-detail/ranking-section/styles.ts b/src/pages/challenge-detail/ranking-section/styles.ts
@@ -1,7 +1,15 @@
+import { TABS_HEIGHT } from '@/components/common/tabs';
+import { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
-  padding: 16px 16px;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  padding: 16px 0;
+  /* min-height: calc(100vh - ${HEADER_HEIGHT} - ${TABS_HEIGHT}); */
+`;
+
+export const RankingList = styled.div`
+  margin: 16px;
 `;
diff --git a/src/pages/challenge-detail/review-section/index.tsx b/src/pages/challenge-detail/review-section/index.tsx
@@ -93,12 +93,11 @@ export const ReviewSection = ({ id, category, title }: ReviewSectionProps) => {
       ) : (
         // 리뷰 없을 때
         <EmptyState>
-          <span>
-            아직 리뷰가 없습니다.
-            <br />
+          <p>아직 리뷰가 없습니다.</p>
+          <p>
             챌린지를 완료하고 <span className='highlight'>첫 번째 리뷰어</span>
             가 되어보세요!
-          </span>
+          </p>
         </EmptyState>
       )}
     </S.Wrapper>

diff --git a/src/pages/challenge-detail/review-section/styles.ts b/src/pages/challenge-detail/review-section/styles.ts
@@ -1,24 +1,19 @@
+import { TABS_HEIGHT } from '@/components/common/tabs';
+import { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
 import styled from '@emotion/styled';
 
-// export const Nickname = styled(Text)`
-//   font-size: var(--font-size-sm);
-// `;
-
-// export const Tier = styled(Text)`
-//   font-size: var(--font-size-xs);
-//   color: var() (--color-grey--02);
-// `;
-
 export const Text = styled.span<{ fontWeight?: string; color?: string }>`
   font-size: var(--font-size-md);
   font-weight: ${(props) => props.fontWeight || null};
   color: ${(props) => props.color || null};
 `;
 
 export const Wrapper = styled.div`
-  padding: 16px 16px;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  padding: 16px 0;
+  /* min-height: calc(100vh - ${HEADER_HEIGHT} - ${TABS_HEIGHT}); */
 `;
 
 export const RatingContainer = styled.div`
@@ -27,7 +22,7 @@ export const RatingContainer = styled.div`
   gap: 12px;
   flex: 1;
   /* width: 100%; */
-  margin: 16px;
+  margin: 0 16px;
 `;
 
 export const AvgRating = styled.p`

diff --git a/src/pages/review/components/review-item/index.tsx b/src/pages/review/components/review-item/index.tsx
@@ -25,6 +25,7 @@ const ReviewItem = ({ item }: ReviewItemProps) => {
     <Wrapper>
       <ProfileImage size={2.5} src={item.user.profileImageUrl} />
       <ReviewItemBox>
+        {/* 닉네임, 티어, 작성일 */}
         <RowWrapper style={{ lineHeight: '2rem' }}>
           <Text fontSize='var(--font-size-sm)' fontWeight='600'>
             {item.user.nickname}
@@ -44,6 +45,7 @@ const ReviewItem = ({ item }: ReviewItemProps) => {
             {formattedDate}
           </Text>
         </RowWrapper>
+        {/* 난이도 */}
         <RowWrapper>
           <Text
             fontSize='var(--font-size-xs)'
@@ -53,11 +55,13 @@ const ReviewItem = ({ item }: ReviewItemProps) => {
             난이도 {item.challengeDifficulty}
           </Text>
         </RowWrapper>
-        <RowWrapper style={{ margin: '12px 0' }}>
+        {/* 별점, 체감 난이도, 성취감 */}
+        <RowWrapper style={{ margin: '0 0 0.8rem 0' }}>
           <StarRating rating={rating} size={16} />
           <Chip>{formattedDifficulty}</Chip>
           <Chip>{formattedAchievement}</Chip>
         </RowWrapper>
+        {/* 소감 내용 */}
         <Text fontSize='var(--font-size-sm)'>{item.content}</Text>
       </ReviewItemBox>
     </Wrapper>

diff --git a/src/pages/review/components/review-rating/index.tsx b/src/pages/review/components/review-rating/index.tsx
@@ -105,15 +105,15 @@ const RatingBox = styled(Box)`
   border-radius: 10px;
   background-color: var(--color-green-06);
   width: 100%;
-  padding: 20px 20px;
+  padding: 20px 0;
   justify-content: center;
 `;
 
 const AvgRatingWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-  margin-right: 16px;
+  flex-shrink: 0; /* 고정 크기를 유지 */
+  padding: 0 16px 0 16px;
 `;
 
 const RatingGraphWrapper = styled.div`
@@ -122,7 +122,7 @@ const RatingGraphWrapper = styled.div`
   gap: 8px 12px;
   align-items: center;
   flex: 1;
-  padding-left: 16px;
+  padding: 0 16px 0 16px;
   border-left: #d7d7d7 solid 0.5px;
 `;
 
@@ -138,6 +138,6 @@ const Bar = styled.div<{ percentage: string }>`
     var(--color-green-01) ${(props) => props.percentage},
     #d7d7d7 ${(props) => props.percentage}
   );
-  min-width: 80px;
+  min-width: 60px;
   flex-shrink: 0;
 `;