[8주차] Team IPX 과제 제출합니다.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,27 @@
+---
+name: 기능 요청
+about: 새로운 기능 추가 또는 개선 사항을 작성합니다.
+title: "[FEAT] "
+labels: enhancement
+assignees: ""
+---
+
+## 📌 작업 내용
+
+<!-- 어떤 작업을 할 예정인지 간단히 설명해주세요. -->
+
+-
+
+## ✅ 할 일
+
+<!-- 해야 할 일을 체크리스트로 작성해주세요. -->
+
+- [ ]
+- [ ]
+- [ ]
+
+## 🎨 참고 사항
+
+<!-- 디자인, API, 참고 링크, 주의할 점 등이 있다면 작성해주세요. -->
+
+-

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,45 @@
+## 📌 작업 내용
+
+<!-- 이번 PR에서 작업한 내용을 간단히 적어주세요. -->
+
+-
+
+## ✅ 변경 사항
+
+- [ ] 새로운 기능 추가
+- [ ] 버그 수정
+- [ ] 코드 개선 및 수정
+- [ ] 문서 작성 및 업데이트
+- [ ] 배포 관련 수정
+- [ ] 브랜치 관련 수정
+- [ ] 기타:
+
+## 🔗 관련 이슈
+
+<!-- 예: Closes #12 / Related to #12 -->
+<!-- 반드시 이슈와 같은 번호여야 함. -->
+
+Closes #
+
+## 🧪 체크리스트
+
+- [ ] 제가 작성한 코드를 리뷰했습니다.
+- [ ] 문서에 변경 사항을 반영했습니다.
+- [ ] 새로운 경고를 생성하지 않습니다.
+- [ ] 새로운 기능이나 수정 사항이 기존 테스트와 충돌하지 않음을 확인했습니다.
+
+## 📸 스크린샷
+
+<!-- UI 변경이 있다면 스크린샷을 첨부해주세요. 없으면 '없음'이라고 적어주세요. -->
+
+없음
+
+## 💬 리뷰 요청 사항
+
+<!-- 특별히 봐줬으면 하는 부분이 있다면 적어주세요. -->
+
+-
+
+## 기타
+
+-

.github/workflows/deploy.yaml

