From 643686c8f06c8775db1cdd87ba2ee7e357eb8dda Mon Sep 17 00:00:00 2001 From: yeonhwan Date: Tue, 29 Jul 2025 15:23:16 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=98=A4=EB=8A=98=EC=9D=98=20?= =?UTF-8?q?=EC=8A=A4=ED=84=B0=EB=94=94=20=EC=B9=B4=EB=93=9C=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=A9=B4=EC=A0=91=EA=B4=80/=EB=A9=B4=EC=A0=91?= =?UTF-8?q?=EC=9E=90=20=ED=94=84=EB=A1=9C=ED=95=84=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EC=9C=A0=EC=A0=80=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=97=B4=EB=A6=BC=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/study/ui/today-study-card.tsx | 49 +++++++++++++++++----- src/shared/ui/avatar/index.tsx | 40 +++++++++++------- 2 files changed, 63 insertions(+), 26 deletions(-) diff --git a/src/features/study/ui/today-study-card.tsx b/src/features/study/ui/today-study-card.tsx index 109f265e..8fb3cbaa 100644 --- a/src/features/study/ui/today-study-card.tsx +++ b/src/features/study/ui/today-study-card.tsx @@ -1,8 +1,11 @@ 'use client'; import { useEffect, useState } from 'react'; +import UserProfileModal from '@/features/my-page/ui/user-profile-modal'; import { getStatusBadge } from '@/features/study/ui/status-badge-map'; import { getCookie } from '@/shared/tanstack-query/cookie'; +// TODO: FSD 의 import 바운더리를 넘어서 import 해야하는데, +// 해당 UI를 shared 등으로 빼던지 수정 필요 import UserAvatar from '@/shared/ui/avatar'; import StudyDoneModal from './study-done-modal'; import StudyReadyModal from './study-ready-modal'; @@ -39,17 +42,41 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) { label="스터디 조" value={`${todayStudyData.studySpaceId} 조`} /> - - - - {todayStudyData.interviewerName} - - - } - /> + {isInterviewee ? ( + + + } + /> + + {todayStudyData.interviewerName} + + + } + /> + ) : ( + + + } + /> + + {todayStudyData.interviewerName} + + + } + /> + )} - {image ? ( - - ) : ( - - )} - - ); -} +const UserAvatar = forwardRef( + ( + { image, alt = 'user profile', size = 32, ...props }: UserAvatarProps, + forwardedRef, + ) => { + return ( + + {image ? ( + + ) : ( + + )} + + ); + }, +); + +UserAvatar.displayName = 'UserAvatar'; + +export default UserAvatar; From ddab246c2cc68fc242ae558afb44190246b7a193 Mon Sep 17 00:00:00 2001 From: yeonhwan Date: Tue, 29 Jul 2025 21:38:06 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20today-study-card=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8,=20user-avatar=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8,=20modal=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - today-study-card body 렌더링 부분 리팩토링 - user-avatar forwardRef 삭제 - modal 컴포넌트 description 부재에 관련한 접근성 워닝 제거 --- src/features/study/ui/today-study-card.tsx | 76 ++++++++++------------ src/shared/ui/avatar/index.tsx | 42 +++++------- src/shared/ui/modal/index.tsx | 4 ++ 3 files changed, 54 insertions(+), 68 deletions(-) diff --git a/src/features/study/ui/today-study-card.tsx b/src/features/study/ui/today-study-card.tsx index 8fb3cbaa..0e6e05ad 100644 --- a/src/features/study/ui/today-study-card.tsx +++ b/src/features/study/ui/today-study-card.tsx @@ -25,6 +25,18 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) { const isInterviewee = memberId === todayStudyData.intervieweeId; + const matchedUserId = isInterviewee + ? todayStudyData?.interviewerId + : todayStudyData.intervieweeId; + + const matchedUserImage = isInterviewee + ? todayStudyData?.interviewerImage + : todayStudyData.intervieweeImage; + + const matchedUsername = isInterviewee + ? todayStudyData?.interviewerName + : todayStudyData.intervieweeName; + return (
@@ -38,70 +50,48 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) {
- - {isInterviewee ? ( - - - } - /> - - {todayStudyData.interviewerName} - -
- } - /> - ) : ( - + {`${todayStudyData?.studySpaceId} 조`} + + + - - } - /> - - {todayStudyData.interviewerName} + + + {matchedUsername} } /> - )} - - + + + {todayStudyData?.subject ?? 'asdf'} + + + {getStatusBadge(todayStudyData?.progressStatus ?? 'PENDING')} +
피드백
-

