리드미 작성

README.md

@@ -1,50 +1,50 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+## :pushpin: 프로젝트명 
+## CodeNameDavinci
+
+> 보드게임 '다빈치코드'를 웹 게임으로 구현
+
+## 📆 개발기간
+2024년 12월 ~ 진행중
+
+## 🕹 배포주소 : https://www.davincicodegame.store/home
+
+## 🏢 아키텍쳐
+<img src="https://github.com/user-attachments/assets/41ba4895-007a-4f21-8ea8-d24654e64da8">
+
+
+## 📚 기술스택
+<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black"><img src="https://img.shields.io/badge/styledcomponents-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=white"><img src="https://img.shields.io/badge/Typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"><img src="https://img.shields.io/badge/axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white"><img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=reactquery&logoColor=white"><img src="https://img.shields.io/badge/reacthookform-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white"><img src="https://img.shields.io/badge/zod-3E67B1?style=for-the-badge&logo=Zod&logoColor=white"><img src="https://img.shields.io/badge/zustand-F36D00?style=for-the-badge&logo=zustand&logoColor=white"><img src="https://img.shields.io/badge/socket.io-010101?style=for-the-badge&logo=socketdotio&logoColor=white">
+
+## 🌄 화면구성
+<img src = "https://github.com/user-attachments/assets/bc35c2a6-1f24-4886-9d4d-f3c29239be0d" with="200" height="200">
+<img src = "https://github.com/user-attachments/assets/9c3f202d-29c3-448b-98a7-659e771c2b8b" with="200" height="200">
+<img src = "https://github.com/user-attachments/assets/d3e1c795-c94d-4dac-a1ca-b531eae00b01" with="200" height="200">
+
+## 📺 게임플레이
+...
+
+## 🤗 맡은 역할
+
+### 1⃣ 로그인 개발
+JWT 인증: Access Token 관리
+
+### 2⃣ 공통 컴포넌트 개발
+  #### Input 컴포넌트
+  react-hook-form,zod를 사용하여 입력 검증
+  에러 메시지, 포커스 기능 추가
+  
+  #### Button 컴포넌트
+  상태별 스타일 적용ㅋ
+  클릭 이벤트 핸들링 최적화
+
+### 3⃣ 게임 로직 개발
+  #### 핵심 로직 구현
+  게임 상태 관리 (시작, 진행, 종료)
+  플레이어 규칙 반영
+
+### 4⃣ Socket 통신을 통한 UI/UX 개발
+  실시간 데이터 동기화
+  Socket.io 적용
+  게임 이벤트 처리
+
+