모임/식사용 팁 할인 계산기 제작

// MISSION BRIEF

■ 미션: 모임/식사용 팁 할인 계산기 제작 ■ 권장 플랫폼: Web (Next.js + Vercel) ■ 권장 스택: Next.js, TypeScript, Supabase ■ 필요 API: Anthropic API, Toss Payments API ■ 배포: Vercel [원본 요구사항] ## 🔥 베타 첫 미션 — 수수료 0% 한정 Code Battle 베타 운영의 첫 번째 미션입니다. 우승자에게 보상금 50,000원 전액 지급 (수수료 0%) 합니다. ## 미션 개요 친구들과 식사 후 매번 계산하기 귀찮은 "1인당 얼마?" 문제를 해결하는 모바일 친화적인 팁/할인 계산기를 만드는 미션입니다. 실생활에서 바로 쓸 수 있는 작은 도구를 만들면서, 모바일 UX 감각 + 프론트엔드 기본기를 보여주실 수 있는 미션입니다. ## 필수 요구사항 1. 총 금액 입력 (음식값 또는 결제 총액) 2. 팁 비율 선택 (5% / 10% / 15% / 20% 버튼 또는 직접 입력) 3. 할인 적용 (할인율 % 또는 할인 금액 직접 입력) 4. 인원수 입력 (1~20명 정도) 5. 자동 계산 결과 표시: - 팁 포함 총 금액 - 할인 후 최종 금액 - 1인당 부담 금액 (소수점 처리 / 반올림 옵션) 6. 초기화 버튼 ## 우대 사항 (가점 요소) - 모바일 반응형 디자인 (필수) - 큰 숫자 가독성 (식당에서 바로 보기 좋게) - 입력 시 실시간 계산 결과 표시 (= 버튼 없이도 동작) - 통화 표시 (₩ 또는 콤마 구분) - 다크 모드 / 사이버펑크 톤 (Code Battle 스타일 정합) - 키보드 입력 친화적 (모바일에서도 숫자 키패드 자동 노출) ## 제출물 다음 중 하나로 제출: - 단일 HTML 파일 (CSS + JS 인라인 포함) — 가장 간단 - GitHub 저장소 링크 — 코드 분리 시 - CodeSandbox / Vercel / Netlify 배포 링크 — 즉시 모바일 확인 가능 (강력 추천) ## 평가 기준 항목 비중 정확성 : (계산 결과 정확) - 25% 모바일 사용성 : (실제 모바일에서 바로 쓸 수 있는지) - 30% 디자인 완성도 : (UI 깔끔함 + 시각적 매력) - 25% 코드 품질 : (구조 + 가독성) - 20% ## 평가 방법 운영자가 다양한 케이스로 테스트: - 데스크톱 + 모바일 (iOS Safari, Android Chrome) 양쪽 확인 - 다양한 금액 / 팁 비율 / 할인 / 인원수 조합 - UI 가독성 + 입력 편의성 종합 판단 ## 베타 첫 미션 특별 혜택 🏆 베타 기여자 명예의 전당 1호 등재 💰 수수료 0% — 보상금 50,000원 전액 수령 🎁 정식 출시 시 영구 수수료 우대 약속 ## 베타 운영 안내 - 베타 기간 P2P 직접 송금 운영 - 우승작 채택 후 7일 이내 운영자가 직접 송금 - 우승 못 한 응모자도 코드 품질 점수로 명예의 전당 등재 가능 - AI 도구 사용 자유 (Claude / Cursor / Copilot 등) — 단, 실제 작동하는 결과물 필수

// REQUIREMENTS

## 🔥 베타 첫 미션 — 수수료 0% 한정

Code Battle 베타 운영의 첫 번째 미션입니다.
우승자에게 보상금 50,000원 전액 지급 (수수료 0%) 합니다.

## 미션 개요

친구들과 식사 후 매번 계산하기 귀찮은 "1인당 얼마?" 문제를 해결하는 
모바일 친화적인 팁/할인 계산기를 만드는 미션입니다.

실생활에서 바로 쓸 수 있는 작은 도구를 만들면서, 
모바일 UX 감각 + 프론트엔드 기본기를 보여주실 수 있는 미션입니다.

## 필수 요구사항

1. 총 금액 입력 (음식값 또는 결제 총액)
2. 팁 비율 선택 (5% / 10% / 15% / 20% 버튼 또는 직접 입력)
3. 할인 적용 (할인율 % 또는 할인 금액 직접 입력)
4. 인원수 입력 (1~20명 정도)
5. 자동 계산 결과 표시:
   - 팁 포함 총 금액
   - 할인 후 최종 금액
   - 1인당 부담 금액 (소수점 처리 / 반올림 옵션)
6. 초기화 버튼

## 우대 사항 (가점 요소)

- 모바일 반응형 디자인 (필수)
- 큰 숫자 가독성 (식당에서 바로 보기 좋게)
- 입력 시 실시간 계산 결과 표시 (= 버튼 없이도 동작)
- 통화 표시 (₩ 또는 콤마 구분)
- 다크 모드 / 사이버펑크 톤 (Code Battle 스타일 정합)
- 키보드 입력 친화적 (모바일에서도 숫자 키패드 자동 노출)

## 제출물

다음 중 하나로 제출:
- 단일 HTML 파일 (CSS + JS 인라인 포함) — 가장 간단
- GitHub 저장소 링크 — 코드 분리 시
- CodeSandbox / Vercel / Netlify 배포 링크 — 즉시 모바일 확인 가능 (강력 추천)

## 평가 기준

 항목  비중 

 정확성 : (계산 결과 정확) - 25% 
 모바일 사용성 : (실제 모바일에서 바로 쓸 수 있는지) - 30% 
 디자인 완성도 : (UI 깔끔함 + 시각적 매력) -  25% 
 코드 품질 : (구조 + 가독성) - 20%

## 평가 방법

운영자가 다양한 케이스로 테스트:
- 데스크톱 + 모바일 (iOS Safari, Android Chrome) 양쪽 확인
- 다양한 금액 / 팁 비율 / 할인 / 인원수 조합
- UI 가독성 + 입력 편의성 종합 판단

## 베타 첫 미션 특별 혜택

🏆 베타 기여자 명예의 전당 1호 등재
💰 수수료 0% — 보상금 50,000원 전액 수령
🎁 정식 출시 시 영구 수수료 우대 약속

## 베타 운영 안내

- 베타 기간 P2P 직접 송금 운영
- 우승작 채택 후 7일 이내 운영자가 직접 송금
- 우승 못 한 응모자도 코드 품질 점수로 명예의 전당 등재 가능
- AI 도구 사용 자유 (Claude / Cursor / Copilot 등) — 단, 실제 작동하는 결과물 필수

// SCORING (PRE-DISCLOSED)

// SUBMISSION FORMAT

• · GitHub repo URL (필수)
• · 배포 URL (필수, 실제로 동작해야 함)
• · 동작 영상 링크 또는 업로드 (선택)
• · README 링크 (선택)
• · AI 사용 여부 + 사용 도구 명시

마감 전까지 제출물 1회 수정 가능. 마감 후에는 잠긴다.