주요 변경사항:
- Step flow 통합: localStorage 기반 eventId 사용
- 자동 이미지 생성: 이미지 없을 시 자동 생성 트리거
- 진행률 바 추가: 0-100% 진행률 표시
- 동적 로딩 메시지: 단계별 메시지 업데이트
- Next.js 15 API routes 수정: params를 Promise로 처리
- 실제 배포 API 연동: Content API 서버 URL 설정
기술 세부사항:
- API proxy routes 추가 (CORS 우회)
- 2초 폴링 메커니즘 (최대 60초)
- 환경변수: NEXT_PUBLIC_CONTENT_API_URL 설정
- CDN URL 디버그 오버레이 제거
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- api-client.ts 삭제하고 client.ts의 participationClient 사용
- 마이크로서비스별 호스트 환경변수 지원 추가
- API_VERSION 환경변수로 api prefix 관리
- .env.local 파일 생성 (개발 환경 설정)
- CORS 해결을 위해 백엔드에서 직접 호출하는 방식으로 단순화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- API 함수 추가: drawWinners, getWinners
- 실제 백엔드 서버(localhost:8084)로 추첨 실행
- 당첨자 목록 실시간 조회 및 표시
- 에러 처리 및 로딩 상태 추가
- 재추첨 기능 API 연동
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 주요 변경사항
### 1. FSD 아키텍처 기반 API 레이어 구축
- entities/user: User 엔티티 (타입, API)
- features/auth: 인증 기능 (useAuth, AuthProvider)
- shared/api: 공통 API 클라이언트 (Axios, 인터셉터)
### 2. 전체 User API 화면 연동 완료
- ✅ POST /api/v1/users/login → login/page.tsx
- ✅ POST /api/v1/users/register → register/page.tsx
- ✅ POST /api/v1/users/logout → profile/page.tsx
- ✅ GET /api/v1/users/profile → profile/page.tsx
- ✅ PUT /api/v1/users/profile → profile/page.tsx
- ✅ PUT /api/v1/users/password → profile/page.tsx
### 3. 로그인 페이지 API 연동
- useAuthStore → useAuthContext 변경
- 실제 로그인 API 호출
- 비밀번호 검증 완화 (API 스펙에 맞춤)
- 상세 로깅 추가
### 4. 프로필 페이지 API 연동
- 프로필 자동 로드 (GET /profile)
- 프로필 수정 (PUT /profile)
- 비밀번호 변경 (PUT /password)
- 로그아웃 (POST /logout)
- 전화번호 형식 변환 (01012345678 ↔ 010-1234-5678)
### 5. 로그아웃 에러 처리 개선
- 백엔드 500 에러 발생해도 로컬 상태 정리 후 로그아웃 진행
- 사용자 경험 우선: 정상 로그아웃으로 처리
- 개발자용 상세 에러 로그 출력
### 6. 문서화
- docs/api-integration-complete.md: 전체 연동 완료 보고서
- docs/api-server-issue.md: 백엔드 이슈 상세 보고 (회원가입 타임아웃, 로그아웃 500 에러)
- docs/user-api-integration.md: User API 통합 가이드
- docs/register-api-guide.md: 회원가입 API 가이드
### 7. 에러 처리 강화
- 서버 응답 에러 / 네트워크 에러 / 요청 설정 에러 구분
- 사용자 친화적 에러 메시지
- 전체 프로세스 상세 로깅
## 기술 스택
- FSD Architecture
- React Context API (AuthProvider)
- Axios (인터셉터, 90초 타임아웃)
- Zod (폼 검증)
- TypeScript (엄격한 타입)
## 테스트
- ✅ 빌드 성공
- ⏳ 백엔드 안정화 후 전체 플로우 테스트 필요
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
공통 디자인 시스템에 맞춰 ContentEditStep 페이지를 리디자인하고
미리보기/편집 카드의 높이를 동일하게 조정했습니다.
주요 변경사항:
- cardStyles, colors, responsiveText 공통 디자인 시스템 적용
- 페이지 배경: colors.gray[50]
- 양쪽 카드에 height: '100%' 추가하여 크기 동일화
- 카드 패딩: p: { xs: 6, sm: 8 }로 통일
- Grid spacing: 6으로 증가
- 헤더 및 섹션 여백 통일 (mb: 10, mb: 6)
- 미리보기 아이콘 크기 64px, 색상 purple 적용
- Edit 아이콘 색상 purple 적용
- TextField rows 4로 증가 (참여안내 입력 공간 확대)
- 버튼 상단 여백 mt: 10으로 증가
반응형 타이포그래피 적용:
- 헤더: responsiveText.h3
- 섹션 제목: responsiveText.h4
- 본문 텍스트: responsiveText.body1, body2
- 배경색이 있는 모든 카드의 흰색 글자를 검은색으로 변경하여 가독성 향상
- 아이콘과 텍스트에 그림자 효과를 추가하여 입체감 부여
- Profile 페이지 디자인 통일성 완료
변경 파일:
- src/app/(main)/page.tsx: 대시보드 KPI 카드 (3개)
- src/app/(main)/events/page.tsx: 이벤트 통계 카드 (4개)
- src/app/(main)/events/create/steps/ApprovalStep.tsx: 승인 단계 요약 카드 (4개)
- src/app/(main)/profile/page.tsx: 프로필 페이지 전체 리디자인
적용된 효과:
- 아이콘: drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
- 큰 텍스트: text-shadow 0px 2px 4px rgba(0,0,0,0.15)
- 작은 텍스트: text-shadow 0px 1px 2px rgba(0,0,0,0.1)
- 아이콘 배경: rgba(0,0,0,0.05) (대시보드)
- 글자 색상: colors.gray[900] (제목), colors.gray[700] (라벨)
- 페이지 배경을 gray[50]으로 변경하여 일관성 확보
- 이벤트 요약을 4개의 gradient 통계 카드로 재구성 (Purple, Blue, Orange, Mint)
- cardStyles.default와 responsiveText 시스템 적용
- 모든 카드에 일관된 패딩과 간격 적용 (p: {xs: 6, sm: 8})
- 버튼 텍스트 크기를 1rem으로 통일
- 다이얼로그 스타일링 개선 및 borderRadius 추가
- 채널 Chips를 purple 배경으로 변경
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 메인/이벤트 페이지와 동일한 색상 시스템을 모든 create 페이지에 적용
- ObjectiveStep: 아이콘, 카드 선택 상태, 그라데이션 버튼에 통일된 색상 적용
- RecommendationStep: AI 트렌드 아이콘, 카드 선택/호버 상태에 purple 색상 적용
- ChannelStep: 모든 채널 카드 및 체크박스에 통일된 디자인 시스템 적용
- 선택된 카드: purple 테두리, purpleLight 배경, 강조된 그림자
- 모든 체크박스: purple 색상 적용 (메인 체크박스 + SNS 하위 체크박스)
- 선택 상태에 따른 폰트 굵기 변화로 시각적 피드백 강화
- ContentPreviewStep, ContentEditStep, ApprovalStep: 색상 시스템 추가 (향후 사용 준비)
- 총 예상 노출 텍스트: purple 색상 적용
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- ObjectiveStep: 간격 2배 확대, 아이콘 및 텍스트 크기 증가
- RecommendationStep: 카드 간격 확대, AI 트렌드 분석 섹션 개선
- ChannelStep: 채널 카드 간격 확대, Summary 카드 디자인 개선
- ContentPreviewStep: 전체 간격 2배 확대, borderRadius 통일
- ContentEditStep: 전체 간격 2배 확대, borderRadius 통일
- ApprovalStep: 전체 간격 2배 확대, borderRadius 통일
- 모든 버튼: py: 3, borderRadius: 3, fontSize: 1rem으로 통일
- 모든 카드: borderRadius: 4, boxShadow 통일
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 페이지 헤더 및 요약 카드 추가 (이벤트명, 참여자 수)
- 추첨 설정 카드 간격 2배 확대 및 버튼 크기 증가
- 추첨 이력 섹션 간격 확대 및 카드 디자인 개선
- 당첨자 목록 카드 디자인 개선 (순위 배지 크기 증가, 간격 확대)
- 모든 액션 버튼에 그라데이션 배경 적용
- 모든 다이얼로그 컴포넌트 간격 및 디자인 통일
- 애니메이션 다이얼로그 크기 증가
- 미사용 import 제거 (EmojiEvents)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 전체 간격 2배 이상 확대하여 다른 페이지와 디자인 통일
- 실제 Chart.js 라이브러리로 3개 차트 구현
- 참여 추이 차트 (Line): 7일/30일/전체 기간 선택 가능
- 채널별 참여자 차트 (Bar): 우리동네TV, 링고비즈, SNS
- ROI 추이 차트 (Line): 주차별 ROI 성장 추이
- 상태 배지 추가 (AI 추천, 마감임박, 인기, 높은 ROI, 신규)
- 진행중인 이벤트에 진행률 바 추가
- KPI 카드에 그라데이션 배경 적용 및 목표 달성률 표시
- 이벤트 정보 섹션 디자인 개선 (아이콘 색상, 간격 확대)
- Quick Actions 카드 hover 효과 개선
- 최근 참여자 아바타 디자인 개선
- 실시간 업데이트 인디케이터에 pulse 애니메이션 추가
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 전체 간격(spacing) 2배 증가 및 컨테이너 패딩 확대
- 기본 폰트 크기 14px→16px 증가
- 채널별 성과 차트 색상을 조화로운 색상으로 변경 (#F472B6, #60A5FA, #FB923C)
- 이벤트 목록 페이지에 통계 요약 카드 추가 (전체/진행중/참여자/평균ROI)
- 진행중인 이벤트에 진행률 바 추가
- 이벤트 상태 배지 추가 (마감임박/인기/높은ROI/신규)
- 상품 및 참여방법에 아이콘 추가
- 이벤트 카드 레이아웃 개선: 참여자/ROI 정보를 오른쪽 하단으로 재배치
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 주요 변경사항
### 디자인 시스템 개선
- 새로운 색상 팔레트 적용 (민트, 보라, 파랑 기반)
- Tailwind CSS 스타일 그림자 시스템
- 개선된 카드 스타일 (1px 테두리, 큰 border-radius)
- 부드러운 애니메이션 (cubic-bezier)
- 타이포그래피 개선 (letter-spacing, 색상 계층)
### 메인 대시보드 리디자인
- KPI 카드: 그라디언트 배경, 원형 아이콘 컨테이너, 큰 숫자
- 빠른 시작: 개선된 아이콘 크기와 그림자
- 진행 중인 이벤트: 깔끔한 레이아웃, 민트 배지
- 최근 활동: 그라디언트 아이콘, 더 큰 간격
- FAB 버튼: 보라색 글로우 효과
### 레이아웃 개선
- 더 넓은 여백과 간격 (mb: 6, spacing: 4)
- 밝은 회색 배경 적용
- 화이트 카드 배경
- 개선된 반응형 패딩
### Header 오버레이 수정
- 모든 페이지에 적절한 상단 패딩 추가
- containerStyles.page에 pt 추가
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
주요 변경사항:
- FSD(Feature-Sliced Design) 아키텍처 도입
- shared 레이어 구조 생성 (ui, lib, api, model, types, config)
- 공통 UI 컴포넌트를 shared/ui로 이동 (Header, BottomNavigation, Loading, Toast)
- 라이브러리 코드를 shared/lib로 이동 (theme-provider, react-query-provider, theme)
- 모든 import 경로 업데이트하여 새로운 구조 반영
- 기존 components, lib 디렉토리 제거
- 빌드 검증 완료
향후 확장:
- widgets: 복잡한 UI 블록
- features: 기능 단위 코드
- entities: 비즈니스 엔티티
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Header 컴포넌트 개발 (뒤로가기, 메뉴, 프로필 버튼 지원)
- Bottom Navigation 컴포넌트 개발 (홈, 이벤트, 분석, 프로필)
- (main) 레이아웃 생성 및 Bottom Navigation 자동 적용
- 홈 페이지(대시보드)에 Header 추가
- 이벤트 목록 페이지에 Header 추가
- 성과 분석 페이지에 Header 추가
- 모든 (main) 그룹 페이지에서 Header와 Bottom Navigation 자동 표시
- Material-UI AppBar 및 BottomNavigation 컴포넌트 사용
- 반응형 디자인 적용
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 회원가입 성공 시 완료 다이얼로그 표시
- CheckCircle 아이콘과 환영 메시지 추가
- 사용자 이름을 포함한 개인화된 메시지 표시
- '시작하기' 버튼으로 대시보드 이동
- Dialog, DialogContent, DialogActions 컴포넌트 임포트 추가
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 이벤트 목록 페이지 (/events)
- 검색, 필터링, 정렬, 페이지네이션 기능
- 이벤트 카드 클릭 시 상세 페이지로 이동
- 이벤트 상세 페이지 (/events/[eventId])
- 실시간 KPI 모니터링 (참여자, 조회수, ROI, 전환율)
- 참여 추세 차트 및 기간 선택 기능
- 빠른 액션 버튼 (참여자 관리, 수정, 공유, 다운로드)
- 이벤트 참여 페이지 (/events/[eventId]/participate)
- 공개 페이지 (인증 불필요)
- 이벤트 배너 및 정보 표시
- 참여 폼 (이름, 전화번호 자동 포맷팅)
- 개인정보 동의 및 폼 유효성 검사
- 중복 참여 체크 및 성공 다이얼로그
- 참여자 목록 페이지 (/events/[eventId]/participants)
- 검색 및 필터링 (참여 경로, 당첨 상태)
- 참여자 상세 정보 모달
- 당첨자 추첨 페이지로 이동
- 엑셀 다운로드 기능
- 당첨자 추첨 페이지 (/events/[eventId]/draw)
- 당첨 인원 설정 및 가산점 옵션
- 추첨 애니메이션 (3단계)
- 당첨자 목록 표시 (순위별 배지)
- 재추첨, 엑셀 다운로드, SMS 알림 전송 기능
- 추첨 이력 관리
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- /analytics 경로에 실시간 대시보드 페이지 추가
- 실시간 업데이트 로직 구현 (30초마다 시간 갱신, 5분마다 데이터 갱신)
- KPI 요약 카드 4개 구현 (참여자수, 총비용, 예상수익, ROI)
- 채널별 성과 차트 섹션 (파이차트 플레이스홀더 + 범례)
- 시간대별 참여 추이 차트 섹션 (라인차트 플레이스홀더 + 통계)
- ROI 상세 분석 테이블 (비용/수익 분해 + 계산식 시각화)
- 참여자 프로필 분석 (연령별/성별 막대 그래프)
- AI 이벤트 추천 -> 배포채널 선택 -> 콘텐츠 미리보기 -> 콘텐츠 편집 -> 최종승인 순서로 변경
- 우리동네TV, 지니TV, SNS 선택 시에만 콘텐츠 단계 진입하도록 조건부 분기 추가
- ContentPreviewStep, ContentEditStep 컴포넌트 임포트 및 funnel에 통합
