[25.02.16 / TASK-118] Feature: 채널톡 추가 및 헤더 로고 클릭 동작 추가 #13
Conversation
username 관련 오류 및 SSR 렌더린 관련 오류로 추정되는 오류 수정
|
""" Walkthrough이번 PR은 새로운 의존성 추가와 인증 쿠키 처리 방식, 레이아웃 구성 및 타입 정의 수정 등 여러 코드를 갱신하였습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant CP as ChannelTalkProvider
participant E as 환경변수
participant Loader as ChannelTalk SDK Loader
participant Service as 채널톡 서비스
CP->>E: CHANNELTALK_PLUGIN_KEY 확인
alt 키 존재
CP->>Loader: 키 전달 및 스크립트 로드 호출
Loader->>Service: 채널톡 스크립트 로드 및 초기화
Service-->>CP: 초기화 완료 응답
else 키 없음
CP-->>CP: 에러 발생 (환경변수 누락)
end
sequenceDiagram
participant P as Page Function
participant C as cookies() 함수
participant API as API Endpoint
P->>C: cookies().toString() 호출
C-->>P: 쿠키 문자열 반환
P->>API: { headers: { Cookie: "쿠키 문자열" } } 전달
API-->>P: 응답 반환
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 4
🔭 Outside diff range comments (1)
src/components/auth-required/main/Section/Graph.tsx (1)
80-98: 🛠️ Refactor suggestion날짜 제한 제거에 대한 검토 필요
최대 날짜 제한이 제거되었습니다. 이로 인해 사용자가 미래 날짜를 선택할 수 있게 되어 잘못된 데이터를 조회할 수 있습니다.
현재 날짜를 최대값으로 설정하는 것을 제안합니다:
<Input size={isMBI ? 'SMALL' : 'MEDIUM'} form="SMALL" value={type.end} min={type.start ? type.start : releasedAt.split('T')[0]} + max={new Date().toISOString().split('T')[0]} onChange={(e) => setType({ ...type, end: e.target.value })} placeholder="종료 날짜" type="date" />
🧹 Nitpick comments (4)
src/components/common/ChannelTalkProvider.tsx (1)
22-22: 컴포넌트 언마운트 시 정리(cleanup) 로직 추가 필요Channel Talk 서비스의 적절한 정리를 위해 cleanup 함수를 추가하는 것이 좋습니다.
- useEffect(() => ChannelTalkServiceLoader(), []); + useEffect(() => { + ChannelTalkServiceLoader(); + return () => { + ChannelService.shutdown(); + }; + }, []);src/app/(with-tracker)/(auth-required)/layout.tsx (1)
19-19: 타입 안전성 개선 제안쿠키 헤더 처리에 대한 타입 안전성을 개선할 수 있습니다.
- await me({ headers: { Cookie: cookies().toString() } }), + await me({ + headers: { + Cookie: cookies().toString() + } satisfies Record<string, string> + }),src/app/layout.tsx (1)
26-29: 성능 최적화 제안ToastContainer는 ChannelTalkProvider 외부에 위치할 수 있습니다. 이렇게 하면 불필요한 리렌더링을 방지할 수 있습니다.
<QueryProvider> + <ToastContainer autoClose={2000} /> <ChannelTalkProvider> - <ToastContainer autoClose={2000} /> {children} </ChannelTalkProvider>src/components/auth-required/main/Section/index.tsx (1)
16-17: URL 생성 로직 개선 제안URL 생성 로직을 별도 변수로 분리한 것은 좋은 개선이지만, 재사용성을 위해 유틸리티 함수로 추출하는 것을 고려해보세요.
다음과 같은 유틸리티 함수 생성을 제안합니다:
// utils/urlUtil.ts export const createVelogPostUrl = (username: string | undefined, slug: string) => `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username || ''}/${slug}`;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
package.json(1 hunks)src/app/(with-tracker)/(auth-required)/layout.tsx(1 hunks)src/app/(with-tracker)/(auth-required)/main/page.tsx(2 hunks)src/app/layout.tsx(2 hunks)src/components/auth-required/header/Section.tsx(1 hunks)src/components/auth-required/header/index.tsx(1 hunks)src/components/auth-required/main/Section/Graph.tsx(1 hunks)src/components/auth-required/main/Section/index.tsx(2 hunks)src/components/common/ChannelTalkProvider.tsx(1 hunks)src/components/common/index.ts(1 hunks)
🔇 Additional comments (4)
src/components/common/index.ts (1)
1-1: 코드가 깔끔하고 일관성이 있습니다!새로운
ChannelTalkProvider컴포넌트의 export가 기존 패턴을 잘 따르고 있습니다.src/components/auth-required/header/Section.tsx (1)
27-27: 타입 정의 개선 승인
children타입을React.ReactNode로 단순화한 것은 좋은 변경사항입니다. 실제 사용 패턴에 더 잘 부합하며 타입 안정성을 향상시킵니다.Also applies to: 33-33
src/components/auth-required/header/index.tsx (1)
65-68: 로고 클릭 시 메인 통계 페이지로 이동하는 기능이 잘 구현되었습니다!PR 목표에 맞게 헤더 로고를 클릭하면 사용자의 메인 통계 페이지로 이동하도록 구현되었습니다.
package.json (1)
16-16:✅ Verification successful
Channel Talk SDK 버전을 확인해주세요.
현재 설치된 버전이 최신 안정 버전인지 확인이 필요합니다.
🌐 Web query:
What is the latest stable version of @channel.io/channel-web-sdk-loader?💡 Result:
The latest stable version of
@channel.io/channel-web-sdk-loaderis v2.0.0, released approximately 4-5 months ago (around October 2024)[4][10]. This version introduced breaking changes including:
- Removal of deprecated
openSupportBotinterface- Addition of new
openWorkflowmethod- Updates to the
setPageinterface[10]Key indicators confirming this as the latest stable release:
- Official npm registry lists v2.0.0 as "latest"[4][8]
- GitHub releases show v2.0.0 as most recent with full changelog[10]
- No newer versions appear in package manager listings or release notes[9]
For implementation details:
// Installation via npm/yarn/pnpm npm install @channel.io/channel-web-sdk-loader@2.0.0 // Usage pattern remains consistent with previous versions import * as ChannelService from '@channel.io/channel-web-sdk-loader'; ChannelService.loadScript(); ChannelService.boot({ pluginKey: 'YOUR_PLUGIN_KEY' })[1][7]Citations:
- 1: https://classic.yarnpkg.com/en/package/@channel.io/channel-web-sdk-loader
- 2: https://experienceleague.adobe.com/en/docs/experience-platform/web-sdk/home
- 3: https://docs.agora.io/en/video-calling/overview/release-notes
- 4: https://www.npmjs.com/package/@channel.io%2Fchannel-web-sdk-loader
- 5: https://update.channel.io
- 6: https://docs.flutter.dev/release/archive
- 7: https://github.com/channel-io/channel-web-sdk-loader
- 8: https://www.npmjs.com/package/@channel.io/channel-web-sdk-loader?activeTab=versions
- 9: https://github.com/channel-io/channel-web-sdk-loader/blob/main/package-lock.json
- 10: https://github.com/channel-io/channel-web-sdk-loader/releases
최신 안정 버전 적용 확인됨
현재
package.json에 설정된"@channel.io/channel-web-sdk-loader": "^2.0.0"버전은 최신 안정 버전인 2.0.0과 일치합니다. 추가 업데이트나 수정 사항은 없습니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
.env.sample (1)
7-7: 새 환경 변수 추가 확인
새 환경 변수NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY가 채널톡 초기화를 위한 키 정보를 제공하는 용도로 올바르게 추가되었습니다. 실제 배포 시 유효한 키로 대체되어야 하며, 가독성을 위해 주석으로 해당 변수의 용도와 사용 방법을 간단히 기재하는 것도 고려해보면 좋겠습니다.src/errors/main.error.ts (1)
3-7: 에러 메시지를 더 자세하게 작성하면 좋을 것 같습니다.현재 에러 메시지가 단순히 'username not found'로 되어있는데, 사용자나 개발자가 더 쉽게 이해할 수 있도록 상세한 메시지를 추가하면 좋을 것 같습니다.
다음과 같이 수정하는 것을 제안드립니다:
- super('username not found', 'UserNameNotFound'); + super('사용자 이름을 찾을 수 없습니다. 로그인이 필요하거나 계정이 존재하지 않을 수 있습니다.', 'UserNameNotFound');src/apis/dashboard.request.ts (1)
10-15: URL 생성 로직을 개선하면 좋을 것 같습니다.URL 파라미터 구성 시 타입 안정성과 유지보수성을 높일 수 있는 방법이 있습니다.
다음과 같은 개선사항을 제안드립니다:
+const createPostListUrl = (baseUrl: string, params: { sort: SortType; cursor?: string }) => { + const searchParams = new URLSearchParams(); + if (params.cursor) searchParams.set('cursor', params.cursor); + searchParams.set('asc', params.sort.asc.toString()); + searchParams.set('sort', params.sort.sort); + return `${baseUrl}?${searchParams.toString()}`; +}; export const postList = async (sort: SortType, cursor?: string) => await instance<null, PostListDto>( - cursor - ? `${PATHS.POSTS}?cursor=${cursor}&asc=${sort.asc}&sort=${sort.sort}` - : `${PATHS.POSTS}?asc=${sort.asc}&sort=${sort.sort}`, + createPostListUrl(PATHS.POSTS, { sort, cursor }) );이렇게 수정하면 다음과 같은 장점이 있습니다:
- URL 파라미터 생성 로직이 분리되어 관리가 용이
- URLSearchParams를 사용하여 안전한 URL 인코딩
- 조건부 로직이 더 명확해짐
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
.env.sample(1 hunks)src/apis/dashboard.request.ts(1 hunks)src/apis/instance.request.ts(1 hunks)src/apis/user.request.ts(2 hunks)src/app/(with-tracker)/(auth-required)/layout.tsx(1 hunks)src/app/(with-tracker)/(auth-required)/main/Content.tsx(1 hunks)src/app/(with-tracker)/(auth-required)/main/page.tsx(1 hunks)src/components/auth-required/header/index.tsx(2 hunks)src/components/auth-required/main/Section/index.tsx(2 hunks)src/errors/index.ts(1 hunks)src/errors/main.error.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/(with-tracker)/(auth-required)/layout.tsx
- src/components/auth-required/header/index.tsx
🧰 Additional context used
🧠 Learnings (1)
src/app/(with-tracker)/(auth-required)/main/page.tsx (1)
Learnt from: six-standard
PR: Check-Data-Out/velog-dashboard-v2-fe#13
File: src/app/(with-tracker)/(auth-required)/main/page.tsx:28-28
Timestamp: 2025-02-16T08:28:38.561Z
Learning: In Next.js server components, using `cookies().toString()` is the proper way to handle cookie transmission on the server side, as it's internal to the server and designed for server component usage.
🔇 Additional comments (8)
src/errors/index.ts (1)
1-2: 에러 모듈 구조가 잘 구성되어 있습니다!에러 타입들을 중앙에서 관리하고 재사용할 수 있도록 구성된 점이 좋습니다.
src/apis/user.request.ts (1)
18-18:❓ Verification inconclusive
인증 처리 방식 변경에 대한 검증이 필요합니다.
me함수에서 인증 관련 파라미터가 제거되었습니다. 이 변경으로 인해 인증이 올바르게 처리되는지 확인이 필요합니다.다음 사항들을 확인해주세요:
- 인증이 필요한 API 호출 시 쿠키가 올바르게 전달되는지
- 인증되지 않은 사용자의 요청이 적절히 처리되는지
- 세션 만료 시 적절한 에러 처리가 이루어지는지
🏁 Script executed:
#!/bin/bash # Description: Check for authentication handling in the codebase # Search for cookie handling in instance.request.ts echo "Checking instance.request.ts for cookie handling:" rg -A 5 "cookie" "src/**/instance.request.ts" # Search for authentication error handling echo "Checking for authentication error handling:" rg -A 5 "401|unauthorized|unauthenticated" "src/**/*.ts"Length of output: 429
[검증 필요] 인증 처리 관련 상세 확인
현재 제공된 쉘 스크립트 결과에서
instance.request.ts파일 및 인증 에러 처리 관련 검색 결과가 나오지 않아, 현재 코드 베이스 내에서 인증 쿠키 전달이나 예외 처리 로직의 위치를 확정하지 못했습니다.
따라서 아래 사항들을 추가로 수동 혹은 별도의 스크립트로 확인해 주시기 바랍니다:
인증 관련 모듈 확인:
me함수가 사용하는instance가 정의된 파일(또는 모듈)에서 쿠키 전달 및 인증 로직이 구현되어 있는지 확인- 인증 실패(401, unauthorized 등) 시의 에러 핸들링 로직이 존재하는지 검토
기능 테스트:
- 인증이 필요한 API 호출 시 실제로 쿠키가 올바르게 전달되어 요청이 성공하는지
- 인증되지 않은 사용자의 요청에 대해 적절한 에러 메시지/응답이 반환되는지 테스트
해당 사항들이 예상대로 작동하는지 수동으로 확인해 주시고, 필요시 추가 스크립트를 사용하여 상세 검증을 진행해 주세요.
src/apis/dashboard.request.ts (1)
17-18: LGTM! postSummary 함수가 잘 정리되었습니다.인증 처리 로직이 제거되어 함수가 더 간단해졌습니다.
src/app/(with-tracker)/(auth-required)/main/page.tsx (1)
26-29: API 호출 단순화가 잘 이루어졌습니다!서버 컴포넌트에서 쿠키 처리를 단순화한 변경이 적절합니다.
src/apis/instance.request.ts (2)
63-66: 서버/클라이언트 환경 분기 처리가 잘 구현되었습니다!
window객체를 통한 환경 감지와 동적 임포트를 활용한 구현이 깔끔합니다.
71-76: 쿠키 헤더 조건부 추가가 적절합니다!서버 환경에서만 쿠키 헤더를 추가하는 로직이 잘 구현되었습니다.
src/components/auth-required/main/Section/index.tsx (1)
18-20: 사용자 이름 유효성 검사 추가가 적절합니다!
UserNameNotFound에러를 통한 명확한 에러 처리가 구현되었습니다.src/app/(with-tracker)/(auth-required)/main/Content.tsx (1)
43-43: 쿼리 함수 호출 단순화가 잘 이루어졌습니다!불필요한 async 래퍼를 제거하여 코드가 더 명확해졌습니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/errors/main.error.ts (1)
4-7: 에러 메시지를 더 자세하게 작성하면 좋을 것 같습니다.현재 에러 메시지가 간단한 영문으로만 되어 있습니다. 사용자 경험 향상을 위해 다음과 같은 개선을 제안드립니다:
- super('username not found', 'UserNameNotFound'); + super('사용자 이름을 찾을 수 없습니다', 'UserNameNotFound');또는 영문과 한글을 모두 포함하는 방식도 고려해 보세요:
- super('username not found', 'UserNameNotFound'); + super('사용자 이름을 찾을 수 없습니다 (username not found)', 'UserNameNotFound');src/errors/fetch.error.ts (1)
21-29: 환경 변수 검증 시점에 대한 제안애플리케이션 시작 시점에 모든 필수 환경 변수를 한 번에 검증하는 것을 고려해보세요. 이는 런타임 중에 발생할 수 있는 환경 변수 관련 오류를 미리 방지할 수 있습니다.
예시 구현을 위한 새로운 유틸리티 함수를 제안드립니다:
// src/utils/env-validator.ts export function validateRequiredEnvVars(requiredVars: string[]): void { const missingVars = requiredVars.filter(varName => !process.env[varName]); if (missingVars.length > 0) { throw new EnvNotFoundError(missingVars.join(", ")); } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/apis/instance.request.ts(2 hunks)src/components/auth-required/main/Section/index.tsx(2 hunks)src/errors/fetch.error.ts(1 hunks)src/errors/main.error.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/auth-required/main/Section/index.tsx
- src/apis/instance.request.ts
🔇 Additional comments (1)
src/errors/main.error.ts (1)
1-3: 구현이 잘 되어있습니다!CustomError를 확장한 사용자 정의 에러 클래스의 구현이 명확하고 깔끔합니다. 클래스 이름이 용도를 잘 설명하고 있습니다.
| export class EnvNotFoundError extends CustomError { | ||
| constructor(message: string) { | ||
| super( | ||
| `${message}이(가) ENV에서 설정되지 않았습니다`, | ||
| 'EnvNotFoundError', | ||
| 0, | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
상태 코드와 에러 메시지 형식을 개선하세요.
상태 코드 0은 표준적이지 않으며, 일반적으로 환경 변수 관련 오류는 구성 오류로 간주됩니다.
다음과 같이 개선하는 것을 제안합니다:
export class EnvNotFoundError extends CustomError {
constructor(message: string) {
super(
- `${message}이(가) ENV에서 설정되지 않았습니다`,
+ `필수 환경 변수 '${message}'이(가) 설정되지 않았습니다.`,
'EnvNotFoundError',
- 0,
+ 500,
);
}
}변경사항:
- 상태 코드를 서버 구성 오류를 나타내는 500으로 변경
- 에러 메시지를 더 명확하고 구체적으로 개선
- 환경 변수 이름을 따옴표로 감싸서 가독성 향상
📝 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 class EnvNotFoundError extends CustomError { | |
| constructor(message: string) { | |
| super( | |
| `${message}이(가) ENV에서 설정되지 않았습니다`, | |
| 'EnvNotFoundError', | |
| 0, | |
| ); | |
| } | |
| } | |
| export class EnvNotFoundError extends CustomError { | |
| constructor(message: string) { | |
| super( | |
| `필수 환경 변수 '${message}'이(가) 설정되지 않았습니다.`, | |
| 'EnvNotFoundError', | |
| 500, | |
| ); | |
| } | |
| } |
* [25.02.16 / TASK-118] Feature: 채널톡 추가 및 헤더 로고 클릭 동작 추가 (#13) * hotfix: 일부 오류 수정 username 관련 오류 및 SSR 렌더린 관련 오류로 추정되는 오류 수정 * feat: 채널톡 추가 및 헤더 로고 동작 추가 * refactor: console.log 제거 * refactor: 메세지 내용 변경 * refactor: 코멘트 반영 겸 자잘한 오류 해결 * refactor: username 관련 코드 수정 * refactor: ENV 오류 전용 공통 오류 객체 추가 * hotfix: env 값 추가 * hotfix: env 관련 오류 해결 * hotfix: 구조분해 관련 오류 해결 * fix: useSearchParam > 제네릭 사용하여 타입 추론 정확히 하도록 수정 --------- Co-authored-by: 육기준 <dbrrl1127@gmail.com>
* [25.02.16 / TASK-118] Feature: 채널톡 추가 및 헤더 로고 클릭 동작 추가 (#13) * hotfix: 일부 오류 수정 username 관련 오류 및 SSR 렌더린 관련 오류로 추정되는 오류 수정 * feat: 채널톡 추가 및 헤더 로고 동작 추가 * refactor: console.log 제거 * refactor: 메세지 내용 변경 * refactor: 코멘트 반영 겸 자잘한 오류 해결 * refactor: username 관련 코드 수정 * refactor: ENV 오류 전용 공통 오류 객체 추가 * hotfix: env 값 추가 * hotfix: env 관련 오류 해결 * hotfix: 구조분해 관련 오류 해결 * hotfix: 겹친 코드 제거
채널톡 버튼을 추가하고, 헤더 로고를 클릭하면 내 통계(메인) 페이지로 이동할 수 있게 수정하였습니다.
(그리고 커밋을 잘못 날려서 중간에 reset 후 dev 대신 main에 날렸습니다.. 해당 부분까지 반영해서 PR 올립니다...)
Summary by CodeRabbit
New Features
ChannelTalkProvider컴포넌트를 추가하여 채널톡 서비스의 통합을 지원합니다.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY가 추가되었습니다.Refactor