[FEAT] UI 피드백 사항 반영

[suwonthugger]

👥 작업 배경 및 목적

• 첫 화면(스플래시)을 정적 목업(docs/koslink-cover-3d.html)에서 React 컴포넌트로 포팅해 실제 앱 진입 플로우에 연결하고, 관계 그래프 화면의 정보 구조를 정리했습니다.
  • Three.js 인트로 커버 화면을 실제 첫 라우트("/")로 추가하고, 기존 뉴스맵/예측검증 화면은 "/app"으로 라우트 분리
  • 커버 화면 노드 성장 애니메이션 속도 단축(자연스러움 개선)
  • "관계 그래프" 패널은 파급 경로만 보여주도록 단순화하고, 전체 관계망은 GNB의 별도 탭 + 큰 화면 뷰로 분리
• 관련 Issue 번호: [FEAT] UI 피드백 사항 반영 #8

🛠️ 주요 변경 사항

커버 화면 도입 + 라우트 분리

• src/components/cover/CoverScreen.tsx (신규): docs/koslink-cover-3d.html의 Three.js 인트로(노드 그래프 성장 애니메이션 + 타이틀 리빌 + CTA)를 React로 포팅. 최신 three.js의 색 관리/물리 기반 조명 차이로 원본과 색상이 달라지던 문제를 보정(ColorManagement 비활성화, outputColorSpace 조정, 조명 세기 π 보정), 언마운트 시 WebGL 리소스 정리 추가. 노드 성장~타이틀 등장 타이밍을 INTRO_SPEED 배율로 단축
• src/components/cover/cover.css (신규): 포팅한 인트로 스타일
• src/routes/index.tsx: 기존 뉴스맵 화면 → 커버 화면 라우트("/")로 교체. CTA 클릭 시 "/app"으로 라우팅
• src/routes/app.tsx (신규): 기존 "/"에 있던 뉴스맵/예측검증/GNB 로직 이전
• src/routes/__root.tsx: 루트 레이아웃 단순화(Outlet만 유지, GNB는 "/app"에서만 렌더링)
• src/routeTree.gen.ts: pnpm generate-routes 재생성 결과
• package.json, pnpm-lock.yaml: three, motion 의존성 추가

관계 그래프 구조 개편

• src/components/graph/GraphPanel.tsx: 뉴스맵 내 그래프 패널은 파급 경로(focus)만 표시하도록 단순화, 기존 "파급 경로/전체 관계망" 토글 제거. GraphCanvas가 전역 atom 대신 mode prop을 받도록 리팩터링

• src/components/graph/NetworkView.tsx (신규): 전체 관계망을 3분할 레이아웃이 아닌 화면 전체를 채우는 큰 패널로 표시. 노드 클릭 시 제자리 강조 및 "← 전체 보기" 상호작용 유지

• src/components/Header.tsx: GNB에 "전체 관계망" 탭 추가(뉴스맵/전체 관계망/예측 검증)

• src/lib/atoms.ts: 더 이상 쓰이지 않는 graphModeAtom 제거, viewAtom에 'network' 추가

• src/styles.css: 기존 .map/.verify 레이아웃 컨벤션을 따르는 .network 큰 화면 레이아웃 추가

• 코드 리뷰어가 집중해서 봐야 할 부분: CoverScreen.tsx의 Three.js 리소스 정리(dispose) 로직, GraphPanel.tsx/NetworkView.tsx의 mode prop 분리가 기존 파급 경로 동작에 회귀를 일으키지 않는지

🧪 테스트 결과 (선택)

• pnpm exec tsc --noEmit, pnpm lint, pnpm build 통과
• Playwright로 로컬에서 직접 구동해 확인: 커버 화면 진입CTA 클릭/app 전환, 스킵 버튼, GNB 탭 전환(뉴스맵/전체 관계망/예측검증), 전체 관계망 노드 클릭 강조, 콘솔 에러 없음

