[Feature/#1] Auth 공용 컴포넌트 UI 구현

.github/ISSUE_TEMPLATE/♻️-refactor.md

@@ -3,16 +3,19 @@ name: "♻️ Refactor"
 about: "Code refactoring Template "
 title: "♻️ [Refactor] "
 labels: ♻️ Refactor
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Cause and effect
-[//]: # (코드 리팩토링을 하는 이유와 예상 결과를 작성해주세요.)
+
+[//]: # "코드 리팩토링을 하는 이유와 예상 결과를 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/⚙️-setting.md

@@ -3,16 +3,19 @@ name: "⚙️ Setting"
 about: "Development environment setup Template "
 title: "⚙️ [Setting] "
 labels: ⚙️ Setting
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Setting Environment
-[//]: # (세팅한 환경이 무엇인지, 어떤 방법으로 세팅할 예정인지 작성해주세요.)
+
+[//]: # "세팅한 환경이 무엇인지, 어떤 방법으로 세팅할 예정인지 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/✨-feature.md

@@ -3,16 +3,19 @@ name: "✨ Feature"
 about: "Feature Template "
 title: "✨ [Feature] "
 labels: ✨ Feature
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Functional role
-[//]: # (기능이 가지는 역할과 영향을 설명해주세요.)
+
+[//]: # "기능이 가지는 역할과 영향을 설명해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/🌏-deploy.md

@@ -3,16 +3,19 @@ name: "🌏 Deploy"
 about: "Deploy Template "
 title: "🌏 [Deploy] "
 labels: 🌏 Deploy
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 How to deploy
-[//]: # (배포 방법에 대한 설명을 작성해주세요.)
+
+[//]: # "배포 방법에 대한 설명을 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/🐞-bugFix.md

@@ -3,16 +3,19 @@ name: "🐞 BugFix"
 about: "Something isn't working Template "
 title: "🐞 [BugFix] "
 labels: 🐞 BugFix
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Bug Description
-[//]: # (버그가 끼치는 영향과 문제를 설명해주세요.)
+
+[//]: # "버그가 끼치는 영향과 문제를 설명해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/📃-docs.md

@@ -3,16 +3,19 @@ name: "📃 Docs"
 about: "Documentation writing and editing (README.md, etc.) Template "
 title: "📃 [Docs] "
 labels: 📃 Docs
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Documents and objectives
-[//]: # (문서의 종류가 무엇인지, 목적이 무엇인지 작성해주세요.)
+
+[//]: # "문서의 종류가 무엇인지, 목적이 무엇인지 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/pull_request_template.md

@@ -4,30 +4,30 @@
 
 ## ✨ 변경사항
 
-[//]: # '어떤 변경사항이 있었나요? 체크해주세요 !'
-
--   [ ] 🐞 BugFix Something isn't working
--   [ ] 💻 CrossBrowsing Browser compatibility
--   [ ] 🌏 Deploy Deploy
--   [ ] 🎨 Design Markup & styling
--   [ ] 📃 Docs Documentation writing and editing (README.md, etc.)
--   [ ] ✨ Feature Feature
--   [ ] 🔨 Refactor Code refactoring
--   [ ] ⚙️ Setting Development environment setup
--   [ ] ✅ Test Test related (storybook, jest, etc.)
+[//]: # "어떤 변경사항이 있었나요? 체크해주세요 !"
+
+- [ ] 🐞 BugFix Something isn't working
+- [ ] 💻 CrossBrowsing Browser compatibility
+- [ ] 🌏 Deploy Deploy
+- [ ] 🎨 Design Markup & styling
+- [ ] 📃 Docs Documentation writing and editing (README.md, etc.)
+- [ ] ✨ Feature Feature
+- [ ] 🔨 Refactor Code refactoring
+- [ ] ⚙️ Setting Development environment setup
+- [ ] ✅ Test Test related (storybook, jest, etc.)
 
 ## ✏️ 작업 내용
 
-[//]: # '작업 내용을 작성해주세요. 스크린샷을 첨부해주셔도 좋습니다.'
+[//]: # "작업 내용을 작성해주세요. 스크린샷을 첨부해주셔도 좋습니다."
 
--   작업 내용
+- 작업 내용
 
 ## 😅 미완성 작업
 
-[//]: # '없다면 N/A'
+[//]: # "없다면 N/A"
 
--   [ ] Task1
+- [ ] Task1
 
 ## 📢 논의 사항 및 참고 사항
 
-[//]: # '리뷰어가 알면 좋은 내용을 작성해주세요.'
+[//]: # "리뷰어가 알면 좋은 내용을 작성해주세요."

README.md

@@ -5,22 +5,27 @@ Where You Ad 서비스의 프론트엔드 리포지토리입니다.
 ## 🛠 Tech Stack
 
 ### Core
+
 - **React 19**: 최신 리액트 기능을 활용한 UI 개발
 - **TypeScript**: 정적 타입 시스템을 통한 안정성 확보
 - **Vite**: 빠른 개발 서버 및 빌드 도구
 
 ### Styling
+
 - **Tailwind CSS 4**: 유틸리티 퍼스트 CSS 프레임워크
 
 ### State Management & Data Fetching
+
 - **Zustand**: 전역 상태 관리
 - **TanStack Query (React Query)**: 비동기 서버 상태 관리
 
 ### Validation & Form
+
 - **React Hook Form**: 폼 상태 관리
 - **Zod**: 스키마 기반 유효성 검사
 
 ### Linting & Formatting
+
 - **ESLint**: 코드 린팅
 - **Prettier**: 코드 포맷팅
 - **Husky & lint-staged**: 커밋 시 자동 코드 점검 (Git Hook)
@@ -30,6 +35,7 @@ Where You Ad 서비스의 프론트엔드 리포지토리입니다.
 ## 🚀 Getting Started
 
 ### 1. Prerequisites
+
 이 프로젝트는 **pnpm**을 패키지 매니저로 사용합니다.
 
 ### 2. Installation
@@ -41,7 +47,7 @@ pnpm install
 
 ### 3. Git Hook Setup (필수)
 
-```bash
+````bash
 # git 초기화 (필요한 경우)
 git init
 
@@ -50,4 +56,4 @@ git init
 ```bash
 # 개발 서버 실행
 pnpm dev
-```
+````

commitlint.config.cjs

@@ -1,21 +1,21 @@
 module.exports = {
-    extends: ['@commitlint/config-conventional'],
-    rules: {
-        'type-enum': [
-            2,
-            'always',
-            [
-                'feat', // ✨ 새로운 기능 추가
-                'fix', // 🐛 버그 수정
-                'docs', // 📝 문서 수정 (README 등)
-                'style', // 💄 코드 포맷팅, 세미콜론 누락, 공백 등 (기능/로직 변경 없음)
-                'refactor', // ♻️ 리팩토링 (기능 변화 없는 코드 개선)
-                'test', // ✅ 테스트 코드 추가/수정
-                'chore', // 🔧 그 외 변경사항 (빌드, 설정, 패키지 매니저 등)
-                'ci', // 🛠 CI 관련 설정 변경
-                'setting', // 프로젝트 설정 변경 (예: ESLint, Prettier 등)
-            ],
-        ],
-        'subject-case': [0], // 메시지 제목 스타일은 자유롭게
-    },
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat", // ✨ 새로운 기능 추가
+        "fix", // 🐛 버그 수정
+        "docs", // 📝 문서 수정 (README 등)
+        "style", // 💄 코드 포맷팅, 세미콜론 누락, 공백 등 (기능/로직 변경 없음)
+        "refactor", // ♻️ 리팩토링 (기능 변화 없는 코드 개선)
+        "test", // ✅ 테스트 코드 추가/수정
+        "chore", // 🔧 그 외 변경사항 (빌드, 설정, 패키지 매니저 등)
+        "ci", // 🛠 CI 관련 설정 변경
+        "setting", // 프로젝트 설정 변경 (예: ESLint, Prettier 등)
+      ],
+    ],
+    "subject-case": [0], // 메시지 제목 스타일은 자유롭게
+  },
 };

eslint.config.js

@@ -2,6 +2,7 @@ import pluginJs from "@eslint/js";
 import typescriptParser from "@typescript-eslint/parser";
 import prettierPluginRecommended from "eslint-plugin-prettier/recommended";
 import globals from "globals";
+import tseslint from "typescript-eslint";
 
 import defaultConfig from "./eslint/default.mjs";
 import importConfig from "./eslint/import.mjs";
@@ -37,4 +38,8 @@ export default [
   importConfig,
   reactConfig,
   prettierPluginRecommended,
+  {
+    files: ["**/*.{js,mjs,cjs}"],
+    ...tseslint.configs.disableTypeChecked,
+  },
 ];

eslint/default.mjs

@@ -1,34 +1,34 @@
-import jsxA11y from 'eslint-plugin-jsx-a11y';
+import jsxA11y from "eslint-plugin-jsx-a11y";
 
 export default {
-    plugins: {
-        'jsx-a11y': jsxA11y,
-    },
-    rules: {
-        // 비상호작용 엘리먼트에 상호작용 역할을 할당하는 것을 허용합니다.
-        'jsx-a11y/no-noninteractive-element-to-interactive-role': 'off',
+  plugins: {
+    "jsx-a11y": jsxA11y,
+  },
+  rules: {
+    // 비상호작용 엘리먼트에 상호작용 역할을 할당하는 것을 허용합니다.
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
 
-        // click 이벤트에 key 이벤트가 없을 때 허용합니다.
-        'jsx-a11y/click-events-have-key-events': 'off',
+    // click 이벤트에 key 이벤트가 없을 때 허용합니다.
+    "jsx-a11y/click-events-have-key-events": "off",
 
-        // 비상호작용 엘리먼트에서 상호작용을 허용합니다.
-        'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    // 비상호작용 엘리먼트에서 상호작용을 허용합니다.
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
 
-        // devDependencies 사용을 허용합니다.
-        'no-extraneous-dependencies': 'off',
+    // devDependencies 사용을 허용합니다.
+    "no-extraneous-dependencies": "off",
 
-        // div에 onClick 이벤트 사용을 허용합니다.
-        'jsx-a11y/no-static-element-interactions': 'off',
+    // div에 onClick 이벤트 사용을 허용합니다.
+    "jsx-a11y/no-static-element-interactions": "off",
 
-        // console.log(), console.warn(), console.error()를 사용할 때 경고를 표시합니다.
-        // 'no-console': 'warn',
+    // console.log(), console.warn(), console.error()를 사용할 때 경고를 표시합니다.
+    // 'no-console': 'warn',
 
-        // 가능한 경우 dot notation을 사용하도록 경고를 표시합니다.
-        'dot-notation': 'warn',
+    // 가능한 경우 dot notation을 사용하도록 경고를 표시합니다.
+    "dot-notation": "warn",
 
-        // 사용하지 않는 변수에 대해 경고를 표시합니다.
-        'no-unused-vars': 'warn',
+    // 사용하지 않는 변수에 대해 경고를 표시합니다.
+    "no-unused-vars": "warn",
 
-        '@typescript-eslint/no-explicit-any': 'off',
-    },
+    "@typescript-eslint/no-explicit-any": "off",
+  },
 };