댓글 컴포넌트의 스타일 버그 해결 #315
댓글 컴포넌트의 스타일 버그 해결 #315
Conversation
Walkthrough댓글 컴포넌트의 대댓글 입력창 스타일이 수정되었습니다. 아바타(프로필 이미지) 관련 로직이 CommentLayout에서 CommentInput으로 이동하였으며, ReplyInput의 스타일이 flexbox 기반으로 변경되고, 대댓글 입력창의 위치가 컴포넌트 계층 구조 내에서 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CommentInput
participant useMyProfileInfo
participant Avatar
User->>CommentInput: 댓글 입력 영역 진입
CommentInput->>useMyProfileInfo: 사용자 프로필 정보 요청
useMyProfileInfo-->>CommentInput: 프로필 정보 반환
CommentInput->>Avatar: 프로필 이미지 URL 전달
Avatar-->>CommentInput: 아바타 렌더링
User->>CommentInput: 댓글 입력 및 제출
Assessment against linked issues
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm warn config production Use ✨ Finishing Touches
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
🧹 Nitpick comments (1)
src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts (1)
58-62: Flexbox 속성 조합에 대한 검토가 필요합니다.
flex: 1과width: 94%를 동시에 사용하는 것이 의도한 레이아웃을 올바르게 구현하는지 확인해보세요.flex: 1은 요소가 사용 가능한 공간을 모두 차지하도록 하는 반면,width: 94%는 고정 너비를 지정합니다. 이 조합이 충돌할 수 있습니다.대댓글 입력창의 너비 문제를 해결하려면 다음 중 하나를 고려해보세요:
flex: 1을 사용하고width제거- 또는
width: 94%를 사용하고flex: 1제거
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/user/comment/CommentLayout.tsx(0 hunks)src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts(1 hunks)src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx(1 hunks)src/components/user/comment/commentInput/CommentInput.tsx(4 hunks)
💤 Files with no reviewable changes (1)
- src/components/user/comment/CommentLayout.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/user/comment/commentInput/CommentInput.tsx (2)
src/hooks/user/useMyInfo.ts (1)
useMyProfileInfo(21-33)src/util/formatImgPath.ts (1)
formatImgPath(1-4)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Run Chromatic
🔇 Additional comments (3)
src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx (1)
94-102: 구조적 변경이 스타일 문제를 해결합니다.대댓글 입력 컴포넌트를
CommentWrapper외부로 이동시킨 것은 올바른 접근입니다. 이 변경으로 대댓글 입력창이 댓글 내용과 독립적으로 레이아웃될 수 있어 너비 문제가 해결될 것으로 보입니다.src/components/user/comment/commentInput/CommentInput.tsx (2)
9-12: 프로필 이미지 기능 추가가 적절합니다.사용자 프로필 정보를 가져오고 아바타를 표시하는 기능이 잘 구현되었습니다. 필요한 의존성들이 모두 적절히 임포트되었습니다.
88-88: 아바타 컴포넌트 추가가 PR 목표와 일치합니다.프로필 사진을 원래 위치로 되돌리는 PR 목표에 부합하는 변경사항입니다. 55px 크기로 일관성 있게 설정되었습니다.
| setValue, | ||
| } = useForm<FormValue>(); | ||
|
|
||
| const { myData } = useMyProfileInfo(); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
사용자 데이터 로딩에 대한 에러 처리를 확인해주세요.
useMyProfileInfo hook에서 반환하는 데이터가 로딩 중이거나 에러가 발생할 경우에 대한 처리가 필요할 수 있습니다. 현재는 myData만 사용하고 있지만, 로딩 상태나 에러 상태도 고려해보세요.
🏁 Script executed:
#!/bin/bash
# useMyProfileInfo hook의 구현을 확인하여 에러 처리 방식 검토
ast-grep --pattern 'export const useMyProfileInfo = $_'Length of output: 812
에러 및 로딩 상태 핸들링 추가 필요
현재 useMyProfileInfo 훅이 myData와 isLoading만 반환해, 컴포넌트에서 에러 상태를 처리할 수 없습니다. 아래를 참고해 수정하세요.
- 훅 반환값 확장
// src/hooks/user/useMyInfo.ts export const useMyProfileInfo = () => { const isLoggedIn = useAuthStore(state => state.isLoggedIn); const { data, isLoading, isError, error } = useQuery<ApiUserInfo>({ queryKey: myInfoKey.myProfile, queryFn: () => getMyInfo(), staleTime: Infinity, gcTime: Infinity, enabled: isLoggedIn, }); return { myData: data?.data, isLoading, isError, error, }; };
- 컴포넌트에서 로딩·에러 처리 추가
// src/components/user/comment/commentInput/CommentInput.tsx const { myData, isLoading, isError, error } = useMyProfileInfo(); if (isLoading) { return <Spinner />; } if (isError) { return <ErrorMessage message={error?.message || '데이터를 불러오는 중 오류가 발생했습니다.'} />; } // 정상 렌더링...
🤖 Prompt for AI Agents
In src/components/user/comment/commentInput/CommentInput.tsx at line 45, update
the useMyProfileInfo hook usage to also destructure isLoading, isError, and
error states. Add conditional rendering to handle loading and error states by
returning a Spinner component when loading and an ErrorMessage component with
the error message when an error occurs. This ensures proper user feedback during
data fetching issues.
| const profileImg = myData?.profileImg | ||
| ? `${import.meta.env.VITE_APP_IMAGE_CDN_URL}/${formatImgPath( | ||
| myData.profileImg | ||
| )}?w=86&h=86&fit=crop&crop=entropy&auto=format,enhance&q=60` | ||
| : DefaultImg; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
환경변수 의존성과 이미지 처리 로직을 검증해주세요.
프로필 이미지 URL 생성 로직이 잘 구현되었지만, 몇 가지 확인이 필요합니다:
VITE_APP_IMAGE_CDN_URL환경변수가 모든 환경에서 정의되어 있는지formatImgPath함수가 예상대로 작동하는지- 이미지 로딩 실패 시 기본 이미지로 잘 fallback되는지
🏁 Script executed:
#!/bin/bash
# 환경변수 사용 현황과 formatImgPath 함수 구현 확인
echo "=== 환경변수 사용 현황 ==="
rg -n "VITE_APP_IMAGE_CDN_URL"
echo "=== formatImgPath 함수 구현 ==="
cat src/util/formatImgPath.tsLength of output: 713
🏁 Script executed:
#!/bin/bash
# DefaultImg 위치와 사용 맥락 확인
echo "=== DefaultImg 사용 ==="
rg -n "DefaultImg" -A3 src/components
# CommentInput 컴포넌트 내 <img> 태그 및 onError 핸들러 확인
echo "=== CommentInput.tsx <img> ==="
rg -n "<img" -A3 src/components/user/comment/commentInput/CommentInput.tsxLength of output: 2430
🏁 Script executed:
#!/bin/bash
# avatar 디렉토리 파일 목록 확인
echo "=== avatar 디렉토리 목록 ==="
ls src/components/common/avatar
# Avatar.tsx 구현 확인
echo "=== Avatar.tsx 내용 ==="
cat src/components/common/avatar/Avatar.tsx
# onError 핸들러 확인
echo "=== Avatar.tsx onError 핸들러 ==="
rg -n "onError" -A3 src/components/common/avatar/Avatar.tsx || echo "No onError handler found"Length of output: 1048
프로필 이미지 URL 생성 및 로딩 실패 대응
VITE_APP_IMAGE_CDN_URL는 README.md(64행)에 정의되어 있으며,AvatarList,Header,CommentInput등에서 일관되게 사용 중입니다.formatImgPath는/로 분할 후 slice(3)부터 조합하는 단순 로직으로, 의도한 대로 경로를 추출하고 있습니다.- 그러나
<img>요소에onError핸들러가 없어 404 또는 네트워크 오류 시 깨진 이미지가 표시됩니다.
수정 제안:
src/components/common/avatar/Avatar.tsx내<S.AvatarImg>에onError속성을 추가하여 기본 이미지로 대체 처리하세요.
<S.AvatarImg
src={releasedImg}
+ onError={(e) => { e.currentTarget.src = defaultImg; }}
alt='Avatar'
/>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/user/comment/commentInput/CommentInput.tsx around lines 54 to
58, the profile image URL is constructed correctly using the environment
variable and formatImgPath function, but the <img> element lacks an onError
handler to fallback to the default image if loading fails. To fix this, add an
onError event handler to the <img> tag that sets the image source to DefaultImg
upon error, similar to the implementation in
src/components/common/avatar/Avatar.tsx, ensuring broken or missing images
gracefully fallback to the default avatar.
구현내용
연관이슈
close #314
Summary by CodeRabbit
신규 기능
스타일
리팩터