From 0c6132393804b8377b496efa9903fd5798532a06 Mon Sep 17 00:00:00 2001 From: Taeeun Kim Date: Tue, 9 Apr 2024 16:22:00 +0200 Subject: [PATCH] =?UTF-8?q?refactor:=20RecommendList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20(#7?= =?UTF-8?q?8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Text 컴포넌트에서 as를 사용하지 않는 부분 해결 * refactor: MarkedText 스타일 마이그레이션 * refactor: RecommendList 컴포넌트 스타일 마이그레이션 * feat: 추천 검색어 옆에 '상품' 텍스트 추가 --- .../Common/MarkedText/MarkedText.tsx | 18 +++-- .../Common/MarkedText/markedText.css.ts | 8 ++ .../RecommendList/RecommendList.stories.tsx | 17 +++++ .../Search/RecommendList/RecommendList.tsx | 76 +++++-------------- .../Search/RecommendList/recommendList.css.ts | 34 +++++++++ 5 files changed, 87 insertions(+), 66 deletions(-) create mode 100644 src/components/Common/MarkedText/markedText.css.ts create mode 100644 src/components/Search/RecommendList/RecommendList.stories.tsx create mode 100644 src/components/Search/RecommendList/recommendList.css.ts diff --git a/src/components/Common/MarkedText/MarkedText.tsx b/src/components/Common/MarkedText/MarkedText.tsx index 341b3c92b..80bc5566d 100644 --- a/src/components/Common/MarkedText/MarkedText.tsx +++ b/src/components/Common/MarkedText/MarkedText.tsx @@ -1,5 +1,8 @@ import { Fragment } from 'react'; -import styled from 'styled-components'; + +import { markText } from './markedText.css'; + +import { Text } from '@/components/Common'; interface MarkedTextProps { text: string; @@ -13,7 +16,13 @@ const MarkedText = ({ text, mark }: MarkedTextProps) => { <> {textFragments.map((fragment, index) => ( - {fragment.toLowerCase() === mark.toLowerCase() ? {fragment} : <>{fragment}} + {fragment.toLowerCase() === mark.toLowerCase() ? ( + {fragment} + ) : ( + + {fragment} + + )} ))} @@ -21,8 +30,3 @@ const MarkedText = ({ text, mark }: MarkedTextProps) => { }; export default MarkedText; - -const Mark = styled.mark` - font-weight: ${({ theme }) => theme.fontWeights.bold}; - background-color: ${({ theme }) => theme.backgroundColors.default}; -`; diff --git a/src/components/Common/MarkedText/markedText.css.ts b/src/components/Common/MarkedText/markedText.css.ts new file mode 100644 index 000000000..ee911d543 --- /dev/null +++ b/src/components/Common/MarkedText/markedText.css.ts @@ -0,0 +1,8 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const markText = style({ + color: vars.colors.primary, + fontWeight: 700, + background: vars.colors.background.default, +}); diff --git a/src/components/Search/RecommendList/RecommendList.stories.tsx b/src/components/Search/RecommendList/RecommendList.stories.tsx new file mode 100644 index 000000000..e3dc399fa --- /dev/null +++ b/src/components/Search/RecommendList/RecommendList.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import RecommendList from './RecommendList'; + +const meta: Meta = { + title: 'search/RecommendList', + component: RecommendList, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + searchQuery: '꼬북칩', + }, +}; diff --git a/src/components/Search/RecommendList/RecommendList.tsx b/src/components/Search/RecommendList/RecommendList.tsx index b43ccf9e1..e0d328ff5 100644 --- a/src/components/Search/RecommendList/RecommendList.tsx +++ b/src/components/Search/RecommendList/RecommendList.tsx @@ -1,11 +1,12 @@ -import { Button, Text } from '@fun-eat/design-system'; import type { MouseEventHandler } from 'react'; import { useRef } from 'react'; -import styled from 'styled-components'; -import { MarkedText } from '@/components/Common'; +import { backdrop, container, productButton, wrapper } from './recommendList.css'; + +import { MarkedText, Text } from '@/components/Common'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteProductSearchAutocompleteQuery } from '@/hooks/queries/search'; +import { vars } from '@/styles/theme.css'; interface RecommendListProps { searchQuery: string; @@ -21,72 +22,29 @@ const RecommendList = ({ searchQuery, handleSearchClick, handleAutocompleteClose const products = searchResponse.pages.flatMap((page) => page.products); if (products.length === 0) { - return 검색어가 포함된 상품을 찾지 못했어요; + return 검색어가 포함된 상품을 찾지 못했어요; } return ( - - - +
+
+
    {products.map(({ id, name }) => (
  • - + +
    • ))} - +
- +
); }; export default RecommendList; - -const Backdrop = styled.div` - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; -`; - -const RecommendListContainer = styled.div` - position: absolute; - top: 100%; - left: 0; - right: 0; - max-height: 150px; - padding: 10px 0; - border: 1px solid ${({ theme }) => theme.borderColors.default}; - background-color: ${({ theme }) => theme.backgroundColors.default}; - overflow-y: auto; -`; - -const RecommendListWrapper = styled.ul` - position: relative; - width: 100%; - - & > li { - height: 36px; - padding: 0 10px; - line-height: 36px; - } -`; - -const ProductButton = styled(Button)` - text-align: left; -`; - -const ErrorText = styled(Text)` - height: 36px; - padding: 0 10px; - line-height: 36px; -`; diff --git a/src/components/Search/RecommendList/recommendList.css.ts b/src/components/Search/RecommendList/recommendList.css.ts new file mode 100644 index 000000000..cd89faa4e --- /dev/null +++ b/src/components/Search/RecommendList/recommendList.css.ts @@ -0,0 +1,34 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const container = style({ + position: 'absolute', + minWidth: 360, + maxHeight: 150, + padding: '10px 0', + background: vars.colors.background.default, + overflowY: 'auto', +}); + +export const backdrop = style({ + position: 'fixed', + top: 0, + left: 0, + bottom: 0, + right: 0, +}); + +export const wrapper = style({ + position: 'relative', + width: '100%', +}); + +export const productButton = style({ + display: 'flex', + alignItems: 'center', + padding: '14px 0', + color: '#232527', + fontSize: '1.6rem', + fontWeight: 400, + textAlign: 'left', +});