fix/라우팅 경로 수정 by AndyH0ng · Pull Request #15 · TTORANG/Web

AndyH0ng · 2025-12-31T06:44:15Z

📌 관련 이슈

close fix: 라우팅 경로 수정 #14

✨ 변경 내용

라우팅 구조 변경: /:projectId/slide/:slideId, /:projectId/video, /:projectId/insight 형태로 변경
API 스펙 정렬: presentationId → projectId, slideIndex → slideId로 파라미터명 변경
Layout 리팩토링: Header와 Layout 통합, App.tsx 제거
Gnb 독립화: useLocation/useNavigate로 자체 상태 관리하도록 변경
Logo 컴포넌트: WebP 포맷 로고 추가 (full/icon), 경로에 따라 자동 전환
localStorage 연동: 마지막으로 본 슬라이드 ID 저장/복원 기능 추가
공통 컴포넌트: components/common/ 디렉토리에 Logo, LoginButton 분리
path alias 설정: @/ alias 추가

💡 참고 사항

로고 전환 깜빡임 이슈 해결 과정

처음에는 Logo에 variant prop으로 full/icon을 전달하는 방식을 사용했습니다
route 전환 시 (뒤로가기 등) 찰나에 full 로고가 보이는 깜빡임이 발생했습니다
기본값 문제로 판단하여 variant를 required로 변경 → 해결 안됨;;
가설: 홈과 프로젝트 페이지가 각각 다른 Layout 인스턴스를 사용해서 전환 시 이전 상태가 잠시 보임
해결: Logo 컴포넌트가 useLocation으로 현재 경로를 직접 확인하여 full/icon 자동 결정

- presentationId → projectId - slideIndex → slideId - DEFAULT_SLIDE_INDEX → DEFAULT_SLIDE_ID

- App.tsx, App.css 삭제 - Layout이 Outlet과 Gnb를 직접 포함 - components/layout/index.ts 삭제 (불필요한 barrel export)

- HomePage에서 불필요한 tabpanel aria 속성 제거 - pages/index.ts 추가로 import 정리

- vite 및 tsconfig에 @ alias 설정 (src 디렉토리 매핑) - 상대 경로 import를 절대 경로(@)로 리팩토링 - SlidePage에서 URL 파라미터(slideId)를 받아 표시하도록 개선

- Layout: 내부 로고 의존성 제거 - main.tsx: 라우터 설정에서 레이아웃 조합 방식 개선

- 로컬스토리지에 최근 조회한 슬라이드 저장/조회 구현 - 슬라이드 페이지 이동 시 최근 조회한 슬라이드 조회 - 로고 홈으로 Link

gemini-code-assist · 2025-12-31T06:44:41Z

Summary of Changes

Hello @AndyH0ng, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 애플리케이션의 전반적인 구조와 사용자 경험을 개선하기 위해 라우팅, 레이아웃, 내비게이션 시스템을 대대적으로 리팩토링합니다. 새로운 라우팅 규칙을 도입하고, API 파라미터 명칭을 표준화하며, 핵심 UI 컴포넌트들의 독립성과 재사용성을 강화했습니다. 또한, 로고의 동적 표시와 마지막 슬라이드 위치 저장 기능을 통해 사용자 편의성을 높였습니다.

Highlights

라우팅 구조 변경: 애플리케이션의 라우팅 구조가 /:projectId/slide/:slideId, /:projectId/video, /:projectId/insight 형태로 재구성되어, 프로젝트별로 더 명확하고 계층적인 경로를 제공합니다.
API 스펙 정렬: API 파라미터명이 presentationId에서 projectId로, slideIndex에서 slideId로 변경되어 일관성을 높였습니다.
Layout 리팩토링: Header 컴포넌트가 Layout 컴포넌트와 통합되었고, 기존의 App.tsx 파일이 제거되어 전체적인 레이아웃 관리가 간소화되었습니다.
Gnb 독립화: 글로벌 내비게이션 바(Gnb) 컴포넌트가 useLocation 및 useParams 훅을 사용하여 자체적으로 상태를 관리하도록 변경되어, 외부 의존성을 줄이고 재사용성을 높였습니다.
Logo 컴포넌트 개선: WebP 포맷의 full 및 icon 로고가 추가되었으며, Logo 컴포넌트가 현재 경로(useLocation)에 따라 자동으로 적절한 로고를 표시하도록 구현되었습니다.
localStorage 연동: 사용자가 마지막으로 본 슬라이드 ID를 localStorage에 저장하고 복원하는 기능이 추가되어, 사용자 경험을 향상시켰습니다.
공통 컴포넌트 분리: Logo와 LoginButton 컴포넌트가 components/common/ 디렉토리로 분리되어 공통적으로 사용될 수 있도록 모듈화되었습니다.
Path Alias 설정: @/ 경로 별칭(alias)이 설정되어 src 디렉토리 내부의 모듈을 더 쉽게 가져올 수 있게 되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

