[25.06.19 / TASK-207] Refactor - 프로젝트 전반 리팩토링 #43
Conversation
단순 공유 컴포넌트만 포함하는 관계로, shared로 변경하였음
경로 이슈 및 클라이언트 컴포넌트 처리 미스 해결
|
""" Walkthrough이번 변경은 스타일 상수의 중앙 집중화, 환경 변수 및 URL 상수의 일원화, 컴포넌트 및 유틸리티 코드의 리팩토링, 모듈 재구성, 불필요한 파일 정리, 그리고 타입 및 스타일링 방식 개선을 포함합니다. 주요 레이아웃 및 Provider 구조가 단일 Provider 컴포넌트로 통합되었으며, 스타일 토큰 및 상수 사용이 일관성 있게 변경되었습니다. Changes
Changes Table
Sequence Diagram(s)sequenceDiagram
participant App
participant Provider
participant QueryProvider
participant HolyLoader
participant ToastContainer
participant ModalContainer
participant TermsOfService
App->>Provider: children 전달
Provider->>QueryProvider: children 전달
Provider->>HolyLoader: Suspense fallback
Provider->>ToastContainer: 토스트 UI 렌더링
Provider->>ModalContainer: 모달 UI 렌더링
Provider->>TermsOfService: 약관/정책 표시
Provider->>Provider: ChannelTalk 서비스 초기화 (useEffect)
Possibly related PRs
Suggested reviewers
Poem
""" ✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
src/utils/cache.util.ts (1)
12-15: revalidatePath 인자 사용 오류
Next.jsrevalidatePath는 단일 경로만 지원합니다. 현재('/', 'layout')형태는 오동작을 유발할 수 있습니다.필요한 경우 아래와 같이 두 번 호출하도록 수정해주세요:
-export async function revalidate() { - revalidatePath('/', 'layout'); +export async function revalidate() { + revalidatePath('/'); + revalidatePath('/layout'); redirect('/'); }
🧹 Nitpick comments (9)
src/utils/number.util.ts (1)
1-9: 함수 문서화 및 로직 개선 제안몇 가지 개선사항을 제안합니다:
- JSDoc 수정: 파라미터가
number타입인데 주석에는 "정수"로 표기되어 있어 불일치합니다.- 0 처리 로직:
item이 0일 때도 '0'을 반환하는데, 이것이 의도된 동작인지 확인이 필요합니다.- 음수 처리: 음수에 대한 처리가 고려되지 않았습니다.
다음과 같이 개선할 수 있습니다:
/** - * 주어진 숫자에 천 단위로 콤마를 찍어 반환함. + * 주어진 숫자에 천 단위로 콤마를 찍어 반환함. * - * @param {number} [item] - 변환할 정수 + * @param {number} [item] - 변환할 숫자 * @returns {string} */ export const parseNumber = (item?: number) => - item ? item.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'; + typeof item === 'number' ? item.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0';src/constants/urls.constant.ts (1)
1-7: URL 중앙화 개선 승인 및 검증 제안URL 상수 중앙화로 유지보수성이 크게 향상되었습니다. 하드코딩된 URL 참조를 일관된 상수로 통합한 것은 좋은 리팩토링입니다.
URL 유효성과 접근성을 확인해주세요:
#!/bin/bash # Description: URL 상수들의 유효성 검증 # 각 URL의 접근 가능성 확인 urls=( "https://app.arcade.software/share/8LEqkpUQfEK0p0QpQDLF" "https://velog.io" "https://velog-dashboard.kro.kr/" "https://nuung.notion.site/terms-of-service" "https://nuung.notion.site/privacy-policy" ) for url in "${urls[@]}"; do echo "Checking: $url" curl -s -I -L "$url" | head -1 echo "---" done추가 고려사항: 일부 URL(특히
VELOG_DASHBOARD)은 환경별로 다를 수 있으니, 필요시 환경변수로 관리하는 것을 고려해보세요.src/hooks/useModal.tsx (1)
12-14: 속성 및 파라미터 명명 일관성 제안
Modal프로퍼티와open메서드의 매개변수명이 대문자로 시작하여 React 컴포넌트와 혼동될 수 있습니다. lowerCamelCase(modal,modalNode등)로 변경하는 것을 권장합니다.src/apis/instance.request.ts (1)
67-70: AbortSignal.timeout 분기 로직 정교화 제안
AbortSignal.timeout ? ... : ...대신typeof AbortSignal.timeout === 'function'검사를 통해 명확하게 분기 처리하는 것을 권장합니다.src/utils/datetime.util.ts (1)
50-55: JSDoc 파라미터 표기 및 반환 타입 명시 제안
@param {[time]}부분은 선택적 인자를 의미하지만 실제로는 필수이므로 문서화와 코드가 일치하도록 수정해주세요. 또한 반환 타입: string을 명시하면 타입 안정성이 더욱 강화됩니다.src/app/components/Provider/index.tsx (1)
22-25: ChannelTalk 초기화 로직을 개선할 수 있습니다.현재 구현은 동기적으로 실행되어 잠재적인 성능 문제가 있을 수 있습니다.
다음과 같이 비동기 처리를 고려해보세요:
-const ChannelTalkServiceLoader = () => { - ChannelService.loadScript(); - ChannelService.boot({ pluginKey: ENVS.CHANNELTALK_PLUGIN_KEY }); -}; +const ChannelTalkServiceLoader = async () => { + try { + await ChannelService.loadScript(); + ChannelService.boot({ pluginKey: ENVS.CHANNELTALK_PLUGIN_KEY }); + } catch (error) { + console.warn('ChannelTalk 초기화 실패:', error); + } +};src/app/components/Summary/SidebarContent.tsx (1)
27-29: 조건부 렌더링 로직을 개선할 수 있습니다.
increasement !== 0체크는 0이 falsy 값이므로increasement존재 여부도 함께 확인하는 것이 안전합니다.다음과 같이 수정하는 것을 권장합니다:
-{increasement !== 0 && ( +{increasement !== undefined && increasement !== 0 && (또는 더 간결하게:
-{increasement !== 0 && ( +{!!increasement && (src/shared/Inform.tsx (2)
17-19: 에러 처리 로직 개선 제안현재
useEffect에서 context 검증을 하고 있는데, 이는 렌더링 후에 에러가 발생하므로 비효율적일 수 있습니다.더 나은 방법으로 렌더링 중에 바로 에러를 던지는 것을 고려해보세요:
- useEffect(() => { - if (!context) throw new ParentNotFoundError(); - }, []); + if (!context) throw new ParentNotFoundError();
29-31: 중복된 에러 처리 로직모든 서브컴포넌트에서 동일한 에러 처리 로직이 반복됩니다.
공통 hook으로 추출하여 중복을 제거할 수 있습니다:
const useRequireInformContext = () => { const context = useContext(InformContext); if (!context) throw new ParentNotFoundError(); return context; };그 후 각 컴포넌트에서:
const InformTitle = ({ children }: { children: string | boolean }) => { useRequireInformContext(); // ... rest of component };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
src/shared/Icon/icons/Analytics.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Arrow.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Close.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Door.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Leaderboards.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Like.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Loudspeaker.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Shortcut.svgis excluded by!**/*.svgsrc/shared/Icon/icons/Video.svgis excluded by!**/*.svg
📒 Files selected for processing (73)
.eslintrc.js(1 hunks)sentry.client.config.ts(2 hunks)sentry.edge.config.ts(1 hunks)sentry.server.config.ts(1 hunks)src/__test__/instance.test.tsx(1 hunks)src/__test__/login.test.tsx(1 hunks)src/__test__/main.test.tsx(1 hunks)src/apis/dashboard.request.ts(1 hunks)src/apis/instance.request.ts(3 hunks)src/apis/leaderboard.request.ts(1 hunks)src/apis/user.request.ts(1 hunks)src/app/(auth-required)/components/index.ts(0 hunks)src/app/(auth-required)/layout.tsx(1 hunks)src/app/(auth-required)/leaderboards/Content.tsx(1 hunks)src/app/(auth-required)/leaderboards/page.tsx(1 hunks)src/app/(auth-required)/main/Content.tsx(4 hunks)src/app/(auth-required)/main/components/Summary/SidebarContent.tsx(0 hunks)src/app/(auth-required)/main/components/index.ts(0 hunks)src/app/(auth-required)/main/page.tsx(2 hunks)src/app/(login)/Content.tsx(3 hunks)src/app/components/Header/Section.tsx(1 hunks)src/app/components/Header/index.tsx(4 hunks)src/app/components/Notice/Modal.tsx(2 hunks)src/app/components/Notice/index.tsx(2 hunks)src/app/components/Provider/ModalContainer.tsx(1 hunks)src/app/components/Provider/QueryProvider.tsx(1 hunks)src/app/components/Provider/TermsOfService.tsx(1 hunks)src/app/components/Provider/index.tsx(1 hunks)src/app/components/QRCode/index.tsx(5 hunks)src/app/components/Rank.tsx(1 hunks)src/app/components/Section/Graph.tsx(4 hunks)src/app/components/Section/index.tsx(2 hunks)src/app/components/Summary/BarContent.tsx(2 hunks)src/app/components/Summary/Modal.tsx(3 hunks)src/app/components/Summary/SidebarContent.tsx(1 hunks)src/app/components/Summary/index.tsx(3 hunks)src/app/components/index.ts(1 hunks)src/app/layout.tsx(1 hunks)src/app/robots.ts(1 hunks)src/app/sitemap.ts(1 hunks)src/components/ArriveSoon.tsx(0 hunks)src/components/Providers/ChannelTalkProvider.tsx(0 hunks)src/components/Providers/ModalProvider.tsx(0 hunks)src/components/Providers/index.ts(0 hunks)src/constants/colors.constant.ts(0 hunks)src/constants/env.constant.ts(1 hunks)src/constants/fonts.constant.ts(0 hunks)src/constants/graph.constant.ts(2 hunks)src/constants/index.ts(1 hunks)src/constants/screens.constant.ts(0 hunks)src/constants/sizes.constant.ts(0 hunks)src/constants/styles.constant.ts(1 hunks)src/constants/urls.constant.ts(1 hunks)src/errors/component.error.ts(1 hunks)src/errors/index.ts(1 hunks)src/hooks/useModal.tsx(1 hunks)src/hooks/useResponsive.ts(1 hunks)src/shared/Button.tsx(2 hunks)src/shared/Check.tsx(2 hunks)src/shared/Dropdown.tsx(1 hunks)src/shared/Inform.tsx(1 hunks)src/shared/Input.tsx(2 hunks)src/shared/Modal.tsx(3 hunks)src/shared/index.ts(1 hunks)src/utils/cache.util.ts(1 hunks)src/utils/cookieUtil.tsx(0 hunks)src/utils/datetime.util.ts(1 hunks)src/utils/index.ts(1 hunks)src/utils/number.util.ts(1 hunks)src/utils/numberUtil.ts(0 hunks)src/utils/query.util.ts(2 hunks)tailwind.config.ts(1 hunks)tsconfig.json(2 hunks)
💤 Files with no reviewable changes (13)
- src/app/(auth-required)/components/index.ts
- src/utils/numberUtil.ts
- src/constants/sizes.constant.ts
- src/components/Providers/index.ts
- src/components/Providers/ModalProvider.tsx
- src/utils/cookieUtil.tsx
- src/app/(auth-required)/main/components/index.ts
- src/constants/screens.constant.ts
- src/constants/fonts.constant.ts
- src/constants/colors.constant.ts
- src/components/ArriveSoon.tsx
- src/components/Providers/ChannelTalkProvider.tsx
- src/app/(auth-required)/main/components/Summary/SidebarContent.tsx
🧰 Additional context used
🧠 Learnings (2)
src/app/components/Provider/QueryProvider.tsx (1)
Learnt from: six-standard
PR: Check-Data-Out/velog-dashboard-v2-fe#2
File: src/utils/QueryProvider.tsx:6-6
Timestamp: 2024-11-28T07:39:01.023Z
Learning: `src/utils/QueryProvider.tsx` 파일에서는 프로젝트의 설계상 전역적인 `QueryClient` 인스턴스를 사용합니다.
src/utils/query.util.ts (1)
Learnt from: six-standard
PR: Check-Data-Out/velog-dashboard-v2-fe#2
File: src/utils/QueryProvider.tsx:6-6
Timestamp: 2024-11-28T07:39:01.023Z
Learning: `src/utils/QueryProvider.tsx` 파일에서는 프로젝트의 설계상 전역적인 `QueryClient` 인스턴스를 사용합니다.
🧬 Code Graph Analysis (19)
sentry.client.config.ts (1)
src/constants/env.constant.ts (1)
ENVS(3-21)
src/app/(auth-required)/main/page.tsx (2)
src/apis/dashboard.request.ts (2)
postList(11-16)postSummary(18-18)src/constants/paths.constant.ts (1)
PATHS(1-15)
sentry.edge.config.ts (1)
src/constants/env.constant.ts (1)
ENVS(3-21)
src/app/components/Provider/TermsOfService.tsx (1)
src/constants/urls.constant.ts (1)
URLS(1-7)
sentry.server.config.ts (1)
src/constants/env.constant.ts (1)
ENVS(3-21)
src/apis/instance.request.ts (1)
src/constants/env.constant.ts (1)
ENVS(3-21)
src/errors/component.error.ts (1)
src/errors/instance.error.ts (1)
CustomError(8-18)
src/app/robots.ts (1)
src/constants/urls.constant.ts (1)
URLS(1-7)
src/app/components/Summary/Modal.tsx (1)
src/constants/graph.constant.ts (1)
GRAPH_OPTIONS(3-30)
src/app/sitemap.ts (1)
src/constants/urls.constant.ts (1)
URLS(1-7)
src/app/components/Provider/ModalContainer.tsx (3)
src/hooks/useModal.tsx (1)
useModal(11-15)src/app/components/Notice/Modal.tsx (1)
Modal(9-32)src/app/components/Summary/Modal.tsx (1)
Modal(46-71)
src/app/components/Provider/index.tsx (5)
src/constants/styles.constant.ts (1)
COLORS(38-45)src/constants/env.constant.ts (1)
ENVS(3-21)src/app/components/Provider/QueryProvider.tsx (1)
QueryProvider(11-20)src/app/components/Provider/ModalContainer.tsx (1)
ModalContainer(5-9)src/app/components/Provider/TermsOfService.tsx (1)
TermsOfService(3-15)
src/shared/Input.tsx (1)
src/constants/styles.constant.ts (1)
SIZES(2-7)
src/app/components/Section/index.tsx (6)
src/types/dashboard.type.ts (1)
PostType(1-11)src/utils/query.util.ts (1)
getQueryClient(29-33)src/constants/paths.constant.ts (1)
PATHS(1-15)src/types/user.type.ts (1)
UserDto(6-13)src/constants/urls.constant.ts (1)
URLS(1-7)src/utils/datetime.util.ts (1)
convertDateToKST(24-48)
tailwind.config.ts (1)
src/constants/styles.constant.ts (3)
SCREENS(10-10)FONTS(13-35)COLORS(38-45)
src/shared/Button.tsx (1)
src/constants/styles.constant.ts (1)
SIZES(2-7)
src/app/components/QRCode/index.tsx (4)
src/constants/env.constant.ts (1)
ENVS(3-21)src/shared/Inform.tsx (1)
Inform(6-12)src/utils/datetime.util.ts (1)
formatTimeToMMSS(57-64)src/app/components/QRCode/CopyButton.tsx (1)
CopyButton(10-55)
src/app/components/Section/Graph.tsx (1)
src/constants/graph.constant.ts (1)
GRAPH_OPTIONS(3-30)
src/shared/Inform.tsx (1)
src/errors/component.error.ts (1)
ParentNotFoundError(3-11)
🔇 Additional comments (141)
.eslintrc.js (1)
31-34: Import 순서 정렬 규칙 개선 승인
alphabetize: { order: 'asc' }옵션 추가로 각 그룹 내에서 알파벳 순서 정렬이 강제되어 코드 일관성이 향상됩니다. 이는 프로젝트 전반의 import 구조 표준화에 도움이 될 것입니다.src/hooks/useResponsive.ts (1)
11-18: 코드 가독성 개선 승인빈 줄 추가와
setTimeout콜백 구조 정리로 코드 가독성이 향상되었습니다. 기능에는 영향을 주지 않으면서 코드 품질을 개선한 좋은 변경사항입니다.src/constants/env.constant.ts (2)
1-1: Barrel export 도입 승인import 경로를
'../errors'로 변경한 것은 barrel export 패턴 도입으로 모듈 구조가 개선되었습니다.
3-3: 상수명 변경으로 명명 규칙 일관성 향상
env에서ENVS로 변경하여 상수 명명 규칙의 일관성이 향상되었습니다.다음 스크립트로
ENVS상수가 모든 곳에서 올바르게 사용되고 있는지 확인해주세요:#!/bin/bash # Description: ENVS 상수 사용 확인 # ENVS import 및 사용 확인 rg -A 3 "import.*ENVS.*from" echo "---" rg -A 2 "ENVS\."src/apis/user.request.ts (1)
2-2: import 정렬:NotFoundError위치 조정
ESLintimport/order규칙에 따라PATHS이후에 알파벳 순으로NotFoundError를 재배치했습니다. 기능 변경은 없습니다.src/app/components/Provider/QueryProvider.tsx (1)
5-5: 유틸 경로 중앙화:getQueryClientimport
기존@/utils/queryUtil대신@/utils바렐로부터getQueryClient를 가져와 모듈 경로 일관성을 높였습니다.src/apis/leaderboard.request.ts (1)
2-2: import 순서 정리:LeaderboardListDto이동
PATHS이후에LeaderboardListDto를 알파벳 순으로 배치해 ESLint 규칙을 준수했습니다. 기능에는 영향이 없습니다.src/apis/dashboard.request.ts (1)
2-2: import 순서 통일: DTO 타입 위치 변경
PATHS, SidebarIdType이후에 DTO 타입들을 알파벳 순서로 재배치하여 ESLintimport/order규칙을 만족시켰습니다. 기능 변경 없음.src/shared/Dropdown.tsx (1)
25-25: 디자인 토큰 업데이트: 텍스트 컬러 클래스 변경
text-I2·max-TBL:text-I4에서text-INPUT-2·max-TBL:text-INPUT-4로 변경해 새로운 스타일 상수에 맞췄습니다.src/hooks/useModal.tsx (1)
5-6: React.ReactNode 타입 import 확인 필요
인터페이스에서React.ReactNode를 사용하지만import React또는import type { ReactNode } from 'react'구문이 제거되었습니다. 타입이 정상 인식되는지 빌드 환경에서 확인해주세요.sentry.edge.config.ts (1)
7-11: 환경 변수 표준화 도입 승인
env대신ENVS를 import하여SENTRY_DSN및NODE_ENV참조를 일관성 있게 변경한 것은 적절합니다.Also applies to: 18-18
sentry.client.config.ts (1)
7-11: 환경 변수 표준화 변경 승인
env→ENVS로 수정하여SENTRY_DSN및NODE_ENV참조를 일관성 있게 관리한 것은 적절합니다.Also applies to: 29-30
src/errors/index.ts (1)
1-3: 새 에러 모듈 재수출 승인
./component.error에서 정의된 에러를export *로 재수출하여 집계 에러 모음에 포함한 것은 일관성 있는 에러 관리에 부합합니다.src/__test__/main.test.tsx (1)
2-5: 테스트 import 경로 업데이트 승인
새로운 디렉터리 구조에 맞춰Header와renderWithQueryClient의 import 경로를 올바르게 변경하였습니다.src/__test__/instance.test.tsx (1)
3-3: 경로 수정 확인: QueryProvider import
테스트 유틸 폴더 구조 변경에 맞춰@/app/components/Provider/QueryProvider로 경로가 올바르게 업데이트되었습니다.src/app/components/Provider/TermsOfService.tsx (3)
1-1: URL 상수 중앙화된 모듈로 인입
하드코딩된 링크 대신@/constants의URLS객체를 사용해 링크를 관리합니다. 일관성 및 유지보수성 향상에 기여합니다.
6-6: 스타일 토큰 적용 일관성 확인
text-[14px]→text-SUBTITLE-5로 변경해 통일된 디자인 토큰을 사용했습니다. 다른 컴포넌트와 일관성을 유지합니다.
10-10: 프라이버시 정책 링크 토큰 적용
Privacy Policy 링크에도 동일한 스타일 토큰(text-SUBTITLE-5)이 적용되어 일관성 확보되었습니다.src/app/(auth-required)/main/page.tsx (4)
4-4: 경로 상수(PATHS) 모듈화 반영
API 경로 상수를@/constants에서 가져오도록 변경해 구조화된 상수 관리 방식과 일치시켰습니다.
5-5: 유틸 인덱스 리팩토링 반영
getQueryClient를@/utils인덱스에서 재사용하도록 경로를 단일화했습니다. utils/index.ts에 제대로 재-exports 되었는지 확인해주세요.
25-25: 쿼리 함수 호출 포맷팅
postList호출을 한 줄로 간소화했으나, 기존 파라미터 타입(asc: boolean,sort: string)과 일치합니다. 로직 변화는 없습니다.
29-29: prefetchQuery 호출 유지 확인
PATHS.SUMMARY를 사용한prefetchQuery호출이 잘 작동하도록 변경사항이 올바르게 반영되었습니다.sentry.server.config.ts (3)
6-6: 환경변수 관리 리팩토링 반영
process.env직접 호출 대신ENVS객체를 사용해 환경변수를 중앙에서 강제 검증합니다.
9-9: Sentry DSN 설정 중앙화 검토
dsn: ENVS.SENTRY_DSN로 변경하여 모든 환경변수 검증 로직을 일관화했습니다.
17-17: Sentry 활성화 조건 통일
enabled: ENVS.NODE_ENV === 'production'으로 환경 구분 로직이ENVS에 맞춰졌습니다. NODE_ENV 검증 로직이 정상 동작하는지 확인해주세요.src/app/components/Rank.tsx (2)
23-23: Tailwind before:content 속성 문법 검증
before:content-[attr(data-rank)_'위']구문이 Tailwind v3+에서 정상 처리되는지 확인이 필요합니다. 특수문자 escaping 이슈 여부를 검증해주세요.
27-27: 스타일 토큰 최신화 승인
text-ST4→text-SUBTITLE-3등 디자인 토큰 업데이트가 일관되게 적용되었습니다.src/utils/cache.util.ts (1)
5-10: JSDoc 추가로 문서화 개선
서버 액션에 대한 설명이 명확히 추가되어 유틸 함수의 의도가 잘 드러납니다.src/apis/instance.request.ts (2)
1-4: import 순서 및 환경 변수 모듈화 확인
return-fetch와ENVS사용으로 환경 설정이 중앙화되고 일관성이 향상되었습니다.
28-30: baseUrl에 ENVS.BASE_URL 반영
환경별 BASE_URL이ENVS에서 관리되면서 설정이 명확해지고, 배포 환경에 따른 변경이 쉬워졌습니다.src/__test__/login.test.tsx (1)
1-6: 테스트 import 정리 및 경로 변경 승인
@testing-library/user-event위치 조정과renderWithQueryClient경로 변경이 일관성 있게 적용되었습니다.src/shared/index.ts (1)
1-8: 공용 모듈 export 정리 확인
ArriveSoon,Providers제거 후Inform추가 등 변경 사항이 공유 영역에 일관되게 반영되었습니다.src/app/(auth-required)/leaderboards/page.tsx (1)
2-5: import 경로 및 순서 정리 승인
Metadata,PATHS,getQueryClientimport 경로가 중앙화된 리팩토링 정책과 일치하며, 기능적 변경 없이 가독성이 향상되었습니다.src/errors/component.error.ts (1)
6-9: ParentNotFoundError 상태 코드 의도 확인 필요
CustomError생성자 세 번째 인자는 일반적으로 HTTP 상태 코드를 의미합니다. 여기서0이 의도된 값인지 검토 부탁드립니다.src/app/components/Notice/index.tsx (2)
4-4: import 경로 및 순서 정리 승인
useEffect,useState와convertDateToKST경로 변경이 전체 리팩토링 방향과 부합하며 문제 없습니다.Also applies to: 8-8
46-50: 스타일 토큰 클래스 업데이트 승인
text-SUBTITLE-4,max-MBI:text-SUBTITLE-5등 새로운 디자인 토큰이 적용되어 스타일 가이드와 일관됩니다.src/app/(auth-required)/leaderboards/Content.tsx (1)
5-7: import 재구성 및 경로 업데이트 승인
useMemo,leaderboardList,Rank,Dropdown의 변경된 import 경로와 순서는 바렐 파일 구조 개편에 맞춰 적절히 반영되었습니다.Also applies to: 10-10
src/app/components/index.ts (1)
1-7: 새로운 컴포넌트 바렐 파일 승인
Header,Notice,Provider,Rank,QRCode,Section,Summary가 한 곳에서 재내보내져 일관된 import 경로를 제공합니다.src/constants/index.ts (1)
3-3: 상수 중앙 집중화가 잘 구현되었습니다.
styles.constant와urls.constant를 새로 추가하여 기존의 분산된 상수 파일들을 통합한 것은 좋은 리팩토링입니다. 이를 통해 스타일 관련 상수와 URL 상수를 중앙에서 관리할 수 있게 되었습니다.Also applies to: 6-6
src/utils/index.ts (1)
1-4: 유틸리티 모듈 중앙 집중화가 효과적으로 구현되었습니다.배럴 익스포트 패턴을 사용하여 유틸리티 함수들의 중앙 집중식 진입점을 만든 것은 좋은 접근입니다. 이를 통해
@/utils에서 직접 임포트할 수 있어 코드의 일관성과 가독성이 향상됩니다.src/app/robots.ts (1)
2-2: URL 상수 중앙 집중화가 성공적으로 적용되었습니다.로컬 모듈에서 중앙 집중식
@/constants로 URL 상수 임포트가 변경된 것은 일관성 있는 리팩토링입니다.URLS.VELOG_DASHBOARD사용으로 URL 관리가 통일되었고, 단일 라인 반환문으로 코드도 더 간결해졌습니다.Also applies to: 5-5
src/app/components/Header/Section.tsx (2)
4-4: 컴포넌트 임포트 경로 표준화가 적절히 적용되었습니다.
Icon과NameType을@/shared에서 임포트하도록 변경한 것은 공유 컴포넌트의 중앙 집중화에 부합합니다.
9-9: 스타일 클래스명 표준화가 잘 구현되었습니다.
text-ST4에서text-SUBTITLE-4로 변경하여 더 명확하고 설명적인 네이밍 컨벤션을 따르게 되었습니다. 이는 코드의 가독성을 향상시킵니다.src/app/sitemap.ts (1)
2-2: URL 상수 중앙 집중화와 사이트맵 구조 개선이 효과적입니다.중앙 집중식
URLS.VELOG_DASHBOARD상수 사용으로 URL 관리가 통일되었고, 루트 경로와/main하위 경로를 명시적으로 포함하여 사이트맵 구조가 더욱 명확해졌습니다.Also applies to: 6-9
src/app/components/Notice/Modal.tsx (2)
6-7: 임포트 경로 정리가 잘 적용됨공유 컴포넌트와 유틸리티 함수의 임포트 경로가 새로운 구조에 맞게 적절히 변경되었습니다. 중앙집중화된 모듈 구조로의 변경이 일관성 있게 적용되었습니다.
18-19: 스타일 토큰 명명 규칙이 일관성 있게 적용됨CSS 클래스명이 새로운 디자인 토큰 명명 규칙에 맞게 적절히 업데이트되었습니다 (
text-T4→text-TITLE-4,text-T5→text-TITLE-5). 가독성과 일관성이 개선되었습니다.src/app/components/Summary/BarContent.tsx (3)
1-1: 유틸리티 함수 임포트 중앙집중화 완료
parseNumber함수의 임포트가 특정 모듈에서 중앙집중화된 utils 인덱스로 변경되어 모듈 구조가 개선되었습니다.
11-11: 스타일 토큰 업데이트로 일관성 향상before 의사 클래스의 스타일 토큰이 새로운 명명 규칙에 맞게 업데이트되어 (
text-T5→text-TITLE-5) 전체 프로젝트의 스타일 일관성이 개선되었습니다.
16-18: 텍스트 스타일 클래스명 일관성 있게 적용컴포넌트 내 텍스트 스타일 클래스명이 새로운 디자인 토큰 체계에 맞게 적절히 변경되었습니다 (
text-ST5→text-SUBTITLE-5,text-T4→text-TITLE-4).src/app/components/Summary/index.tsx (3)
4-4: 공유 컴포넌트 임포트 경로 정리 완료Icon 컴포넌트의 임포트 경로가 공유 컴포넌트 디렉토리로 적절히 변경되어 모듈 구조가 개선되었습니다.
37-39: 토글 텍스트 로직이 반대로 변경됨 - 의도 확인 필요토글 버튼의 텍스트 로직이 변경되었습니다:
- 이전:
open ? '접기' : '펼치기'- 현재:
open ? '펼치기' : '접기'이는 UI/UX 관점에서 혼란을 줄 수 있습니다. 현재 상태(
open)와 반대되는 액션을 표시하는 것이 일반적입니다.이 변경이 의도된 것인지, 아니면 실수인지 확인이 필요합니다. 일반적으로는 다음과 같이 현재 상태와 반대 액션을 표시해야 합니다:
-<span>요약 정보 {open ? '펼치기' : '접기'}</span> +<span>요약 정보 {open ? '접기' : '펼치기'}</span>
23-23: 아직SidebarContent구현이 확인되지 않아, props 정의 및prefix/typeIsCount처리 방식을 정확히 검증하기 위해 아래 스크립트를 실행해주세요:#!/usr/bin/env bash # 1) SidebarContent 컴포넌트 파일 경로 조회 fd SidebarContent -t f # 2) 각 파일별로 Props 정의와 prefix/typeIsCount 처리 로직 확인 fd SidebarContent -t f | while read file; do echo "==> ${file} 확인 중..." # Props 인터페이스 또는 타입 정의 조회 rg -nE "interface SidebarContentProps|type SidebarContentProps" -C5 "$file" # prefix 및 typeIsCount 사용 여부 조회 rg -n "prefix|typeIsCount" -C5 "$file" donesrc/constants/graph.constant.ts (3)
1-1: 스타일 상수 중앙집중화로 관리 효율성 향상COLORS 상수의 임포트가 중앙집중화된 styles.constant로 변경되어 스타일 관리가 일원화되었습니다.
3-3: 상수 명명 규칙 표준화 적용상수명이
graphOptions에서GRAPH_OPTIONS로 변경되어 프로젝트 전반의 상수 명명 규칙(대문자 스네이크 케이스)에 맞게 표준화되었습니다.
8-8: 코드 포맷팅 개선으로 가독성 향상레이아웃 패딩과 폰트 속성의 포맷팅이 더 간결하고 읽기 쉽게 개선되었습니다. 기능상 변화 없이 코드 품질이 향상되었습니다.
Also applies to: 20-20
src/app/components/Section/index.tsx (4)
4-7: 임포트 구문 통합이 잘 적용되었습니다.상수들을 중앙화하고 유틸리티 함수들을 통합한 것이 코드의 일관성과 유지보수성을 향상시킵니다. 특히
@/shared로의 경로 변경도 적절합니다.
15-15: URL 상수 중앙화가 올바르게 적용되었습니다.
env.VELOG_URL에서URLS.VELOG로의 변경이 새로운 상수 구조와 일치합니다.
34-34: CSS 클래스명 업데이트가 적절합니다.새로운 스타일 토큰 체계(
text-TITLE-3,text-TITLE-4,text-SUBTITLE-4,text-SUBTITLE-5)로의 변경이 일관성 있게 적용되었습니다.
40-40: 반응형 스타일링 클래스가 일관되게 업데이트되었습니다.
text-SUBTITLE-4와text-SUBTITLE-5클래스로의 변경이 새로운 디자인 시스템과 일치합니다.Also applies to: 45-45
src/shared/Modal.tsx (3)
4-4: 임포트 순서 개선이 적절합니다.
twMerge임포트를 React 임포트 다음으로 이동한 것이 임포트 구성의 일관성을 높입니다.
28-28: 이벤트 핸들러 간소화가 효과적입니다.조건부 실행을 더 간결하게 표현하여 코드 가독성이 향상되었습니다.
39-41: 스타일링 업데이트와 포맷 개선이 적절합니다.
text-TITLE-3과text-TITLE-4클래스로의 변경이 새로운 타이포그래피 시스템과 일치하며, 제목을 별도 줄로 분리한 것도 가독성을 개선합니다.src/shared/Check.tsx (2)
1-1:twJoin도입이 적절합니다.조건부 클래스 결합을 위해
twJoin을 사용한 것이 Tailwind CSS 클래스 관리의 일관성을 높입니다. 특히size-6으로의 단순화도 효과적입니다.Also applies to: 13-16, 21-24
18-18: 입력 관련 스타일 토큰 업데이트가 올바릅니다.
text-I2에서text-INPUT-2로,text-I4에서text-INPUT-4로의 변경이 새로운 스타일 시스템과 일치합니다.src/utils/query.util.ts (3)
7-7: 변수 선언 위치 개선이 적절합니다.
localQueryClient선언을 상수들과 함께 그룹화한 것이 코드 구조를 개선합니다.
23-27: JSDoc 문서화 추가가 훌륭합니다.함수의 동작과 반환 타입을 명확히 설명하는 한국어 주석이 코드 이해도를 크게 향상시킵니다.
29-33: 조건문 구조 단순화가 효과적입니다.명시적인
else블록을 제거하고 early return 패턴을 사용한 것이 코드 가독성을 향상시켰습니다. 기존 로직은 완전히 보존되었습니다.src/app/components/Summary/Modal.tsx (4)
1-1: 임포트 구성 개선이 적절합니다.
useQuery를 상단으로 이동하고, 새로운 경로(@/apis,@/shared)로 임포트를 정리한 것이 코드 구조를 개선합니다.Also applies to: 13-17
63-63: 그래프 옵션 상수화가 적절합니다.
GRAPH_OPTIONS상수 사용으로 설정 관리가 중앙화되어 유지보수성이 향상되었습니다.
64-64: CSS 클래스 개선이 효과적입니다.
h-[auto_!important]에서!h-auto로의 변경이 더 간결하고 표준적인 Tailwind CSS 문법을 따릅니다.
66-66: 타이포그래피 토큰 업데이트가 일관됩니다.
text-ST5에서text-SUBTITLE-5로의 변경이 새로운 스타일 시스템과 일치합니다.src/shared/Input.tsx (3)
2-3: 새로운 유틸리티와 중앙 집중식 상수 도입을 승인합니다.
tailwind-merge유틸리티와 중앙 집중식SIZES상수를 도입한 것은 좋은 접근입니다. 이는 클래스명 관리를 개선하고 스타일 일관성을 높입니다.
7-7: 타입 안전성이 개선되었습니다.
SizeType에서keyof typeof SIZES로 변경하여 타입 안전성과 중앙 집중식 상수 관리가 개선되었습니다.
21-26: 클래스명 병합 방식이 개선되었습니다.
twMerge를 사용한 클래스명 병합 방식이 이전의 문자열 템플릿 방식보다 더 안전하고 예측 가능합니다. 새로운 스타일 토큰(text-INPUT-2,text-INPUT-4)도 일관성 있게 적용되었습니다.tsconfig.json (2)
3-5: 설정 주석이 유용합니다.TypeScript resolver 설정에 대한 주석이 추가되어 설정의 목적이 명확해졌습니다.
29-31: include 배열 업데이트가 적절합니다.
.eslintrc.ts로의 변경과 새로운 Provider 컴포넌트 경로 추가는 프로젝트 구조 변경을 올바르게 반영합니다.src/app/(auth-required)/main/Content.tsx (3)
7-12: import 경로 재구성이 일관성 있게 적용되었습니다.공유 컴포넌트들을
@/shared에서 가져오고, 앱 컴포넌트들을@/app/components에서 가져오는 새로운 구조가 일관성 있게 적용되었습니다. 유틸리티 import도 통합된@/utils모듈로 변경되어 좋습니다.
31-31: 안전한 프로퍼티 접근으로 개선되었습니다.
lastPage?.nextCursor로 optional chaining을 사용하여 런타임 에러 가능성을 줄인 것은 좋은 개선입니다.
59-68: 새로운 디자인 토큰이 일관성 있게 적용되었습니다.
text-SUBTITLE-5,text-SUBTITLE-4와 같은 새로운 스타일 토큰과max-MBI:hidden반응형 클래스가 일관성 있게 적용되었습니다.src/shared/Button.tsx (3)
1-2: 중앙 집중식 접근 방식이 일관성 있게 적용되었습니다.
tailwind-merge와 중앙 집중식SIZES상수를 도입한 것은 Input 컴포넌트와 일관된 접근 방식으로 좋습니다.
6-6: 타입 안전성 개선을 승인합니다.
keyof typeof SIZES를 사용하여 타입 안전성이 개선되고 중앙 집중식 상수 관리가 가능해졌습니다.
17-22: 개선된 클래스명 관리 방식을 승인합니다.
twMerge를 사용한 클래스명 병합과 새로운 스타일 토큰(text-INPUT-1,text-INPUT-3) 적용이 일관성 있고 관리하기 쉬운 방식으로 개선되었습니다.src/app/(auth-required)/layout.tsx (3)
3-5: import 경로 업데이트가 새로운 구조를 올바르게 반영합니다.
@/app/components에서 컴포넌트를 가져오고@/utils에서 유틸리티를 가져오는 새로운 import 구조가 일관성 있게 적용되었습니다.
7-7: 타입 선언 간소화가 적절합니다.단순한 children prop에 대해 인라인 타입 선언을 사용한 것은 코드를 간소화하는 좋은 접근입니다.
10-11: 코드 포맷팅이 일관성 있게 개선되었습니다.prefetchQuery 호출들이 일관된 형식으로 정리되어 가독성이 향상되었습니다.
src/app/components/Provider/index.tsx (3)
1-11: 임포트 구조가 잘 정리되어 있습니다.외부 라이브러리와 내부 모듈이 논리적으로 그룹화되어 있고, 새로운 상수 구조와 일치하게 잘 구성되었습니다.
13-18: HolyLoader 설정이 적절합니다.스타일 상수를 활용하여 일관성 있는 로딩 바 설정을 구현했습니다. 속도와 높이, 색상 설정이 합리적입니다.
30-42: Provider 구조가 잘 설계되었습니다.여러 Provider와 UI 컴포넌트를 논리적으로 감싸고 있어 앱의 최상위 레이어 관리가 효율적입니다. ErrorBoundary > QueryProvider > Suspense 순서도 적절합니다.
src/app/components/Header/index.tsx (3)
4-15: 임포트 경로 업데이트가 일관성 있게 적용되었습니다.새로운 모듈 구조에 맞춰
@/shared와@/utils로의 경로 변경이 적절하며, 임포트 순서도 잘 정리되어 있습니다.
73-73: 스타일 토큰 업데이트가 올바르게 적용되었습니다.
text-T4에서text-TITLE-4로의 변경이 새로운 디자인 시스템과 일치합니다.
110-110: 스타일 토큰 일관성이 잘 유지되었습니다.
text-I3에서text-INPUT-3으로의 변경이 새로운 폰트 상수 구조와 정확히 일치합니다.Also applies to: 119-119
tailwind.config.ts (4)
2-3: 타입 임포트와 상수 구조화가 적절합니다.Config 타입 임포트와 새로운 상수 구조에 맞는 별칭 사용이 명확하게 정리되었습니다.
6-6: FONTS 타입 정의가 정확합니다.Tailwind의 fontSize 설정에 맞는 튜플 타입
[string, { lineHeight: string; fontWeight: number }]이 올바르게 정의되었습니다.
8-11: 상수 변환 로직이 효율적입니다.SCREENS에 'px' 단위를 추가하고, 중첩된 FONTS 구조를 평면화하는 로직이 정확하게 구현되었습니다. 템플릿 리터럴을 사용한 키 조합(
${section}-${key})도 적절합니다.
14-15: 설정 단순화가 잘 적용되었습니다.content 배열을 단일 glob 패턴으로 단순화하고, theme 객체를 한 줄로 압축한 것이 가독성을 높입니다.
src/app/components/Summary/SidebarContent.tsx (3)
1-5: 임포트 구성이 깔끔하게 정리되었습니다.새로운 모듈 구조에 맞춰 타입, 훅, 공유 컴포넌트, 유틸리티를 논리적으로 그룹화했습니다.
7-13: 인터페이스 설계가 합리적입니다.optional 속성들(
increasement?,typeIsCount?)의 사용이 적절하고,SidebarIdType을 통한 타입 안전성도 확보되었습니다.
18-34: 컴포넌트 구조와 스타일링이 우수합니다.반응형 디자인 고려, 접근성을 위한 시맨틱 구조, 그리고 새로운 디자인 토큰 사용이 모두 적절하게 구현되었습니다. Inform 컴포넌트의 활용도 효과적입니다.
src/app/components/Section/Graph.tsx (3)
3-22: 임포트 구문 정리가 체계적으로 수행되었습니다.Chart.js 관련 임포트, 새로운 상수 경로, 그리고
@/shared로의 컴포넌트 경로 변경이 모두 일관성 있게 적용되었습니다.
106-106: 스타일 토큰 업데이트가 정확합니다.
text-ST4에서text-SUBTITLE-4로의 변경이 새로운 폰트 상수 체계와 일치합니다.
145-146: 차트 설정과 스타일링이 개선되었습니다.
GRAPH_OPTIONS상수 사용으로 설정이 중앙화되었고, Tailwind 유틸리티 클래스를 사용한 반응형 높이 설정도 적절합니다.src/app/components/QRCode/index.tsx (9)
4-4: import 순서 개선 확인
QRCodeSVGimport가 적절한 위치로 이동되었습니다. 알파벳 순서에 맞춰 잘 정리되었네요.
6-6: 유틸리티 함수 추가 승인
twJoin을 사용한 조건부 클래스 병합은 좋은 개선입니다. 조건부 스타일링이 더 명확해졌습니다.
8-11: 상수 및 컴포넌트 import 통합 확인중앙화된 상수들(
COLORS,ENVS,PATHS,SCREENS)과 새로운Inform컴포넌트,Modal as Layout형태의 import가 일관성 있게 적용되었습니다.
29-30: 상태 관리 로직 개선
isUnusable변수로 만료와 로딩 상태를 통합한 것은 좋은 리팩토링입니다. 코드가 더 읽기 쉬워졌고 중복이 제거되었습니다.
46-49: 조건부 스타일링 개선
twJoin을 사용한 조건부 클래스 적용이 깔끔합니다. 로딩과 만료 상태에 따른 오버레이 텍스트 표시 로직이 명확하게 구현되었습니다.
58-58: blur 효과 적용 확인
isUnusable상태에 따른 blur 효과 적용이twJoin을 통해 적절히 구현되었습니다.
62-65: Inform 컴포넌트 활용새로운
Inform컴포넌트를 활용한 타이머 표시가 구조적으로 잘 구성되었습니다.formatTimeToMMSS유틸리티 함수와의 조합도 적절합니다.
66-66: 조건부 렌더링 로직 확인
isUnusable상태에 따른 새로고침 버튼 표시 로직이 올바르게 구현되었습니다.
80-80: CopyButton 비활성화 로직
disabled={isUnusable}속성을 통해 QR 코드가 사용 불가능한 상태일 때 복사 버튼을 비활성화하는 로직이 일관성 있게 적용되었습니다.src/app/layout.tsx (9)
2-4: import 정리 및 타입 개선
Metadata타입 import와ReactNodeimport가 적절히 정리되었습니다. 불필요한 imports 제거도 잘 되었네요.
6-7: 상수 중앙화 및 Provider 통합
ENVS,URLS상수들의 중앙화와 단일Provider컴포넌트로의 통합이 코드를 크게 간소화했습니다.
12-12: 메타데이터 URL 상수 사용
metadataBase에서URLS.VELOG_DASHBOARD상수를 사용하는 것이 하드코딩된 문자열보다 훨씬 좋습니다.
15-15: canonical URL 상수 사용
alternates.canonical에서도 중앙화된 URL 상수를 사용하여 일관성이 확보되었습니다.
19-19: OpenGraph URL 상수 사용OpenGraph 설정에서도
URLS.VELOG_DASHBOARD상수를 사용하여 URL 관리가 중앙화되었습니다.
27-27: 타입 단순화
childrenprop의 타입에서Readonly제거로 타입 선언이 단순해졌습니다.
29-29: HTML 속성 개선
translate="no"속성 추가로 브라우저의 자동 번역 기능을 비활성화하는 것은 적절한 개선입니다.
31-31: Provider 통합 확인복잡했던 여러 Provider들을 단일
Provider컴포넌트로 통합한 것은 매우 좋은 리팩토링입니다. 코드가 훨씬 깔끔해졌습니다.
33-33: 환경 변수 상수 사용Google Analytics ID에서
ENVS.GA_ID상수를 사용하는 것이 환경 변수 관리 일관성을 확보합니다.src/app/(login)/Content.tsx (10)
5-7: import 순서 정리import 문들이 알파벳 순서로 잘 정리되었습니다.
9-10: 상수 및 컴포넌트 import 통합
COLORS,URLS상수와Input,Button,Icon컴포넌트들을@/shared에서 import하는 것이 일관성 있게 적용되었습니다.
25-29: mutation 옵션 통합 개선
mutationOptions객체로 공통 로직을 통합한 것은 훌륭한 리팩토링입니다. 코드 중복이 제거되고 유지보수성이 향상되었습니다.
31-33: mutation 사용 일관성두 mutation 모두 동일한
mutationOptions를 사용하여 일관된 동작을 보장합니다.
38-38: 이벤트 핸들러 단순화
onSubmit핸들러에서 명시적인 loader 호출을 제거하고mutationOptions에 위임한 것이 깔끔합니다.
46-46: 스타일 토큰 업데이트
text-T1에서text-TITLE-1로,text-I2에서text-INPUT-2로 변경된 새로운 네이밍 컨벤션이 일관성 있게 적용되었습니다.
79-79: 이벤트 핸들러 개선샘플 로그인 버튼의
onClick핸들러도 단순화되어mutationOptions의 이점을 활용합니다.
82-84: 텍스트 스타일 일관성
text-INPUT-2와text-SUBTITLE-5스타일 토큰이 일관성 있게 적용되었습니다.
89-90: URL 상수 사용하드코딩된 URL 대신
URLS.ARCADE상수를 사용하는 것이 유지보수성을 향상시킵니다.
93-95: 스타일 일관성 유지텍스트 스타일 토큰이 전체적으로 일관성 있게 업데이트되었습니다.
src/shared/Inform.tsx (7)
1-4: import 및 Context 설정필요한 React hooks와 에러 클래스 import가 적절하고, Context 초기화도 올바릅니다.
6-12: 메인 Inform 컴포넌트컨테이너 역할을 하는 메인 컴포넌트의 구조와 스타일링이 깔끔합니다.
children타입에boolean을 포함한 것도 유연성을 제공합니다.
14-24: InformTitle 컴포넌트 구현Context 검증과 에러 처리가 적절히 구현되었습니다.
useEffect를 사용한 검증 방식도 좋습니다.
26-38: InformContent 컴포넌트
suffix옵션을 포함한 props 설계와 스타일링이 좋습니다. 템플릿 리터럴을 사용한 텍스트 조합도 적절합니다.
40-48: InformHorizontal 컴포넌트가로 레이아웃을 위한 컴포넌트 구조가 명확하고 스타일링도 적절합니다.
50-62: InformHighlighted 컴포넌트강조 표시용 컴포넌트의 구현이 일관성 있고 적절합니다.
64-67: 컴파운드 컴포넌트 구성서브컴포넌트들을 메인 컴포넌트에 할당하는 방식이 React 컴파운드 컴포넌트 패턴을 잘 따르고 있습니다.
src/constants/styles.constant.ts (5)
1-7: SIZES 상수 정의인터랙션 너비 값들이 명확하게 정의되어 있고, 네이밍도 직관적입니다.
9-10: SCREENS 상수 정의반응형 디자인을 위한 브레이크포인트 값들이 적절히 정의되었습니다. DSK, TBL, MBI로 구분한 것도 명확합니다.
12-35: FONTS 상수 체계TITLE, SUBTITLE, INPUT으로 카테고리를 나누고 각각 세부 레벨을 제공하는 구조가 체계적입니다. Tailwind CSS 형태의 배열 값도 적절합니다.
37-45: COLORS 상수 팔레트색상 팔레트가 BG, TEXT, BORDER, PRIMARY, DESTRUCTIVE, TRANSPARENT로 잘 분류되어 있고, 각각 적절한 색상 값들을 가지고 있습니다.
35-35: 타입 안전성 확보
as const키워드를 사용하여 TypeScript의 타입 안전성을 확보한 것이 좋습니다.Also applies to: 45-45
| export const ModalContainer = (): React.ReactNode => { | ||
| const { Modal } = useModal(); | ||
|
|
||
| if (typeof window !== 'undefined') return Modal ? Modal : undefined; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
반환 타입과 조건부 렌더링 로직 개선 필요
현재 구현에서 몇 가지 개선점이 필요합니다:
- 반환 타입이
React.ReactNode로 되어 있지만 실제로는React.ReactNode | undefined를 반환합니다 - 서버 사이드에서는 아무것도 반환하지 않아
undefined가 반환됩니다
다음과 같이 수정하는 것을 권장합니다:
-export const ModalContainer = (): React.ReactNode => {
+export const ModalContainer = (): React.ReactNode | null => {
const { Modal } = useModal();
- if (typeof window !== 'undefined') return Modal ? Modal : undefined;
+ if (typeof window === 'undefined') return null;
+ return Modal || null;
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const ModalContainer = (): React.ReactNode => { | |
| const { Modal } = useModal(); | |
| if (typeof window !== 'undefined') return Modal ? Modal : undefined; | |
| }; | |
| export const ModalContainer = (): React.ReactNode | null => { | |
| const { Modal } = useModal(); | |
| if (typeof window === 'undefined') return null; | |
| return Modal || null; | |
| }; |
🤖 Prompt for AI Agents
In src/app/components/Provider/ModalContainer.tsx around lines 5 to 9, the
function's return type is declared as React.ReactNode but it can also return
undefined, and on the server side it returns nothing which results in undefined.
Update the return type to React.ReactNode | undefined to reflect this
accurately, and ensure the function explicitly returns null or a valid React
node on the server side to avoid implicit undefined returns.
| export const Provider = ({ children }: { children: React.ReactNode }) => { | ||
| useEffect(() => ChannelTalkServiceLoader(), []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
useEffect 의존성 배열에 주의가 필요합니다.
ChannelTalkServiceLoader 함수가 컴포넌트 내부에서 정의되어 매 렌더시 새로 생성되지만, useEffect의 의존성 배열이 비어있습니다.
다음과 같이 수정하는 것을 권장합니다:
+const ChannelTalkServiceLoader = useCallback(async () => {
+ try {
+ await ChannelService.loadScript();
+ ChannelService.boot({ pluginKey: ENVS.CHANNELTALK_PLUGIN_KEY });
+ } catch (error) {
+ console.warn('ChannelTalk 초기화 실패:', error);
+ }
+}, []);
-useEffect(() => ChannelTalkServiceLoader(), []);
+useEffect(() => {
+ ChannelTalkServiceLoader();
+}, [ChannelTalkServiceLoader]);또는 ChannelTalkServiceLoader를 컴포넌트 외부로 이동시키세요.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const Provider = ({ children }: { children: React.ReactNode }) => { | |
| useEffect(() => ChannelTalkServiceLoader(), []); | |
| export const Provider = ({ children }: { children: React.ReactNode }) => { | |
| const ChannelTalkServiceLoader = useCallback(async () => { | |
| try { | |
| await ChannelService.loadScript(); | |
| ChannelService.boot({ pluginKey: ENVS.CHANNELTALK_PLUGIN_KEY }); | |
| } catch (error) { | |
| console.warn('ChannelTalk 초기화 실패:', error); | |
| } | |
| }, []); | |
| useEffect(() => { | |
| ChannelTalkServiceLoader(); | |
| }, [ChannelTalkServiceLoader]); | |
| return ( | |
| <> | |
| {children} | |
| </> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In src/app/components/Provider/index.tsx around lines 27 to 28, the useEffect
hook calls ChannelTalkServiceLoader but has an empty dependency array while
ChannelTalkServiceLoader is defined inside the component and recreated on every
render. To fix this, either move ChannelTalkServiceLoader outside the component
so it does not change on each render, or include ChannelTalkServiceLoader in the
useEffect dependency array to ensure the effect runs correctly when the function
changes.
src/utils/cache.util.ts
Outdated
| * 현재 남아있는 유저 정보 캐싱 데이터를 초기화함. | ||
| * NextJS Client-Side Cache 해결을 위해 제작됨. | ||
| */ | ||
|
|
||
| export async function revalidate() { |
There was a problem hiding this comment.
굳이긴 한데, redirect 는 return 값 자체가 없다보니 아래는 어떨까요 흐흐 기왕 빡세게 하는거라면!
https://nextjs.org/docs/app/api-reference/functions/redirect
export async function revalidate(): Promise {
tailwind.config.ts
Outdated
| @@ -1,27 +1,18 @@ | |||
| import type { Config } from 'tailwindcss'; | |||
| import typograpy from '@tailwindcss/typography'; | |||
There was a problem hiding this comment.
근데 이거 원래 모듈이름이 ㅋㅋㅋ typography 의 typograpy 에요? h 하나 없애서 엄청 헷갈리게하네요 ㅎㅎ
There was a problem hiding this comment.
저도 보고 이상하다 싶어서 고쳐뒀습니다;
눈치도 못 채고 있었네요
There was a problem hiding this comment.
좋았던 점
- 상수 중앙 집중형 관리 굉장히 좋은 것 같아요. constants 를 이제 파일명만 봐도 파악 가능할 것 같네요. 다만 index.ts 에 모아줘야 해서, 이런 경우 보통 사내 rules 와 guide 에 모아 두는데 (없으면 나중에 Import 보면 경로 대참사남) 그 미미한 염려 정도?
- 비슷하게 이미지 파일 디렉토리도 더 의미가 확실해진 것 같아요.
- 안그래도 긴 style class 이름들.. twmerge 로 이제 해석 불가능했던 긴 스타일도 정리가 된 것 같네요. 근데 사실 여전히 제가 테일윈드 싫어한 포인트가 딱 이건데, class name 많아지면 진짜 헬임.. 이게 한눈에 보여...?!
- 린팅이 이렇게 거대하게 바뀔 줄이야!! 린팅 세팅이 바뀐건가요?!
아쉬운 점
- 코멘트 소소한것 몇 개 있구, 다만 언급한 바와 같이 뼈대가 굵고 이제 기준님 많의 rule 을 만드신 것 같은데, 이게 기준님 뇌속에만 존재해서, 기록하지 않으면 앞으로 옅어질 가능성이 높다는 점..?
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/utils/cache.util.ts (1)
12-15: 반환 타입을Promise<never>로 수정해야 합니다.과거 리뷰 코멘트에서 이미 언급된 이슈입니다.
redirect함수는 실제로 반환하지 않기 때문에 (내부적으로 에러를 throw하여 리디렉션을 처리), 반환 타입은Promise<never>여야 합니다.다음과 같이 수정해주세요:
-export async function revalidate(): Promise<void> { +export async function revalidate(): Promise<never> {
🧹 Nitpick comments (2)
.env.sample (2)
6-6: 샘플 환경 변수 값 표기 정리 제안현재
<및 작은따옴표로 감싼 플레이스홀더 표기는 혼동을 일으킬 수 있습니다. 공백이 없는 식별자 형태로 값만 두거나, 공백이 포함될 경우 큰따옴표로 감싸는 방식을 권장합니다.제안된 수정:
- NEXT_PUBLIC_SENTRY_AUTH_TOKEN=<'sentry auth token here'> + NEXT_PUBLIC_SENTRY_AUTH_TOKEN="YOUR_SENTRY_AUTH_TOKEN"
7-7: 파일 끝 빈 줄 추가 및 값 표기 개선파일 끝에 빈 줄이 없어 린터 경고가 발생합니다. 또한 DSN 플레이스홀더도 동일하게 간소화된 형식으로 변경해주세요.
제안된 수정:
- NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'> + NEXT_PUBLIC_SENTRY_DSN="YOUR_SENTRY_DSN" +
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.env.sample(1 hunks)src/apis/instance.request.ts(3 hunks)src/constants/env.constant.ts(1 hunks)src/utils/cache.util.ts(1 hunks)tailwind.config.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/apis/instance.request.ts
- src/constants/env.constant.ts
- tailwind.config.ts
🧰 Additional context used
🪛 dotenv-linter (3.3.0)
.env.sample
[warning] 6-6: [ValueWithoutQuotes] This value needs to be surrounded in quotes
[warning] 7-7: [EndingBlankLine] No blank line at the end of the file
[warning] 7-7: [ValueWithoutQuotes] This value needs to be surrounded in quotes
🔇 Additional comments (2)
src/utils/cache.util.ts (2)
1-3: 서버 액션을 위한 올바른 import 구성입니다.서버 액션 구현에 필요한
revalidatePath와redirect함수를 적절히 import하고 있습니다.
5-10: 명확하고 상세한 JSDoc 주석입니다.함수의 목적과 NextJS 클라이언트 사이드 캐시 문제 해결을 위한 배경을 잘 설명하고 있습니다.
🔥 변경 사항
전체적인 프로젝트 구조와 코드들을 리팩토링하였습니다.
정말 수정 범위가 큰데, 리팩토링하다 보니 사소한 것들도 건드리게 되면서 대공사가 되었네요;;
여기서 테스트까지 얹으면 읽다 쓰러지실 것 같아 다른 브랜치로 분리하여 작업하겠습니다..
🏷 관련 이슈
📸 스크린샷 (UI 변경 시 필수)
X
📌 체크리스트
Summary by CodeRabbit
New Features
styles.constant.ts) 및 URL 상수 파일(urls.constant.ts)이 추가되어 스타일과 URL 관리가 중앙화되었습니다.Inform컴포넌트와 하위 컴포넌트가 추가되어 정보성 UI 요소를 일관되게 사용할 수 있습니다.Provider,ModalContainer등 통합 컨텍스트 및 UI 제공 컴포넌트가 도입되었습니다.ParentNotFoundError)가 추가되었습니다.Refactor
twMerge,twJoin)를 활용해 클래스 병합이 개선되었습니다.Bug Fixes
Chores
Style
Documentation
Tests