<aside> <img src="/icons/megaphone_gray.svg" alt="/icons/megaphone_gray.svg" width="40px" />
공지사항을 이 부분에 작성해보세요!
피그마 링크 : https://www.figma.com/design/Fxb0RcgjKCW4lkIMB9Ghou/제목-없음?node-id=0-1&t=rCZ62DoMC68eFRnL-1
피그마 한영 글꼴 : 갈무리11 | 눈누 - 상업용 무료 한글 폰트
</aside>
팀장 유채영
팀원 강보민, 강성훈, 홍연우, 서영은
# 💚 25기 4주차 팀 과제 PR – 숫자 카드 게임 💚
---
## ✅ 과제 개요
- **과제명:** 피로그래머 숫자 카드 게임
- **기술스택:** Django, HTML/CSS/JS, docker
- **요구사항:** 게임 기능 구현, 도커 이미지 배포 및 컴포즈 구현
- **노션링크:** <https://app.notion.com/p/2-PIROGAME-3a3b1e86a9e48092bec4d8b58ac2530d?source=copy_link>
- **도커이미지배포:** <https://hub.docker.com/r/kangbomin/piro25-cardgame-2>
---
## 👥 팀원 및 역할 분담
| 이름 | 담당 기능 |
| --- | --- |
| 홍연우 | ex. 로그인 전/후 페이지, 회원가입, 일반 로그인, Google/Kakao/Naver 소셜 로그인(OAuth) |
| 유채영 | ex. 게임 시작 페이지, 숫자 카드 5장 랜덤 생성, 공격 대상 유저 선택, 공격 생성 API |
| 서영은 | ex. 게임 리스트 페이지, 진행중/반격대기/종료 상태 분기, 게임 취소 기능 |
| 강성훈 | ex. 게임 상세 페이지, 반격 페이지, 카드 선택 후 승패 판정 및 점수 반영, 게임 결과 확정 |
| 강보민 | ex. 랭킹 페이지, 유저 누적 점수 정렬, 폴더 뼈대 생성, 배포 |
✅ **모든 팀원이 직접 커밋 및 구현에 참여하였습니다.**
---
## 🔧 구현 기능 체크리스트
| 기능 | 구현 여부 | 담당자 | 설명 |
| --- | --- | --- | --- |
| 로그인/회원가입 | ✅ | (필수)소셜 로그인, (선택)일반 로그인 |
| 숫자 카드 생성 및 공격 | ✅ | 랜덤 카드 5개 중 1개 선택 + 공격 대상 지정 |
| 반격 기능 구현 | ✅ | 카드 선택 → 즉시 결과 반영 |
| 점수 계산 및 저장 | ✅ | 승/패/무 처리, 점수 증감 |
| 게임 리스트 페이지 | ✅ | 상태별 게임 분기: 진행중 / 반격대기 / 종료 |
| 게임 상세 페이지 | ✅ | 카드, 결과, 버튼 상태 표시 |
| 게임 취소 기능 | ✅ | 반격 전 본인 공격 게임만 삭제 가능 |
| 랭킹 페이지 | ✅ | 유저별 누적 점수 정렬 및 표시 |
| 프론트엔드 완성 | ✅ | HTML/CSS 스타일링, 버튼 UI 등 |
| 도커 이미지 배포 | ✅ | 배포한 도커 허브 링크 등 |
| 도커 컴포즈 구현 | ✅ | |
---
## 🔗 협업 도구 사용 내역
| 도구 | 사용 여부 | 링크 또는 설명 |
| --- | --- | --- |
| 노션 | ✅ | <https://app.notion.com/p/4-2-cb3b1e86a9e4824f9b9681f5e62e1c2c> |
| (챌린지)피그마 | ✅ | <https://www.figma.com/design/Fxb0RcgjKCW4lkIMB9Ghou/%ED%94%BC%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-4%EC%A3%BC%EC%B0%A8-2%EC%A1%B0?node-id=20-2&t=DNHhylYAT43WzG0m-1> |
| (챌린지)기타 도구 | ❌ | [선택 사항] |
| (챌린지)추가 기능 구현 | ✅ | 유저별 아바타 생성 기능 구현 |
---
## 🧠 어려웠던 점 / 고민한 부분(선택)
- 공통된 UI 톤을 유지하는 것도 고민한 부분이었습니다. 페이지마다 담당자가 달라 화면이 따로 노는 느낌이 생길 수 있어서, 픽셀 아트 배경과 버튼 스타일, 네비게이션 위치, 색감 등을 최대한 통일하려고 했습니다.
- Redirect URI 불일치로 인한 카카오 로그인 에러, 포트 충돌 등 배포 환경 특유의 이슈들을 하나씩 원인 파악하며 해결한 것이 가장 고민했던 부분이었습니다.