feat: header UI 추가

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,24 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: shinwokkang
+
+---
+
+### 🚀 이슈 유형
+- [ ] 기능 추가
+- [ ] 버그 수정
+- [ ] 리팩토링
+- [ ] 기타 (설명 추가)
+
+---
+
+### ✨ 기능
+어떤 기능을 구현할지 간단히 작성해주세요.
+
+---
+
+### 📎 참고 자료
+피그마, 노션, 스크린샷, 관련 링크 등 있으면 첨부해주세요.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,17 @@
+### 💡 To Reviewers
+- 해당 브랜치에서 새롭게 설치한 라이브러리가 있다면 함께 명시해 주세요.
+- 리뷰어가 코드를 이해하는 데 도움이 되는 정보나 참고사항이 있다면 자유롭게 작성해 주세요.
+
+### 🔥 작업 내용 (가능한 구체적으로 작성해 주세요)
+- 메인 페이지 리스트 컴포넌트 구현
+- 헤더 구현
+
+### 🤔 추후 작업 예정
+- 추가 구현이 필요한 부분이나 다음 작업 계획을 작성해 주세요.
+
+### 📸 작업 결과 (스크린샷)
+- 작업 결과를 보여주는 스크린샷을 첨부해 주세요.
+
+### 🔗 관련 이슈
+- 브랜치 생성 시 연결했던 이슈 번호를 작성해 주세요.
+- 예: closed #2

.github/workflows/deploy.yml

@@ -0,0 +1,32 @@
+name: Deploy
+
+on:
+  push:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    container: pandoc/latex
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+      - name: creates output
+        run: sh ./build.sh
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
+        with:
+          source-directory: 'output'
+          destination-github-username: psm1st
+          destination-repository-name: checkmoFE
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

.github/workflows/pr-merge-cleanup.yml

@@ -0,0 +1,67 @@
+name: PR Merge Cleanup
+
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup-after-merge:
+    if: >
+      github.event.pull_request.merged == true &&
+      (
+        github.event.pull_request.base.ref == 'dev' ||
+        github.event.pull_request.base.ref == 'main'
+      )
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+      contents: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Close linked issues via gh CLI
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_BODY: ${{ github.event.pull_request.body }}
+        shell: bash
+        run: |
+          echo "🔍 PR 내용에서 이슈 닫는 키워드를 찾는 중..."
+          issue_count=0
+          failed_count=0
+
+          # 이슈 번호 추출 및 중복 제거
+          issue_numbers=$(printf '%s' "$PR_BODY" | tr -d '\r' | grep -Eoi '(close[sd]?|fix(e[sd])?|resolve[sd]?) #[0-9]+' | grep -oE '#[0-9]+' | tr -d '#' | sort -u)
+
+          if [ -z "$issue_numbers" ]; then
+            echo "ℹ️  PR 본문에서 닫을 이슈를 찾지 못했습니다."
+            exit 0
+          fi
+
+          # 각 이슈 처리
+          while IFS= read -r issue_number; do
+            if [ -n "$issue_number" ]; then
+              echo "➡️  닫는 중: #$issue_number"
+              if gh issue close "$issue_number" --reason completed --repo "$GITHUB_REPOSITORY"; then
+                echo "✅ 이슈 #$issue_number 닫기 완료"
+                issue_count=$((issue_count + 1))
+              else
+                echo "⚠️  이슈 #$issue_number 닫기 실패 (이슈가 존재하지 않거나 권한이 없을 수 있습니다)"
+                failed_count=$((failed_count + 1))
+              fi
+            fi
+          done <<< "$issue_numbers"
+
+          echo "📊 처리 결과: 성공 $issue_count개, 실패 $failed_count개"
+
+      - name: Delete source branch
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH_NAME: ${{ github.event.pull_request.head.ref }}
+        shell: bash
+        run: |
+          echo "🗑️  소스 브랜치 삭제 중: $BRANCH_NAME"
+          gh api repos/${{ github.repository }}/git/refs/heads/$BRANCH_NAME -X DELETE || echo "⚠️  브랜치 삭제 실패 또는 이미 삭제됨: $BRANCH_NAME"

.github/workflows/preview.yml

