Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -158,6 +159,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
message={message}
currentUserId={userId}
partnerNickname={nickname}
isPartnerMentor={isPartnerMentor}
/>
</div>
);
Expand Down
17 changes: 14 additions & 3 deletions apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 || "예비솔커"}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const ChatPageClient = () => {
const { data: myInfo } = useGetMyInfo();

const isMentee = myInfo?.role === UserRole.MENTEE;
const isPartnerMentor = isMentee;

// 연결된 멘토가 없을 때의 처리 (멘티만)
if (chatRooms.length === 0 && isMentee) {
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/my/_ui/MyProfileContent/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions apps/web/src/components/ui/ProfileWithBadge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { IconGraduation } from "@/public/svgs/mentor";

interface ProfileWithBadgeProps {
profileImageUrl?: string | null;
isMentor?: boolean;
hasBadge?: boolean;
width?: number;
height?: number;
Expand All @@ -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);
Expand All @@ -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
Expand All @@ -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"
Expand Down
Loading