{todayStudyData.feedback ?? '-'}

+

{todayStudyData?.feedback ?? '-'}

); function InfoBox({ label, - value, + children, }: { label: string; - value: React.ReactNode; + children: React.ReactNode; }) { return (
{label} - {value} + {children}
); } diff --git a/src/shared/ui/avatar/index.tsx b/src/shared/ui/avatar/index.tsx index f12715a5..3f8817bc 100644 --- a/src/shared/ui/avatar/index.tsx +++ b/src/shared/ui/avatar/index.tsx @@ -1,6 +1,5 @@ 'use client'; -import { forwardRef } from 'react'; import { Avatar, AvatarImage } from '@/shared/shadcn/ui/avatar'; interface UserAvatarProps { @@ -9,27 +8,20 @@ interface UserAvatarProps { size?: number; } -const UserAvatar = forwardRef( - ( - { image, alt = 'user profile', size = 32, ...props }: UserAvatarProps, - forwardedRef, - ) => { - return ( - - {image ? ( - - ) : ( - - )} - - ); - }, -); - -UserAvatar.displayName = 'UserAvatar'; - -export default UserAvatar; +export default function UserAvatar({ + image, + alt = 'user profile', + size = 32, + ref, + ...props +}: React.RefAttributes & UserAvatarProps) { + return ( + + {image ? ( + + ) : ( + + )} + + ); +} diff --git a/src/shared/ui/modal/index.tsx b/src/shared/ui/modal/index.tsx index 262a2504..c579eff8 100644 --- a/src/shared/ui/modal/index.tsx +++ b/src/shared/ui/modal/index.tsx @@ -11,6 +11,7 @@ import { DialogOverlay, DialogPortal, DialogTitle, + DialogDescription, } from '@/shared/shadcn/ui/dialog'; function ModalRoot({ @@ -71,9 +72,11 @@ function ModalOverlay({ function ModalContent({ className, children, + description = '', ...props }: React.ComponentProps & { size?: 'small' | 'medium' | 'large'; + description?: string; }) { const { size = 'small', ...rest } = props; @@ -104,6 +107,7 @@ function ModalContent({ {...rest} >
{children}
+ {description} ); } From f8a3e610d6c344cb5c79b55fe3199c9da42f702c Mon Sep 17 00:00:00 2001 From: yeonhwan Date: Tue, 29 Jul 2025 21:49:18 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=EA=B0=9C=EB=B0=9C=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=8D=94=EB=AF=B8=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=8F=20=EC=98=B5=EC=85=94=EB=84=90=EC=B2=B4=EC=9D=B4?= =?UTF-8?q?=EB=8B=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/study/ui/today-study-card.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/features/study/ui/today-study-card.tsx b/src/features/study/ui/today-study-card.tsx index 0e6e05ad..ffc87692 100644 --- a/src/features/study/ui/today-study-card.tsx +++ b/src/features/study/ui/today-study-card.tsx @@ -26,15 +26,15 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) { const isInterviewee = memberId === todayStudyData.intervieweeId; const matchedUserId = isInterviewee - ? todayStudyData?.interviewerId + ? todayStudyData.interviewerId : todayStudyData.intervieweeId; const matchedUserImage = isInterviewee - ? todayStudyData?.interviewerImage + ? todayStudyData.interviewerImage : todayStudyData.intervieweeImage; const matchedUsername = isInterviewee - ? todayStudyData?.interviewerName + ? todayStudyData.interviewerName : todayStudyData.intervieweeName; return ( @@ -51,7 +51,7 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) {
- {`${todayStudyData?.studySpaceId} 조`} + {`${todayStudyData.studySpaceId} 조`} - - {todayStudyData?.subject ?? 'asdf'} - + {todayStudyData.subject} - {getStatusBadge(todayStudyData?.progressStatus ?? 'PENDING')} + {getStatusBadge(todayStudyData.progressStatus ?? 'PENDING')}
피드백
-

{todayStudyData?.feedback ?? '-'}

+

{todayStudyData.feedback ?? '-'}

);