diff --git a/public/svg/ic_search_gray.svg b/public/svg/ic_search_gray.svg new file mode 100644 index 00000000..8dd1ab24 --- /dev/null +++ b/public/svg/ic_search_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/ic_x_circle_gray.svg b/public/svg/ic_x_circle_gray.svg new file mode 100644 index 00000000..5c1362cf --- /dev/null +++ b/public/svg/ic_x_circle_gray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/IcSearchGray.tsx b/src/assets/svg/IcSearchGray.tsx new file mode 100644 index 00000000..f132a260 --- /dev/null +++ b/src/assets/svg/IcSearchGray.tsx @@ -0,0 +1,13 @@ +import type { SVGProps } from 'react'; + +const SvgIcSearchGray = (props: SVGProps) => ( + + + +); +export default SvgIcSearchGray; diff --git a/src/assets/svg/IcXCircleGray.tsx b/src/assets/svg/IcXCircleGray.tsx new file mode 100644 index 00000000..512dbf30 --- /dev/null +++ b/src/assets/svg/IcXCircleGray.tsx @@ -0,0 +1,9 @@ +import type { SVGProps } from 'react'; + +const SvgIcXCircleGray = (props: SVGProps) => ( + + + + +); +export default SvgIcXCircleGray; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 0899fe78..d87856c8 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,3 +1,6 @@ export { default as IcBack } from './IcBack' export { default as IcClose } from './IcClose' -export { default as IcSpeaker3D } from './IcSpeaker3D' \ No newline at end of file +export { default as IcSearchGray } from './IcSearchGray' +export { default as IcXCircleGray } from './IcXCircleGray' +export { default as IcSpeaker3D } from './IcSpeaker3D' + diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index d6182b08..6127673a 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import Head from '@/components/Head'; import { headerRootStyle, backIconStyle, titleStyle, closeIconStyle } from '@/components/Header/index.css'; import { IcBack, IcClose } from '@/assets/svg'; @@ -8,10 +9,6 @@ interface HeaderRootProps { isColor?: boolean; } -interface BackIconProps { - onClick: () => void; -} - interface TitleProps { title: string; } @@ -24,9 +21,13 @@ const HeaderRoot = ({ children, isColor = false }: HeaderRootProps): JSX.Element return
{children}
; }; -const BackIcon = ({ onClick }: BackIconProps): JSX.Element => { +const BackIcon = (): JSX.Element => { + const navigate = useNavigate(); + const handleBackClick = () => { + navigate(-1); + }; return ( - ); diff --git a/src/components/Input/index.css.ts b/src/components/Input/index.css.ts index b159f268..d8f0a7f2 100644 --- a/src/components/Input/index.css.ts +++ b/src/components/Input/index.css.ts @@ -35,6 +35,8 @@ export const inputStyle = recipe({ isSearch: { true: { borderRadius: '90px', + padding: '1rem 4rem 1rem 4.6rem', + ...vars.fonts.b2, }, }, }, diff --git a/src/pages/search/components/SearchBar/index.css.ts b/src/pages/search/components/SearchBar/index.css.ts new file mode 100644 index 00000000..5e626f59 --- /dev/null +++ b/src/pages/search/components/SearchBar/index.css.ts @@ -0,0 +1,25 @@ +import { style } from '@vanilla-extract/css'; + +export const searchGrayStyle = style({ + position: 'absolute', + + top: 0, + bottom: 0, + left: 16, + + margin: 'auto 0', + + cursor: 'pointer', +}); + +export const xCircleGrayStyle = style({ + position: 'absolute', + + top: 0, + bottom: 0, + right: 12, + + margin: 'auto 0', + + cursor: 'pointer', +}); diff --git a/src/pages/search/components/SearchBar/index.tsx b/src/pages/search/components/SearchBar/index.tsx new file mode 100644 index 00000000..c3587480 --- /dev/null +++ b/src/pages/search/components/SearchBar/index.tsx @@ -0,0 +1,41 @@ +import { forwardRef } from 'react'; +import Flex from '@/components/Flex'; +import Input from '@/components/Input'; +import { IcSearchGray, IcXCircleGray } from '@/assets/svg'; +import { searchGrayStyle, xCircleGrayStyle } from './index.css'; + +interface SearchBarProps { + searchValue: string; + handleSearchChange: (value: string) => void; + handleSearchIconClick: () => void; +} + +const SearchBar = forwardRef( + ({ searchValue, handleSearchChange, handleSearchIconClick }, ref) => { + const handleInputChange = (event: React.ChangeEvent) => { + handleSearchChange(event.target.value); + }; + + const handleClearInput = () => { + handleSearchChange(''); + }; + + return ( + + + + + + ); + } +); + +SearchBar.displayName = 'SearchBar'; + +export default SearchBar; diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index faf2c8bf..c063743d 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -1,5 +1,28 @@ +import { useState } from 'react'; +import SearchBar from '@/pages/search/components/SearchBar'; +import Header from '@/components/Header'; + const Search = () => { - return
search
; + const [searchValue, setSearchValue] = useState(''); + + const handleSearchChange = (value: string) => { + setSearchValue(value); + }; + + const handleSearchIconClick = () => { + console.log(searchValue); + }; + + return ( + + + + + ); }; export default Search; diff --git a/src/stories/Header.stories.tsx b/src/stories/Header.stories.tsx index e2d6af9b..66f0af8f 100644 --- a/src/stories/Header.stories.tsx +++ b/src/stories/Header.stories.tsx @@ -38,11 +38,11 @@ export const Default: Story = { args: { title: 'HEADER TITLE', }, - render: ({ title, onClickBack, onClickClose }) => ( + render: ({ title }) => ( - + - + ), }; @@ -51,18 +51,18 @@ export const BackOnly: Story = { args: { title: 'Go Back', }, - render: ({ title, onClickBack }) => ( + render: ({ title }) => ( - + ), }; export const CloseOnly: Story = { - render: ({ onClickClose }) => ( + render: () => ( - + ), };