refactor: components.css postcss로 변경

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;
   }
 }

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" />