fix(web): unify profile badge with mentor boolean (#486)

manNomi · web-flow · commit 9b67b2895147 · 2026-03-14T22:41:53.000+09:00
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx
@@ -9,9 +9,15 @@ interface ChatMessageBoxProps {
   message: ChatMessage;
   currentUserId?: number; // 현재 사용자 ID
   partnerNickname?: string; // 상대방 닉네임
+  isPartnerMentor?: boolean;
 }
 
-const ChatMessageBox = ({ message, currentUserId = 1, partnerNickname = "상대방" }: ChatMessageBoxProps) => {
+const ChatMessageBox = ({
+  message,
+  currentUserId = 1,
+  partnerNickname = "상대방",
+  isPartnerMentor = false,
+}: ChatMessageBoxProps) => {
   const isMine = message.senderId === Number(currentUserId);
 
   const messageType = getMessageType(message);
@@ -83,7 +89,7 @@ const ChatMessageBox = ({ message, currentUserId = 1, partnerNickname = "상대
   ) : (
     <div className="flex justify-start">
       <div className="flex max-w-xs flex-row gap-2">
-        <ProfileWithBadge width={32} height={32} />
+        <ProfileWithBadge isMentor={isPartnerMentor} width={32} height={32} />
         <div className="flex flex-col items-start">
           <span className="mb-1 text-k-900 typo-medium-5">{partnerNickname}</span>
           <div className="flex items-end gap-1">
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
@@ -27,6 +27,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
   const userId = Number(parsedData?.sub ?? 0) || 0;
 
   const isMentor = parsedData?.role === UserRole.MENTOR || parsedData?.role === UserRole.ADMIN;
+  const isPartnerMentor = !isMentor;
 
   // 채팅 읽음 상태 업데이트 훅 진입시 자동으로
   usePutChatReadHandler(chatId);
@@ -72,7 +73,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
               )}
             >
               <div className="flex items-center gap-2">
-                <ProfileWithBadge profileImageUrl={profileUrl} width={30} height={30} />
+                <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isPartnerMentor} width={30} height={30} />
                 <div className="flex h-full items-center">
                   <span className="text-k-700 typo-sb-7">{nickname}</span>
                   <div className="mx-4 h-10 w-[1px] bg-k-100"></div>
@@ -158,6 +159,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
                       message={message}
                       currentUserId={userId}
                       partnerNickname={nickname}
+                      isPartnerMentor={isPartnerMentor}
                     />
                   </div>
                 );
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
@@ -23,6 +23,7 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
   const accessToken = useAuthStore((state) => state.accessToken);
   const result = tokenParse(accessToken);
   const isMentor = result?.role === UserRole.MENTOR || result?.role === UserRole.ADMIN;
+  const isPartnerMentor = !isMentor;
 
   // 파트너 정보 가져오기
   const { data: partnerInfo } = useGetPartnerInfo(chatId);
@@ -91,7 +92,12 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
             </button>
           </div>
           <div className="mb-6 flex flex-col items-center">
-            <ProfileWithBadge profileImageUrl={partnerInfo?.profileUrl} width={64} height={64} />
+            <ProfileWithBadge
+              profileImageUrl={partnerInfo?.profileUrl}
+              isMentor={isPartnerMentor}
+              width={64}
+              height={64}
+            />
             <h3 className="text-gray-800 typo-sb-5">{partnerInfo?.nickname || "상대방"}</h3>
             <p className={clsx("typo-medium-2", { "text-sub-c-500": isMentor, "text-primary-500": !isMentor })}>
               {partnerInfo?.university || "예비솔커"}
@@ -136,7 +142,7 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
           <div className="mt-2 space-y-3">
             {/* 현재 사용자 */}
             <div className="flex items-center gap-3">
-              <ProfileWithBadge profileImageUrl={myInfo?.profileImageUrl} width={24} height={24} />
+              <ProfileWithBadge profileImageUrl={myInfo?.profileImageUrl} isMentor={isMentor} width={24} height={24} />
               {/* '나' 표시 div */}
               <div className="flex h-3 w-3 items-center justify-center rounded-full bg-pink-200">
                 <span className="text-center text-pink-600 typo-medium-5">나</span>
@@ -150,7 +156,12 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
 
             {/* 상대방 */}
             <div className="flex items-center gap-3">
-              <ProfileWithBadge profileImageUrl={partnerInfo?.profileUrl} width={24} height={24} />
+              <ProfileWithBadge
+                profileImageUrl={partnerInfo?.profileUrl}
+                isMentor={isPartnerMentor}
+                width={24}
+                height={24}
+              />
               <span className="text-k-800 typo-medium-2">
                 {partnerInfo?.nickname || "상대방"} ({isMentor ? "멘티" : "멘토"})
               </span>
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
@@ -13,6 +13,7 @@ const ChatPageClient = () => {
   const { data: myInfo } = useGetMyInfo();
 
   const isMentee = myInfo?.role === UserRole.MENTEE;
+  const isPartnerMentor = isMentee;
 
   // 연결된 멘토가 없을 때의 처리 (멘티만)
   if (chatRooms.length === 0 && isMentee) {
@@ -90,7 +91,7 @@ const ChatPageClient = () => {
                 className="flex items-center justify-between border-b border-k-50 py-2"
               >
                 <div className="flex items-center gap-2">
-                  <ProfileWithBadge profileImageUrl={profileUrl} width={48} height={48} />
+                  <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isPartnerMentor} width={48} height={48} />
                   <div className="flex flex-col items-start">
                     <h3 className="text-k-900 typo-sb-9">{nickname}</h3>
                     <p className="truncate text-k-600 typo-regular-2">{lastChatMessage}</p>
diff --git a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
@@ -79,7 +79,7 @@ const MyProfileContent = () => {
       {/* Profile Card */}
       <div className="mb-4 rounded-lg bg-k-50 p-4">
         <div className="mb-3 flex items-center space-x-3">
-          <ProfileWithBadge profileImageUrl={profileImageUrl} width={48} height={48} />
+          <ProfileWithBadge profileImageUrl={profileImageUrl} isMentor={viewAsMentor} width={48} height={48} />
           <div>
             <div className="flex items-center gap-3 space-x-2">
               <h3 className="text-primary typo-sb-5">{nickname}</h3>
diff --git a/apps/web/src/components/ui/ProfileWithBadge.tsx b/apps/web/src/components/ui/ProfileWithBadge.tsx
@@ -4,6 +4,7 @@ import { IconGraduation } from "@/public/svgs/mentor";
 
 interface ProfileWithBadgeProps {
   profileImageUrl?: string | null;
+  isMentor?: boolean;
   hasBadge?: boolean;
   width?: number;
   height?: number;
@@ -12,11 +13,14 @@ interface ProfileWithBadgeProps {
 
 const ProfileWithBadge = ({
   profileImageUrl,
+  isMentor,
   hasBadge = false,
   width = 86,
   height = 86,
   isBadgeUp = true,
 }: ProfileWithBadgeProps) => {
+  const showMentorBadge = isMentor ?? hasBadge;
+
   // 배지 크기를 전체 크기에 비례해서 계산
   const badgeSize = Math.round(width * 0.35);
   const iconSize = Math.round(badgeSize * 0.67);
@@ -26,7 +30,7 @@ const ProfileWithBadge = ({
       {/* 프로필 이미지 */}
       <div
         className={`h-full w-full overflow-hidden rounded-full ${
-          hasBadge ? "border-2 border-primary-1" : "border border-gray-200"
+          showMentorBadge ? "border-2 border-primary-1" : "border border-gray-200"
         }`}
       >
         <Image
@@ -42,7 +46,7 @@ const ProfileWithBadge = ({
       </div>
 
       {/* 학습 상태 배지 */}
-      {hasBadge && (
+      {showMentorBadge && (
         <div
           className={`absolute -right-1 flex items-center justify-center rounded-full bg-primary-1 ${
             isBadgeUp ? "-top-1" : "-bottom-1"
