YouTube 채널 관리 및 분석 플랫폼 - 프론트엔드 개발 문서
MEDI는 YouTube 크리에이터를 위한 채널 관리 및 분석 플랫폼입니다. 사용자는 자신의 YouTube 채널을 등록하고, 영상 메타데이터를 분석하며, 댓글 분석 및 멘탈 케어 서비스를 제공받을 수 있습니다.
- YouTube 채널 등록 및 동기화
- 영상 메타데이터 조회 및 분석
- 댓글 분석 및 필터링
- 멘탈 케어 대시보드
- 콘텐츠 컨설팅
- Next.js 16.0.1 - React 기반 풀스택 프레임워크
- React 19.2.0 - UI 라이브러리
- Redux Toolkit 2.10.1 - 상태 관리
- Tailwind CSS 3.0.24 - 유틸리티 기반 CSS 프레임워크
- Radix UI - 접근성 있는 UI 컴포넌트 라이브러리
- Lucide React - 아이콘 라이브러리
- Recharts 3.4.1 - 차트 라이브러리
- Node.js 18.x 이상
- npm 또는 yarn
- 백엔드 서버 실행 중 (http://localhost:8080)
# 의존성 설치 npm install # 개발 서버 실행 npm run dev # 프로덕션 빌드 npm run build # 프로덕션 서버 실행 npm start # 린트 검사 npm run lint
개발 서버는 기본적으로 http://localhost:3000에서 실행됩니다.
frontend/
├── src/
│ ├── app/ # Next.js App Router 페이지
│ │ ├── dashboard/ # 대시보드 페이지 및 레이아웃
│ │ │ ├── layout.js # 대시보드 레이아웃 (사이드바, 헤더)
│ │ │ └── page.js # 대시보드 메인 페이지
│ │ ├── login/ # 로그인 페이지
│ │ ├── signup/ # 회원가입 페이지
│ │ ├── oauth2/ # OAuth2 콜백 처리
│ │ ├── globals.css # 전역 스타일 및 폰트 설정
│ │ └── layout.js # 루트 레이아웃
│ │
│ ├── components/ # 재사용 가능한 컴포넌트
│ │ ├── dashboard/ # 대시보드 전용 컴포넌트
│ │ │ ├── OverviewTab.js # 전체 요약 탭
│ │ │ ├── MentalCareTab.js # 멘탈 케어 탭
│ │ │ ├── ContentConsultingTab.js # 콘텐츠 컨설팅 탭
│ │ │ ├── BadCommentsTab.js # 원본 악플보기 탭
│ │ │ └── VideoDetailTab.js # 영상 상세 탭
│ │ └── ui/ # shadcn/ui 기반 UI 컴포넌트
│ │
│ ├── context/ # React Context
│ │ └── DashboardContext.js # 대시보드 상태 관리
│ │
│ └── lib/ # 유틸리티 및 설정
│ ├── slices/ # Redux 슬라이스
│ │ └── authSlice.js # 인증 상태 관리
│ ├── store.js # Redux 스토어 설정
│ └── utils.js # 공통 유틸리티 함수
│
├── public/ # 정적 파일
├── package.json # 프로젝트 의존성
├── tailwind.config.js # Tailwind CSS 설정
└── README.md # 이 문서
- 이메일/비밀번호 로그인
- Google OAuth2 로그인
- 세션 기반 인증 (쿠키 자동 관리)
- 채널 목록 조회 및 관리
- 채널 동기화 (YouTube API 연동)
- 채널별 상세 분석
- 전체 요약: 최근 영상 목록, 댓글 분석 요약
- 멘탈 케어: 댓글 감정 분석 및 멘탈 건강 지표
- 콘텐츠 컨설팅: 영상 성과 분석 및 개선 제안
- 원본 악플보기: 필터링된 부정적 댓글 조회
프로젝트는 일관된 폰트 시스템을 사용합니다. 새로운 텍스트 요소를 추가할 때 반드시 이 가이드를 따르세요.
-
Inter (기본 폰트)
- 대부분의 텍스트에 사용
- Google Fonts에서 로드
-
Roboto (보조 폰트)
- 특정 요소에 사용 (필요시)
- Google Fonts에서 로드
-
Comic Neue (로고 전용)
- 로고 텍스트에만 사용
- Google Fonts에서 로드
| 요소 | Weight | Tailwind 클래스 |
|---|---|---|
| 로고 | 900 | font-black |
| h1, h2, h3, h4 | 500 | font-medium |
| 버튼, 라벨 | 500 | font-medium |
| 본문 텍스트 | 400 | font-normal (기본값) |
| 요소 | 크기 | Tailwind 클래스 |
|---|---|---|
| 로고 | 4xl (2.25rem) | text-4xl |
| h1 | 3xl (1.875rem) | text-3xl |
| h2 | 2xl (1.5rem) | text-2xl |
| h3 | xl (1.25rem) | text-xl |
| h4 | lg (1.125rem) | text-lg |
| 본문 | base (1rem) | text-base |
| 작은 텍스트 | sm (0.875rem) | text-sm |
모든 텍스트 요소에 leading-[1.5] 적용 필수
// ✅ 올바른 예시 <h1 className="text-3xl font-medium leading-[1.5]">제목</h1> <p className="text-base leading-[1.5]">본문 텍스트</p> <button className="font-medium leading-[1.5]">버튼</button> // ❌ 잘못된 예시 <h1 className="text-3xl font-bold">제목</h1>// font-bold 사용 금지 <p className="text-base">본문</p>// leading-[1.5] 누락
// 로고 <h1 className="text-4xl font-black font-['Comic_Neue'] leading-none"> Medi </h1> // 제목 <h2 className="text-2xl font-medium text-black mb-1 leading-[1.5]"> 내 채널 관리 </h2> // 본문 <p className="text-gray-600 leading-[1.5]"> 등록된 채널 {count}개 </p> // 버튼 <Button className="font-medium leading-[1.5]"> 동기화 </Button>
프로젝트는 Tailwind CSS를 사용합니다. 가능한 한 인라인 클래스를 사용하고, 커스텀 CSS는 최소화합니다.
primary- 주요 색상secondary- 보조 색상destructive- 경고/삭제 색상muted- 비활성/보조 텍스트accent- 강조 색상
- 모바일 우선 접근 방식
md:,lg:,xl:브레이크포인트 사용
- shadcn/ui 기반 컴포넌트 사용
@/components/ui/경로의 컴포넌트 활용
대시보드의 레이아웃을 담당합니다.
- 사이드바 (채널 목록, 탭 네비게이션)
- 헤더 (로고, 사용자 메뉴)
- Context를 통한 상태 공유
대시보드의 메인 페이지입니다.
- 채널 목록 뷰
- 채널 상세 뷰
- 채널 동기화 및 관리 기능
채널의 전체 요약을 보여주는 탭입니다.
- 최근 영상 목록
- 댓글 분석 요약
- 영상 검색 기능
멘탈 케어 관련 정보를 표시하는 탭입니다.
콘텐츠 컨설팅 정보를 표시하는 탭입니다.
필터링된 부정적 댓글을 보여주는 탭입니다.
- 세션 쿠키는 자동으로 전송됩니다 (
credentials: 'include') - 쿠키 이름:
MEDI_SESSION(백엔드에서 확인 필요) - 세션 만료 시 401 응답을 반환하면 프론트엔드에서 자동으로 로그인 페이지로 리다이렉트
1. API 요청이 실패하는 경우
- 백엔드 서버가 실행 중인지 확인
credentials: 'include'가 포함되어 있는지 확인- 브라우저 개발자 도구의 Network 탭에서 요청/응답 확인
2. 세션이 유지되지 않는 경우
- 쿠키가 제대로 설정되어 있는지 확인
- 브라우저의 쿠키 설정 확인
- 백엔드의 세션 설정 확인
3. 스타일이 적용되지 않는 경우
- Tailwind 클래스가 올바른지 확인
globals.css가 import되어 있는지 확인- 브라우저 캐시 삭제