전반적으로 라우팅 구조를 개선하고, 레이아웃을 리팩토링하며, 여러 컴포넌트를 모듈화하는 등 코드베이스를 크게 향상시키는 좋은 PR이라고 생각합니다. 특히 localStorage를 활용한 마지막 슬라이드 기억 기능과 경로에 따른 로고 자동 전환 기능은 사용자 경험을 개선할 것입니다. 몇 가지 사소한 개선점을 제안드렸으니 확인 부탁드립니다.

src/main.tsx

Copilot

Pull request overview

이 PR은 라우팅 구조를 개선하고 API 스펙에 맞춰 파라미터명을 정렬하며, Layout 컴포넌트를 리팩토링하여 코드 구조를 개선합니다.

/:projectId/slide/:slideId 형태로 라우팅 경로 변경 및 localStorage 기반 마지막 슬라이드 기억 기능 추가
Header와 Layout 통합, App.tsx 제거, Gnb 독립화로 컴포넌트 구조 단순화
WebP 로고 추가 및 경로 기반 자동 전환, path alias(@/) 설정으로 개발 경험 개선

Reviewed changes

Copilot reviewed 15 out of 20 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
vite.config.ts	path alias 설정을 위한 resolve 옵션 추가
tsconfig.app.json	TypeScript path mapping 설정 추가
src/pages/index.ts	페이지 컴포넌트 barrel export 파일 추가
src/pages/SlidePage.tsx	useParams로 slideId 추출 및 localStorage 저장 로직 추가
src/pages/HomePage.tsx	새로운 홈 페이지 컴포넌트 추가
src/main.tsx	router 설정 재구성, Layout 인라인 구성, path alias 적용
src/constants/navigation.ts	localStorage 함수 추가, 탭 경로 생성 및 pathname 파싱 유틸리티 구현
src/components/layout/index.ts	파일 삭제 (exports 제거)
src/components/layout/Layout.tsx	Header 통합, Outlet 사용으로 children 패턴 변경
src/components/layout/Header.tsx	Layout으로 병합되어 파일 삭제
src/components/layout/Gnb.tsx	activeTab prop 제거, useLocation/useParams로 자체 상태 관리
src/components/common/index.ts	공통 컴포넌트 barrel export 파일 추가
src/components/common/Logo.tsx	useLocation으로 경로 기반 로고 자동 전환 구현
src/components/common/LoginButton.tsx	로그인 버튼 공통 컴포넌트 추가
src/assets/logo-icon@4x.webp	아이콘 로고 WebP 이미지 추가
src/assets/logo-icon.svg	아이콘 로고 SVG 파일 추가
src/assets/logo-full@4x.webp	풀 로고 WebP 이미지 추가
src/assets/logo-full.svg	풀 로고 SVG 파일 추가
src/App.tsx	Layout으로 통합되어 파일 삭제
src/App.css	사용하지 않는 파일 삭제

src/constants/navigation.ts

src/components/layout/Gnb.tsx

src/components/common/LoginButton.tsx

src/constants/navigation.ts

Copilot · 2025-12-31T06:53:13Z

src/main.tsx

+          <>
+            <Logo />
+            <span className="text-body-m-bold text-gray-800">내 발표</span>
+          </>


Fragment(<>...</>)를 사용하면 Layout 컴포넌트의 gap-6 스타일이 자식 요소들 사이에 적용되지 않습니다. Fragment는 DOM에 렌더링되지 않기 때문입니다. div로 감싸거나, 배열로 전달하되 각 요소에 key를 추가해주세요.

Suggested change

<>

<Logo />

<span className="text-body-m-bold text-gray-800">내 발표</span>

</>

<div>

<Logo />

<span className="text-body-m-bold text-gray-800">내 발표</span>

</div>

Fragment는 DOM에 렌더링되지 않고 풀어지기 때문에, <Logo />와 <span>이 Layout의 gap-6이 적용된 div의 직접적인 자식이 됩니다. 따라서 gap이 정상 적용됩니다.

오히려 div로 감싸면 Logo와 span 사이에 gap이 적용되지 않게 됩니다.

src/main.tsx

Copilot · 2025-12-31T06:53:13Z

src/main.tsx

-      { index: true, element: <SlidePage /> }, // DEFAULT_TAB 변경 시 동기화 필요
-      { path: 'slide', element: <SlidePage /> },
+      { index: true, element: <Navigate to="slide/1" replace /> },
+      { path: 'slide/:slideId?', element: <SlidePage /> },


슬라이드 경로의 slideId 파라미터가 optional(?)로 정의되어 있습니다. 그러나 SlidePage.tsx에서는 기본값으로 DEFAULT_SLIDE_ID를 사용하고, router 설정에서도 명시적으로 'slide/1'로 리다이렉트하고 있습니다. slideId를 필수 파라미터로 만들어 타입 안정성을 높이는 것이 좋습니다.