@@ -0,0 +1,43 @@
+name: Preview
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  vercel-preview:
+    runs-on: ubuntu-latest
+
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest && npm install --global pnpm
+      - name: Get Vercel Environment Variables
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        id: deploy
+
+        run: |
+
+          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > vercel-output.txt
+          echo "preview_url=$(cat vercel-output.txt)" >> $GITHUB_OUTPUT
+
+      - name: Comment PR with Preview URL
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            ✅ PREVIEW ${{ steps.deploy.outputs.preview_url }}
+
+permissions:
+  contents: read
+  pages: write
+  deployments: write
+  id-token: write
+  issues: write
+  pull-requests: write

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1 +1,90 @@
-# FE
+## 🎨 프론트엔드 개발 컨벤션
+
+---
+
+### 🌳 깃 브랜치 전략
+
+- **main 브랜치**
+  👑 서비스 배포용 브랜치
+  👑 팀장만 직접 관리하고 머지 가능
+- **develop 브랜치**
+  🛠️ 개발 기능 통합 브랜치
+  새로운 기능은 항상 이 브랜치를 기준으로 브랜치 생성
+
+### 🔖 브랜치 명명 규칙
+
+| 유형                     | 형식                  | 설명                                                  | 예시          |
+| ------------------------ | --------------------- | ----------------------------------------------------- | ------------- |
+| ✨ 기능 추가             | `feat-[이슈번호]`     | 새로운 UI/기능 개발                                   | `feat-100`    |
+| ♻️ 리팩토링              | `refactor-[이슈번호]` | 코드 구조 개선                                        | `refactor-28` |
+| 🐛 버그 수정             | `bug-[이슈번호]`      | UI/UX 버그 수정                                       | `bug-23`      |
+| 🎨 코드 포맷팅, CSS 수정 | `style-[이슈번호]`    | 코드 포맷팅, CSS 수정 등 기능에 영향 없는 스타일 변경 | `style-123`   |
+| 🔨 잡무성 작업           | `chore-[이슈번호]`    | 주석, 콘솔 제거, 의존성 관리                          | `chore-102`   |
+| 📝 문서 수정             | `docs-[이슈번호]`     | 문서 수정 (README 등)                                 | `docs-23`     |
+| 🚀 빌드 설정             | `build-[이슈번호]`    | 빌드 설정, 의존성 패키지                              | `build-12`    |
+| ✅ 테스트 코드 추가/수정 | `test-[이슈번호]`     | 테스트 코드 추가 / 수정                               | `test-12`     |
+
+---
+
+### 📝 커밋/PR 컨벤션
+
+| 타입          | 설명                                       | 예시                                  |
+| ------------- | ------------------------------------------ | ------------------------------------- |
+| ✨ `feat`     | 새로운 기능 추가                           | `feat: 검색 기능 추가`                |
+| ♻️ `refactor` | 리팩토링                                   | `refactor: header 컴포넌트 구조 개선` |
+| 🐛 `bug`      | 버그 수정                                  | `bug: 모바일 메뉴 토글 오류 수정`     |
+| 🎨 `style`    | 스타일, 포맷, 세미콜론 등 코드 비동작 변경 | `style: 코드 정렬 및 들여쓰기 수정`   |
+| 📝 `docs`     | 문서 수정                                  | `docs: README 배포 방법 추가`         |
+| ✅ `test`     | 테스트 코드 추가/수정                      | `test: 로그인 테스트 케이스 추가`     |
+| 📦 `build`    | 빌드 시스템, 의존성 설정                   | `build: Vite 설정 파일 수정`          |
+| 🚀 `ci`       | CI 설정 변경                               | `ci: GitHub Actions 수정`             |
+| 🔨 `chore`    | 그 외 잡무 (예: 콘솔 제거)                 | `chore: 불필요한 주석 제거`           |
+
+---
+
+### 🤝 PR (Pull Request) 전략
+
+- **main 브랜치 PR**:
+  👑 팀장 승인 → 머지 가능
+- **그 외 브랜치 PR**:
+  👥 최소 1명 이상 리뷰어 승인 → 머지
+
+---
+
+### 💻 코드 컨벤션 (JavaScript / React 기준)
+
+| 항목                | 규칙                 | 예시                           |
+| ------------------- | -------------------- | ------------------------------ |
+| **컴포넌트명**      | `PascalCase`         | `UserCard`, `MainLayout`       |
+| **변수/함수명**     | `camelCase`          | `handleClick`, `userName`      |
+| **상수**            | `UPPER_SNAKE_CASE`   | `DEFAULT_LIMIT`, `API_URL`     |
+| **파일명**          | `PascalCase`         | `ProfilePage.tsx`              |
+| **스타일 클래스명** | `camelCase` or `BEM` | `buttonPrimary`, `card__title` |
+| **CSS 파일**        | - 상의 필요          |                                |
+
+---
+
+### ⚛️ React 컴포넌트 규칙
+
+- **props 구조 분해**
+  ✅ `const Button = ({ text, onClick }) => {}`
+- **조건부 렌더링**
+  ✅ `isLoading && <Spinner />`
+- **커스텀 훅**
+  ✅ `use` 접두사 필수: `useFetch`, `useToggle`
+- **useEffect**
+  ✅ 의존성 배열 명시: `useEffect(() => { ... }, [value])`
+
+---
+
+### 🧹 스타일링 (CSS/SCSS)
+
+- **방식**: CSS Module, TailwindCSS, styled-components 중 하나 사용
+- **공통 변수**: `:root`, `variables.css`로 색상, 여백 등 관리
+- **클래스명**: 역할 기반 명명 (`searchInput`, `formWrapper` 등)
+
+---
+
+### 🧰 Lint & Formatter
+
+- Prettier 사용

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./FE/* ./output
+cp -R ./output ./FE/

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "checkmo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.0.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}