Conversation
|
Note
|
| 코호트 / 파일 | 변경 요약 |
|---|---|
설정 파일 tsconfig.json, tsconfig.app.json, package.json, vite.config.ts |
TypeScript 경로 별칭 구성 추가(@pages/\, @shared/\, @styles/\*); tsconfig.app.json에서 기본 설정 상속 활성화; package.json에 vite-tsconfig-paths v5.1.4 devDependency 추가; vite.config.ts에 tsconfigPaths 플러그인 통합 |
CSS 모듈 src/pages/\\*/\\*.css.ts, src/shared/components/\\*/\\*.css.ts |
모든 상대 경로 스타일 임포트를 @styles/theme.css 별칭으로 변경; deposit-popular 및 savings-popular 컨테이너 높이 17rem → 16rem 조정 |
페이지 컴포넌트 src/pages/*/\\*.tsx |
상대 경로 임포트를 @shared/\, @pages/\ 별칭으로 마이그레이션; home-page.tsx에서 useNavigate 및 PATH 상수를 이용한 네비게이션 하드코딩 제거 |
공유 컴포넌트 src/shared/components/\\*/\\*.tsx |
유틸리티 및 스타일 임포트 경로를 절대 별칭으로 통합; input.tsx CSS 임포트 순서 재정렬; header.tsx 로그아웃 임포트를 @shared/api/auth로 변경 |
라우터 및 API 파일 src/shared/router/index.tsx, src/shared/api/\\*.ts, src/shared/constants/bank-list.ts |
페이지 및 ProtectedRoute 컴포넌트 임포트를 @pages/\, @shared/\ 별칭으로 변환; API 및 SVG 자산 임포트 경로 절대화; 작은 따옴표 및 후행 쉼표 스타일 정리 |
앱 진입점 src/app/App.tsx, src/app/main.tsx |
라우터 및 CSS 임포트를 @shared/router, @styles 별칭으로 변경; 작은 따옴표 스타일 통일 |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- 특별 주의 사항:
- 약 50개 파일의 임포트 경로 변환 일관성 검증 필요
- tsconfig.json 및 vite.config.ts의 경로 별칭 구성이 모든 임포트 변환과 일치하는지 확인
- home-page.tsx의 네비게이션 변경(하드코딩된 경로 → PATH 상수)이 정상 작동하는지 검증
- deposit-popular, savings-popular 컨테이너 높이 변경(16rem)이 UI/레이아웃에 미치는 영향 검토
Possibly related PRs
- PR
#12: src/shared/api/axios.ts 파일 수정으로 연관됨 — 이전 PR에서 axios 클라이언트 도입, 현재 PR에서 따옴표 및 후행 쉼표 스타일 정리 - PR
#10: 라우터 설정 및 import 경로 별칭화와 직접 관련 — 공유 라우터 구조를 절대 경로로 통합 - PR
#60: deposit-search, savings-search 페이지 및 라우터 임포트를 @... 별칭으로 변환하는 동일한 파일 수정으로 연관
Suggested reviewers
- jihun3666
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목 '[Refactor] 절대 경로 세팅'은 변경사항의 핵심을 명확하게 반영하며, 절대 경로 구성 설정이라는 주요 변경 사항을 간결하게 요약합니다. |
| Linked Issues check | ✅ Passed | PR의 모든 코드 변경사항은 #62 이슈의 목표인 '상대 경로를 절대 경로로 변경'을 충실히 이행합니다. tsconfig, vite 설정 추가 및 모든 import 문을 절대 경로로 마이그레이션했습니다. |
| Out of Scope Changes check | ✅ Passed | 모든 변경사항은 절대 경로 설정이라는 범위 내에 있으며, 기능 로직이나 비즈니스 로직은 수정되지 않았습니다. 마이너한 스타일 조정(따옴표 통일, 여백)도 리팩토링 범위에 포함됩니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
refactor/absolute-path/#62
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/shared/router/index.tsx (1)
3-11: 라우터 및 페이지 절대 경로 임포트는 적절하며, PATH 임포트도 선택적으로 별칭으로 통일 가능
ProtectedRoute와 각 Page 컴포넌트를@shared/,@pages/별칭으로 가져오도록 바꾼 것은 PR 목적(절대 경로 전환)에 잘 맞고, 라우팅 로직에는 영향이 없습니다.다만, 아래와 같이
PATH임포트도 별칭으로 맞추면 이 파일 내 임포트 스타일이 더 일관적일 수 있습니다 (선택 사항입니다).-import { PATH } from './path'; +import { PATH } from '@shared/router/path';src/pages/home/home-page.tsx (1)
91-109: main 섹션의 네비게이션도 PATH 상수로 통일하는 것을 권장로딩이 끝난 뒤 main 섹션에 있는 두 버튼에서는 여전히 문자열 리터럴 경로를 사용하고 있습니다.
navigate('/deposit/search'); navigate('/savings/search');위 부분도 상단과 동일하게
PATH상수를 사용하면, 라우트 변경 시 한 곳만 수정하면 되어 유지보수가 좋아집니다.- navigate('/deposit/search'); + navigate(PATH.DEPOSIT_SEARCH); ... - navigate('/savings/search'); + navigate(PATH.SAVINGS_SEARCH);경로를 상수로 통일하는 리팩터링을 추천드립니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (42)
package.json(1 hunks)src/app/App.tsx(1 hunks)src/app/main.tsx(1 hunks)src/pages/deposit-detail/deposit-detail-page.css.ts(1 hunks)src/pages/deposit-detail/deposit-detail-page.tsx(1 hunks)src/pages/deposit-search/deposit-search-page.css.ts(1 hunks)src/pages/deposit-search/deposit-search-page.tsx(1 hunks)src/pages/error/error-page.css.ts(1 hunks)src/pages/error/error-page.tsx(1 hunks)src/pages/home/home-page.css.ts(1 hunks)src/pages/home/home-page.tsx(4 hunks)src/pages/login/login-page.tsx(1 hunks)src/pages/savings-detail/savings-detail-page.css.ts(1 hunks)src/pages/savings-detail/savings-detail-page.tsx(1 hunks)src/pages/savings-search/savings-search-page.css.ts(1 hunks)src/pages/savings-search/savings-search-page.tsx(1 hunks)src/pages/signup/signup-page.css.ts(1 hunks)src/pages/signup/signup-page.tsx(1 hunks)src/shared/api/axios.ts(2 hunks)src/shared/api/products.ts(2 hunks)src/shared/components/button/button.css.ts(1 hunks)src/shared/components/deposit-basic/deposit-basic.css.ts(1 hunks)src/shared/components/deposit-compare/deposit-compare.css.ts(1 hunks)src/shared/components/deposit-compare/deposit-compare.tsx(1 hunks)src/shared/components/deposit-popular/deposit-popular.css.ts(1 hunks)src/shared/components/dropdown/dropdown.css.ts(1 hunks)src/shared/components/dropdown/option-item.css.ts(1 hunks)src/shared/components/header/header.css.ts(1 hunks)src/shared/components/header/header.tsx(1 hunks)src/shared/components/input/input.css.ts(1 hunks)src/shared/components/input/input.tsx(1 hunks)src/shared/components/savings-basic/savings-basic.css.ts(1 hunks)src/shared/components/savings-compare/savings-compare.css.ts(1 hunks)src/shared/components/savings-compare/savings-compare.tsx(1 hunks)src/shared/components/savings-popular/savings-popular.css.ts(1 hunks)src/shared/components/spinner/spinner.css.ts(1 hunks)src/shared/components/title/title.css.ts(1 hunks)src/shared/constants/bank-list.ts(1 hunks)src/shared/router/index.tsx(1 hunks)tsconfig.app.json(1 hunks)tsconfig.json(1 hunks)vite.config.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-10-12T14:16:30.552Z
Learnt from: 1jiwoo27
Repo: SKKU-FINITY/fini-client PR: 16
File: eslint.config.ts:1-1
Timestamp: 2025-10-12T14:16:30.552Z
Learning: In eslint.config.ts flat config, the `extends` property does not exist and causes TypeScript errors. Instead, spread configuration objects directly in the defineConfig array.
Applied to files:
tsconfig.app.json
📚 Learning: 2025-10-12T14:16:59.848Z
Learnt from: 1jiwoo27
Repo: SKKU-FINITY/fini-client PR: 16
File: eslint.config.ts:11-11
Timestamp: 2025-10-12T14:16:59.848Z
Learning: In ESLint v9.37.0, the import `{ defineConfig, globalIgnores } from 'eslint/config'` is valid and works correctly. The module exists and exports these functions in this version.
Applied to files:
vite.config.ts
🧬 Code graph analysis (4)
src/shared/components/savings-popular/savings-popular.css.ts (3)
src/shared/components/deposit-compare/deposit-compare.css.ts (1)
savingsContainer(4-13)src/shared/components/savings-basic/savings-basic.css.ts (1)
savingsContainer(4-13)src/shared/components/savings-compare/savings-compare.css.ts (1)
savingsContainer(4-13)
src/shared/components/deposit-popular/deposit-popular.css.ts (1)
src/shared/components/deposit-basic/deposit-basic.css.ts (1)
depositContainer(4-13)
src/app/App.tsx (1)
src/shared/router/index.tsx (1)
router(13-22)
src/pages/home/home-page.tsx (2)
src/shared/router/path.ts (1)
PATH(1-10)src/shared/components/button/button.css.ts (1)
button(4-50)
🔇 Additional comments (43)
src/shared/components/deposit-popular/deposit-popular.css.ts (1)
1-1: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다. PR 목표에 부합합니다.src/shared/constants/bank-list.ts (1)
17-17: 절대 경로 import 변경 완료상대 경로에서
@shared별칭으로 성공적으로 변경되었습니다.src/shared/components/button/button.css.ts (1)
2-2: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다.src/shared/components/title/title.css.ts (1)
2-2: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다.src/pages/home/home-page.css.ts (1)
1-1: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다.src/shared/components/deposit-basic/deposit-basic.css.ts (1)
1-1: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다.src/pages/deposit-detail/deposit-detail-page.css.ts (1)
1-1: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다.src/shared/components/savings-popular/savings-popular.css.ts (2)
1-1: 절대 경로 import 변경 완료상대 경로에서
@styles별칭으로 성공적으로 변경되었습니다.
8-8: Review comment is based on incorrect premiseBoth
savings-popular.css.tsanddeposit-popular.css.tsare newly created files in this commit, not modifications of existing files. The height value of16remis the original value in these new files, not a change from17rem. The commit "feat: path 상수화" (path constantization) is about extracting styles to separate CSS files as part of the refactoring, not making style adjustments. No verification of intentional style changes is needed since these are new file creations.Likely an incorrect or invalid review comment.
src/shared/api/products.ts (1)
8-9: LGTM! 코드 스타일 개선이 적용되었습니다.후행 쉼표(trailing comma) 추가는 좋은 관행입니다. 향후 파라미터 추가 시 git diff가 더 깔끔해지고 쉼표 누락을 방지할 수 있습니다.
Also applies to: 23-24
src/shared/components/deposit-compare/deposit-compare.css.ts (1)
1-1: 절대 경로 마이그레이션이 올바르게 적용되었습니다.상대 경로에서
@styles별칭으로 변경하여 코드 가독성이 향상되었고, 향후 파일 이동 시에도 import 경로를 수정할 필요가 없습니다.src/shared/components/savings-basic/savings-basic.css.ts (1)
1-1: 절대 경로 마이그레이션이 올바르게 적용되었습니다.다른 컴포넌트와 일관되게
@styles별칭을 사용하고 있습니다.src/shared/components/spinner/spinner.css.ts (1)
3-3: 절대 경로 마이그레이션이 올바르게 적용되었습니다.
@styles별칭을 사용하여 프로젝트 전반에 걸쳐 일관된 import 스타일을 유지하고 있습니다.src/shared/components/input/input.css.ts (1)
2-2: 절대 경로 마이그레이션이 올바르게 적용되었습니다.
@styles별칭 사용으로 import 경로가 간결해졌습니다.src/shared/components/input/input.tsx (1)
5-5: LGTM! import 순서 정리가 적용되었습니다.외부 라이브러리 import 다음에 로컬 스타일 import를 배치하여 import 그룹이 명확해졌습니다.
src/shared/api/axios.ts (1)
1-1: LGTM! 코드 스타일 일관성이 개선되었습니다.큰따옴표에서 작은따옴표로 변경하고 후행 쉼표를 추가하여 프로젝트 전반의 코드 스타일 일관성이 향상되었습니다. 기능적 변경은 없습니다.
Also applies to: 7-7, 12-12, 21-21, 24-24
package.json (1)
44-44: Package version is current and no known security vulnerabilities detected.
vite-tsconfig-paths@^5.1.4is the latest version available on npm (released 2025-08-01) and has no direct security vulnerabilities in the package itself. The dependency is appropriately pinned with a caret constraint and is suitable for use.src/shared/components/dropdown/option-item.css.ts (1)
1-1: 드롭다운 옵션 스타일의 경로 별칭 적용 확인
vars를@styles/theme.css에서 가져오도록 변경된 부분이 전체 코드베이스의 별칭 전략과 일관되고, 나머지 스타일 정의에도 영향 없이 잘 적용된 것으로 보입니다.src/shared/components/header/header.css.ts (1)
1-1: 헤더 스타일 테마 import 절대 경로화
@styles/theme.css별칭 사용으로 변경된 점이 다른 페이지/컴포넌트와 동일한 패턴이고, 아래에서vars사용도 그대로라서 문제 없어 보입니다.src/shared/components/dropdown/dropdown.css.ts (1)
1-1: 드롭다운 스타일 테마 import 절대 경로화테마를
@styles/theme.css에서 가져오도록 수정한 부분이 alias 설정 방향과 일치하며, 이후vars사용이 모두 유효하므로 경로 변경만으로 잘 마이그레이션된 것으로 판단됩니다.src/pages/deposit-search/deposit-search-page.css.ts (1)
1-1: 예금 검색 페이지 스타일의 테마 alias 적용상대 경로에서
@styles/theme.css별칭으로 전환된 것 외에는 스타일 로직 변화가 없어 보이며,vars.size,vars.color등의 사용도 그대로라 안전한 리팩터링입니다.src/shared/components/deposit-compare/deposit-compare.tsx (1)
2-2: 비교 유틸 import를 @shared 별칭으로 통합
getDiffText,getDiffClassName,formatDiffMoney를@shared/utils/format에서 가져오도록 변경한 것은 공통 포맷터의 위치와 관계없이 사용할 수 있게 해 주어 구조적으로 더 안정적입니다. 컴포넌트 내 사용 방식도 그대로라 동작 변화는 없을 것으로 보입니다.src/shared/components/savings-compare/savings-compare.css.ts (1)
1-1: 적금 비교 컴포넌트 스타일의 테마 경로 리팩터링
@styles/theme.css별칭 사용으로 경로가 단순화되었고, 아래에서 사용하는vars.color.*,vars.size.*키와도 일관성이 유지됩니다. 다른 CSS 모듈과 동일한 패턴이라 유지보수 측면에서도 좋아 보입니다.src/pages/signup/signup-page.css.ts (1)
2-2: 회원가입 페이지 스타일의 테마 alias 적용테마 변수를
@styles/theme.css에서 가져오도록 변경한 부분이 다른 페이지들과 동일한 패턴이며,vars.size.xs,vars.color.danger등 사용도 정상이라 경로 리팩터링이 잘 마무리된 것 같습니다.src/shared/components/header/header.tsx (1)
2-3: 헤더 로그아웃 및 스타일 import 절대 경로 정리
logout을@shared/api/auth에서 가져오도록 변경해 인증 관련 로직을 shared 계층에 명확히 묶은 점이 구조적으로 좋습니다../header.cssimport도 함께 정리되어, 스타일과 컴포넌트가 동일 디렉터리 기준으로 깔끔하게 연결되어 있습니다.logout은@shared/api/auth.ts에서 제대로 export되고 있습니다.src/shared/components/savings-compare/savings-compare.tsx (1)
2-2: 절대 경로 마이그레이션이 올바르게 적용되었습니다.상대 경로에서
@shared/utils/format별칭으로의 변경이 정확합니다.src/pages/deposit-search/deposit-search-page.tsx (1)
2-9: 모든 임포트가 절대 경로로 올바르게 변경되었습니다.API, 스토어, 컴포넌트, 상수 등 모든 임포트가
@shared/*별칭을 사용하도록 일관되게 업데이트되었습니다.src/pages/login/login-page.tsx (1)
4-8: 절대 경로 적용 및 임포트 순서 정리가 적절합니다.API 및 컴포넌트 임포트가
@shared/*별칭으로 올바르게 변경되었으며, 스타일 임포트의 위치도 적절하게 조정되었습니다.src/pages/error/error-page.tsx (1)
2-5: 절대 경로 마이그레이션이 정확합니다.라우터 경로, 컴포넌트, 스타일 임포트가 모두
@shared/*별칭으로 올바르게 변경되었습니다.src/pages/savings-detail/savings-detail-page.css.ts (1)
1-1: 스타일 별칭이 올바르게 적용되었습니다.테마 변수 임포트가
@styles/theme.css별칭으로 정확하게 변경되었습니다.src/app/main.tsx (2)
1-5: 절대 경로와 스타일 변경이 적용되었습니다.스타일 임포트가
@styles/*별칭을 사용하도록 변경되었습니다. 또한 따옴표 스타일이 작은따옴표로 통일되었는데, 이는 프로젝트 전체에 일관되게 적용되어야 합니다.
7-10: The code at lines 7-10 already complies with the project's configuration. The Prettier config enforcessingleQuote: true,jsxSingleQuote: true, andtrailingComma: "all", which means single quotes and trailing commas are required, not style violations. ThegetElementById('root')uses single quotes as configured, and the trailing comma after</StrictMode>,follows the rule set.src/pages/savings-search/savings-search-page.css.ts (1)
1-1: 스타일 별칭이 정확하게 적용되었습니다.테마 변수 임포트가
@styles/theme.css별칭으로 올바르게 변경되었습니다.tsconfig.json (1)
4-11: Path alias configuration is correctly set up.The
baseUrlandpathsconfiguration are accurate, with@pages/*,@shared/*, and@styles/*aliases properly mapped. Verification confirms:
- Vite is configured with the
tsconfigPathsplugintsconfig.app.jsonproperly extendstsconfig.json- No conflicting relative imports in the codebase
vite-tsconfig-pathsdependency is installedsrc/pages/savings-detail/savings-detail-page.tsx (1)
3-8: LGTM! 절대 경로 임포트가 일관되게 적용되었습니다.공유 모듈들은
@shared/별칭을 사용하고, 로컬 CSS 파일은 상대 경로를 유지하는 것이 적절합니다.src/pages/savings-search/savings-search-page.tsx (1)
2-10: LGTM! 임포트 경로가 올바르게 리팩토링되었습니다.API, 스토어, 상수, 컴포넌트 모두
@shared/별칭으로 일관되게 변경되었습니다.src/pages/deposit-detail/deposit-detail-page.tsx (1)
3-8: LGTM! savings-detail-page와 동일한 패턴으로 일관되게 적용되었습니다.src/pages/signup/signup-page.tsx (1)
4-9: LGTM! 공유 모듈 임포트가 절대 경로로 올바르게 변경되었습니다.vite.config.ts (1)
4-4: LGTM! vite-tsconfig-paths 플러그인이 올바르게 구성되었습니다.이 플러그인은 TypeScript의 경로 별칭을 Vite 빌드 시스템과 연결하여 개발 및 프로덕션 빌드에서 별칭 해석이 가능하도록 합니다.
Also applies to: 17-17
src/pages/error/error-page.css.ts (1)
2-2: LGTM! 스타일 테마 임포트가@styles별칭으로 변경되었습니다.tsconfig.app.json (1)
2-2: Base configuration inheritance is correctly set up.The
"extends": "./tsconfig.json"allows tsconfig.app.json to inherit path aliases (@pages/*,@shared/*,@styles/*) andbaseUrlfrom the base config, avoiding duplication.src/app/App.tsx (1)
1-6: App에서 라우터 절대 경로 임포트 적용 잘 되어 있습니다
@shared/router별칭으로의 변경만 있고,RouterProvider사용 방식이나 컴포넌트 구조에는 변화가 없어 리스크 없이 목적에 잘 부합합니다. 추가적인 수정 포인트는 없어 보입니다.src/pages/home/home-page.tsx (1)
2-10: 홈 페이지 상단 임포트 및 로딩 상태 버튼 네비게이션 구조 적절
useNavigate,PATH, API/공용 컴포넌트/버튼 스타일을@shared/,@pages/별칭으로 임포트한 부분이 PR 목적에 잘 맞습니다.- 로딩 상태에서 메인 버튼 클릭 시
navigate(PATH.DEPOSIT_SEARCH),navigate(PATH.SAVINGS_SEARCH)를 사용하는 것도 라우트 상수를 통해 경로를 한 곳에서 관리하게 해주어 좋습니다.이 구간은 별다른 추가 이슈 없이 그대로 두셔도 될 것 같습니다.
Also applies to: 61-73
1 participant
📌 Related Issue
✅ Checklist
📚 Tasks
전에 @jihun3666 가 작업했던 거는 날리고 다시 하기로 해서
새로 세팅해봤습니다 ~~~
⭐ PR Point (To Reviewer)
이런식으로 사용하시면 됩니다
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.