[8주차] Team DiggIndie 백승선 & 조성아 과제 제출합니다.

.github/ISSUE_TEMPLATE/커스텀-이슈-템플릿.md

@@ -0,0 +1,32 @@
+---
+name: 커스텀 이슈 템플
+about: 해당 이슈 생성 템플릿을 사용하여 이슈를 생성해주세요.
+title: "[♻️ refactor /✨ feat /\U0001F41B bug /\U0001F527 fix] 이슈 제목"
+labels: ''
+assignees: ''
+
+---
+
+---
+name: 이슈 생성 템플릿
+about: 해당 이슈 생성 템플릿을 사용하여 이슈를 생성해주세요.
+title: "[♻️ refactor /✨ feat /🐛 bug /🔧 fix]
+  이슈 제목"
+labels: ''
+assignees: ''
+
+---
+
+📌 이슈 내용
+------------
+이슈를 설명해주세요.
+
+
+📝 작업 내용
+------------
+- [ ] 작업 1
+- [ ] 작업 2
+
+
+✨ 참고 사항
+------------

.github/pull_request_template.md

@@ -0,0 +1,31 @@
+# PR 템플릿
+### 체크리스트!
+- [ ] ✅ base가 dev가 맞나요?
+- [ ] 🔀 PR 제목의 형식을 잘 작성했나요?
+- [ ] 🧹 불필요한 코드는 제거했나요?
+- [ ] 💭 이슈는 등록했나요?
+- [ ] 🏷️ 라벨은 등록했나요?
+
+
+### 작업 내역
+<!-- 어떻게 문제를 해결하였는지 -->
+
+
+
+
+### 피드백을 받고 싶은 부분 
+<!-- 작업 후 기대 동작(스크린샷) -->
+
+
+
+
+### PR 특이 사항
+<!-- 어떤 부분에 리뷰어가 집중하면 좋을까요? -->
+
+
+
+
+### 특이 사항 :
+Issue Number:  자신이 개발 전에 올린 이슈번호
+
+#### close:  자신이 개발 전에 올린 이슈번호

.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

.prettierrc

@@ -0,0 +1,12 @@
+{
+
+"arrowParens": "always",
+"bracketSpacing": true,
+"endOfLine": "lf",
+"printWidth": 120,
+"semi": true,
+"singleQuote": true,
+"tabWidth": 2,
+"trailingComma": "all",
+"useTabs": false
+}

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -1,92 +1,16 @@
-# next-vote-22nd
+# Team DiggIndie
 
-## **서론**
+## 팀원
 
-안녕하세요! 프론트엔드 운영진 권동욱입니다. 🍀  
-벌써 마지막 과제에 도달했네요. 이번 스터디는 특별히 **백엔드 팀원들과 함께하는 협업 과제**로 준비했습니다.
+- **Front-end**
+  - 백승선
+  - 조성아
 
-현대 웹 개발에서는 REST API가 데이터 통신의 핵심으로 자리 잡으면서, 프론트엔드와 백엔드 간의 협업이 더욱 중요해졌습니다. 백엔드는 API를 통해 데이터를 제공하고, 프론트엔드는 이를 기반으로 사용자 경험을 책임집니다. 따라서 API를 잘 활용하고 백엔드 개발자와 원활히 소통하는 능력은 필수적인 스킬입니다.
+## 프로젝트 소개
 
-이번 과제는 앞으로 팀 프로젝트에서 **실제로 백엔드와 협업하기 전 연습을 해보는 기회**입니다. Next.js를 활용해 **투표 기능**을 가진 애플리케이션을 제작하면서 백엔드와의 소통, 역할 분담, 데이터 흐름을 다루는 경험을 쌓아 보세요. 이 경험은 추후 팀 프로젝트에서 더욱 원활한 협력을 가능하게 할 것입니다.
+- 투표 시스템 개발
+- 백엔드/프론트엔드 협업 프로젝트
 
-여러분의 멋진 결과물을 기대하며 마지막 과제를 응원합니다. 화이팅! 🔥
+## 디자인 시안
 
----
-
-## **과제**
-
-### **목표**
-
-- REST API를 활용하여 서버와의 통신 방식을 이해합니다.
-- JavaScript의 비동기 처리 방식(`async/await`, Promise)을 익힙니다.
-- API 문서를 바탕으로 백엔드와 소통하는 방법을 학습합니다.
-- 팀 내 협업을 통해 효율적인 역할 분담을 고민하고 적용합니다.
-
----
-
-### **기한**
-
-- **2025년 12월 20일 토요일**까지 2차 필수 구현 사항까지 전부 적용된 최종 결과물을 제출해주세요.
-
----
-
-### **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)
-
-20기 과제
-- [CupfeeDeal](https://github.com/CEOS-Developers/next-vote-20th/pull/6)
-- [케이크WAY](https://github.com/CEOS-Developers/next-vote-20th/pull/5)
-- [페달지니](https://github.com/CEOS-Developers/next-vote-20th/pull/2)
-
-21기 과제
-- [프로메사](https://github.com/CEOS-Developers/next-vote-21th/pull/3)
-- [하니홈](https://github.com/CEOS-Developers/next-vote-21th/pull/5)
-
-### **선택 사항**
-
-- API 요청 방식은 자유롭게 선택 가능 (예: Fetch API, axios 등).
-- 최신 자바스크립트 스타일에 익숙해지기 위해 `Promise.then()` 대신 `async/await`를 사용해 보세요.
+[디자인 시안](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=4-201&t=lChN9ofzhVOO7A64-0)

api/client.ts

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { useAuth } from '@/auth/authStore';
+
+const API_BASE = process.env.NEXT_PUBLIC_BASE_URL;
+
+// 인증 필요 없는 API
+export const apiPublic = axios.create({
+  baseURL: API_BASE,
+  withCredentials: true, // refresh token 쿠키 전송
+});
+
+// 인증 필요한 API
+export const apiPrivate = axios.create({
+  baseURL: API_BASE,
+  withCredentials: true,
+});
+
+// 요청 인터셉터: 토큰 자동 부착
+apiPrivate.interceptors.request.use((config) => {
+  const token = useAuth.getState().getToken();
+  if (token) {
+    config.headers = config.headers ?? {};
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// 응답 인터셉터: 401 → 로그아웃 유도 (필요 시 확장: 리프레시 등)
+apiPrivate.interceptors.response.use(
+  (res) => res,
+  (err) => {
+    if (err?.response?.status === 401) {
+      useAuth.getState().logout();
+      // 여기서 라우터 접근이 어려우므로, 화면에서는 isAuthed false로 자연스런 리다이렉트 유도
+    }
+    return Promise.reject(err);
+  },
+);