Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough피드·댓글 데이터 타입 및 관련 컴포넌트의 Changes
Sequence Diagram(s)sequenceDiagram
participant UI as SignupGenre UI
participant Fn as getAuthTokenFromCookie()
participant Doc as document.cookie
participant Server as GET /users/me
UI->>Fn: 호출 (await)
Fn->>Doc: 쿠키 파싱 / Authorization 쿠키 검색
alt Authorization cookie found
Fn-->>UI: 토큰 반환
else not found
Fn->>Server: fetch('/users/me', { credentials: 'include' })
alt 서버 인증 성공
Server-->>Fn: user data
Fn-->>UI: 'VALID_AUTH'
else 실패
Fn-->>UI: null
end
end
UI->>UI: setAuthTokenToHeader 및 다음 단계 진행/중단
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
✨ Finishing Touches
🧪 Generate unit tests
🪧 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: 4
🧹 Nitpick comments (4)
src/components/feed/FeedDetailPost.tsx (2)
21-26: 디자인 토큰 일관성 확보: 하드코딩 색상(#1c1c1c) 대신 CSS 변수 사용 권장이전 구현은
var(--color-darkgrey-dark)를 사용했습니다. 디자인 시스템 일관성을 위해 토큰 재사용을 권장합니다.적용 예시(diff):
- background: #1c1c1c; + background: var(--color-darkgrey-dark);
19-27: 중복 스타일 추출 제안: Divider(구분선) 공용 컴포넌트로 DRY동일한 BorderBottom 스타일이 FeedPost.tsx에도 존재합니다. 공통 컴포넌트(예: components/common/Divider.tsx)로 추출하면 유지보수성이 높아집니다.
원한다면 공용 Divider 컴포넌트를 바로 제안해드리겠습니다.
src/components/feed/FeedPost.tsx (2)
21-26: 디자인 토큰 사용 권장: 하드코딩 색상 제거FeedDetailPost와 동일하게 CSS 변수로 통일하는 것이 좋습니다.
적용 예시(diff):
- background: #1c1c1c; + background: var(--color-darkgrey-dark);
21-26: 구분선 접근성/의미론 고려(선택사항)단순 시각적 구분이라면
role="separator"또는<hr />로 의미를 명확히 하는 방안을 검토해 주세요. 현재는 스타일드 div로만 표현되어 보조공학에서 구분되지 않습니다.원하면
기반으로 스타일링하는 예시도 드리겠습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/api/feeds/getFeedDetail.ts(1 hunks)src/components/common/Post/PostHeader.tsx(3 hunks)src/components/feed/FeedDetailPost.tsx(1 hunks)src/components/feed/FeedPost.tsx(1 hunks)
🔇 Additional comments (1)
src/components/common/Post/PostHeader.tsx (1)
16-18: aliasColor 기본값 제거 검증 완료 — 스타일 회귀 없음모든
PostHeader호출부에서aliasColor가 명시적으로 전달되고 있어, 기본값 제거로 인한 스타일 변경 우려가 없음을 확인했습니다.검증된 호출부:
- src/pages/feed/FollowerListPage.tsx:132
- src/components/feed/OtherFeed.tsx:33
- src/components/feed/MyFeed.tsx:45
- src/components/feed/FeedDetailPost.tsx:37
- src/components/common/Post/SubReply.tsx:143
- src/components/common/Post/Reply.tsx:121
| creatorNickname: string; | ||
| creatorProfileImageUrl: string; | ||
| alias: string; | ||
| aliasName: string; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
API 계약 변경(alias → aliasName)으로 인한 런타임 불일치 위험 — 응답 정규화 또는 점진적 전환 장치 필요
서버 응답이 아직 alias로 내려올 경우, 프론트에서는 aliasName만 참조하므로 값이 undefined가 되어 UI에 누락될 수 있습니다. 백엔드가 모두 반영되기 전까지는 프론트에서 하위 호환 정규화를 적용하는 것을 권장합니다.
예시(파일 내 getFeedDetail 함수에서 응답 정규화):
// 응답 정규화 예시: aliasName이 없고 alias가 있으면 aliasName으로 대입
export const getFeedDetail = async (feedId: number) => {
const response = await apiClient.get<FeedDetailResponse>(`/feeds/${feedId}`);
const raw = response.data;
const normalizedData = {
...raw.data,
aliasName: raw.data.aliasName ?? (raw.data as any).alias ?? '',
};
return { ...raw, data: normalizedData };
};레포 내 남아있는 alias 사용처도 함께 점검해 주세요:
추가로, 본 PR 제목/설명(로딩 스피너)과 실제 변경 파일이 일치하지 않는 것으로 보입니다. 의도된 분리 PR인지 확인 부탁드립니다.
🏁 Script executed:
#!/bin/bash
# aliasName으로 모두 이전되었는지, alias 단독 사용이 남아있는지 점검
rg -n --hidden -S "\baliasName\b" -A 2
echo "-----"
# aliasName이 아닌 'alias' 단독 사용 탐지(변수/속성명 전체 단어 매칭)
rg -n --hidden -S "\balias\b" | rg -v "aliasName"Length of output: 6848
getFeedDetail 하위 호환 응답 정규화 필요 (alias → aliasName)
백엔드가 아직 alias 키로 응답을 내려줄 경우, 현재 aliasName만 참조하도록 타입을 바꾼 상태에서는 UI에 값이 누락될 수 있습니다. 다음을 적용해 주세요.
• 적용 위치
src/api/feeds/getFeedDetail.ts(getFeedDetail 함수 내부)
• 정규화 예시
export const getFeedDetail = async (feedId: number) => {
const response = await apiClient.get<FeedDetailResponse>(`/feeds/${feedId}`);
const raw = response.data;
const normalizedData = {
...raw.data,
// aliasName이 없고 구 필드 alias가 있으면 aliasName으로 대체
aliasName: raw.data.aliasName ?? (raw.data as any).alias ?? '',
};
return { ...raw, data: normalizedData };
};• 부가 확인 요청
- 다른 사용자 관련 API 응답 타입에서
alias가 남아있는지 (getComments등) - 이 PR의 제목/설명(로딩 스피너)과 실제 변경 파일이 일치하는지
🤖 Prompt for AI Agents
In src/api/feeds/getFeedDetail.ts around line 9, the response normalization must
handle legacy `alias` field so UI doesn't miss names; modify getFeedDetail to
fetch the response, create a normalized data object spreading raw.data and set
aliasName to raw.data.aliasName ?? (raw.data as any).alias ?? '' and return the
response with data replaced by this normalizedData. Also scan other user-related
API responses (e.g., getComments) for remaining `alias` fields and confirm the
PR title/description matches the actual changed files.
| creatorProfileImageUrl?: string; | ||
| creatorNickname?: string; | ||
| alias?: string; | ||
| aliasName?: string; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
프로퍼티 rename(alias → aliasName) 전파 여부 점검
컴포넌트/타입/데이터 계층 전체에서 alias 사용 흔적이 남아있으면 런타임에 값 누락이 발생할 수 있습니다. FeedPostProps, FeedDetailData 소비부, 서버 응답 정규화 상태를 함께 확인해 주세요.
레포 전역 점검 스크립트:
Also applies to: 37-37
🏁 Script executed:
#!/bin/bash
# PostHeader props에서 alias → aliasName 변경 누락 확인
rg -n --hidden -S "\baliasName\b" -A 2
echo "----- 남아있는 alias 단독 사용(의도치 않은 잔존) -----"
rg -n --hidden -S "\balias\b" | rg -v "aliasName"Length of output: 6918
alias → aliasName 전파 누락 – 수정 필요
다음 파일들에서 여전히 alias 프로퍼티가 사용되고 있어 런타임에 aliasName이 누락될 수 있습니다. 모두 aliasName으로 통일해 주세요:
- src/types/post.ts
- 6번 줄의
alias?: string; - 46, 61번 줄의
alias: string;
- 6번 줄의
- src/api/comments/getComments.ts
- 응답 타입 정의의
alias: string;
- 응답 타입 정의의
- src/components/common/Post/Reply.tsx
- src/components/common/Post/SubReply.tsx
- 두 컴포넌트의 props 및 JSX 내
alias
- 두 컴포넌트의 props 및 JSX 내
- src/mocks/searchBook.mock.ts
- src/data/postData.ts
- mock/fixture 데이터의
alias필드
- mock/fixture 데이터의
추가로, FeedPostProps·FeedDetailData 소비부 및 서버 응답 정규화 로직에서도 aliasName이 올바르게 매핑되는지 함께 검증해 주세요.
| min-width: 280px; | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| padding: 0 20px; | ||
| height: 6px; | ||
| background: #1c1c1c; |
There was a problem hiding this comment.
BorderBottom: width:100% + padding으로 인한 모바일 가로 오버플로우 가능성 — box-sizing 추가 권장
현재 width: 100%에 padding: 0 20px이 결합되어 있어(기본 content-box) 작은 화면(컨테이너 폭이 320px 등)에서 실제 렌더링 폭이 컨테이너를 초과할 수 있습니다. box-sizing: border-box로 패딩을 포함시키거나, width: 100% 대신 min/max만 사용하도록 조정하세요.
적용 예시(diff):
const BorderBottom = styled.div`
width: 100%;
min-width: 280px;
max-width: 500px;
margin: 0 auto;
padding: 0 20px;
+ box-sizing: border-box;
height: 6px;
background: #1c1c1c;
`;📝 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.
| min-width: 280px; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| height: 6px; | |
| background: #1c1c1c; | |
| const BorderBottom = styled.div` | |
| width: 100%; | |
| min-width: 280px; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| box-sizing: border-box; | |
| height: 6px; | |
| background: #1c1c1c; | |
| `; |
🤖 Prompt for AI Agents
In src/components/feed/FeedDetailPost.tsx around lines 21 to 26, the rule
combining width (implicit 100% via margins) and padding (0 20px) with the
default content-box can cause horizontal overflow on small screens; update the
style to include box-sizing: border-box so padding is included in the element's
width (or alternatively remove any explicit 100% width and rely on
min-width/max-width constraints), ensuring the padding does not expand the
rendered box beyond the container.
| min-width: 280px; | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| padding: 0 20px; | ||
| height: 6px; | ||
| background: #1c1c1c; |
There was a problem hiding this comment.
BorderBottom: width:100% + padding으로 인한 오버플로우 — box-sizing 추가 권장
FeedDetailPost와 동일한 구조로, 작은 화면에서 가로 스크롤/잘림이 발생할 수 있습니다.
적용 예시(diff):
const BorderBottom = styled.div`
width: 100%;
min-width: 280px;
max-width: 500px;
margin: 0 auto;
padding: 0 20px;
+ box-sizing: border-box;
height: 6px;
background: #1c1c1c;
`;📝 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.
| min-width: 280px; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| height: 6px; | |
| background: #1c1c1c; | |
| const BorderBottom = styled.div` | |
| width: 100%; | |
| min-width: 280px; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| box-sizing: border-box; | |
| height: 6px; | |
| background: #1c1c1c; | |
| `; |
🤖 Prompt for AI Agents
In src/components/feed/FeedPost.tsx around lines 21 to 26, the bottom border
element uses width plus horizontal padding which causes overflow/horizontal
scroll on small screens; add box-sizing: border-box to that element (or its
container) so padding is included in the width calculation (alternatively remove
horizontal padding or change to width: calc(100% - 40px)), ensuring the element
no longer overflows and matches FeedDetailPost behavior.
1 participant
#️⃣연관된 이슈
#85 로딩스피너 구현
📝작업 내용
무한스크롤 로딩시에는 size: small, fullheight: false로 사용하시고 페이지 넘어갈때 로딩의 경우는 size: medium, fullheight: true 쓰시면 될 것 같습니다. 필요시에는 로딩중 메세지 등 작성을 위한 message 변수를 따로 빼 두었습니다. fullheight는 각자 구현한 방식에 따라 차이가 있을 수 있으니 알아서 잘 골라서 사용하시면 될 것 같습니다~
2025-08-12.5.15.01.mov
💬리뷰 요구사항
특별히 없습니다.
Summary by CodeRabbit