Feat: 채팅 팝업에 표시되는 정보 추가

eunji-0623 · Jul 31, 2024 · 5851170 · 5851170
1 parent 7ef363c
commit 5851170
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 6 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -211,6 +211,8 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
                 <SendChat
                   receiver={Number(activityData?.userId)}
                   activityId={Number(activityData?.id)}
+                  activityTitle={String(activityData?.title)}
+                  activityImage={String(activityData?.bannerImageUrl)}
                 />
               )}
               <ShareButton

diff --git a/components/Chat/SendChat.tsx b/components/Chat/SendChat.tsx
@@ -7,7 +7,12 @@ import { useState } from 'react';
 import ChatPopup from '../Popup/ChatPopup';
 import { SendChatProps } from './SendChat.types';
 
-function SendChat({ receiver, activityId }: SendChatProps) {
+function SendChat({
+  receiver,
+  activityId,
+  activityTitle,
+  activityImage,
+}: SendChatProps) {
   const isDarkMode = useRecoilValue(darkModeState);
   const { userData } = useUserData();
   const [isPopupOpen, setIsPopupOpen] = useState(false);
@@ -50,7 +55,12 @@ function SendChat({ receiver, activityId }: SendChatProps) {
         />
       </button>
       {isPopupOpen && (
-        <ChatPopup closePopup={closePopup} activityId={activityId} />
+        <ChatPopup
+          closePopup={closePopup}
+          activityId={activityId}
+          activityTitle={activityTitle}
+          activityImage={activityImage}
+        />
       )}
     </>
   );

diff --git a/components/Chat/SendChat.types.ts b/components/Chat/SendChat.types.ts
@@ -1,4 +1,6 @@
 export interface SendChatProps {
   receiver: number;
   activityId: number;
+  activityTitle: string;
+  activityImage: string;
 }
diff --git a/components/MyActivity/Card/Card.tsx b/components/MyActivity/Card/Card.tsx
@@ -150,6 +150,8 @@ function Card({
             <ChatPopup
               closePopup={closePopup}
               activityId={activityId}
+              activityTitle={title}
+              activityImage={activityImage}
               isAdmin
             />
           )}

diff --git a/components/Popup/ChatPopup.tsx b/components/Popup/ChatPopup.tsx
@@ -12,16 +12,22 @@ import Image from 'next/image';
 function ChatPopup({
   closePopup,
   activityId,
+  activityTitle,
+  activityImage,
   isAdmin = false,
 }: ChatPopupProps) {
   const [message, setMessage] = useState('');
   const [senderId, setSenderId] = useState(0);
+  const [nickname, setNickName] = useState('문의 하기');
+  const [profile, setProfile] = useState(activityImage);
   const [isSendEnabled, setIsSendEnabled] = useState(true);
   const [isEnter, setIsEnter] = useState(false);
 
   const handleClickPrev = () => {
     setIsEnter(false);
     setIsSendEnabled(false);
+    setNickName('문의 내역');
+    setProfile(activityImage);
   };
 
   const sendMessage = (event: any) => {
@@ -48,13 +54,31 @@ function ChatPopup({
 
   useEffect(() => {
     setIsSendEnabled(!isAdmin);
+    if (isAdmin) {
+      setNickName('문의 내역');
+    }
   }, []);
 
   return (
     <div className="flex items-center justify-center fixed w-[400px] bottom-[30px] right-[30px] z-50 m:inset-0 m:w-full m:bg-black m:bg-opacity-70">
       <div className="flex flex-col bg-var-gray2 w-full rounded-[20px] dark:bg-var-dark2 dark:border-4 dark:border-solid dark:border-var-dark3">
-        <div className="flex justify-between pt-[7px] pb-[3px] px-[20px] items-center bg-var-gray3 rounded-t-[15px] dark:bg-var-dark3">
-          <p>문의 채팅</p>
+        <div className="flex justify-between h-[64px] pt-[10px] pb-[3px] px-[20px] items-center bg-var-gray3 rounded-t-[15px] dark:bg-var-dark3">
+          <div className="flex gap-[10px]">
+            <div className="w-[40px] h-[40px] rounded-full">
+              <Image
+                src={profile}
+                alt="프로필"
+                width={40}
+                height={40}
+                className="w-[40px] h-[40px] rounded-full"
+              />
+            </div>
+            <div>
+              <p className="font-[500] line-clamp-1">{activityTitle}</p>
+              <p className="text-var-gray6">{`@${nickname}`}</p>
+            </div>
+          </div>
+
           <div className="flex items-center h-[30px]">
             {isEnter && (
               <button onClick={handleClickPrev}>
@@ -84,6 +108,8 @@ function ChatPopup({
               handleSendEnable={setIsSendEnabled}
               isEnter={isEnter}
               handleIsEnter={setIsEnter}
+              handleNickName={setNickName}
+              handleProfile={setProfile}
             />
           ) : (
             <ShowChatList />
@@ -117,17 +143,21 @@ function ShowChatRoomList({
   handleSendEnable,
   isEnter,
   handleIsEnter,
+  handleNickName,
+  handleProfile,
 }: ChatRoomPopupProps) {
   const [rooms, setRooms] = useState<ChatRoomProps[]>([]);
   const { userData } = useUserData();
 
-  const handleClickRoom = (userId: number) => {
+  const handleClickRoom = (userId: number, index: number) => {
     socket.emit('inquiryAdmin', userData.id, activityId, userId, (res: any) => {
       console.log('inquiryAdmin res', res);
     });
     handleIsEnter(true);
     handleSenderId(userId);
     handleSendEnable(true);
+    handleNickName(rooms[index].user.name);
+    handleProfile(rooms[index].user.profile);
   };
 
   useEffect(() => {
@@ -154,7 +184,7 @@ function ShowChatRoomList({
               <div key={room.user.id} className="flex justify-center">
                 <button
                   type="button"
-                  onClick={() => handleClickRoom(room.user.id)}
+                  onClick={() => handleClickRoom(room.user.id, index)}
                   className={`flex items-center gap-[15px] p-[15px] h-[75px] bg-var-gray2 w-full max-w-[400px] border-b border-solid border-b-var-gray4 dark:bg-var-dark2`}
                 >
                   <div className="w-[50px] h-[50px] rounded-full overflow-hidden">

diff --git a/components/Popup/ChatPopup.types.tsx b/components/Popup/ChatPopup.types.tsx
@@ -3,6 +3,8 @@ import { Dispatch, SetStateAction } from 'react';
 export interface ChatPopupProps {
   closePopup: () => void;
   activityId: number;
+  activityTitle: string;
+  activityImage: string;
   isAdmin?: boolean;
 }
 
@@ -23,6 +25,8 @@ export interface ChatRoomPopupProps {
   handleSendEnable: Dispatch<SetStateAction<boolean>>;
   isEnter: boolean;
   handleIsEnter: Dispatch<SetStateAction<boolean>>;
+  handleNickName: Dispatch<SetStateAction<string>>;
+  handleProfile: Dispatch<SetStateAction<string>>;
 }
 
 export interface ChatListProps {