Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough요약: 인증 관련 주석 토큰 문자열이 교체되었으며(런타임 동작 불변), 멤버 역할 색상 매핑과 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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
🧹 Nitpick comments (3)
src/pages/memory/Memory.tsx (1)
300-304: 사소한 정리: 불필요한 공백 제거 제안렌더 트리 간 불필요한 빈 줄은 유지보수성 측면에서 제거해도 좋습니다.
- )} - - <GlobalCommentBottomSheet /> + )} + <GlobalCommentBottomSheet />src/components/members/MemberList.styled.ts (1)
65-89: DOM으로 커스텀 prop(roleType) 누수 — shouldForwardProp으로 차단 권장Emotion은 기본적으로 알 수 없는 prop을 DOM에 전달합니다. roleType이 div에 그대로 내려가면 불필요한 속성(HTML에 roletype)이 생깁니다. 아래처럼 shouldForwardProp을 추가해 주세요.
-export const MemberRole = styled.div<{ roleType?: string }>` +export const MemberRole = styled('div', { shouldForwardProp: (prop) => prop !== 'roleType' })< + { roleType?: string } +>` color: ${({ roleType }) => { if (!roleType) return semanticColors.text.point.green; const role = roleType.toLowerCase();추가로, 매핑이 늘어날 가능성이 있으면 객체 맵으로 단순화하는 것도 유지보수에 유리합니다(선택).
src/components/members/MemberList.tsx (1)
61-63: MemberRole에 roleType 전달 OK, 다만 DOM prop 누수 방지 적용 필요Styled 컴포넌트에서 shouldForwardProp을 적용하지 않으면 roleType이 div로 내려갑니다. styled 파일의 제안(refactor)을 함께 반영해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
src/api/index.ts(1 hunks)src/components/members/MemberList.styled.ts(1 hunks)src/components/members/MemberList.tsx(1 hunks)src/pages/feed/Feed.tsx(1 hunks)src/pages/groupDetail/ParticipatedGroupDetail.styled.ts(0 hunks)src/pages/memory/Memory.tsx(3 hunks)
💤 Files with no reviewable changes (1)
- src/pages/groupDetail/ParticipatedGroupDetail.styled.ts
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/members/MemberList.styled.ts (1)
src/styles/global/global.ts (1)
semanticColors(80-153)
src/components/members/MemberList.tsx (1)
src/components/members/MemberList.styled.ts (1)
MemberRole(65-91)
🔇 Additional comments (2)
src/pages/memory/Memory.tsx (2)
118-120: 기능 변화 없음(LGTM)공백/배치 변경만 있습니다. 동작에는 영향 없습니다.
243-245: 기능 변화 없음(LGTM)진행률 계산 로직은 기존과 동일합니다.
src/api/index.ts
Outdated
| config.headers.Authorization = | ||
| 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4MjEyNywiZXhwIjoxNzU5Mzc0MTI3fQ.iRU7rN90Vs9Wykxvw-gkyAkbyB-HQENm_WifYHb2UR8eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4NTY5NSwiZXhwIjoxNzU5Mzc3Njk1fQ.jnYVdrvtHivfyteXPHAZmAM1mkwW2U66EPn7BylzHu0'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
하드코딩된 JWT가 Authorization 헤더로 주입됩니다 — 보안상 매우 위험
실제 토큰으로 보이는 문자열이 코드에 커밋되어 있고, 심지어 JWT가 2개 연속으로 붙어 있어 토큰 자체도 유효하지 않을 가능성이 높습니다. 저장소 유출, 임의 사용자 가장, 예기치 않은 401/403 발생으로 이어질 수 있습니다. 개발 편의가 필요하면 환경변수 기반(dev 전용)으로만 주입하세요.
아래와 같이 dev 환경에서만 .env 값을 사용하도록 바꾸고, 기본값 주입은 제거해 주세요.
- } else {
- console.log('❌ localStorage에 토큰이 없습니다.');
- config.headers.Authorization =
- 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4MjEyNywiZXhwIjoxNzU5Mzc0MTI3fQ.iRU7rN90Vs9Wykxvw-gkyAkbyB-HQENm_WifYHb2UR8eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4NTY5NSwiZXhwIjoxNzU5Mzc3Njk1fQ.jnYVdrvtHivfyteXPHAZmAM1mkwW2U66EPn7BylzHu0';
- }
+ } else {
+ console.log('❌ localStorage에 토큰이 없습니다.');
+ if (import.meta.env.MODE === 'development') {
+ const devToken = import.meta.env.VITE_FAKE_TOKEN;
+ if (devToken) {
+ config.headers.Authorization = `Bearer ${devToken}`;
+ }
+ }
+ }또한 해당 토큰이 실제 유효 토큰이었다면 즉시 폐기/회전하세요.
다음 스크립트로 저장소 내 하드코딩된 JWT/토큰 흔적을 한번 더 점검해 주세요.
🏁 Script executed:
#!/bin/bash
# JWT 패턴 및 Bearer 토큰 검색
rg -nPI --hidden --glob '!.git' '(Bearer\s+)?[A-Za-z0-9_-]{12,}\.[A-Za-z0-9_-]{12,}\.[A-Za-z0-9_-]{12,}|localStorage\.setItem\(\s*[\'"]authToken[\'"]' -C2Length of output: 116
🏁 Script executed:
#!/bin/bash
# JWT 패턴 및 localStorage.authToken 검색
rg -nP --hidden --glob '!.git' "Bearer\s+[A-Za-z0-9_-]{12,}\.[A-Za-z0-9_-]{12,}\.[A-Za-z0-9_-]{12,}" -C2
rg -nP --hidden --glob '!.git' "localStorage\.setItem\(\s*['\"]authToken['\"]\)" -C2Length of output: 662
하드코딩된 JWT 토큰 제거 및 환경변수 기반 주입 구현
src/api/index.ts 27–28행에 실제 JWT가 하드코딩되어 있어 보안·유출 리스크가 큽니다. 개발 환경(dev)에서만 import.meta.env.VITE_FAKE_TOKEN을 사용하도록 분리하고, 기본 하드코딩을 제거하세요. 실제 토큰이라면 즉시 폐기·회전해야 합니다.
- } else {
- console.log('❌ localStorage에 토큰이 없습니다.');
- config.headers.Authorization =
- 'Bearer eyJhbGciO...';
- }
+ } else {
+ console.log('❌ localStorage에 토큰이 없습니다.');
+ if (import.meta.env.MODE === 'development') {
+ const devToken = import.meta.env.VITE_FAKE_TOKEN;
+ if (devToken) {
+ config.headers.Authorization = `Bearer ${devToken}`;
+ }
+ }
+ }📝 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.
| config.headers.Authorization = | |
| 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4MjEyNywiZXhwIjoxNzU5Mzc0MTI3fQ.iRU7rN90Vs9Wykxvw-gkyAkbyB-HQENm_WifYHb2UR8eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4NTY5NSwiZXhwIjoxNzU5Mzc3Njk1fQ.jnYVdrvtHivfyteXPHAZmAM1mkwW2U66EPn7BylzHu0'; | |
| } else { | |
| console.log('❌ localStorage에 토큰이 없습니다.'); | |
| if (import.meta.env.MODE === 'development') { | |
| const devToken = import.meta.env.VITE_FAKE_TOKEN; | |
| if (devToken) { | |
| config.headers.Authorization = `Bearer ${devToken}`; | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/api/index.ts around lines 27–28 there is a hardcoded JWT string; remove
the hardcoded token and replace it with an environment-driven injection: when
running in development use import.meta.env.VITE_FAKE_TOKEN (or a clearly named
VITE_DEV_TOKEN) to set config.headers.Authorization, otherwise do not set a
hardcoded token (use no Authorization header or read from a secure runtime env
var). Ensure the code checks the environment (e.g., NODE_ENV or
import.meta.env.MODE) before using the fake token, avoid committing any real
tokens, and add a comment reminding engineers to rotate any exposed token and to
supply real tokens via secure configuration in production.
src/pages/feed/Feed.tsx
Outdated
| localStorage.setItem( | ||
| 'authToken', | ||
| 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4NTY5NSwiZXhwIjoxNzU5Mzc3Njk1fQ.jnYVdrvtHivfyteXPHAZmAM1mkwW2U66EPn7BylzHu0', | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
하드코딩된 JWT를 localStorage에 저장 + 즉시 return으로 초기 로딩이 영구 지속될 수 있음
- 보안: 실제 토큰 문자열이 커밋되어 있습니다. 제거하고 dev 전용 .env에서 주입하세요.
- 로직: setItem 후 바로 return 하여 아래의 setTabLoading/setInitialLoading가 실행되지 않습니다. 첫 진입 시 스피너가 계속 보일 수 있습니다.
아래처럼 dev 환경에서만 .env 토큰을 주입하고, return을 제거하여 이후 로딩 로직이 정상 진행되도록 해주세요.
- if (!authToken) {
- localStorage.setItem(
- 'authToken',
- 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4NTY5NSwiZXhwIjoxNzU5Mzc3Njk1fQ.jnYVdrvtHivfyteXPHAZmAM1mkwW2U66EPn7BylzHu0',
- );
- console.log('🔑 하드코딩된 토큰으로 설정했습니다.');
- return;
- }
+ if (!authToken && import.meta.env.MODE === 'development') {
+ const devToken = import.meta.env.VITE_FAKE_TOKEN ?? '';
+ if (devToken) {
+ localStorage.setItem('authToken', devToken);
+ console.log('🔑 개발 환경용 토큰으로 설정했습니다.');
+ }
+ }필요 시 dev 토큰을 주입한 직후에도 동일 흐름으로 아래 로딩 코드를 계속 타도록 유지하세요.
📝 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.
| localStorage.setItem( | |
| 'authToken', | |
| 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1Njc4NTY5NSwiZXhwIjoxNzU5Mzc3Njk1fQ.jnYVdrvtHivfyteXPHAZmAM1mkwW2U66EPn7BylzHu0', | |
| ); | |
| // If there's no authToken, and we're in development, inject a dev token from env | |
| if (!authToken && import.meta.env.MODE === 'development') { | |
| const devToken = import.meta.env.VITE_FAKE_TOKEN ?? ''; | |
| if (devToken) { | |
| localStorage.setItem('authToken', devToken); | |
| console.log('🔑 개발 환경용 토큰으로 설정했습니다.'); | |
| } | |
| } | |
| // ...existing loading logic continues here (e.g. setTabLoading, setInitialLoading) |
🤖 Prompt for AI Agents
In src/pages/feed/Feed.tsx around lines 163 to 166, a hardcoded JWT is being
written to localStorage and the function immediately returns causing subsequent
loading state updates (setTabLoading/setInitialLoading) to be skipped; remove
the hardcoded token from source control and instead read a dev-only token from
an environment variable (process.env.REACT_APP_DEV_JWT or similar) behind a
NODE_ENV === 'development' check, write that token to localStorage only in dev,
and remove the immediate return so the normal loading flow continues (ensure the
dev-injection follows the same execution path as a normal auth token write so
setTabLoading/setInitialLoading still execute).
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/memory/RecordItem/RecordItem.styled.ts (3)
22-22: url() 인자에 따옴표/이스케이프 추가 권장
url(${src})는 공백·특수문자(예:),") 포함 시 파싱 이슈가 날 수 있습니다. 안전하게 따옴표와 이스케이프를 적용해 주세요.- background-image: ${({ src }) => (src ? `url(${src})` : 'none')}; + background-image: ${({ src }) => (src ? `url(${JSON.stringify(src)})` : 'none')};
26-26: 0.5px 보더로 실제 크기 변동 가능 → box-sizing 추가 권장현재 36×36에 보더가 더해져 렌더 크기가 변동될 수 있습니다. 의도한 크기 유지 위해
box-sizing: border-box;추가를 권장합니다.margin-right: 8px; + box-sizing: border-box; border: 0.5px solid ${colors.grey[300]};
5-5: background-color: none → transparent로 수정
background-color: none;는 유효하지 않은 값입니다.transparent로 교체해 주세요.- background-color: none; + background-color: transparent;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/memory/RecordItem/RecordItem.styled.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/memory/RecordItem/RecordItem.styled.ts (1)
src/styles/global/global.ts (1)
colors(4-53)
1 participant
#️⃣연관된 이슈
#229
📝작업 내용
Summary by CodeRabbit