From d67cb04393d9866bb1060e948f8a30043f0b66c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Wed, 31 Jul 2024 18:11:21 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"Feat:=20=EC=B1=84=ED=8C=85=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActivityDetails/ActivityDetails.tsx       |  8 +-
 components/Chat/SendChat.tsx                  | 37 ++++-----
 components/Chat/SendChat.types.ts             |  2 -
 components/MyActivity/Card/Card.tsx           | 12 +--
 components/Popup/ChatPopup.tsx                | 83 ++++---------------
 components/Popup/ChatPopup.types.tsx          |  6 --
 public/icon/chat_close.svg                    |  1 -
 public/icon/prev_arrow.svg                    |  1 -
 server/server.js                              |  1 -
 9 files changed, 36 insertions(+), 115 deletions(-)
 delete mode 100644 public/icon/chat_close.svg
 delete mode 100644 public/icon/prev_arrow.svg

diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
index dcbef29..29e75ef 100644
--- a/components/ActivityDetails/ActivityDetails.tsx
+++ b/components/ActivityDetails/ActivityDetails.tsx
@@ -28,7 +28,6 @@ import { usePopup } from '@/hooks/usePopup';
 import { darkModeState } from '@/states/themeState';
 import SendChat from '../Chat/SendChat';
 import { ShareButton } from '../ShareButton/ShareButton';
-import { loginState } from '@/states/loginState';
 import { ViewedActivitiesState } from '@/states/ViewedState';
 import { ViewedActivityProps } from '../ViewedActivities/ViewedActivities.type';
 
@@ -36,7 +35,6 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const isDarkMode = useRecoilValue(darkModeState);
-  const isLogined = useRecoilValue(loginState);
   const [currentPage, setCurrentPage] = useState<number>(
     router.query.page ? parseInt(router.query.page as string, 10) : 1
   );
@@ -205,14 +203,12 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               </div>
             </div>
           </div>
-          <div className="flex items-center t:items-center m:items-center">
+          <div className="flex items-center t:items-center m:items-end">
             <div className="flex gap-[12px]">