Suggested change

{ path: 'slide/:slideId?', element: <SlidePage /> },

{ path: 'slide/:slideId', element: <SlidePage /> },

slideId를 optional로 둔 이유는 /:projectId 접근 시 /:projectId/slide/1로 리다이렉트되기 때문입니다. 실제로 SlidePage가 렌더링될 때는 항상 slideId가 존재합니다.

다만 타입 안정성을 위해 필수로 변경하는 것도 좋은 방법이라 생각하여 반영하겠습니다.

반영했습니다 ✅

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- localStorage 접근 시 try-catch로 에러 처리 (프라이빗 모드 등) - getTabFromPathname에서 segments.length 체크 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

AndyH0ng added 12 commits December 31, 2025 04:19

fix: 발표 ID 기반 라우팅 구조로 변경 (#14)

fdb757d

refactor: Gnb 컴포넌트가 독립적으로 상태 관리 (#14)

12d3e7a

feat: 홈 페이지 추가 (#14)

a9682f3

refactor: Layout의 props-drilling 개선 (#14)

d167b2c

refactor: 파라미터명 변경 (#14)

23ed1ff

- presentationId → projectId - slideIndex → slideId - DEFAULT_SLIDE_INDEX → DEFAULT_SLIDE_ID

refactor: App과 Layout 통합 (#14)

ef3be4a

- App.tsx, App.css 삭제 - Layout이 Outlet과 Gnb를 직접 포함 - components/layout/index.ts 삭제 (불필요한 barrel export)

chore: HomePage aria 수정 및 pages barrel export 추가 (#14)

a8e15d8

- HomePage에서 불필요한 tabpanel aria 속성 제거 - pages/index.ts 추가로 import 정리

chore: path alias 설정 및 SlidePage id 연동 (#14)

a842dc8

- vite 및 tsconfig에 @ alias 설정 (src 디렉토리 매핑) - 상대 경로 import를 절대 경로(@)로 리팩토링 - SlidePage에서 URL 파라미터(slideId)를 받아 표시하도록 개선

chore: 로고 assets 추가 (#14)

62e3b64

refactor: Layout 로고 의존성 제거 (#14)

bfcf68f

- Layout: 내부 로고 의존성 제거 - main.tsx: 라우터 설정에서 레이아웃 조합 방식 개선

feat: 최근 조회한 슬라이드로 이동 (#14)

9910aa7

- 로컬스토리지에 최근 조회한 슬라이드 저장/조회 구현 - 슬라이드 페이지 이동 시 최근 조회한 슬라이드 조회 - 로고 홈으로 Link

refactor: Location에 따라 로고 형태 결정 (#14)

bf0acb1

AndyH0ng linked an issue Dec 31, 2025 that may be closed by this pull request

fix: 라우팅 경로 수정 #14

Closed

1 task

AndyH0ng changed the title ~~fx/라우팅 경로 수정~~ fix/라우팅 경로 수정 Dec 31, 2025

AndyH0ng self-assigned this Dec 31, 2025

gemini-code-assist bot reviewed Dec 31, 2025

View reviewed changes

src/main.tsx Outdated Show resolved Hide resolved

AndyH0ng requested a review from Copilot December 31, 2025 06:48

Copilot started reviewing on behalf of AndyH0ng December 31, 2025 06:48 View session

Copilot AI reviewed Dec 31, 2025

View reviewed changes

AndyH0ng and others added 4 commits December 31, 2025 19:14

fix: Gnb에서 projectId 없을 때 early return 처리 (#14)

9d76887

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

refactor: 하드코딩된 슬라이드 ID를 상수로 변경 (#14)

e3d1d7a

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

refactor: slideId 파라미터를 필수로 변경 (#14)

07ac244

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

AndyH0ng merged commit 65bbe91 into develop Dec 31, 2025
1 check passed

AndyH0ng deleted the fix/routing#14 branch January 12, 2026 13:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix/라우팅 경로 수정#15

fix/라우팅 경로 수정#15
AndyH0ng merged 16 commits intodevelopfrom
fix/routing#14

AndyH0ng commented Dec 31, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Dec 31, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

AndyH0ng Dec 31, 2025 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

AndyH0ng Dec 31, 2025 •

edited

Loading

Uh oh!

AndyH0ng Dec 31, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	{ path: 'slide/:slideId?', element: <SlidePage /> },
	{ path: 'slide/:slideId', element: <SlidePage /> },

Conversation

AndyH0ng commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 관련 이슈

✨ 변경 내용

💡 참고 사항

Uh oh!

gemini-code-assist bot commented Dec 31, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

AndyH0ng Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

AndyH0ng Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AndyH0ng Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AndyH0ng commented Dec 31, 2025 •

edited

Loading

AndyH0ng Dec 31, 2025 •

edited

Loading

AndyH0ng Dec 31, 2025 •

edited

Loading