From a5183947d2d35588d2984b9266eed98581576494 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 17 Apr 2024 21:37:09 +0200 Subject: [PATCH 01/12] =?UTF-8?q?fix:=20=ED=8F=B4=EB=8D=94=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductSearchResultPreviewList.stories.tsx | 0 .../ProductSearchResultPreviewList.tsx | 0 .../productSearchResultPreivewList.css.ts | 0 src/components/Search/index.ts | 4 ++-- 4 files changed, 2 insertions(+), 2 deletions(-) rename src/components/Search/{ProductSearchResultList => ProductSearchResultPreviewList}/ProductSearchResultPreviewList.stories.tsx (100%) rename src/components/Search/{ProductSearchResultList => ProductSearchResultPreviewList}/ProductSearchResultPreviewList.tsx (100%) rename src/components/Search/{ProductSearchResultList => ProductSearchResultPreviewList}/productSearchResultPreivewList.css.ts (100%) diff --git a/src/components/Search/ProductSearchResultList/ProductSearchResultPreviewList.stories.tsx b/src/components/Search/ProductSearchResultPreviewList/ProductSearchResultPreviewList.stories.tsx similarity index 100% rename from src/components/Search/ProductSearchResultList/ProductSearchResultPreviewList.stories.tsx rename to src/components/Search/ProductSearchResultPreviewList/ProductSearchResultPreviewList.stories.tsx diff --git a/src/components/Search/ProductSearchResultList/ProductSearchResultPreviewList.tsx b/src/components/Search/ProductSearchResultPreviewList/ProductSearchResultPreviewList.tsx similarity index 100% rename from src/components/Search/ProductSearchResultList/ProductSearchResultPreviewList.tsx rename to src/components/Search/ProductSearchResultPreviewList/ProductSearchResultPreviewList.tsx diff --git a/src/components/Search/ProductSearchResultList/productSearchResultPreivewList.css.ts b/src/components/Search/ProductSearchResultPreviewList/productSearchResultPreivewList.css.ts similarity index 100% rename from src/components/Search/ProductSearchResultList/productSearchResultPreivewList.css.ts rename to src/components/Search/ProductSearchResultPreviewList/productSearchResultPreivewList.css.ts diff --git a/src/components/Search/index.ts b/src/components/Search/index.ts index 2c312d80..0c32f1b8 100644 --- a/src/components/Search/index.ts +++ b/src/components/Search/index.ts @@ -1,5 +1,5 @@ -export { default as ProductSearchResultPreviewList } from './ProductSearchResultList/ProductSearchResultPreviewList'; +export { default as ProductSearchResultPreviewList } from './ProductSearchResultPreviewList/ProductSearchResultPreviewList'; export { default as RecommendList } from './RecommendList/RecommendList'; -export { default as RecipeSearchResultList } from './RecipeSearchResultList/RecipeSearchResultList'; +export { default as RecipeSearchResultPreviewList } from './RecipeSearchResultPreviewList/RecipeSearchResultPreviewList'; export { default as TagSearchResultList } from './TagSearchResultList/TagSearchResultList'; export { default as SearchInput } from './SearchInput/SearchInput'; From e00f4de70ad5d4f85673333be11be00f35e28e33 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 17 Apr 2024 21:56:03 +0200 Subject: [PATCH 02/12] =?UTF-8?q?refactor:=20RecipeSearchResultList=20->?= =?UTF-8?q?=20RecipeSearchResultPreviewList=EB=A1=9C=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecipeSearchResultPreviewList.tsx} | 42 ++++++++++--------- .../recipeSearchResultPreviewList.css.ts | 19 +++++++++ 2 files changed, 42 insertions(+), 19 deletions(-) rename src/components/Search/{RecipeSearchResultList/RecipeSearchResultList.tsx => RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx} (50%) create mode 100644 src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts diff --git a/src/components/Search/RecipeSearchResultList/RecipeSearchResultList.tsx b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx similarity index 50% rename from src/components/Search/RecipeSearchResultList/RecipeSearchResultList.tsx rename to src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx index bdc5134b..d81edda5 100644 --- a/src/components/Search/RecipeSearchResultList/RecipeSearchResultList.tsx +++ b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx @@ -1,19 +1,21 @@ import { useRef } from 'react'; import { Link } from 'react-router-dom'; -import { styled } from 'styled-components'; +import { listWrapper, showMore } from './recipeSearchResultPreviewList.css'; import SearchNotFound from '../SearchNotFound/SearchNotFound'; +import { SvgIcon, Text } from '@/components/Common'; import { RecipeItem } from '@/components/Recipe'; import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search'; +import { vars } from '@/styles/theme.css'; -interface RecipeSearchResultListProps { +interface RecipeSearchResultPreviewListProps { searchQuery: string; } -const RecipeSearchResultList = ({ searchQuery }: RecipeSearchResultListProps) => { +const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPreviewListProps) => { const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteRecipeSearchResultsQuery(searchQuery); const scrollRef = useRef(null); useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); @@ -25,25 +27,27 @@ const RecipeSearchResultList = ({ searchQuery }: RecipeSearchResultListProps) => } return ( - <> - - {recipes.map((recipe) => ( -
  • +
      + {recipes.map((recipe, idx) => ( +
    • + {idx < 4 ? ( -
      • - ))} - -
      - + ) : ( + +
      + +
      + + 더보기 + + + )} + + ))} +
    ); }; -export default RecipeSearchResultList; - -const RecipeSearchResultListContainer = styled.ul` - & > li + li { - margin-top: 40px; - } -`; +export default RecipeSearchResultPreviewList; diff --git a/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts b/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts new file mode 100644 index 00000000..b67a3bfc --- /dev/null +++ b/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts @@ -0,0 +1,19 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const listWrapper = style({ + display: 'flex', + gap: 10, + alignItems: 'center', + overflowY: 'scroll', +}); + +export const showMore = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 40, + height: 40, + background: vars.colors.secondary1, + borderRadius: '50%', +}); From 988beb50f159fa13cf38ff634a8531987effb3b7 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:43:06 +0200 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=BF=80?= =?UTF-8?q?=EC=A1=B0=ED=95=A9=20=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecipeSearchListPage.tsx | 42 +++++++++++++++++++ .../recipeSearchListPage.css.ts | 8 ++++ src/router/index.tsx | 9 ++++ 3 files changed, 59 insertions(+) create mode 100644 src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx create mode 100644 src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx new file mode 100644 index 00000000..743da270 --- /dev/null +++ b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx @@ -0,0 +1,42 @@ +import { useRef } from 'react'; +import { Link, useSearchParams } from 'react-router-dom'; + +import { listWrapper } from './recipeSearchListPage.css'; + +import { PageHeader } from '@/components/Common'; +import { RecipeItem } from '@/components/Recipe'; +import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound'; +import { PATH } from '@/constants/path'; +import { useIntersectionObserver } from '@/hooks/common'; +import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search'; + +export const RecipeSearchListPage = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const searchQuery = searchParams.get('query') || ''; + + const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteRecipeSearchResultsQuery(searchQuery); + const scrollRef = useRef(null); + useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); + + const recipes = searchResponse.pages.flatMap((page) => page.recipes); + + if (recipes.length === 0) { + return ; + } + + return ( + <> + +
      + {recipes.map((recipe) => ( +
    • + + + +
      • + ))} +
    +
    + + ); +}; diff --git a/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts b/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts new file mode 100644 index 00000000..5b47dfb5 --- /dev/null +++ b/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +export const listWrapper = style({ + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gap: '16px 10px', + padding: '0 20px', +}); diff --git a/src/router/index.tsx b/src/router/index.tsx index 8f0e1be1..843fabb2 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -213,6 +213,15 @@ const router = createBrowserRouter([ return { Component: ProductSearchListPage }; }, }, + { + path: `${PATH.SEARCH}/recipes`, + async lazy() { + const { RecipeSearchListPage } = await import( + /* webpackChunkName: "RecipeSearchListPage" */ '@/pages/RecipeSearchListPage/RecipeSearchListPage' + ); + return { Component: RecipeSearchListPage }; + }, + }, ], }, ]); From 36536d4c6ac45f0c6358946c0c7187912039ea66 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:43:34 +0200 Subject: [PATCH 04/12] =?UTF-8?q?style:=20RecipeSearchResultPreviewList?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SearchPage/SearchPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx index 9f8562f7..d3b3a001 100644 --- a/src/pages/SearchPage/SearchPage.tsx +++ b/src/pages/SearchPage/SearchPage.tsx @@ -6,7 +6,7 @@ import { badgeContainer, searchWrapper, searchResultTitle, searchSection, subTit import { Text, Badge, ErrorBoundary, ErrorComponent, Loading, PageHeader } from '@/components/Common'; import { ProductSearchResultPreviewList, - RecipeSearchResultList, + RecipeSearchResultPreviewList, RecommendList, SearchInput, } from '@/components/Search'; @@ -87,7 +87,7 @@ export const SearchPage = () => { }> - +
    From af2b1828461a4d21e7df11e9fe405305c4121330 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:43:55 +0200 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=EA=BF=80=EC=A1=B0=ED=95=A9=20?= =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EA=B0=9C=EC=88=98?= =?UTF-8?q?=EB=A5=BC=204=EA=B0=9C=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecipeSearchResultPreviewList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx index d81edda5..9f36a82e 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx +++ b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx @@ -10,6 +10,7 @@ import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search'; import { vars } from '@/styles/theme.css'; +import displaySlice from '@/utils/displaySlice'; interface RecipeSearchResultPreviewListProps { searchQuery: string; @@ -28,7 +29,7 @@ const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPrevie return (
      - {recipes.map((recipe, idx) => ( + {displaySlice(false, recipes, 4).map((recipe, idx) => (
    • {idx < 4 ? ( From 74bd010e1ade97c1a9abf38056db7ee44320f46c Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:48:52 +0200 Subject: [PATCH 06/12] =?UTF-8?q?refactor:=20DefaultRecipeItem=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecipeSearchResultPreviewList.tsx | 4 ++-- src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx index 9f36a82e..0dc8a129 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx +++ b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx @@ -5,7 +5,7 @@ import { listWrapper, showMore } from './recipeSearchResultPreviewList.css'; import SearchNotFound from '../SearchNotFound/SearchNotFound'; import { SvgIcon, Text } from '@/components/Common'; -import { RecipeItem } from '@/components/Recipe'; +import { DefaultRecipeItem } from '@/components/Recipe'; import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search'; @@ -33,7 +33,7 @@ const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPrevie
    • {idx < 4 ? ( - + ) : ( diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx index 743da270..fcfdd490 100644 --- a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx +++ b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx @@ -4,7 +4,7 @@ import { Link, useSearchParams } from 'react-router-dom'; import { listWrapper } from './recipeSearchListPage.css'; import { PageHeader } from '@/components/Common'; -import { RecipeItem } from '@/components/Recipe'; +import { DefaultRecipeItem } from '@/components/Recipe'; import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound'; import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; @@ -31,7 +31,7 @@ export const RecipeSearchListPage = () => { {recipes.map((recipe) => (
    • - +
      • ))} From f5b1dfa199262c255cf81e2d5c3c68003b938afa Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:53:41 +0200 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=EC=A0=84=EC=B2=B4=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=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 --- .../RecipeSearchResultPreviewList.tsx | 6 +++--- .../recipeSearchResultPreviewList.css.ts | 8 ++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx index 0dc8a129..c47a0d2c 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx +++ b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx @@ -1,7 +1,7 @@ import { useRef } from 'react'; import { Link } from 'react-router-dom'; -import { listWrapper, showMore } from './recipeSearchResultPreviewList.css'; +import { linkWrapper, listWrapper, showMore } from './recipeSearchResultPreviewList.css'; import SearchNotFound from '../SearchNotFound/SearchNotFound'; import { SvgIcon, Text } from '@/components/Common'; @@ -36,12 +36,12 @@ const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPrevie ) : ( - +
      - 더보기 + 전체보기 )} diff --git a/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts b/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts index b67a3bfc..5ae4169b 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts +++ b/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts @@ -17,3 +17,11 @@ export const showMore = style({ background: vars.colors.secondary1, borderRadius: '50%', }); + +export const linkWrapper = style({ + display: 'flex', + flexDirection: 'column', + gap: 12, + alignItems: 'center', + width: 45, +}); From e8f4b21d863d63de14a9f82246bf7dcf0ade7af4 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:59:35 +0200 Subject: [PATCH 08/12] =?UTF-8?q?fix:=20=EA=BF=80=EC=A1=B0=ED=95=A9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Recipe/RecipeItem/RecipeItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index e94712db..6bbf7de6 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -26,6 +26,7 @@ import { RECIPE_CARD_DEFAULT_IMAGE_URL_4, RECIPE_CARD_DEFAULT_IMAGE_URL_5, } from '@/constants/image'; +import { PATH } from '@/constants/path'; import RecipeItemProvider from '@/contexts/RecipeItemContext'; import { useRecipeItemValueContext } from '@/hooks/context'; import type { Recipe } from '@/types/recipe'; @@ -50,7 +51,7 @@ const RecipeItem = ({ recipe, children }: RecipeItemProps) => { return ( - {children} + {children} ); }; From 363caa82f59cb813e82f369395423a42dbddfc0c Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 18 Apr 2024 16:59:55 +0200 Subject: [PATCH 09/12] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20Link=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecipeSearchResultPreviewList.tsx | 4 +--- src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx | 7 ++----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx index c47a0d2c..4786a2c0 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx +++ b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx @@ -32,9 +32,7 @@ const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPrevie {displaySlice(false, recipes, 4).map((recipe, idx) => (
    • {idx < 4 ? ( - - - + ) : (
      diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx index fcfdd490..eee7a8c5 100644 --- a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx +++ b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx @@ -1,12 +1,11 @@ import { useRef } from 'react'; -import { Link, useSearchParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import { listWrapper } from './recipeSearchListPage.css'; import { PageHeader } from '@/components/Common'; import { DefaultRecipeItem } from '@/components/Recipe'; import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound'; -import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search'; @@ -30,9 +29,7 @@ export const RecipeSearchListPage = () => {
        {recipes.map((recipe) => (
      • - - - +
        • ))}
      From d5a74b4d502d8ee29d80f9e05892ea8f5a40985b Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Fri, 19 Apr 2024 09:22:12 +0200 Subject: [PATCH 10/12] =?UTF-8?q?feat:=20PageHeader=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20TopBar=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/index.ts | 1 + src/pages/ProductSearchListPage/ProductSearchListPage.tsx | 8 ++++++-- src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx | 8 ++++++-- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index ef1d5042..7e440353 100644 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -25,3 +25,4 @@ export { default as PageHeader } from './PageHeader/PageHeader'; export { default as Badge } from './Badge/Badge'; export { default as WriteButton } from './WriteButton/WriteButton'; export { default as Text } from './Text/Text'; +export { default as TopBar } from './TopBar/TopBar'; diff --git a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx index 828710b0..fa9f1b8b 100644 --- a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx +++ b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx @@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'; import { container } from './productSearchListPage.css'; -import { PageHeader } from '@/components/Common'; +import { TopBar } from '@/components/Common'; import { ProductOverviewList } from '@/components/Product'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search'; @@ -24,7 +24,11 @@ export const ProductSearchListPage = () => { return ( <> - + + + + +
      diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx index eee7a8c5..a5933f05 100644 --- a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx +++ b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx @@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'; import { listWrapper } from './recipeSearchListPage.css'; -import { PageHeader } from '@/components/Common'; +import { TopBar } from '@/components/Common'; import { DefaultRecipeItem } from '@/components/Recipe'; import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound'; import { useIntersectionObserver } from '@/hooks/common'; @@ -25,7 +25,11 @@ export const RecipeSearchListPage = () => { return ( <> - + + + + +
        {recipes.map((recipe) => (
      • From 68d108991dcefa556382c2ab8aff50b037adc7b8 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Fri, 19 Apr 2024 23:19:21 +0200 Subject: [PATCH 11/12] =?UTF-8?q?refactor:=20=EC=A0=84=EC=B2=B4=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/ShowAllButton/ShowAllButton.tsx | 25 +++++++++++++++++++ .../Common/ShowAllButton/showAllButton.css.ts | 20 +++++++++++++++ src/components/Common/index.ts | 1 + .../ProductRecipeList/ProductRecipeList.tsx | 21 +++++----------- .../productRecipeList.css.ts | 23 ----------------- .../RecipeSearchResultPreviewList.tsx | 15 +++-------- .../recipeSearchResultPreviewList.css.ts | 19 -------------- .../ProductDetailPage/ProductDetailPage.tsx | 2 +- 8 files changed, 56 insertions(+), 70 deletions(-) create mode 100644 src/components/Common/ShowAllButton/ShowAllButton.tsx create mode 100644 src/components/Common/ShowAllButton/showAllButton.css.ts diff --git a/src/components/Common/ShowAllButton/ShowAllButton.tsx b/src/components/Common/ShowAllButton/ShowAllButton.tsx new file mode 100644 index 00000000..b82b31dc --- /dev/null +++ b/src/components/Common/ShowAllButton/ShowAllButton.tsx @@ -0,0 +1,25 @@ +import { Link } from 'react-router-dom'; + +import { moreIconWrapper, linkWrapper } from './showAllButton.css'; + +import { SvgIcon, Text } from '@/components/Common'; +import { vars } from '@/styles/theme.css'; + +interface ShowAllButtonProps { + link: string; +} + +const ShowAllButton = ({ link }: ShowAllButtonProps) => { + return ( + +
        + +
        + + 전체보기 + + + ); +}; + +export default ShowAllButton; diff --git a/src/components/Common/ShowAllButton/showAllButton.css.ts b/src/components/Common/ShowAllButton/showAllButton.css.ts new file mode 100644 index 00000000..200e2c5d --- /dev/null +++ b/src/components/Common/ShowAllButton/showAllButton.css.ts @@ -0,0 +1,20 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const linkWrapper = style({ + display: 'flex', + flexDirection: 'column', + gap: 12, + alignItems: 'center', + width: 45, +}); + +export const moreIconWrapper = style({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: 40, + height: 40, + borderRadius: '50%', + background: vars.colors.secondary1, +}); diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 7e440353..30b5d588 100644 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -26,3 +26,4 @@ export { default as Badge } from './Badge/Badge'; export { default as WriteButton } from './WriteButton/WriteButton'; export { default as Text } from './Text/Text'; export { default as TopBar } from './TopBar/TopBar'; +export { default as ShowAllButton } from './ShowAllButton/ShowAllButton'; diff --git a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx index 8c5f0f24..385d8428 100644 --- a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx +++ b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx @@ -1,18 +1,17 @@ -import { Link } from 'react-router-dom'; +import { container, moreItem } from './productRecipeList.css'; -import { container, moreIcon, moreIconWrapper, moreItem, moreLink } from './productRecipeList.css'; - -import { SvgIcon, Text } from '@/components/Common'; +import { ShowAllButton } from '@/components/Common'; import { DefaultRecipeItem } from '@/components/Recipe'; +import { PATH } from '@/constants/path'; import { useInfiniteProductRecipesQuery } from '@/hooks/queries/product'; -import { vars } from '@/styles/theme.css'; import displaySlice from '@/utils/displaySlice'; interface ProductRecipeListProps { productId: number; + productName: string; } -const ProductRecipeList = ({ productId }: ProductRecipeListProps) => { +const ProductRecipeList = ({ productId, productName }: ProductRecipeListProps) => { // 상품에서 보여줄 꿀조합 정렬 조건 const { data } = useInfiniteProductRecipesQuery(productId, 'favoriteCount,desc'); @@ -32,15 +31,7 @@ const ProductRecipeList = ({ productId }: ProductRecipeListProps) => { ))} {recipeToDisplay.length < recipes.length && (
      • - {/*링크는 상품이 포함된 꿀조합 검색결과로 가는 것이 맞을듯?*/} - -
        - -
        - - 전체보기 - - +
        • )}
      diff --git a/src/components/Product/ProductRecipeList/productRecipeList.css.ts b/src/components/Product/ProductRecipeList/productRecipeList.css.ts index 5c7824ba..a6930606 100644 --- a/src/components/Product/ProductRecipeList/productRecipeList.css.ts +++ b/src/components/Product/ProductRecipeList/productRecipeList.css.ts @@ -1,4 +1,3 @@ -import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const container = style({ @@ -14,25 +13,3 @@ export const moreItem = style({ alignItems: 'center', minWidth: 108, }); - -export const moreLink = style({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', -}); - -export const moreIconWrapper = style({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: 40, - height: 40, - marginBottom: 12, - borderRadius: '50%', - background: vars.colors.secondary1, -}); - -export const moreIcon = style({ - transform: 'rotate(180deg)', -}); diff --git a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx index 4786a2c0..b188fc6d 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx +++ b/src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx @@ -1,15 +1,13 @@ import { useRef } from 'react'; -import { Link } from 'react-router-dom'; -import { linkWrapper, listWrapper, showMore } from './recipeSearchResultPreviewList.css'; +import { listWrapper } from './recipeSearchResultPreviewList.css'; import SearchNotFound from '../SearchNotFound/SearchNotFound'; -import { SvgIcon, Text } from '@/components/Common'; +import { ShowAllButton } from '@/components/Common'; import { DefaultRecipeItem } from '@/components/Recipe'; import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteRecipeSearchResultsQuery } from '@/hooks/queries/search'; -import { vars } from '@/styles/theme.css'; import displaySlice from '@/utils/displaySlice'; interface RecipeSearchResultPreviewListProps { @@ -34,14 +32,7 @@ const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPrevie {idx < 4 ? ( ) : ( - -
      - -
      - - 전체보기 - - + )}
      • ))} diff --git a/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts b/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts index 5ae4169b..df2e9d1a 100644 --- a/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts +++ b/src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts @@ -1,4 +1,3 @@ -import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const listWrapper = style({ @@ -7,21 +6,3 @@ export const listWrapper = style({ alignItems: 'center', overflowY: 'scroll', }); - -export const showMore = style({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 40, - height: 40, - background: vars.colors.secondary1, - borderRadius: '50%', -}); - -export const linkWrapper = style({ - display: 'flex', - flexDirection: 'column', - gap: 12, - alignItems: 'center', - width: 45, -}); diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx index 0367084c..889e1abd 100644 --- a/src/pages/ProductDetailPage/ProductDetailPage.tsx +++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx @@ -66,7 +66,7 @@ export const ProductDetailPage = () => {
      }> - + From dea19f7bb2ca2e4a79ab7b6c7a4f409af67832e0 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Fri, 19 Apr 2024 23:20:46 +0200 Subject: [PATCH 12/12] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=9E=98=EB=AA=BB=EB=90=9C=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx index a5933f05..8c0b0e70 100644 --- a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx +++ b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx @@ -26,8 +26,8 @@ export const RecipeSearchListPage = () => { return ( <> - +