@@ -0,0 +1,32 @@
+name: Deploy
+
+on:
+  push:
+    branches: ["master"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    container: pandoc/latex
+
+    steps:
+      - uses: actions/checkout@v4
+      - 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: GirimNam
+          destination-repository-name: next-vote-23rd
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: master
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

.github/workflows/preview.yaml

@@ -0,0 +1,43 @@
+name: Preview
+
+on:
+  pull_request:
+    branches: ["master"]
+
+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,42 @@
+# 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
+.env*.local

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

README.md

@@ -1,91 +1,36 @@
-# next-vote-23rd
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-## **서론**
+## Getting Started
 
-안녕하세요! 프론트엔드 운영진 원채영입니다. 🍀
+First, run the development server:
 
-벌써 마지막 과제에 도달했네요. 이번 스터디의 마지막 과제는 특별히 **백엔드 팀원들과 함께하는 협업 과제**로 준비했습니다!
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-현대 웹 개발에서는 REST API 기반의 데이터 통신이 핵심이 되면서, 프론트엔드와 백엔드 간의 협업이 더욱 중요해지고 있습니다. 백엔드는 API를 통해 데이터를 제공하고, 프론트엔드는 이를 바탕으로 사용자 경험을 구현합니다. 따라서 API를 이해하고 활용하는 능력, 그리고 백엔드 개발자와 원활하게 소통하는 경험은 프론트엔드 개발자에게 꼭 필요한 역량입니다.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-이번 과제는 앞으로 진행될 팀 프로젝트에 앞서, 실제 협업 방식을 미리 경험해보는 연습 과정이라고 생각해주시면 좋을 것 같습니다. Next.js를 활용해 **투표 기능이 포함된 애플리케이션**을 제작하며, 백엔드와의 소통 방식, 역할 분담, 데이터 흐름 등을 직접 경험해보세요!
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-이번 과제를 통해 단순히 기능 구현을 넘어, 함께 서비스를 만들어가는 협업 경험까지 얻어가셨으면 좋겠습니다.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-여러분의 멋진 결과물을 기대하겠습니다. 마지막 과제까지 모두 화이팅입니다! 🔥
+## Learn More
 
----
+To learn more about Next.js, take a look at the following resources:
 
-## **과제**
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-### **목표**
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-- REST API를 활용하여 서버와의 통신 방식을 이해합니다.
-- JavaScript의 비동기 처리 방식(`async/await`, Promise)을 익힙니다.
-- API 문서를 바탕으로 백엔드와 소통하는 방법을 학습합니다.
-- 팀 내 협업을 통해 효율적인 역할 분담을 고민하고 적용합니다.
+## Deploy on Vercel
 
----
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-### **기한**
-
-- **2026년 5월 16일 토요일**까지 1차 필수 구현 사항이 적용된 중간 결과물을 제출해주세요.
-
----
-
-### **1차 필수 구현 사항**
-
-1. **프로젝트 세팅**
-    - Next.js의 특성을 고려하여 효과적인 폴더 구조를 고민해 봅니다.
-    - API 통신, 스타일링, 전역 상태 관리 및 기타 라이브러리 등을 팀원과 상의하여 세팅합니다.
-    - **Github organization을 사용합니다.**
-2. **퍼블리싱**
-    - 프로젝트에 필요한 모든 화면을 퍼블리싱합니다.
-    - 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형 디자인을 적용합니다.
-3. **로그인 기능**
-    - 사용자는 아이디와 비밀번호를 입력하여 로그인할 수 있습니다.
-    - 로그인 시 JWT를 통해 인증을 처리합니다.
-    - 아이디 또는 비밀번호가 틀렸을 경우, 에러 메시지를 표시합니다.
-    - 로그아웃 기능을 구현합니다.
-    - **백에서 서버 배포가 안 되었을 경우**에는 다음 주로 넘겨도 괜찮습니다.
-
-
-### **2차 필수 구현 사항**
-
-1. **투표 기능**
-    - 로그인한 사용자는 투표에 참여할 수 있습니다.
-    - 각 후보에 대한 투표 수를 실시간으로 확인할 수 있습니다.
-    - 사용자는 한 번만 투표할 수 있으며, 중복 투표를 방지합니다.
-2. **후보 목록 조회**
-    - 모든 사용자는 후보자의 목록과 상세 정보를 확인할 수 있습니다.
-    - 후보자의 이름, 사진, 소개 등을 표시합니다.
-3. **투표 결과 조회**
-    - 투표 종료 후, 모든 사용자는 최종 투표 결과를 확인할 수 있습니다.
-    - 각 후보자의 득표 수와 득표율을 시각적으로 표현합니다.
-4. **에러 처리**
-    - 서버 오류, 네트워크 문제 등 다양한 에러 상황에 대한 처리를 구현합니다.
-    - 사용자에게 이해하기 쉬운 에러 메시지를 제공합니다.
-
----
-
-### **디자인 참고**
-
-다음의 리소스를 참고해 UI/UX를 개선해보세요:
-
-- [디자인 레퍼런스1](https://www.figma.com/design/7xoPYTjMHcwPk2yl92Eynx/%ED%98%91%EB%8F%99%EA%B3%BC%EC%A0%9C-%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4?node-id=0-1&node-type=canvas)
-- [디자인 레퍼런스2](https://www.figma.com/design/XpKkyWcguIFY9QzWWJHOyL/%ED%98%91%EB%8F%99%EA%B3%BC%EC%A0%9C-%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4?node-id=0-1)
-- [디자인 레퍼런스3](https://www.figma.com/design/12WK4MEhjwNmt89HkRu8Gp/%EB%B0%94%EB%A6%AC%EB%B0%94%EB%A6%AC-%ED%88%AC%ED%91%9C)
-- [디자인 레퍼런스4](https://www.figma.com/design/qsTGeBRrKWiWE04eVOTFQ9/CEOS-CupfeeDeal-Vote?node-id=38-503&p=f&t=sM5p1Gw4hA5G5H5D-0)
-
-이전 기수 과제
-
-- [CupfeeDeal](https://github.com/CEOS-Developers/next-vote-20th/pull/6)
-- [하니홈](https://github.com/CEOS-Developers/next-vote-21th/pull/5)
-- [모앤디](https://github.com/CEOS-Developers/next-vote-22nd/pull/8)
-- [스토릭스](https://github.com/CEOS-Developers/next-vote-22nd/pull/11)
-
-### **선택 사항**
-
-- API 요청 방식은 자유롭게 선택 가능 (예: Fetch API, axios 등).
-- 최신 자바스크립트 스타일에 익숙해지기 위해 `Promise.then()` 대신 `async/await`를 사용해 보세요.
-- 페이지 접근 권한 관리와 로그인 상태 검증을 **proxy.ts**(구 middleware.ts)를 활용해 서버 단(Proxy)에서 미리 처리해 보세요! (참고자료: [Next.js proxy](https://nextjs.org/docs/app/getting-started/proxy))
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./next-vote-23rd/* ./output
+cp -R ./output ./next-vote-23rd/

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,32 @@
+{
+  "name": "next-vote-23rd",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "axios": "^1.18.0",
+    "next": "16.2.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-hook-form": "^7.75.0",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}