From 4cbead44db925a073f5f4e75705bf8e6af66f64d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 25 Mar 2025 17:09:03 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20components.css=20postcss=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/app/styles/components.css         | 62 +++++++++++++------
 .../pages/menu/ui/base-bottom-menu-form.tsx   | 12 +++-
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/apps/cs/src/app/styles/components.css b/apps/cs/src/app/styles/components.css
index b67efb8f0..b851d5a1e 100644
--- a/apps/cs/src/app/styles/components.css
+++ b/apps/cs/src/app/styles/components.css
@@ -1,25 +1,49 @@
-@tailwind components;
+.card {
+  position: relative;
+  margin: 0.6rem;
+  box-sizing: border-box;
+  min-height: 2rem;
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font-size: 1.3rem;
+  color: #666;
+}
 
-@layer components {
-  .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
-  }
+.card-border {
+  border: 1px solid #dbe2e6;
+  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e1e7eb;
+  padding: 1rem;
+}
+
+.card-footer {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #e1e7eb;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* 블랙 테마 */
+[data-theme="black"] {
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    border-color: #3f4042;
+    background-color: rgba(255, 255, 255, 0.065);
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
-  }
-  .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="black"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    border-bottom-color: #3f4042;
   }
 }
diff --git a/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx b/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx
index 84527d2da..d8afc344d 100644
--- a/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx
@@ -70,7 +70,11 @@ export function BaseBottomMenuForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <RadioGroup {...field} onValueChange={field.onChange}>
+                  <RadioGroup
+                    {...field}
+                    value={field.value ?? ""}
+                    onValueChange={field.onChange}
+                  >
                     <div className="flex items-center space-x-4">
                       <div className="flex items-center space-x-2">
                         <RadioGroupItem value="Y" id="otptY" />
@@ -98,7 +102,11 @@ export function BaseBottomMenuForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <RadioGroup {...field} onValueChange={field.onChange}>
+                  <RadioGroup
+                    {...field}
+                    value={field.value ?? ""}
+                    onValueChange={field.onChange}
+                  >
                     <div className="flex items-center space-x-4">
                       <div className="flex items-center space-x-2">
                         <RadioGroupItem value="Y" id="useY" />