Skip to content

TODO.md

Latest commit

 

History

History
170 lines (134 loc) · 12.4 KB

TODO.md

File metadata and controls

170 lines (134 loc) · 12.4 KB
Raw

할 일 목록 (위에서부터 순서대로)

한 번에 하나씩 하세요. 끝나면 [ ]를 [x]로 바꾸고 커밋합니다. 작업 전에 반드시 CLAUDE.md를 읽으세요. AI에게도 "CLAUDE.md를 먼저 읽고 시작해"라고 시키세요. 각 항목의 AI에게는 그대로 복사해서 시작하면 되는 첫 지시문입니다.

난이도: ⭐ 쉬움 · ⭐⭐ 보통 · ⭐⭐⭐ 어려움 · ⭐⭐⭐⭐ 매우 어려움

0단계. 시작하기 (먼저 한 번만)

  • 0-1. 프로젝트 실행해 보기
    • 저장소를 받고 npm install → npm run dev → http://localhost:3000 에서 샘플 데이터로 차트를 하나 만들어 봅니다.
    • 완료 기준: 홈 → 스튜디오 → 샘플 데이터 → 막대 차트 → 편집 화면까지 가 봄.
  • 0-2. 코드 구경하기
    • AI에게: "이 프로젝트의 폴더 구조와 사용자 흐름(업로드 → 차트 선택 → 편집)을 초보자가 이해하도록 설명해 줘. 코드는 바꾸지 마."
    • components/charts/bar-chart.tsx를 열어서 차트 하나가 어떻게 생겼는지 봅니다.
  • 0-3. 차트 미리보기 구경하기: 홈의 "지원하는 차트"와 /studio 3단계에서 차트 카드에 마우스를 올려 봅니다. 이 그림은 빌드 때 그려 두는 것입니다(CLAUDE.md의 "차트 미리보기" 참고).
  • 0-4. 브랜치 만들기: develop에서 feat/오늘날짜 브랜치를 만듭니다.

1단계. 연습 겸 작은 일 (익숙해지기)

  • 1-1. 도넛 차트 추가 ⭐
    • 원형 차트에서 가운데가 뚫린 차트. 새 차트를 만드는 전체 과정을 연습하기 좋습니다.
    • 건드릴 파일: components/charts/donut-chart.tsx(새로), components/charts/registry.ts. (pie-chart.tsx를 복사해서 시작)
    • 주의: type은 '도넛 차트' (lib/chart-catalog.ts와 똑같이). 원형 차트의 항목별 색 기능(supports.sliceColors)을 그대로 씁니다.
    • 완료 기준: 홈 차트 목록에서 도넛이 "이용 가능"이 되고, 편집 화면에서 색·범례·여백이 동작한다. 샘플 데이터(lib/sample-data.ts의 "도넛 차트")는 이미 있으니, 차트를 등록하면 마우스를 올렸을 때 미리보기가 자동으로 나오는지 확인한다.
    • AI에게: "components/charts/README.md를 읽고, pie-chart.tsx를 바탕으로 도넛 차트를 추가해 줘. 먼저 계획만 알려줘."
  • 1-2. 면적 차트 추가 ⭐
    • 선 차트와 거의 같고, 선 아래를 색으로 채웁니다. line-chart.tsx를 복사해서 시작.
    • 완료 기준: '면적 차트'가 목록에 "이용 가능"으로 뜨고 편집 화면에서 동작.
  • 1-3. 폭포 차트 추가 ⭐⭐
    • 값이 위아래로 누적되며 증감을 보여주는 막대. bar-chart.tsx에서 막대의 시작 높이를 누적값으로 바꾸면 됩니다.
    • 완료 기준: 양수는 한 색, 음수는 다른 색으로 이어지는 막대가 그려진다.
  • 1-4. 사업자 정보 채우기 (코드 거의 없음)
    • 팀장에게 실제 값을 받아 lib/company.ts에 채웁니다. 푸터에 자동으로 나옵니다. 빈 값은 숨겨집니다.
  • 1-5. 이용약관·개인정보처리방침 본문 넣기
    • 본문 확정본을 받아 app/terms/page.tsx, app/privacy/page.tsx의 안내 문구를 교체합니다.

2단계. 여러 값 열 지원 (차트 확장의 열쇠)

