feat: 메뉴 버튼 기능 구현

package.json

@@ -41,7 +41,7 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-vitest": "^9.0.9",
     "@storybook/react-vite": "^9.0.9",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.2.3",

src/App.tsx

@@ -1,11 +1,15 @@
-import { RouterProvider } from 'react-router-dom';
-import './App.css'
-import { router } from '@/routing'
+import React from "react";
+import ProductForm from "./components/ProductForm";
 
-const App = () => {
+function App() {
   return (
-    <RouterProvider router={router} />
+    <div style={{ padding: "20px" }}>
+      <h1 style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "16px" }}>
+        상품 등록
+      </h1>
+      <ProductForm />
+    </div>
   );
-};
+}
 
 export default App;

src/components/ProductForm.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+export default function ProductForm() {
+  const [product, setProduct] = useState({
+    productName: "",
+    price: "",
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setProduct((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log(product);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <p style={{ fontSize: "20px", color: "red" }}>✅ 폼 렌더링 성공</p>
+
+      <div style={{ marginBottom: "12px" }}>
+        <label htmlFor="productName" style={{ display: "block", marginBottom: "4px" }}>
+          상품명
+        </label>
+        <input
+          type="text"
+          id="productName"
+          name="productName"
+          onChange={handleChange}
+          style={{ padding: "8px", width: "100%" }}
+        />
+      </div>
+
+      <div style={{ marginBottom: "12px" }}>
+        <label htmlFor="price" style={{ display: "block", marginBottom: "4px" }}>
+          가격
+        </label>
+        <input
+          type="number"
+          id="price"
+          name="price"
+          onChange={handleChange}
+          style={{ padding: "8px", width: "100%" }}
+        />
+      </div>
+
+      <button type="submit" style={{ padding: "8px 16px", fontWeight: "bold" }}>
+        등록
+      </button>
+    </form>
+  );
+}

src/components/TestComponent.tsx

@@ -8,6 +8,7 @@ import { keycloakLogin } from "@/services/keycloakLogin";
 import { Input } from "@/components/ui/input";
 import { ThemeToggle } from "@/components/ui/ThemeToggle";
 import { Button } from "./ui/Button";
+import { Checkbox } from "@/components/ui/Checkbox";
 
 export type LoginFormData = z.infer<typeof loginSchema>
 
@@ -18,14 +19,15 @@ const TestComponent = () => {
     resolver: zodResolver(loginSchema),
     defaultValues: {
       email: "",
-      password: ""
+      password: "",
+      rememberMe: 0
     }
   });
 
   const onSubmit = async (data: LoginFormData) => {
     try {
-      await keycloakLogin(data);
 
+      await keycloakLogin(data);
       navigate('/');
     } catch (error: any) {
       setError("root", {
@@ -86,19 +88,17 @@ const TestComponent = () => {
                 error={errors.password?.message}
               />
               <FormField 
-                name="password"
+                name="rememberMe"
                 control={control}
-                label="비밀번호"
+                label="자동 로그인"
                 render={(field) => (
-                  <Input
-                    id="비밀번호"
-                    type="password"
-                    placeholder="password"
-                    error="error"
-                    {...field}
+                  <Checkbox 
+                    checked={field.value === 1}
+                    onCheckedChange={(checked) => {
+                      field.onChange(checked ? 1 : 0);
+                    }}
                   />
                 )}
-                error={errors.password?.message}
               />
 
               {errors.root && (

src/components/ui/Button.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import Spinner from "@/assets/spinner.svg"; // ✅ svg 불러오기
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
@@ -52,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {loading && (
           <img
-            src={Spinner}
+            src="/image/spinner.svg"
             alt="loading spinner"
             className="w-4 h-4 animate-spin mr-2"
           />

src/contexts/AuthContext.tsx

@@ -1,21 +1,16 @@
 import { createContext, useContext } from 'react';
-import { useAuth } from '../hooks';
-
-// Keycloak 타입 정의 types폴더안에 넣어두겠습니다!
+import { useKeycloakAuth } from '../hooks';
 
 interface AuthContextType {
   user: any;
-  login: (email: string, password: string) => Promise<void>;
-  register: (email: string, password: string, name: string) => Promise<void>;
-  logout: () => void;
   isAuthenticated: boolean;
   loading: boolean;
 }
 // 인증 컨텍스트
 export const AuthContext = createContext<AuthContextType | null>(null);
 
 export const AuthProvider = ({ children }: any) => {
-  const auth = useAuth();
+  const auth = useKeycloakAuth();
   return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
 };
 

src/hooks/index.tsx

@@ -1,3 +1,2 @@
-export { useAuth } from './useAuth';
 export { useApi } from './useApi';
 export { useKeycloakAuth } from './useKeycloakAuth';