Skip to content

[Deploy] develop → main 배포 반영 - #194

Merged
YermIm merged 6 commits into
mainfrom
develop
May 6, 2026
Merged

[Deploy] develop → main 배포 반영#194
YermIm merged 6 commits into
mainfrom
develop

Conversation

@YermIm

@YermIm YermIm commented May 6, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

✨ 변경사항

  • 🐞 BugFix Something isn't working
  • 💻 CrossBrowsing Browser compatibility
  • 🌏 Deploy Deploy
  • 🎨 Design Markup & styling
  • 📃 Docs Documentation writing and editing (README.md, etc.)
  • ✨ Feature Feature
  • 🔨 Refactor Code refactoring
  • ⚙️ Setting Development environment setup
  • ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

  • 플랫폼별 대시보드
    • 실시간 트래픽 변화 차트

😅 미완성 작업

📢 논의 사항 및 참고 사항

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

릴리스 노트

  • New Features

    • 완전한 랜딩 페이지 추가: 히어로 섹션, 기능 소개, 가격 계획, FAQ, 가이드 포함
    • 대시보드 플랫폼 섹션: 실시간 트래픽 차트 및 상세 성능 테이블 추가
    • 사용자 설정: 프로필 편집 및 비밀번호 변경 기능 추가
    • 예산 및 KPI 개요 섹션으로 대시보드 강화
    • 이미지 업로드 및 스크롤 애니메이션 유틸리티 추가
  • Bug Fixes

    • 예산 게이지 차트 레이아웃 조정

@vercel

vercel Bot commented May 6, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
where-you-ad Ready Ready Preview, Comment May 6, 2026 2:31am

@YermIm
YermIm merged commit 2f2e30c into main May 6, 2026
2 of 3 checks passed
@coderabbitai

coderabbitai Bot commented May 6, 2026

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7d0d6cb7-5a6b-4628-9427-e57c449b2feb

📥 Commits

Reviewing files that changed from the base of the PR and between 0846cd2 and d7b0f47.

