[7주차] Team 커피딜 송유선 & 최지원 미션 제출합니다.

.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,85 +1,29 @@
-# next-vote-20th
+# 7주차 미션: Next-Vote
 
-## **서론**
+## [🪄 결과물](https://next-vote-20th.vercel.app)
 
-안녕하세요! 프론트엔드 운영진 김동혁입니다 👾  
-벌써 마지막 스터디에 도달했네요. 이번 스터디는 특별히 **백엔드 팀원들과 함께하는 협업 과제**로 준비했습니다.
+### 🩵 구현 기능
 
-현대 웹 개발에서는 REST API가 데이터 통신의 핵심으로 자리 잡으면서, 프론트엔드와 백엔드 간의 협업이 더욱 중요해졌습니다. 백엔드는 API를 통해 데이터를 제공하고, 프론트엔드는 이를 기반으로 사용자 경험을 책임집니다. 따라서 API를 잘 활용하고 백엔드 개발자와 원활히 소통하는 능력은 필수적인 스킬입니다.
+- 로그인 및 회원가입
 
-이번 과제는 앞으로 팀 프로젝트에서 **실제로 백엔드와 협업하기 전 연습을 해보는 기회**입니다. Next.js를 활용해 **투표 기능**을 가진 애플리케이션을 제작하면서 백엔드와의 소통, 역할 분담, 데이터 흐름을 다루는 경험을 쌓아 보세요. 이 경험은 추후 팀 프로젝트에서 더욱 원활한 협력을 가능하게 할 것입니다.  
+- 투표 및 결과 조회
 
-여러분의 멋진 결과물을 기대하며 마지막 과제를 응원합니다. 화이팅! 🔥
+- CEOS 부원 정보 및 만든이들 정보 안내
 
----
+- 반응형 디자인
 
-## **미션**
+- 에러 처리
 
-### **목표**
+### [🎨 디자인](https://www.figma.com/design/qsTGeBRrKWiWE04eVOTFQ9/CEOS-CupfeeDeal-Vote?node-id=38-503&t=1IXMEXa9t61ycDOq-1)
 
-- REST API를 활용하여 서버와의 통신 방식을 이해합니다.
-- JavaScript의 비동기 처리 방식(`async/await`, Promise)을 익힙니다.
-- API 문서를 바탕으로 백엔드와 소통하는 방법을 학습합니다.
-- 팀 내 협업을 통해 효율적인 역할 분담을 고민하고 적용합니다.
+<br/>
 
----
+### 🩵 느낀 점
 
-### **기한**
+**[송유선]** 첫 번째 과제를 하면서 애를 먹던 게 엊그제 같은데, 벌써 마지막 과제를 끝내게 되어 감회가 새롭다. 지난번 넷플릭스 과제 때 Next.js를 처음 접하면서 어느 정도 파악했다고 생각했는데, 이번에는 너무 많은 오류를 접하게 되어 당황스러웠다. 지난번에는 디자인도 간단했고, Open API를 사용하면서 고려할 사항도 많지 않았기 때문에 최대한 서버 컴포넌트를 활용해 코드를 잘 짰었다. 그러나 이번에는 조금만 복잡해지니까 익숙한 방식대로 코드를 쓰게 되었고, use client를 상당히 많은 페이지에 사용하면서 진행하게 되었다. 그 과정에서 hydration error가 너무 많이 발생했는데, 이를 하나씩 해결해 가면서 SSR과 CSR의 차이를 다시금 공부할 수 있었다. 그렇지만 지금 작성한 코드가 최선이라고는 생각되지 않아서, 더 공부해야겠다는 다짐을 하게 되었다. 그리고 이번 과제에서 우리 팀 백엔드 친구들과 처음으로 같이 작업했는데, 본격적인 프로젝트에 들어가기 전에 서로의 협업 스타일을 맞춰볼 수 있는 소중한 기회였던 것 같다. (새벽에도 연락이 정말말 잘 되는 우리 팀... 👍🏻) 아 그리고 이번 과제는 디자인을 스스로 해야 했기 때문에 급하게 피그마로 하루 만에 만들었는데, 대충 만든 탓에 레이아웃이 정확히 맞지 않거나 컴포넌트화가 제대로 되지 않은 부분이 많아서 개발할 때 애를 좀 먹었다...^^ 정말.. 디자인 파트의 중요성을 다시금 느꼈다. 그래도 이번 경험을 통해 개발이 수월해지도록 디자인을 구성하는 요령을 조금이나마 익힐 수 있었던 것 같다. + 그리고... 한 학기동안 함께 해준 20기 프론트, 운영진 분들 모두 감사했습니다🥹 덕분에 많이 배웠어요🫶🏻<br>
 
-- **2024년 1월 4일 토요일**까지 제출해주세요.(24.12.22 수정. 혼란드려서 죄송합니다) 
+<br/>
 
----
+**[최지원]** 우선 next js를 저번에 이어 두 번째 써보는데 아직도 적응이 안되었고 공부가 많이 필요함을 느낀 과제였습니다. 거의 대부분의 에러 해결을 page 단위에서의 use client 사용으로 해결한 점이 아쉬웠습니다. 배포 때는 생각보다 훨씬 사소하게도 에러가 많이 나서 예를 들면 쓰이지 않은 변수가 있다는 것만으로도 배포가 실패하는 것이 당황스럽기도 했지만 그만큼 이유있는 코드만을 쓰는 습관을 들일 수도 있겠다는 생각이 들었습니다. 디자인은 유선언니가 맡아 해주었는데, 너무 예쁘고 감각적으로 해주어서 넘 고마웠구, 덕분에 퍼블리싱이 즐거웠습니다 ㅎ.ㅎ 커피딜 개발에 앞서 백엔드와도 소통해보면서 api에 대해 서로 다르게 생각하고 있던 부분이 있거나, 프론트 입장에서 잘 모르던 스웨거에 대해 백 팀원들이 친절하게 설명해주는 등 소통이 원활히 이루어져서 힘들지 않았습니다. 새벽에도 5분 안에 연락 보는 서아언니 가현이 짱.. 어느덧 마지막 과제라는게 믿기지 않을 정도로 스터디 과제하느라 한 학기가 너무 빨리 흘러간 것 같습니다,, 다른 부원 분들의 과제를 보고 코드리뷰도 하면서 많이 배울 수 있었습니당 모두 수고많으셨습니다🧙💙
 
-### **필수 구현 사항**
-
-1. **로그인 기능**
-   - 사용자는 아이디와 비밀번호를 입력하여 로그인할 수 있습니다.
-   - 로그인 시 JWT를 통해 인증을 처리합니다.
-   - 아이디 또는 비밀번호가 틀렸을 경우, 에러 메시지를 표시합니다.
-   - 로그아웃 기능을 구현합니다.
-
-2. **투표 기능**
-   - 로그인한 사용자는 투표에 참여할 수 있습니다.
-   - 각 후보에 대한 투표 수를 실시간으로 확인할 수 있습니다.
-   - 사용자는 한 번만 투표할 수 있으며, 중복 투표를 방지합니다.
-
-3. **후보 목록 조회**
-   - 모든 사용자는 후보자의 목록과 상세 정보를 확인할 수 있습니다.
-   - 후보자의 이름, 사진, 소개 등을 표시합니다.
-
-4. **투표 결과 조회**
-   - 투표 종료 후, 모든 사용자는 최종 투표 결과를 확인할 수 있습니다.
-   - 각 후보자의 득표 수와 득표율을 시각적으로 표현합니다.
-
-5. **반응형 디자인**
-   - 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형 디자인을 적용합니다.
-
-6. **에러 처리**
-   - 서버 오류, 네트워크 문제 등 다양한 에러 상황에 대한 처리를 구현합니다.
-   - 사용자에게 이해하기 쉬운 에러 메시지를 제공합니다.
-
----
-
-### **디자인 참고**
-
-다음의 리소스를 참고해 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)
-
-19기 과제
-- [비트버디](https://github.com/CEOS-Developers/react-vote-19th/pull/4)
-- [TIG](https://github.com/CEOS-Developers/react-vote-19th/pull/6)
-- [펫플레이트](https://github.com/CEOS-Developers/react-vote-19th/pull/7)
-
-
-### **선택 사항**
-
-- API 요청 방식은 자유롭게 선택 가능 (예: Fetch API, axios 등).
-- 최신 자바스크립트 스타일에 익숙해지기 위해 `Promise.then()` 대신 `async/await`를 사용해 보세요.
-
----
-
-## **마무리**
-
-이번 과제는 단순히 기능 구현에 그치는 것이 아니라, **백엔드와의 협업 과정에 익숙해지고 실전 준비를
+<br/>

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;