From 92f0dae983739bb767e438a4534e87a0dddd7a40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?s=E1=B4=8F=CA=9F=CA=99=C9=AA=20=E2=98=94=EF=B8=8F?= Date: Tue, 23 Apr 2024 11:54:28 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20item=20image=20=EA=B7=9C=EA=B2=A9=20?= =?UTF-8?q?=EB=A7=9E=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#106)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: item image 규격 맞지 않는 부분 수정 * chore: 잘못 삭제한 css 속성 재작성 * fix: grid, flex 다른 방법으로 해결 --- .../Product/ProductItem/ProductItem.tsx | 30 +++++++++---------- .../Product/ProductItem/productItem.css.ts | 13 -------- .../Product/ProductList/productList.css.ts | 2 +- .../ProductPreviewList/ProductPreviewList.tsx | 4 +-- .../productPreviewList.css.ts | 4 +++ .../recipeRankingList.css.ts | 2 +- .../ReviewRankingItem/ReviewRankingItem.tsx | 3 +- .../reviewRankingItem.css.ts | 1 - .../ReviewRankingList/ReviewRankingList.tsx | 4 +-- .../reviewRankingList.css.ts | 4 +++ .../Recipe/RecipeItem/RecipeItem.tsx | 2 +- .../Recipe/RecipeItem/recipeItem.css.ts | 6 ---- .../Recipe/RecipeList/recipeList.css.ts | 2 +- src/mocks/data/products.json | 2 +- src/mocks/data/recipes.json | 4 +-- src/mocks/data/reviewRankingList.json | 2 +- src/styles/common.css.ts | 7 +++++ 17 files changed, 43 insertions(+), 49 deletions(-) create mode 100644 src/styles/common.css.ts diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx index ebcec338..69923ba0 100644 --- a/src/components/Product/ProductItem/ProductItem.tsx +++ b/src/components/Product/ProductItem/ProductItem.tsx @@ -1,17 +1,10 @@ import { Skeleton } from '@fun-eat/design-system'; import { memo, useState } from 'react'; -import { - container, - preview, - previewWrapper, - productImage, - productName, - productPrice, - summaryWrapper, -} from './productItem.css'; +import { container, previewWrapper, productImage, summaryWrapper } from './productItem.css'; -import { SvgIcon } from '@/components/Common'; +import { SvgIcon, Text } from '@/components/Common'; +import { ellipsis } from '@/styles/common.css'; import { vars } from '@/styles/theme.css'; import type { Product } from '@/types/product'; @@ -39,22 +32,27 @@ const ProductItem = ({ product }: ProductItemProps) => { )}
-

{name}

+ + {name} +
-

{price.toLocaleString('ko-KR')}원