⛔ Files ignored due to path filters (20)
  • scripts/strip-cursor-attribution 2.mjs is excluded by none and included by none
  • src/assets/icon/ai/warning 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/chevron/chevron-down 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/common/camera 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/common/check-white 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/common/lock 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/common/userProfileCircle 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/timeline/chevron-left 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/timeline/chevron-right 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/timeline/filter 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/timeline/kebab 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/icon/timeline/sort 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/logo/service-logo/logo 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/logo/social-logo/plain/google_ads 2.png is excluded by !**/*.png and included by src/**
  • src/assets/logo/social-logo/plain/meta 2.svg is excluded by !**/*.svg and included by src/**
  • src/assets/logo/social-logo/wordmark/naver-wordmark 2.png is excluded by !**/*.png and included by src/**
  • src/assets/mockup/iOS app dock 2.png is excluded by !**/*.png and included by src/**
  • src/assets/mockup/iPad Air mockup 2.png is excluded by !**/*.png and included by src/**
  • src/assets/mockup/laptop_mockup 2.png is excluded by !**/*.png and included by src/**
  • vercel 2.json is excluded by none and included by none
📒 Files selected for processing (46)
  • src/components/auth/common/AuthFormShell 2.tsx
  • src/components/common/ComingSoonPlaceholder 2.tsx
  • src/components/dashboard/charts/BudgetGaugeChart.tsx
  • src/components/dashboard/platform/AllPlatformTrafficChart.tsx
  • src/components/dashboard/platform/AllPlatformView.tsx
  • src/components/dashboard/platform/PlatformDetailTable 2.tsx
  • src/components/dashboard/platform/PlatformTrafficChart.tsx
  • src/components/dashboard/platform/SinglePlatformView.tsx
  • src/components/landing/CTASection 2.tsx
  • src/components/landing/FeatureSection 2.tsx
  • src/components/landing/GuideOverviewChart 2.tsx
  • src/components/landing/GuidePlatform 2.tsx
  • src/components/landing/GuideTimeline 2.tsx
  • src/components/landing/HeroSection 2.tsx
  • src/components/landing/HowItWorksSection 2.tsx
  • src/components/landing/LandingFAQ 2.tsx
  • src/components/landing/LandingFeatures 2.tsx
  • src/components/landing/LandingFooter 2.tsx
  • src/components/landing/LandingGuide 2.tsx
  • src/components/landing/LandingHeader 2.tsx
  • src/components/landing/LandingHero 2.tsx
  • src/components/landing/LandingMultiDevice 2.tsx
  • src/components/landing/LandingNav 2.tsx
  • src/components/landing/LandingPricing 2.tsx
  • src/components/landing/LandingSectionHeader 2.tsx
  • src/components/landing/ProblemSection 2.tsx
  • src/components/landing/SocialProofSection 2.tsx
  • src/components/setting/PasswordSection 2.tsx
  • src/components/setting/ProfileSection 2.tsx
  • src/constants/landing 2.ts
  • src/hooks/common/useComingSoon 2.ts
  • src/hooks/common/useImageUploader 2.ts
  • src/hooks/dashboard/useOverviewCampaignList 2.ts
  • src/hooks/useScrollAnimation 2.ts
  • src/pages/LandingPage 2.tsx
  • src/pages/dashboard/overview/OverviewAiDrawer 2.tsx
  • src/pages/dashboard/overview/OverviewBudgetSection 2.tsx
  • src/pages/dashboard/overview/OverviewCampaignSnapshotCard 2.tsx
  • src/pages/dashboard/overview/OverviewKpiSection 2.tsx
  • src/pages/dashboard/overview/OverviewPlatformSection 2.tsx
  • src/pages/dashboard/platform/PlatformDashboard.tsx
  • src/pages/dashboard/platform/platformDashboard.mock.ts
  • src/pages/landing/LandingPage 2.tsx
  • src/store/useSidebarStore 2.ts
  • src/utils/navigation/mainNavSidebar 2.ts
  • src/utils/navigation/pathMatch 2.ts

📝 Walkthrough

Walkthrough

매우 광범위한 기능 추가 PR입니다. 랜딩 페이지 전체, 대시보드 플랫폼/개요 섹션, 설정 컴포넌트, 여러 공통 훅과 유틸리티가 신규 추가되었으며, 기존 컴포넌트의 레이아웃도 부분 조정되었습니다.

Changes

랜딩 페이지 구성

레이어 / 파일(s) 설명
데이터 및 상수
src/constants/landing 2.ts
랜딩 페이지 전체에 필요한 메타데이터, 문제점, 기능, 프로세스 단계, 소셜 증명 통계를 상수로 정의
기초 훅 및 애니메이션
src/hooks/useScrollAnimation 2.ts
Framer Motion 기반 스크롤 감지 애니메이션 훅(fadeUp, fadeIn, stagger 변형)과 reduced-motion 지원
레이아웃 및 헤더 컴포넌트
src/components/landing/LandingHeader 2.tsx, src/components/landing/LandingNav 2.tsx, src/components/landing/LandingSectionHeader 2.tsx
네비게이션, 스크롤 기반 헤더 스타일, 섹션 헤더 컴포넌트
히어로 및 멀티디바이스
src/components/landing/LandingHero 2.tsx, src/components/landing/LandingMultiDevice 2.tsx, src/components/landing/HeroSection 2.tsx
애니메이션된 히어로 섹션, 기기 목업, 카운터 기반 대시보드 목업
섹션 컴포넌트
src/components/landing/ProblemSection 2.tsx, src/components/landing/LandingFeatures 2.tsx, src/components/landing/HowItWorksSection 2.tsx, src/components/landing/LandingFAQ 2.tsx, src/components/landing/LandingPricing 2.tsx, src/components/landing/SocialProofSection 2.tsx, src/components/landing/CTASection 2.tsx
문제점, 기능, 프로세스, FAQ, 요금제, 소셜 증명 섹션 (일부는 스켈레톤/빈 컴포넌트)
가이드 서브섹션
src/components/landing/LandingGuide 2.tsx, src/components/landing/GuideOverviewChart 2.tsx, src/components/landing/GuideTimeline 2.tsx, src/components/landing/GuidePlatform 2.tsx
대시보드 가이드, 차트, 타임라인, 플랫폼 선택 UI
페이지 및 푸터
src/components/landing/LandingFooter 2.tsx, src/pages/landing/LandingPage 2.tsx, src/pages/LandingPage 2.tsx
푸터, 페이지 컴포지션(지연 로딩된 섹션과 Suspense)

대시보드 플랫폼 섹션

레이어 / 파일(s) 설명
모의 데이터
src/pages/dashboard/platform/platformDashboard.mock.ts
실시간 트래픽 타임시리즈 데이터 및 클릭 스트림 응답 타입, 플랫폼별 모의 데이터 생성
차트 컴포넌트
src/components/dashboard/platform/PlatformTrafficChart.tsx, src/components/dashboard/platform/AllPlatformTrafficChart.tsx
단일/다중 플랫폼 실시간 트래픽 영역 차트 (ApexCharts 기반, 타임스탬프 변환, 동적 축 범위)
테이블 컴포넌트
src/components/dashboard/platform/PlatformDetailTable 2.tsx
일별 성과 테이블(지출, 노출, 클릭, 클릭율, CPC, ROAS 포함 합계 행)
뷰 컴포넌트
src/components/dashboard/platform/SinglePlatformView.tsx, src/components/dashboard/platform/AllPlatformView.tsx
플랫폼 색상 테마 적용, 트래픽 차트 및 범례 통합, 기존 TrafficChartSkeleton 제거
대시보드 통합
src/pages/dashboard/platform/PlatformDashboard.tsx
AI 요약 패널 드로어(공유, PDF 다운로드 기능 포함) 추가

대시보드 개요 섹션

레이어 / 파일(s) 설명
데이터 훅
src/hooks/dashboard/useOverviewCampaignList 2.ts
현재 조직의 캠프 목록을 조직 ID로 조회하는 훅
예산 섹션
src/components/dashboard/charts/BudgetGaugeChart.tsx, src/pages/dashboard/overview/OverviewBudgetSection 2.tsx
게이지 차트 레이아웃 조정(mt-auto 제거), 범범 데이터, 상태 배지, 캠프 스냅샷 카드 통합
KPI 섹션
src/pages/dashboard/overview/OverviewKpiSection 2.tsx
StatCard 그리드, 실시간 트래픽 카드(범례, Suspense 차트 로딩)
플랫폼 순위 섹션
src/pages/dashboard/overview/OverviewPlatformSection 2.tsx
RoAS 테이블, 스켈레톤, 플랫폼 대시보드 네비게이션 버튼
캠프 스냅샷
src/pages/dashboard/overview/OverviewCampaignSnapshotCard 2.tsx
상위 캠프 필터링 및 예산 사용률 표시
AI 패널
src/pages/dashboard/overview/OverviewAiDrawer 2.tsx
지연 로딩된 AI 보고서 패널(공유, PDF 다운로드 드롭다운)

설정 컴포넌트

레이어 / 파일(s) 설명
이미지 업로더 훅
src/hooks/common/useImageUploader 2.ts
파일 입력 참조, 미리보기 URL 생성, 상태 리셋 로직
프로필 섹션
src/components/setting/ProfileSection 2.tsx
프로필 이미지 업로드/미리보기, 이름 입력, 조직/이메일/전화 읽기 전용 필드
비밀번호 섹션
src/components/setting/PasswordSection 2.tsx
현재/신규/확인 비밀번호 필드, 표시/숨김 토글, 에러 처리

공통 컴포넌트 및 훅

레이어 / 파일(s) 설명
공통 훅
src/hooks/common/useComingSoon 2.ts
Sonner 토스트 기반 준비 중 메시지 표시
공통 컴포넌트
src/components/common/ComingSoonPlaceholder 2.tsx, src/components/auth/common/AuthFormShell 2.tsx
준비 중 플레이스홀더(경고 아이콘, 제목, 설명), 인증 폼 셸(Tailwind 변형)
상태 관리
src/store/useSidebarStore 2.ts
Zustand 기반 사이드바 접기/펴기 상태
네비게이션 유틸
src/utils/navigation/mainNavSidebar 2.ts, src/utils/navigation/pathMatch 2.ts
경로 정규화, 경로 매칭, 부모-자식 관계 맵핑, 활성 상태 해석

Sequence Diagram(s)

sequenceDiagram
    participant User as 사용자
    participant Landing as 랜딩 페이지
    participant Lazy as 지연로딩<br/>섹션
    participant Suspense as Suspense<br/>바운더리
    participant Component as 섹션<br/>컴포넌트
    
    User->>Landing: 페이지 접속
    activate Landing
    Landing->>Landing: HeroSection<br/>즉시 렌더
    
    User->>Landing: 스크롤
    activate Lazy
    Landing->>Lazy: 섹션 진입<br/>감지
    
    Lazy->>Suspense: 지연 로딩 시작
    activate Suspense
    Suspense->>Suspense: SectionFallback<br/>표시
    
    Suspense->>Component: 컴포넌트<br/>로드 완료
    activate Component
    Component->>Component: 애니메이션<br/>실행
    deactivate Component
    deactivate Suspense
    deactivate Lazy
    deactivate Landing
Loading
sequenceDiagram
    participant API as API
    participant Hook as useOverviewCampaignList<br/>훅
    participant Store as Workspace<br/>Store
    participant Component as Dashboard<br/>컴포넌트
    
    Component->>Hook: 데이터 요청
    activate Hook
    Hook->>Store: 조직 ID 조회
    activate Store
    Store-->>Hook: orgId 반환
    deactivate Store
    
    Hook->>API: getCampaignList<br/>(orgId)
    activate API
    API-->>Hook: 캠프 목록
    deactivate API
    deactivate Hook
    
    Hook-->>Component: 캐시된<br/>데이터 반환
    Component->>Component: 필터링<br/>(상태 OVER 제외)
    Component->>Component: useMemo로<br/>상위 2개<br/>계산
    Component->>Component: 렌더
Loading
sequenceDiagram
    participant User as 사용자
    participant Chart as PlatformTrafficChart
    participant Transform as 데이터<br/>변환
    participant ApexChart as ApexCharts
    
    User->>Chart: 컴포넌트<br/>마운트
    activate Chart
    Chart->>Transform: 분 기반<br/>타임스탬프<br/>변환
    activate Transform
    Transform->>Transform: YYYYMMDDHHmm<br/>→ epoch ms
    Transform-->>Chart: 변환된<br/>시계열
    deactivate Transform
    
    Chart->>Chart: xMin/xMax<br/>범위 계산
    Chart->>Chart: yMax<br/>동적 계산<br/>(1.2배 패딩)
    
    Chart->>ApexChart: options +<br/>series 전달
    activate ApexChart
    ApexChart->>ApexChart: HH:MM 축<br/>포맷
    ApexChart->>ApexChart: 천 단위<br/>구분 + K<br/>표시
    ApexChart->>ApexChart: 그라디언트<br/>채우기 렌더
    ApexChart-->>Chart: 차트 렌더
    deactivate ApexChart
    deactivate Chart
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 분

분석 근거:

  • 규모: 40개 이상의 신규 파일 + 기존 파일 수정, 약 2,000줄 이상의 추가 코드
  • 복잡도: ApexCharts 기반 차트 컴포넌트, Framer Motion 애니메이션, 모의 데이터 생성, 상태 관리 로직이 섞여 있음
  • 다양성: 랜딩 페이지, 대시보드, 설정 등 여러 도메인의 기능이 포함되어 있으며 각각 독립적인 로직 필요
  • 주요 검토 항목:
    • 접근성 이슈 (PasswordSection의 aria-label 버그)
    • 대시보드 데이터 흐름 및 캐싱 전략
    • 지연 로딩 및 Suspense 경계 설정 적절성
    • 모의 데이터의 현실성 및 일관성
    • 애니메이션 성능 최적화
    • 네비게이션 경로 매칭 로직 검증

Possibly related PRs

Suggested labels

✨ Feature, 🎨 Design, 📊 Dashboard, 🌐 Landing Page

Suggested reviewers

  • jjjsun

리뷰 주요 포인트

🔴 접근성 이슈 (Critical)

파일: src/components/setting/PasswordSection 2.tsx

신규 비밀번호 필드의 표시/숨김 토글에서 aria-labelaria-pressed 속성이 현재 비밀번호의 가시성 상태(showCurrent)를 참조하고 있습니다. 이는 명백한 버그입니다:

// ❌ 현재 (라인 75-80 추정)
aria-label={showCurrent ? "비밀번호 숨기기" : "비밀번호 보이기"}
aria-pressed={showCurrent}

개선 방법:

// ✅ 수정
aria-label={showNew ? "비밀번호 숨기기" : "비밀번호 보이기"}
aria-pressed={showNew}

⚠️ 데이터 일관성 문제

파일: src/pages/dashboard/platform/platformDashboard.mock.ts

실시간 트래픽 모의 데이터 생성 함수에서 60분 동안의 분 기반 타임스탐프를 생성합니다. 다만 다음을 확인해주세요:

  1. 시간대(Timezone): 현재 코드에서 new Date()를 기반으로 하는데, 서버/클라이언트 시간대 차이가 있을 수 있습니다.
  2. 더미 데이터의 현실성: 웨이브 패턴(Math.sin) + 무작위 노이즈 조합이 실제 플랫폼 트래픽과 유사한지 검증 필요합니다.

🎨 레이아웃 변경 검증

파일: src/components/dashboard/charts/BudgetGaugeChart.tsx

mt-auto 클래스 제거로 인해 게이지 차트와 insight 영역의 수직 정렬이 변경되었습니다. 실제 UI에서:

  • 부모 컨테이너의 높이가 명시적으로 설정되었는지 확인
  • flex 배치에서 정렬이 예상대로 동작하는지 시각적 검증 필요

📊 차트 성능 최적화

파일: src/components/dashboard/platform/PlatformTrafficChart.tsx, AllPlatformTrafficChart.tsx

ApexCharts의 대규모 데이터 렌더링은 성능에 영향을 줄 수 있습니다. 다음을 권장합니다:

  1. 메모이제이션: React.memo로 차트 컴포넌트 감싸기 (이미 일부 적용됨)
  2. 데이터 샘플링: 60분 이상 데이터일 경우 간격 유지(aggregation) 고려
  3. 성능 모니터링: React DevTools Profiler로 렌더링 시간 확인

🔀 네비게이션 경로 매칭 로직

파일: src/utils/navigation/pathMatch 2.ts, mainNavSidebar 2.ts

isPathMatch() 함수는 현재 경로가 대상 경로의 접두사인 경우 일치로 판단합니다:

currentPath.startsWith(`${targetPath}/`)

주의사항:

  • /dashboard/dashboards 처럼 유사한 경로명이 있으면 오매칭 가능
  • 정확한 경로 세그먼트 매칭이 필요하면 추가 검증 로직 추가 권장

🎬 애니메이션 성능

파일: src/components/landing/HeroSection 2.tsx

useCounter 훅이 requestAnimationFrame 루프를 사용합니다. 스크린 리페인트 주기를 고려하여:

  1. cleanup 함수: 컴포넌트 언마운트 시 RAF 취소 (이미 구현됨)
  2. 종료 조건: 목표값 도달 후 루프 중단 여부 확인

🗂️ 지연 로딩 전략

파일: src/pages/landing/LandingPage 2.tsx, src/pages/dashboard/overview/*

Suspense를 활용한 지연 로딩이 잘 적용되었으나:

  1. 폴백 UI: SectionFallback의 높이가 실제 컨텐츠와 유사한지 확인 (레이아웃 시프트 방지)
  2. 에러 바운더리: 현재 Suspense만 있으므로 로딩 실패 시 에러 바운더리 추가 고려

칭찬할 점

  • ✨ 일관된 Tailwind 클래스 사용과 twMerge 활용
  • ✨ 모의 데이터를 별도 모듈로 분리하여 관심사 분리 잘됨
  • ✨ Framer Motion으로 부드러운 애니메이션 구현
  • ✨ 스켈레톤 UI로 로딩 상태 시각화
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch develop

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Seojegyeong Seojegyeong changed the title [Deploy] 배포 [Deploy] develop → main 배포 반영 May 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant