feat: multi-step-form Funnel 시스템 구현

README.md

@@ -1,5 +1,13 @@
 ## Multi-Step-Form 기능 요구사항
 
+#### [온보딩 Swagger API](https://onboarding-server-idpj.onrender.com/docs)
+
+### 시연영상
+
+<p align="center">
+  <img src="example-form.gif" alt="example-form" />
+</p>
+
 ### 1. 온보딩 등록 폼 공통 요구사항
 
 - [ ] 4단계로 구성된 프로필 등록 폼 구현 (닉네임 → 성별 → 선호 장르 → 인생 영화 혹은 드라마)
@@ -27,12 +35,16 @@
 - [ ] 최소 1개 이상 선택해야 다음 단계로 이동 가능
 - [ ] 선택된 장르는 시각적으로 구분되어야 함
 
-#### 4단계: 인생 영화 입력
+#### 4단계: 좋아하는 작품 입력
 
 - [ ] 자유 텍스트 입력 필드 구현
 - [ ] 입력값이 있어야 완료 버튼 활성화
 - [ ] 완료 시 전체 입력 데이터를 확인할 수 있어야 함
 
+#### 5단계: 온보딩 결과 페이지
+
+- [ ] 1 ~ 4 단계에서 사용자가 입력한 정보 데이터를 최종적으로 규합하여 확인할 수 있어야 함
+
 ### 3.기술적 요구사항 포인트
 
 - [ ] 단계별 컴포넌트 분리 및 재사용 가능한 구조

eslint.config.js

@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -19,10 +19,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-refresh/only-export-components': 'off',
     },
-  },
-)
+  }
+);

package.json

@@ -10,13 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/react-query": "^5.80.2",
+    "axios": "^1.9.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.57.0",
+    "react-router-dom": "^7.6.2",
+    "tailwindcss": "^4.1.8",
+    "zod": "^3.25.50"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@hookform/devtools": "^4.4.0",
+    "@tanstack/react-query-devtools": "^5.80.2",
+    "@types/node": "^22.15.29",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",