-              {isLogined && !isAuthor && (
+              {!isAuthor && (
                 <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
index 18346da..e650447 100644
--- a/components/Chat/SendChat.tsx
+++ b/components/Chat/SendChat.tsx
@@ -7,12 +7,7 @@ import { useState } from 'react';
 import ChatPopup from '../Popup/ChatPopup';
 import { SendChatProps } from './SendChat.types';
 
-function SendChat({
-  receiver,
-  activityId,
-  activityTitle,
-  activityImage,
-}: SendChatProps) {
+function SendChat({ receiver, activityId }: SendChatProps) {
   const isDarkMode = useRecoilValue(darkModeState);
   const { userData } = useUserData();
   const [isPopupOpen, setIsPopupOpen] = useState(false);
@@ -46,21 +41,25 @@ function SendChat({
 
   return (
     <>
-      <button type="button" onClick={handleClick} className="w-[34px] h-[34px]">
-        <Image
-          src={isDarkMode ? '/icon/live_help_gray.svg' : '/icon/live_help.svg'}
-          alt="채팅 아이콘"
-          width={34}
-          height={34}
-        />
+      <button type="button" onClick={handleClick}>
+        {isDarkMode ? (
+          <Image
+            src="/icon/live_help_gray.svg"
+            alt="채팅 아이콘"
+            width={34}
+            height={34}
+          />
+        ) : (
+          <Image
+            src="/icon/live_help.svg"
+            alt="채팅 아이콘"
+            width={34}
+            height={34}
+          />
+        )}
       </button>
       {isPopupOpen && (
-        <ChatPopup
-          closePopup={closePopup}
-          activityId={activityId}
-          activityTitle={activityTitle}
-          activityImage={activityImage}
-        />
+        <ChatPopup closePopup={closePopup} activityId={activityId} />
       )}
     </>
   );
diff --git a/components/Chat/SendChat.types.ts b/components/Chat/SendChat.types.ts
index 9db2d2a..e67e308 100644
--- a/components/Chat/SendChat.types.ts
+++ b/components/Chat/SendChat.types.ts
@@ -1,6 +1,4 @@
 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
index 3cdabef..1f2af02 100644
--- a/components/MyActivity/Card/Card.tsx
+++ b/components/MyActivity/Card/Card.tsx
@@ -12,8 +12,6 @@ import Link from 'next/link';
 import ChatPopup from '@/components/Popup/ChatPopup';
 import { useUserData } from '@/hooks/useUserData';
 import socket from '@/server/server';
-import { useRecoilValue } from 'recoil';
-import { darkModeState } from '@/states/themeState';
 
 function PopoverButton({ children, onClick }: PopoverButtonProps) {
   return (
@@ -71,7 +69,7 @@ function Card({
 }: CardProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
-  const isDarkMode = useRecoilValue(darkModeState);
+  const { userData } = useUserData();
 
   const handleClickMeatball = () => {
     setIsPopoverOpen(!isPopoverOpen);
@@ -134,11 +132,7 @@ function Card({
           <div className="m:w-[32px] m:h-[32px] flex items-center">
             <button onClick={handleClickChat}>
               <Image
-                src={
-                  isDarkMode
-                    ? '/icon/chat_bubble_gray.svg'
-                    : '/icon/chat_bubble.svg'
-                }
+                src="/icon/chat_bubble.svg"
                 alt="문의 내역"
                 width={30}
                 height={30}
@@ -150,8 +144,6 @@ function Card({
             <ChatPopup
               closePopup={closePopup}
               activityId={activityId}
-              activityTitle={title}
-              activityImage={activityImage}
               isAdmin
             />
           )}
diff --git a/components/Popup/ChatPopup.tsx b/components/Popup/ChatPopup.tsx
index 9ed5402..5ebea67 100644
--- a/components/Popup/ChatPopup.tsx
+++ b/components/Popup/ChatPopup.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { CloseButtonBold } from '../Button/Button';
 import {
   ChatListProps,
   ChatPopupProps,
@@ -12,23 +13,11 @@ 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) => {
     event.preventDefault();
@@ -54,50 +43,15 @@ 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 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 justify-center fixed w-[400px] bottom-[30px] right-[30px] z-50">
+      <div className="flex flex-col bg-var-gray2 w-full rounded-[20px]">
+        <div className="flex justify-between pt-[7px] pb-[3px] px-[20px] items-center bg-var-gray3 rounded-t-[20px]">
+          <p>문의 채팅</p>
           <div className="flex items-center h-[30px]">
-            {isEnter && (
-              <button onClick={handleClickPrev}>
-                <Image
-                  src="/icon/prev_arrow.svg"
-                  alt="이전"
-                  width={20}
-                  height={20}
-                />
-              </button>
-            )}
-            <button onClick={closePopup}>
-              <Image
-                src="/icon/chat_close.svg"
-                alt="닫기"
-                width={24}
-                height={24}
-              />
-            </button>
+            <CloseButtonBold onClick={closePopup} />
           </div>
         </div>
         <div className="flex flex-col h-[500px]">
@@ -106,10 +60,6 @@ function ChatPopup({
               activityId={activityId}
               handleSenderId={setSenderId}
               handleSendEnable={setIsSendEnabled}
-              isEnter={isEnter}
-              handleIsEnter={setIsEnter}
-              handleNickName={setNickName}
-              handleProfile={setProfile}
             />
           ) : (
             <ShowChatList />
@@ -141,23 +91,18 @@ function ShowChatRoomList({
   activityId,
   handleSenderId,
   handleSendEnable,
-  isEnter,
-  handleIsEnter,
-  handleNickName,
-  handleProfile,
 }: ChatRoomPopupProps) {
   const [rooms, setRooms] = useState<ChatRoomProps[]>([]);
+  const [isEnter, setIsEnter] = useState(false);
   const { userData } = useUserData();
 
-  const handleClickRoom = (userId: number, index: number) => {
+  const handleClickRoom = (userId: number) => {
     socket.emit('inquiryAdmin', userData.id, activityId, userId, (res: any) => {
       console.log('inquiryAdmin res', res);
     });
-    handleIsEnter(true);
+    setIsEnter(true);
     handleSenderId(userId);
     handleSendEnable(true);
-    handleNickName(rooms[index].user.name);
-    handleProfile(rooms[index].user.profile);
   };
 
   useEffect(() => {
@@ -184,8 +129,8 @@ function ShowChatRoomList({
               <div key={room.user.id} className="flex justify-center">
                 <button
                   type="button"
-                  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`}
+                  onClick={() => handleClickRoom(room.user.id)}
+                  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`}
                 >
                   <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
                     <Image
@@ -196,7 +141,7 @@ function ShowChatRoomList({
                     />
                   </div>
                   <div className="flex flex-col items-start">
-                    <div className="font-[500] text-nomad-black dark:text-var-gray2">
+                    <div className="font-[500] text-nomad-black">
                       {room.user.name}
                     </div>
                     <div className="text-var-gray6">
@@ -208,7 +153,7 @@ function ShowChatRoomList({
             ))}
           </div>
         ) : (
-          <div className="flex justify-center items-center mt-[20px]">
+          <div className="flex justify-center items-center">
             <p>아직 문의 채팅이 없습니다.</p>
           </div>
         ))}
@@ -255,7 +200,7 @@ function ShowChatList({ isAdmin = false }: ChatListProps) {
               className={`inline-block max-w-max rounded-[10px] p-[8px] pl-[10px] ${
                 sender[index] === 'user'
                   ? 'bg-var-green2 text-white'
-                  : 'bg-var-gray3 text-var-dark1'
+                  : 'bg-var-gray3'
               }`}
             >
               {message}
diff --git a/components/Popup/ChatPopup.types.tsx b/components/Popup/ChatPopup.types.tsx
index c14c0ec..f28c74e 100644
--- a/components/Popup/ChatPopup.types.tsx
+++ b/components/Popup/ChatPopup.types.tsx
@@ -3,8 +3,6 @@ import { Dispatch, SetStateAction } from 'react';
 export interface ChatPopupProps {
   closePopup: () => void;
   activityId: number;
-  activityTitle: string;
-  activityImage: string;
   isAdmin?: boolean;
 }
 
@@ -23,10 +21,6 @@ export interface ChatRoomPopupProps {
   activityId: number;
   handleSenderId: Dispatch<SetStateAction<number>>;
   handleSendEnable: Dispatch<SetStateAction<boolean>>;
-  isEnter: boolean;
-  handleIsEnter: Dispatch<SetStateAction<boolean>>;
-  handleNickName: Dispatch<SetStateAction<string>>;
-  handleProfile: Dispatch<SetStateAction<string>>;
 }
 
 export interface ChatListProps {
diff --git a/public/icon/chat_close.svg b/public/icon/chat_close.svg
deleted file mode 100644
index 751b33f..0000000
--- a/public/icon/chat_close.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
\ No newline at end of file
diff --git a/public/icon/prev_arrow.svg b/public/icon/prev_arrow.svg
deleted file mode 100644
index b117403..0000000
--- a/public/icon/prev_arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 9497359..3b2cbc3 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,5 +1,4 @@
 import io from 'socket.io-client';
 const socket = io('https://rear-ninnetta-codeitsprinter-6a0e09e4.koyeb.app/');
-// const socket = io('http://localhost:5001');
 
 export default socket;