From 25f5f5cdcec04a3f0fee3c221f98e7f4821f8a68 Mon Sep 17 00:00:00 2001 From: joojjang Date: Thu, 3 Oct 2024 13:48:11 +0900 Subject: [PATCH] =?UTF-8?q?design:=20=EC=B1=8C=EB=A6=B0=EC=A7=80=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/tabs/index.tsx | 7 ++- .../components/challenge-item/index.tsx | 19 +++--- .../components/challenge-item/styles.ts | 21 +++---- .../description-section/styles.ts | 6 +- src/pages/challenge-detail/index.tsx | 3 +- .../ranking-section/index.tsx | 16 +++-- .../ranking-section/styles.ts | 10 ++- .../challenge-detail/review-section/index.tsx | 7 +-- .../challenge-detail/review-section/styles.ts | 17 ++--- .../review/components/review-item/index.tsx | 6 +- .../review/components/review-rating/index.tsx | 10 +-- src/pages/review/index.tsx | 62 +++++++++---------- 12 files changed, 93 insertions(+), 91 deletions(-) diff --git a/src/components/common/tabs/index.tsx b/src/components/common/tabs/index.tsx index ac424d5..7d2257a 100644 --- a/src/components/common/tabs/index.tsx +++ b/src/components/common/tabs/index.tsx @@ -74,12 +74,15 @@ export const Tab = forwardRef( // 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 index af7603a..25724bb 100644 --- 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 ( - 난이도 + 난이도 - + {challenge.difficulty} -  / {maxDifficulty} - +  / {maxDifficulty} + - - 참여 횟수 및 -
기간 - - + 참여 횟수 및 기간 + {challenge.count}회 / {challenge.period}일 - + 참여 경험치 diff --git a/src/pages/challenge-detail/components/challenge-item/styles.ts b/src/pages/challenge-detail/components/challenge-item/styles.ts index ac66182..fab817f 100644 --- 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,21 +13,17 @@ 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; @@ -34,9 +31,9 @@ export const SubText = styled.span` 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 index f8cc19f..fc6684c 100644 --- 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 index 7f32080..ae37c47 100644 --- 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 index 0146f21..12cd6f0 100644 --- 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) => { {rankingList.length > 0 ? ( // 랭킹 있을 때 - <> + {rankingList.map((item, index) => (
@@ -65,18 +66,21 @@ export const RankingSection = ({ id }: RankingSectionProps) => { {/* 마지막 요소 뒤에는 Line을 넣지 않음 */}
))} - + ) : ( // 랭킹 없을 때 - - 아직 챌린지를 성공한 유저가 없습니다.
+

아직 챌린지를 성공한 유저가 없습니다.

+

챌린지에 참여해 첫 번째 완료자가 되어보세요! - +

)} - {isFetching ? '로딩 중...' : ' '} + {/*
{isFetching ? : <>}
*/} + + {isFetching ? '로딩 중...' : ' '} + ); }; diff --git a/src/pages/challenge-detail/ranking-section/styles.ts b/src/pages/challenge-detail/ranking-section/styles.ts index 17cb971..19bfeb5 100644 --- 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 index d5f6edb..bd62541 100644 --- 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) => { ) : ( // 리뷰 없을 때 - - 아직 리뷰가 없습니다. -
+

아직 리뷰가 없습니다.

+

챌린지를 완료하고 첫 번째 리뷰어 가 되어보세요! - +

)} diff --git a/src/pages/challenge-detail/review-section/styles.ts b/src/pages/challenge-detail/review-section/styles.ts index 26ac496..3be4d18 100644 --- a/src/pages/challenge-detail/review-section/styles.ts +++ b/src/pages/challenge-detail/review-section/styles.ts @@ -1,14 +1,7 @@ +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}; @@ -16,9 +9,11 @@ export const Text = styled.span<{ fontWeight?: string; color?: string }>` `; 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 index 4247144..7ccb365 100644 --- 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) => { + {/* 닉네임, 티어, 작성일 */} {item.user.nickname} @@ -44,6 +45,7 @@ const ReviewItem = ({ item }: ReviewItemProps) => { {formattedDate} + {/* 난이도 */} { 난이도 {item.challengeDifficulty} - + {/* 별점, 체감 난이도, 성취감 */} + {formattedDifficulty} {formattedAchievement} + {/* 소감 내용 */} {item.content} diff --git a/src/pages/review/components/review-rating/index.tsx b/src/pages/review/components/review-rating/index.tsx index 9c9710c..0041f3b 100644 --- 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; `; diff --git a/src/pages/review/index.tsx b/src/pages/review/index.tsx index 85366a1..79ce5e2 100644 --- a/src/pages/review/index.tsx +++ b/src/pages/review/index.tsx @@ -6,9 +6,11 @@ import ReviewRating from './components/review-rating'; import { getReview } from '@/apis/review/review.api'; import type { ReviewData } from '@/apis/review/review.response'; import ChallengeTitle from '@/components/common/challenge-title'; -import TopBar from '@/components/features/layout/top-bar'; +import EmptyState from '@/components/common/empty-state'; +import TopBar, { HEADER_HEIGHT } from '@/components/features/layout/top-bar'; import * as Base from '@/styles/baseStyles'; import { formatCategory } from '@/utils/formatters'; +import { Text } from '@chakra-ui/react'; // import { formatCategory } from '@/utils/formatters'; import styled from '@emotion/styled'; @@ -58,36 +60,37 @@ const Review = () => { <> - - {reviewList.length > 0 ? ( - // 리뷰 있을 때 - - {reviewList.map((review, index) => ( -
- - {index < reviewList.length - 1 && ( - - )} - {/* 마지막 요소 뒤에는 Line을 넣지 않음 */} -
- ))} - + <> + {/* 리뷰 있을 때 */} + + + + {reviewList.map((review, index) => ( +
+ + {index < reviewList.length - 1 && ( + + )} + {/* 마지막 요소 뒤에는 Line을 넣지 않음 */} +
+ ))} + + ) : ( // 리뷰 없을 때 - - 아직 리뷰가 없습니다. -
+

아직 리뷰가 없습니다.

+

챌린지를 완료하고{' '} - - 첫 번째 리뷰어 - - 가 되어보세요! - + 첫 번째 리뷰어가 되어보세요! +

)} - {isFetching ? '로딩 중...' : ' '} + {/*
{isFetching ? : <>}
*/} + + {isFetching ? '로딩 중...' : ' '} + ); @@ -95,17 +98,12 @@ const Review = () => { export default Review; -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}; -`; - const Wrapper = styled.div` position: relative; display: flex; flex-direction: column; text-align: center; + min-height: calc(100vh - ${HEADER_HEIGHT}); `; const ReviewList = styled.div` @@ -115,7 +113,3 @@ const ReviewList = styled.div` padding: 16px 0; margin: 0 16px 0 16px; `; - -const EmptyState = styled.div` - padding: 16px 16px; -`;