Summary by CodeRabbit

• 새로운 기능

  • 3D 인터랙티브 관계망 커버 화면을 추가했습니다.
  • 커버에서 “관계망 탐색하기”를 선택하면 앱으로 이동합니다.
  • 전체 관계망을 확인할 수 있는 새 탭을 추가했습니다.
  • 앱 화면을 /app 경로에서 제공하며, 지도·검증·전체 관계망 뷰를 지원합니다.

• 개선 사항

  • 관계망 화면의 반응형 레이아웃과 시각 효과를 개선했습니다.
  • 커버 애니메이션에서 건너뛰기와 모션 감소 설정을 지원합니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4446fa38-54c1-43c5-ad83-c001dc5cad75

📥 Commits

Reviewing files that changed from the base of the PR and between 2e57deb and ebadae0.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (13)

• docs/koslink-cover-3d.html
• package.json
• src/components/Header.tsx
• src/components/cover/CoverScreen.tsx
• src/components/cover/cover.css
• src/components/graph/GraphPanel.tsx
• src/components/graph/NetworkView.tsx
• src/lib/atoms.ts
• src/routeTree.gen.ts
• src/routes/__root.tsx
• src/routes/app.tsx
• src/routes/index.tsx
• src/styles.css

---

📝 Walkthrough

Walkthrough

3D 관계망 커버 화면을 추가하고, 진입 시 /app으로 이동하도록 라우팅을 분리했다. /app에는 기존 화면과 전체 관계망 뷰를 연결했으며, GraphCanvas가 외부에서 모드와 제목을 받도록 변경했다.

Changes

커버 및 앱 관계망 진입

Layer / File(s)	Summary
커버 화면 구조와 스타일 docs/koslink-cover-3d.html, src/components/cover/*, package.json	독립 3D 커버 문서와 React 커버의 DOM/CSS 구조를 추가하고 Three.js 관련 의존성을 등록했다.
Three.js 관계망 장면 구성 docs/koslink-cover-3d.html, src/components/cover/CoverScreen.tsx	안개, 계층형 노드, 엣지, 배경 입자와 인스턴스드 메시를 생성해 관계망 장면을 구성한다.
커버 애니메이션과 진입 처리 docs/koslink-cover-3d.html, src/components/cover/CoverScreen.tsx	텍스트·카메라·노드·엣지·입자 애니메이션과 CTA/건너뛰기 진입 상태, 언마운트 정리를 구현한다.
커버에서 앱 라우트로 전환 src/routes/index.tsx, src/routes/__root.tsx, src/routes/app.tsx, src/routeTree.gen.ts, src/lib/atoms.ts	루트 화면을 커버로 변경하고 /app 라우트에 기존 앱 레이아웃과 map·network·verify 뷰 분기를 배치했다.
전체 관계망 그래프 연결 src/components/Header.tsx, src/components/graph/*, src/styles.css	전체 관계망 탭과 NetworkView를 추가하고, GraphCanvas가 외부 mode와 title을 받아 전체 그래프를 표시하도록 변경했다.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Visitor
  participant CoverScreen
  participant Three.js
  participant Router
  participant AppRoute
  Visitor->>CoverScreen: 관계망 탐색하기 클릭
  CoverScreen->>Three.js: 진입 애니메이션과 화이트아웃 실행
  Three.js-->>CoverScreen: 진입 완료
  CoverScreen->>Router: /app 이동 요청
  Router->>AppRoute: 앱 화면 렌더링

Loading

Possibly related PRs

• koscom-team01/koslink-fe#3: GraphPanel.tsx와 상태 관리의 관계망 모드 변경이 겹친다.
• koscom-team01/koslink-fe#4: NetworkView, GraphPanel, buildAllScene 연결 변경과 직접 관련된다.

✨ 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 feat/8-ui-feedback

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

_{Comment @coderabbitai help to get the list of available commands.}