From 064c4bb2ce025570707cf7c2d4b28b39e69f782b Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Sat, 24 Feb 2024 01:11:39 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20contact=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/Layout/Layout.css.ts         |  7 +++++-
 packages/lds/src/Layout/Layout.tsx            | 22 ++++++++++++++++---
 .../lds/src/SearchInput/SearchInput.css.ts    |  2 +-
 packages/lds/src/SearchInput/SearchInput.tsx  | 16 ++++++++------
 services/web/src/app/my/contact/layout.tsx    |  7 ++++++
 5 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 services/web/src/app/my/contact/layout.tsx

diff --git a/packages/lds/src/Layout/Layout.css.ts b/packages/lds/src/Layout/Layout.css.ts
index 75e7e235..4330bbd7 100644
--- a/packages/lds/src/Layout/Layout.css.ts
+++ b/packages/lds/src/Layout/Layout.css.ts
@@ -1,4 +1,8 @@
-import { style } from '@vanilla-extract/css';
+import { createThemeContract, style } from '@vanilla-extract/css';
+
+export const bgColorVar = createThemeContract({
+  backgroundColor: null,
+});
 
 export const container = style({
   maxWidth: '72rem',
@@ -6,4 +10,5 @@ export const container = style({
   width: '100%',
   height: '100%',
   margin: '0 auto',
+  backgroundColor: bgColorVar.backgroundColor,
 });
diff --git a/packages/lds/src/Layout/Layout.tsx b/packages/lds/src/Layout/Layout.tsx
index cf45772f..0905bdbd 100644
--- a/packages/lds/src/Layout/Layout.tsx
+++ b/packages/lds/src/Layout/Layout.tsx
@@ -1,7 +1,23 @@
-import { container } from './Layout.css';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <section className={container}>{children}</section>;
+import { bgColorVar, container } from './Layout.css';
+
+interface Props {
+  children: React.ReactNode;
+  bgColor?: string;
+}
+
+const Layout = ({ children, bgColor }: Props) => {
+  return (
+    <section
+      className={container}
+      style={assignInlineVars(bgColorVar, {
+        backgroundColor: bgColor == null ? 'inherit' : bgColor,
+      })}
+    >
+      {children}
+    </section>
+  );
 };
 
 export default Layout;
diff --git a/packages/lds/src/SearchInput/SearchInput.css.ts b/packages/lds/src/SearchInput/SearchInput.css.ts
index 959c7467..38a24832 100644
--- a/packages/lds/src/SearchInput/SearchInput.css.ts
+++ b/packages/lds/src/SearchInput/SearchInput.css.ts
@@ -2,7 +2,7 @@ import { colors } from '@linker/styles';
 import { style } from '@vanilla-extract/css';
 
 export const searchInputContainer = style({
-  background: `${colors.gray100}`,
+  background: `${colors.gray050}`,
   width: '100%',
   borderRadius: '0.4rem',
   height: '4.4rem',
diff --git a/packages/lds/src/SearchInput/SearchInput.tsx b/packages/lds/src/SearchInput/SearchInput.tsx
index 6e6383f9..6bfcca36 100644
--- a/packages/lds/src/SearchInput/SearchInput.tsx
+++ b/packages/lds/src/SearchInput/SearchInput.tsx
@@ -65,13 +65,15 @@ const SearchInput = ({
               onBlur={() => (setIsFocused ? setIsFocused(false) : () => {})}
               value={watchQuery}
             />
-            <button
-              onClick={() => {
-                reset({ search: '' });
-              }}
-            >
-              <Icon name="close-gray" size={16} />
-            </button>
+            {query != null && (
+              <button
+                onClick={() => {
+                  reset({ search: '' });
+                }}
+              >
+                <Icon name="close-gray" size={16} />
+              </button>
+            )}
           </div>
         )}
       />
diff --git a/services/web/src/app/my/contact/layout.tsx b/services/web/src/app/my/contact/layout.tsx
new file mode 100644
index 00000000..ea9d16f0
--- /dev/null
+++ b/services/web/src/app/my/contact/layout.tsx
@@ -0,0 +1,7 @@
+import { Layout } from '@linker/lds';
+import { colors } from '@linker/styles';
+
+function ContactLayout({ children }: { children: React.ReactNode }) {
+  return <Layout bgColor={colors.gray000}>{children}</Layout>;
+}
+export default ContactLayout;