From b456780b721ecbbe2af97ed1d19af18a3b0a550f Mon Sep 17 00:00:00 2001 From: eggmun Date: Sat, 22 Feb 2025 17:48:49 +0900 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20ExpandedSearch=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=ED=8C=8C=EC=9D=BC=20=EC=A0=95=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ExpandedSearch/ExpandedSearch.css.ts | 94 ++----------------- 1 file changed, 6 insertions(+), 88 deletions(-) diff --git a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts index c479ad4..ac5bad8 100644 --- a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts +++ b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts @@ -1,42 +1,5 @@ import { style } from '@vanilla-extract/css'; -export const wrapper = style({ - position: 'relative', - - display: 'flex', - flexDirection: 'row', - backgroundColor: '#fff', - - width: '27rem', - height: '3rem', - padding: '10px 20px', - borderRadius: '50px', - - cursor: 'pointer', -}); - -export const glassesWrapper = style({ - display: 'flex', - flexDirection: 'row', -}); - -export const tagWrapper = style({ - display: 'flex', - flexDirection: 'row', - - marginRight: 'auto', -}); - -export const tagBox = style({ - padding: '6px', - borderRadius: '50px', - backgroundColor: '#6A6868', - - fontSize: '12px', - - marginRight: '10px', -}); - export const OutExpandedWrapper = style({ position: 'fixed', top: '0', @@ -47,13 +10,15 @@ export const OutExpandedWrapper = style({ display: 'flex', justifyContent: 'center', - width: '100vw', // 100%에서 100vw로 변경 - height: '100vh', // 100%에서 100vh로 변경 + width: '100vw', + height: '100vh', padding: '80px 54px', zIndex: '1000', - backgroundColor: 'rgba(0, 0, 0, 0.65)', // 반투명 검은색으로 변경 + // backgroundColor: 'rgba(0, 0, 0, 0.65)', + + backdropFilter: 'blur(10px)', }); export const expandedWrapper = style({ @@ -67,7 +32,7 @@ export const expandedWrapper = style({ flexDirection: 'column', width: '37rem', - height: '22rem', + height: 'fit-content', backgroundColor: '#fff', @@ -91,50 +56,3 @@ export const searchInput = style({ border: 'none', outline: 'none', }); - -export const expandedTagWrapper = style({ - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - - fontSize: '12px', -}); - -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', - - cursor: 'pointer', - - ':focus': { - outline: 'none', - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, - - ':hover': { - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, -}); - -export const relatedTagText = style({ - fontSize: '12px', - - color: '#000', -}); - -export const focusedTag = style({ - backgroundColor: 'rgba(106, 104, 104, 0.1)', -}); From 7cbf70698fea39f2a5f94c70d3eb687b9393b246 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sat, 22 Feb 2025 17:54:20 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94css=20=EC=A0=95=EC=9D=98=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.css.ts | 124 ------------------ 1 file changed, 124 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.css.ts b/src/commons/components/features/Inputs/Search/Search.css.ts index c479ad4..a6a9354 100644 --- a/src/commons/components/features/Inputs/Search/Search.css.ts +++ b/src/commons/components/features/Inputs/Search/Search.css.ts @@ -14,127 +14,3 @@ export const wrapper = style({ cursor: 'pointer', }); - -export const glassesWrapper = style({ - display: 'flex', - flexDirection: 'row', -}); - -export const tagWrapper = style({ - display: 'flex', - flexDirection: 'row', - - marginRight: 'auto', -}); - -export const tagBox = style({ - padding: '6px', - borderRadius: '50px', - backgroundColor: '#6A6868', - - fontSize: '12px', - - marginRight: '10px', -}); - -export const OutExpandedWrapper = style({ - position: 'fixed', - top: '0', - left: '0', - right: '0', - bottom: '0', - - display: 'flex', - justifyContent: 'center', - - width: '100vw', // 100%에서 100vw로 변경 - height: '100vh', // 100%에서 100vh로 변경 - - padding: '80px 54px', - - zIndex: '1000', - backgroundColor: 'rgba(0, 0, 0, 0.65)', // 반투명 검은색으로 변경 -}); - -export const expandedWrapper = style({ - position: 'absolute', - top: '0', - left: '0', - right: '0', - bottom: '0', - - display: 'flex', - flexDirection: 'column', - - width: '37rem', - height: '22rem', - - backgroundColor: '#fff', - - borderRadius: '25px', - padding: '20px', - - zIndex: '2000', -}); - -export const searchInput = style({ - width: '100%', - height: '16px', - - marginBottom: '14px', - - backgroundColor: 'transparent', - color: '#000', - - fontSize: '14px', - - border: 'none', - outline: 'none', -}); - -export const expandedTagWrapper = style({ - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - - fontSize: '12px', -}); - -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', - - cursor: 'pointer', - - ':focus': { - outline: 'none', - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, - - ':hover': { - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, -}); - -export const relatedTagText = style({ - fontSize: '12px', - - color: '#000', -}); - -export const focusedTag = style({ - backgroundColor: 'rgba(106, 104, 104, 0.1)', -});