From 4b965790849535ea7f283cb62ff3046707929b5b Mon Sep 17 00:00:00 2001
From: audwls239 <audwls239@naver.com>
Date: Tue, 10 Jun 2025 10:33:20 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=20=EB=A9=A4=EB=B2=84?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99,=20=ED=83=80=EC=9D=B8=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B2=84=ED=8A=BC=20=EC=82=AD=EC=A0=9C,?=
 =?UTF-8?q?=20=EB=82=B4=20=EC=83=81=ED=83=9C=EB=B3=80=EA=B2=BD=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChatRoom.tsx | 105 ++++++++-------------------
 1 file changed, 32 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/ChatRoom.tsx b/frontend/src/components/ChatRoom.tsx
index c1ac63f5..bc02a7d2 100644
--- a/frontend/src/components/ChatRoom.tsx
+++ b/frontend/src/components/ChatRoom.tsx
@@ -198,10 +198,10 @@ function ChatRoom({ chatRoomId, postTitle, onBack }: ChatRoomProps) {
                 const result = await response.json();
                 const serverParticipants: ServerChatParticipant[] = result || [];
                 const mappedParticipants: ChatParticipant[] = serverParticipants.map((p) => ({
-                    id: p.memberId,
-                    name: p.memberName || "Unknown User",
-                    image: p.memberImage,
-                    status: p.chatMemberStatus || "UNKNOWN",
+                    id: p.member_id,
+                    name: p.member_name || "이름",
+                    image: p.member_image,
+                    status: p.chat_member_status || "상태",
                 }));
                 setParticipants(mappedParticipants);
             } catch (err: any) {
@@ -378,27 +378,26 @@ function ChatRoom({ chatRoomId, postTitle, onBack }: ChatRoomProps) {
                 <div className="flex-grow">
                     <div className="font-bold text-[16px]">{postTitle || `채팅방 ${chatRoomId}`}</div>
                 </div>
-                {/* TODO: 채팅 Info 버튼 - 기능 구현 필요*/}
-                {/*<button*/}
-                {/*    onClick={toggleParticipantsList}*/}
-                {/*    className="bg-transparent border-none cursor-pointer ml-2 text-[#1877f2] hover:text-[#166fe5]"*/}
-                {/*    aria-label="Show chat participants"*/}
-                {/*>*/}
-                {/*    <svg*/}
-                {/*        xmlns="http://www.w3.org/2000/svg"*/}
-                {/*        width="20"*/}
-                {/*        height="20"*/}
-                {/*        viewBox="0 0 24 24"*/}
-                {/*        fill="none"*/}
-                {/*        stroke="currentColor"*/}
-                {/*        strokeWidth="2"*/}
-                {/*        strokeLinecap="round"*/}
-                {/*        strokeLinejoin="round"*/}
-                {/*    >*/}
-                {/*        <circle cx="12" cy="12" r="10" /> <line x1="12" y1="16" x2="12" y2="12" />*/}
-                {/*        <line x1="12" y1="8" x2="12.01" y2="8" />*/}
-                {/*    </svg>*/}
-                {/*</button>*/}
+                <button
+                    onClick={toggleParticipantsList}
+                    className="bg-transparent border-none cursor-pointer ml-2 text-[#1877f2] hover:text-[#166fe5]"
+                    aria-label="Show chat participants"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    >
+                        <circle cx="12" cy="12" r="10" /> <line x1="12" y1="16" x2="12" y2="12" />
+                        <line x1="12" y1="8" x2="12.01" y2="8" />
+                    </svg>
+                </button>
             </div>
 
             {/* Main Chat Area */}
@@ -454,28 +453,10 @@ function ChatRoom({ chatRoomId, postTitle, onBack }: ChatRoomProps) {
                     <div className="absolute top-0 right-0 w-64 md:w-72 lg:w-80 h-full bg-white/95 backdrop-blur-sm flex flex-col overflow-y-auto transition-all duration-300 ease-in-out shadow-lg z-10 border-l border-[#e4e6eb]">
                         <div className="p-4 border-b border-[#e4e6eb] flex justify-between items-center bg-gradient-to-r from-[#f0f2f5] to-white">
                             <h3 className="font-bold text-md text-[#1877f2]">참여중인 멤버</h3>
-                            <button
-                                onClick={toggleParticipantsList}
-                                className="text-[#65676B] hover:text-[#1877f2] transition-colors"
-                                aria-label="Close participants list"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="18"
-                                    height="18"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    strokeWidth="2"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                >
-                                    <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
-                                </svg>
-                            </button>
                         </div>
 
-                        {currentUserParticipant && (
+                        {/* TODO: 상태 변경 기능 보수 */}
+                        {/* {currentUserParticipant && (
                             <div className="p-4 border-b border-[#e4e6eb] bg-[#f7f9fb]">
                                 <div className="text-xs font-bold uppercase text-[#65676B] mb-2">내 상태</div>
                                 <select
@@ -485,12 +466,10 @@ function ChatRoom({ chatRoomId, postTitle, onBack }: ChatRoomProps) {
                                 >
                                     <option value="ONLINE">ONLINE</option>
                                     <option value="OFFLINE">OFFLINE</option>
-                                    <option value="AWAY">AWAY (자리비움)</option>
-                                    <option value="DO_NOT_DISTURB">DO_NOT_DISTURB (방해금지)</option>
                                     <option value="LEFT">LEFT (나감)</option>
                                 </select>
                             </div>
-                        )}
+                        )} */}
 
                         <div className="flex-grow p-2">
                             {loadingParticipants && (
@@ -525,7 +504,10 @@ function ChatRoom({ chatRoomId, postTitle, onBack }: ChatRoomProps) {
                                             key={participant.id}
                                             className="flex items-center justify-between p-2 hover:bg-[#f0f2f5] rounded-md transition-colors"
                                         >
-                                            <div className="flex items-center">
+                                            <button
+                                                onClick={() => window.location.href = `/mypage/${participant.id}`}
+                                                className="flex items-center w-full text-left hover:bg-[#f0f2f5] rounded-md p-1 transition-colors cursor-pointer"
+                                            >
                                                 {participant.image ? (
                                                     <img
                                                         src={participant.image || "/placeholder.svg"}
@@ -552,30 +534,7 @@ function ChatRoom({ chatRoomId, postTitle, onBack }: ChatRoomProps) {
                                                             : "상태 없음"}
                                                     </div>
                                                 </div>
-                                            </div>
-                                            {participant.id !== currentMemberId && (
-                                                <button
-                                                    onClick={() => handleChangeParticipantState(participant.id)}
-                                                    className="text-xs bg-white hover:bg-[#f0f2f5] text-[#1877f2] border border-[#e4e6eb] py-1 px-2 rounded-md transition-colors"
-                                                    aria-label={`${participant.name || "참가자"}님 상태 변경`}
-                                                >
-                                                    <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        width="12"
-                                                        height="12"
-                                                        viewBox="0 0 24 24"
-                                                        fill="none"
-                                                        stroke="currentColor"
-                                                        strokeWidth="2"
-                                                        strokeLinecap="round"
-                                                        strokeLinejoin="round"
-                                                        className="inline"
-                                                    >
-                                                        <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle>
-                                                        <circle cx="5" cy="12" r="1"></circle>
-                                                    </svg>
-                                                </button>
-                                            )}
+                                            </button>
                                         </div>
                                     ))}
                                 </div>