fix: contact 페이지 배경색 수정

packages/lds/src/Layout/Layout.css.ts

@@ -1,9 +1,14 @@
-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',
   minWidth: '36rem',
   width: '100%',
   height: '100%',
   margin: '0 auto',
+  backgroundColor: bgColorVar.backgroundColor,
 });

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;

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',

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>
         )}
       />

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;