지금 차트는 항목 열 1개 + 값 열 1개만 씁니다. 아래 차트들은 값 열이 여러 개 필요해서, 이걸 먼저 확장해야 합니다.

  • 2-1. 값 열을 여러 개 고를 수 있게 만들기 ⭐⭐⭐
    • 해야 할 것: ChartSpec에 여러 값 열(valueCols)을 추가(기존 valueCol을 쓰던 저장 데이터가 깨지지 않게 변환), lib/chart-data.ts가 여러 계열을 돌려주게 하고, 옵션 패널에서 열을 여러 개 고르게 하고, 범례·색이 계열별로 나오게 합니다.
    • 건드릴 파일: lib/chart-spec.ts, lib/chart-data.ts, components/chart-options-panel.tsx, components/charts/frame.tsx(범례), components/charts/types.ts.
    • 주의: 기존 막대·선·원형 차트가 그대로 동작해야 합니다(값 열 1개일 때 지금과 똑같이). 큰 작업이라 계획을 먼저 받고 팀장에게 보여 주세요.
    • 완료 기준: 값 열 1개일 땐 지금과 완전히 같고, 여러 개를 고르면 supports.multiSeries를 켠 차트에서만 보인다.
    • AI에게: "차트에 여러 값 열(계열)을 지원하게 만들고 싶어. 기존 저장 데이터와 막대·선·원형이 깨지지 않게 하는 방법을 포함해서 먼저 계획만 세워 줘."
  • 2-2. 그룹 막대 차트 ⭐⭐ (2-1 필요)
  • 2-3. 누적 막대 차트 ⭐⭐ (2-1 필요)
  • 2-4. 100% 누적 막대 차트 ⭐⭐ (2-3 이후)
  • 2-5. 누적 면적 차트 ⭐⭐ (2-1, 1-2 필요)
  • 2-6. 선 차트에 여러 선 지원 ⭐⭐ (2-1 필요, 기존 차트 개선)

3단계. 나머지 차트

모두 "차트 추가하는 법"(CLAUDE.md)대로 합니다. 쉬운 것부터. 한 차트가 끝날 때마다 커밋.

비교

  • 3-1. 레이더 차트 ⭐⭐⭐ (값 열 여러 개 필요)
  • 3-2. 파레토 차트 ⭐⭐ (막대 + 누적 비율 선, 막대는 큰 순서)
  • 3-3. 오차 막대 차트 ⭐⭐ (평균 + 오차 열 2개)

관계

  • 3-4. 산점도 ⭐⭐ (x, y 숫자 열 2개)
  • 3-5. 버블 차트 ⭐⭐ (산점도 + 크기 열) — 3-4 이후
  • 3-6. 히트맵 ⭐⭐⭐
  • 3-7. 상관 행렬 그래프 ⭐⭐⭐ (히트맵 + 상관계수 계산) — 3-6 이후

분포

  • 3-8. 히스토그램 ⭐⭐ (값을 구간으로 나눠 개수 세기)
  • 3-9. 스트립 플롯 ⭐⭐
  • 3-10. 박스 플롯 ⭐⭐⭐ (사분위수 계산)
  • 3-11. 밀도 그래프 ⭐⭐⭐
  • 3-12. 바이올린 플롯 ⭐⭐⭐ (밀도 + 박스) — 3-10, 3-11 이후

구성

  • 3-13. 트리맵 ⭐⭐⭐
  • 3-14. 선버스트 차트 ⭐⭐⭐ (계층 데이터)

흐름·일정

  • 3-15. 생키 다이어그램 ⭐⭐⭐⭐
  • 3-16. 간트 차트 ⭐⭐⭐ (시작·종료 날짜 열)

가장 큰 것 (마지막에)

  • 3-17. 세계 지도 단계구분도 ⭐⭐⭐⭐ (지도 데이터 필요, 라이브러리 추가가 필요할 수 있으니 팀장과 먼저 상의)
  • 3-18. 바 차트 레이스 ⭐⭐⭐⭐ (시간 애니메이션, 영상·GIF 내보내기는 별도 과제)

차트 하나를 끝낼 때 체크:

  • 홈 목록과 /studio에서 마우스를 올리면 미리보기가 자동으로 나온다 (lib/sample-data.ts에 이 차트의 샘플이 이미 있다. 차트가 원하는 표 모양이 샘플과 다르면 그 항목을 고친다)
  • 편집 화면에서 제목·색·배경·여백·글꼴이 동작한다
  • 마이페이지 썸네일에 잘 나온다
  • JPG/PNG/TIFF로 내려받아도 모양이 같다
  • 다크 모드, 모바일 폭에서 깨지지 않는다
  • npm run lint, npm run build 통과