+ {/* 추후 bold로 변경 */} + + {price.toLocaleString('ko-KR')}원 +
- + {averageRating.toFixed(1)} - +
- + {reviewCount} - +
diff --git a/src/components/Product/ProductItem/productItem.css.ts b/src/components/Product/ProductItem/productItem.css.ts index 8533c335..949d5ff3 100644 --- a/src/components/Product/ProductItem/productItem.css.ts +++ b/src/components/Product/ProductItem/productItem.css.ts @@ -12,19 +12,6 @@ export const productImage = style({ aspectRatio: '1 / 1', }); -export const productName = style({ - fontWeight: 600, - lineHeight: 1.4, - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', -}); - -export const productPrice = style({ - fontWeight: 500, - lineHeight: 1.4, -}); - export const summaryWrapper = style({ display: 'flex', gap: 12, diff --git a/src/components/Product/ProductList/productList.css.ts b/src/components/Product/ProductList/productList.css.ts index 7d17c4f7..3b85ccd8 100644 --- a/src/components/Product/ProductList/productList.css.ts +++ b/src/components/Product/ProductList/productList.css.ts @@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css'; export const container = style({ display: 'grid', - gridTemplateColumns: 'repeat(2, 1fr)', + gridTemplateColumns: 'minmax(0, 1fr) 1fr', gridAutoRows: 'auto', columnGap: 10, rowGap: 20, diff --git a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx index e49c5bb7..d86a3959 100644 --- a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx +++ b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom'; -import { container } from './productPreviewList.css'; +import { container, productItemWrapper } from './productPreviewList.css'; import ProductItem from '../ProductItem/ProductItem'; import { PATH } from '@/constants/path'; @@ -23,7 +23,7 @@ const ProductPreviewList = ({ categoryId }: ProductPreviewListProps) => { return (
    {productToDisplay.map((product) => ( -
  • +
  • diff --git a/src/components/Product/ProductPreviewList/productPreviewList.css.ts b/src/components/Product/ProductPreviewList/productPreviewList.css.ts index 5880a330..db05341f 100644 --- a/src/components/Product/ProductPreviewList/productPreviewList.css.ts +++ b/src/components/Product/ProductPreviewList/productPreviewList.css.ts @@ -6,3 +6,7 @@ export const container = style({ padding: '0 20px', overflowX: 'auto', }); + +export const productItemWrapper = style({ + minWidth: 163, +}); diff --git a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts index 7d17c4f7..3b85ccd8 100644 --- a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts +++ b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts @@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css'; export const container = style({ display: 'grid', - gridTemplateColumns: 'repeat(2, 1fr)', + gridTemplateColumns: 'minmax(0, 1fr) 1fr', gridAutoRows: 'auto', columnGap: 10, rowGap: 20, diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx index 5dabd807..e6c398b2 100644 --- a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx +++ b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx @@ -4,6 +4,7 @@ import { reviewImage, tagList, tag, tagName, reviewContent } from './reviewRanki import { Text } from '@/components/Common'; import { REVIEW_CARD_DEFAULT_IMAGE_URL } from '@/constants/image'; +import { ellipsis } from '@/styles/common.css'; import type { ReviewRanking } from '@/types/ranking'; import displaySlice from '@/utils/displaySlice'; @@ -23,7 +24,7 @@ const ReviewRankingItem = ({ productName, content, tags, image }: ReviewRankingI
    {productName}
    - + {productName}
    diff --git a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts index 72d65c24..212fff57 100644 --- a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts +++ b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts @@ -4,7 +4,6 @@ import { style } from '@vanilla-extract/css'; export const reviewImage = style({ width: '100%', height: 'auto', - minWidth: 164, borderRadius: '6px', objectFit: 'cover', aspectRatio: '164 / 90', diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx index 600f49a5..a76f1666 100644 --- a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx +++ b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom'; -import { container } from './reviewRankingList.css'; +import { container, reviewItemWrapper } from './reviewRankingList.css'; import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem'; import { PATH } from '@/constants/path'; @@ -20,7 +20,7 @@ const ReviewRankingList = () => { return (
      {reviews.map(({ reviewId, productName, content, tags, image }) => ( -
    • +
    • diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts index 68a282a0..92798984 100644 --- a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts +++ b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts @@ -5,3 +5,7 @@ export const container = style({ gap: 10, padding: '0 20px', }); + +export const reviewItemWrapper = style({ + minWidth: 164, +}); diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index 6bbf7de6..5c7f2998 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -4,7 +4,6 @@ import { useState } from 'react'; import { Link } from 'react-router-dom'; import { - ellipsis, favoriteButtonWrapper, imageWrapper, productButtonWrapper, @@ -29,6 +28,7 @@ import { import { PATH } from '@/constants/path'; import RecipeItemProvider from '@/contexts/RecipeItemContext'; import { useRecipeItemValueContext } from '@/hooks/context'; +import { ellipsis } from '@/styles/common.css'; import type { Recipe } from '@/types/recipe'; import { getRelativeDate } from '@/utils/date'; import displaySlice from '@/utils/displaySlice'; diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts index 75d9c8f9..4c217045 100644 --- a/src/components/Recipe/RecipeItem/recipeItem.css.ts +++ b/src/components/Recipe/RecipeItem/recipeItem.css.ts @@ -64,9 +64,3 @@ export const recipeProductsCount = style({ transform: 'translate( -50%, -50% )', color: vars.colors.white, }); - -export const ellipsis = style({ - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', -}); diff --git a/src/components/Recipe/RecipeList/recipeList.css.ts b/src/components/Recipe/RecipeList/recipeList.css.ts index 5de3d059..f98b8706 100644 --- a/src/components/Recipe/RecipeList/recipeList.css.ts +++ b/src/components/Recipe/RecipeList/recipeList.css.ts @@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css'; export const container = style({ display: 'grid', - gridTemplateColumns: 'repeat(2, 1fr)', + gridTemplateColumns: 'minmax(0, 1fr) 1fr', gridAutoRows: 'auto', columnGap: 10, rowGap: 20, diff --git a/src/mocks/data/products.json b/src/mocks/data/products.json index a16b179e..b0a896a0 100644 --- a/src/mocks/data/products.json +++ b/src/mocks/data/products.json @@ -3,7 +3,7 @@ "products": [ { "id": 1, - "name": "꼬북칩", + "name": "꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 ", "price": 1500, "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg", "averageRating": 4.5, diff --git a/src/mocks/data/recipes.json b/src/mocks/data/recipes.json index 1d27d242..99daa2b9 100644 --- a/src/mocks/data/recipes.json +++ b/src/mocks/data/recipes.json @@ -19,7 +19,7 @@ "createdAt": "2023-08-05T10:10:10", "favoriteCount": 154, "favorite": true, - "content": "곰탕과 짜장면을 같이 먹을 수 있어요!", + "content": "곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요!", "products": [ { "id": 1, @@ -204,7 +204,7 @@ { "id": 5, "image": null, - "title": "초특급불닭콘치즈", + "title": "초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈", "author": { "nickname": "5번 글", "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/84a20dae-4770-4497-ae25-2dd552261aab" diff --git a/src/mocks/data/reviewRankingList.json b/src/mocks/data/reviewRankingList.json index 099c19aa..d2c7ef7f 100644 --- a/src/mocks/data/reviewRankingList.json +++ b/src/mocks/data/reviewRankingList.json @@ -3,7 +3,7 @@ { "reviewId": 1, "productId": 1, - "productName": "구운감자슬림명란마요", + "productName": "구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요", "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다", "image": null, "categoryType": "food", diff --git a/src/styles/common.css.ts b/src/styles/common.css.ts new file mode 100644 index 00000000..8d852417 --- /dev/null +++ b/src/styles/common.css.ts @@ -0,0 +1,7 @@ +import { style } from '@vanilla-extract/css'; + +export const ellipsis = style({ + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', +}); From 4def882aa6eb5fc76dad38f81f997774c8e1b909 Mon Sep 17 00:00:00 2001 From: Leejin Yang Date: Tue, 23 Apr 2024 04:56:47 +0200 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=8F=99=EC=9E=91=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20(#115)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 뒤로가기 버튼 동작 수정 * refactor: 상품 페이지 헤더 topbar로 수정 --- src/components/Common/TopBar/TopBar.tsx | 19 ++++++++++++++++--- .../ProductDetailPage/ProductDetailPage.tsx | 9 +++++++-- src/pages/ProductListPage/ProductListPage.tsx | 8 ++++++-- 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx index 7f997124..32e19d06 100644 --- a/src/components/Common/TopBar/TopBar.tsx +++ b/src/components/Common/TopBar/TopBar.tsx @@ -1,5 +1,5 @@ -import type { ComponentPropsWithoutRef } from 'react'; -import { Link } from 'react-router-dom'; +import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; import { LeftNavigationWrapper, container, headerTitle, leftTitle, register } from './topBar.css'; import SvgIcon from '../Svg/SvgIcon'; @@ -31,8 +31,21 @@ const Logo = () => { }; const BackLink = ({ state }: TopBarProps) => { + const navigate = useNavigate(); + + const handleBack: MouseEventHandler = (event) => { + event.preventDefault(); + + if (state) { + navigate('..', { state, relative: 'path' }); + return; + } + + navigate(-1); + }; + return ( - + ); diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx index 04fd5d1b..3bcfd939 100644 --- a/src/pages/ProductDetailPage/ProductDetailPage.tsx +++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx @@ -8,12 +8,12 @@ import NotFoundPage from '../NotFoundPage'; import { SortButton, - PageHeader, SectionHeader, ErrorBoundary, ErrorComponent, Loading, SelectOptionList, + TopBar, } from '@/components/Common'; import { ProductDetailItem, ProductRecipeList } from '@/components/Product'; import { ReviewList } from '@/components/Review'; @@ -55,7 +55,12 @@ export const ProductDetailPage = () => { return ( <> - + + + + + +
      diff --git a/src/pages/ProductListPage/ProductListPage.tsx b/src/pages/ProductListPage/ProductListPage.tsx index 5221ef9a..b263275e 100644 --- a/src/pages/ProductListPage/ProductListPage.tsx +++ b/src/pages/ProductListPage/ProductListPage.tsx @@ -7,7 +7,7 @@ import { useLocation, useParams } from 'react-router-dom'; import { categoryButton, listSection, main, selectButton, selectSection, sortButton } from './productListPage.css'; import NotFoundPage from '../NotFoundPage'; -import { ErrorBoundary, ErrorComponent, Loading, PageHeader, SelectOptionList, SvgIcon } from '@/components/Common'; +import { ErrorBoundary, ErrorComponent, Loading, SelectOptionList, SvgIcon, TopBar } from '@/components/Common'; import { ProductList } from '@/components/Product'; import { CATEGORY_TYPE, PAGE_TITLE, PRODUCT_SORT_OPTIONS } from '@/constants'; import { useSelect } from '@/hooks/common'; @@ -46,7 +46,11 @@ export const ProductListPage = () => { return ( <> - + + + + +
      From 793bf9578c56969bcb4e4c22b82a4d6c225d3ec6 Mon Sep 17 00:00:00 2001 From: Taeeun Kim Date: Tue, 23 Apr 2024 04:59:55 +0200 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EC=98=A4=EB=8A=98=EC=9D=98=20?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EA=B9=A8=EC=A7=90=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0=20(#1?= =?UTF-8?q?09)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 오늘의 리뷰 레이아웃 깨짐현상 해결 * refactor: overflowX auto로 변경 --------- Co-authored-by: sᴏʟʙɪ ☔️ --- src/components/Rank/ReviewRankingList/reviewRankingList.css.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts index 92798984..e3273a09 100644 --- a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts +++ b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts @@ -4,6 +4,7 @@ export const container = style({ display: 'flex', gap: 10, padding: '0 20px', + overflowX: 'auto', }); export const reviewItemWrapper = style({