From 08a5ea73fceb6b821cbdd3a09dc9fda42c37b403 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 19 Jan 2025 18:32:02 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=97=B0=EA=B4=80=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EA=B2=80=EC=83=89=EC=96=B4=EC=97=90=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/features/Inputs/Search/Search.css.ts | 8 ++++++++ src/components/features/Inputs/Search/Search.tsx | 3 +++ 2 files changed, 11 insertions(+) diff --git a/src/components/features/Inputs/Search/Search.css.ts b/src/components/features/Inputs/Search/Search.css.ts index 99b1cf1..4eb8302 100644 --- a/src/components/features/Inputs/Search/Search.css.ts +++ b/src/components/features/Inputs/Search/Search.css.ts @@ -106,11 +106,19 @@ export const expandedTagWrapper = style({ export const relatedTagWrapper = style({ display: 'flex', flexDirection: 'column', + + margin: '0', + padding: '0', }); export const relatedTagBox = style({ display: 'flex', flexDirection: 'row', + alignItems: 'center', + + width: '100%', + + gap: '10px', }); export const relatedTagText = style({ diff --git a/src/components/features/Inputs/Search/Search.tsx b/src/components/features/Inputs/Search/Search.tsx index d5b3cbf..785567c 100644 --- a/src/components/features/Inputs/Search/Search.tsx +++ b/src/components/features/Inputs/Search/Search.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import Image from 'next/image'; +import Tag from '@/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; export default function Search() { @@ -40,9 +41,11 @@ export default function Search() { From 3b05b43d9dd5dda432fbd4cc87b3769f1094829d Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 19 Jan 2025 18:41:13 +0900 Subject: [PATCH 2/4] =?UTF-8?q?style:=20dvw,=20dvh=20=EB=8B=A8=EC=9C=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20rem=20=EB=8B=A8=EC=9C=84=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/features/Inputs/Search/Search.css.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/features/Inputs/Search/Search.css.ts b/src/components/features/Inputs/Search/Search.css.ts index 4eb8302..0972d29 100644 --- a/src/components/features/Inputs/Search/Search.css.ts +++ b/src/components/features/Inputs/Search/Search.css.ts @@ -7,8 +7,8 @@ export const wrapper = style({ flexDirection: 'row', backgroundColor: '#fff', - width: '30dvw', - height: '7dvh', + width: '27rem', + height: '3rem', padding: '10px 20px', borderRadius: '50px', @@ -69,8 +69,8 @@ export const expandedWrapper = style({ display: 'flex', flexDirection: 'column', - width: '30dvw', - height: '50dvh', + width: '37rem', + height: '22rem', backgroundColor: '#fff', From 7be19d7d22c9bd845a105ac39d1b69726eeb32c1 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 19 Jan 2025 18:45:34 +0900 Subject: [PATCH 3/4] =?UTF-8?q?style:=20marginBottom=20=EC=86=8D=EC=84=B1?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=ED=95=98=EC=97=AC=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/features/Inputs/Search/Search.css.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/features/Inputs/Search/Search.css.ts b/src/components/features/Inputs/Search/Search.css.ts index 0972d29..d49c8a1 100644 --- a/src/components/features/Inputs/Search/Search.css.ts +++ b/src/components/features/Inputs/Search/Search.css.ts @@ -24,8 +24,6 @@ export const tagWrapper = style({ display: 'flex', flexDirection: 'row', - backgroundColor: 'red', - marginRight: 'auto', }); @@ -37,7 +35,6 @@ export const tagBox = style({ fontSize: '12px', marginRight: '10px', - marginBottom: '10px', }); export const OutExpandedWrapper = style({ From 0ff6e17545c5908d08cd996753425335b8e83f33 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 19 Jan 2025 19:09:40 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EC=B0=BD=20?= =?UTF-8?q?=ED=99=95=EC=9E=A5=20=EB=B0=8F=20=EC=B6=95=EC=86=8C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.tsx | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/features/Inputs/Search/Search.tsx b/src/components/features/Inputs/Search/Search.tsx index 785567c..9271d79 100644 --- a/src/components/features/Inputs/Search/Search.tsx +++ b/src/components/features/Inputs/Search/Search.tsx @@ -6,7 +6,7 @@ import Tag from '@/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; export default function Search() { - const [isExpanded] = useState(true); + const [isExpanded, setIsExpanded] = useState(false); const [tagList, setTagList] = useState([]); const [inputValue, setInputValue] = useState(''); // 입력값을 저장할 state 추가 @@ -17,6 +17,10 @@ export default function Search() { } }; + const onClickExpanded = () => { + setIsExpanded((prev) => !prev); + }; + return (
{isExpanded ? ( @@ -51,13 +55,27 @@ export default function Search() {
-
+
) : ( <> -
- {new Array(3).fill('React').map((el) => ( -
+
+ {new Array(3).fill('React').map((el, index) => ( +
{el}
))}