4단계. 기능 개선 (결정이 난 것부터)

  • 4-0. 차트 미리보기 개선 ⭐⭐ (선택)

    • 지금은 샘플 데이터로 빌드 때 그린 예시를 보여줍니다. 차트가 28종이 되어 페이지가 무거워지면(미리보기 데이터가 페이지에 같이 실려요) 차트별로 나눠서 필요할 때만 불러오는 방식을 검토하세요.
    • 완료 기준: 홈과 /studio의 첫 로딩 데이터가 눈에 띄게 커지지 않는다.

  • 4-1. 마이페이지에서 "새 차트 만들기" 흐름 바꾸기 ⭐⭐

    • 지금은 업로드 화면으로 가서 데이터셋을 바꿀 수 있는 문제가 있습니다.
    • 목표: 마이페이지 "새 차트 만들기" → 차트 유형만 고르는 모달 → 바로 /studio/loading → 편집. 폴더는 그대로 유지.
    • 건드릴 파일: app/mypage/page.tsx, components/(모달 새로), lib/workspace.ts.
    • 완료 기준: 새 차트가 항상 그 폴더 아래에 저장된다. 마이페이지에 "새 데이터셋 올리기"(기존 /studio 흐름)도 따로 있다.

  • 4-2. 데이터셋 수정 시 저장 정책 ⭐⭐⭐ (팀 투표 결과 확정 후)

    • 같은 폴더에 다른 차트가 있는데 데이터를 바꿔서 저장하면 → "모든 차트에 반영 / 새 데이터셋으로 따로 저장" 모달. 다른 차트가 없으면 그냥 저장. 데이터 수정이 걸려 있는 동안엔 자동 저장 건너뜀.
    • 건드릴 파일: app/studio/editor/page.tsx(performSave), lib/saved.ts.
    • 투표 결과가 다르면(항상 반영/항상 분리) 그에 맞게 단순화.

  • 4-3. 같은 항목 묶기(집계) 옵션 ⭐⭐⭐ (필요하다고 결정되면)

    • 개인별 원본 데이터(성별 10,000행 같은)를 올리면 행마다 조각이 생깁니다. "같은 항목 묶기: 합계/평균/개수" 옵션을 추가.
    • 건드릴 파일: lib/chart-spec.ts, lib/chart-data.ts, components/chart-options-panel.tsx.

  • 4-4. 데이터셋 표(DataGrid) 큰 파일 성능 확인 ⭐⭐

    • 3,000행 이상 CSV로 데이터셋 탭이 느리면 20행씩 페이지로 나눕니다(행 선택 목록 RowPicker와 같은 방식).

  • 4-5. 글꼴 목록 확정판 적용 ⭐ — PO가 정한 약 10개로 lib/chart-fonts.ts의 목록만 교체.

  • 4-6. 회원 용량 수치 확정 ⭐ — 확정되면 lib/limits.ts(업로드 5/10MB, 저장 30MB)만 수정. 홈 표와 마이페이지에 자동 반영.

  • 4-7. 브라우저 저장소 정책 확정 ⭐ — 지금 값(소셜 진행 정보 10분, 로그인 30일, 저장 데이터 90일)을 팀이 확정하면 lib/storage-cleanup.ts의 RETENTION만 수정. 마이페이지 안내 문구는 자동으로 따라갑니다.

  • 4-8. 샘플 데이터 다듬기 ⭐ — lib/sample-data.ts의 예시 숫자·이름을 서비스 느낌에 맞게 바꿉니다(표 15개만 고치면 되고, 같은 표를 쓰는 차트의 미리보기에 모두 바로 반영). 차트를 만들면서 표 모양이 달라지면 해당 항목과 lib/data-guide.ts의 CHART_NEEDS를 함께 맞춥니다.

5단계. 직접 확인해야 하는 것 (AI가 못 하는 것)

  • 5-1. 갤럭시 폰에서 파일 업로드: 파일 선택 창이 카메라/사진이 아니라 파일 목록으로 열리는지.
  • 5-2. 소셜 로그인 팝업: 실제 브라우저에서 팝업이 열리고 닫힌 뒤 로그인되는지(가짜 제공사 화면으로 확인 가능).
  • 5-3. 모바일 실기기: 편집 화면, 마이페이지, 메뉴(≡) 확인.

6단계. 백엔드 연결 (백엔드 API가 나온 뒤)

명세는 백엔드 팀에 전달한 문서(소셜 로그인 API, 저장 API)를 기준으로 합니다.

  • 6-1. 환경 설정: .env.local에 NEXT_PUBLIC_API_BASE를 넣으면 가짜 서버 대신 실제 API를 부릅니다(.env.example 참고).
  • 6-2. 소셜 로그인 키 연결: 카카오/구글/네이버 콘솔에서 클라이언트 ID를 받아 NEXT_PUBLIC_*_CLIENT_ID에 넣고, 콜백 주소 https://도메인/auth/callback/{provider}를 콘솔에 등록. (client secret은 백엔드만)
  • 6-3. 세션 복원: 앱이 열릴 때 GET /me로 로그인 상태를 확인하도록 lib/auth.ts를 바꿉니다.
  • 6-4. 로그아웃·가입 API 연결: POST /auth/logout, 이메일 가입·인증코드·로그인 API(lib/email-verification.ts, components/auth-form.tsx).
  • 6-5. 저장 API 연결: lib/saved.ts의 저장·불러오기·삭제를 데이터셋·차트 API로 교체. 바뀐 게 없으면 요청을 보내지 않는 현재 규칙은 유지.
  • 6-6. 저장 용량·한도를 서버 값(GET /me의 limits)으로 교체.
  • 6-7. 브라우저 저장소 정리 코드 줄이기: 저장이 서버로 옮겨가면 lib/storage-cleanup.ts의 "계정별 저장 데이터 90일 정리"와 마이페이지의 90일 안내 문구를 제거하고, 로그인 표시(30일) 규칙은 서버 세션 만료로 대체합니다. 가짜 서버용 키(mac-studio:mock:*)도 지웁니다.

7단계. 마무리

  • 7-1. README 갱신: 구현된 차트 수, 달라진 기능.
  • 7-2. 배포 확인: develop → main PR 병합 후 Vercel에 새 배포가 뜨는지, 배포된 사이트에서 핵심 흐름 확인.
  • 7-3. 베타 출시 일정 정해서 README에 기록.