Merge branch 'master' into feature-jisung

eunji-0623 · Aug 5, 2024 · d02e9f0 · d02e9f0
2 parents 9e02611 + 60d729b
commit d02e9f0
Show file tree

Hide file tree

Showing 23 changed files with 154 additions and 227 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -26,10 +26,10 @@ import { ActivityDetailsPageMeta } from '../MetaData/MetaData';
 import useDeleteActivity from '@/hooks/myActivity/useDeleteActivity';
 import { usePopup } from '@/hooks/usePopup';
 import { darkModeState } from '@/states/themeState';
-import SendChat from '../Chat/SendChat';
 import { ShareButton } from '../ShareButton/ShareButton';
 import { ViewedActivitiesState } from '@/states/ViewedState';
 import { ViewedActivityProps } from '../ViewedActivities/ViewedActivities.type';
+import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -203,22 +203,14 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               </div>
             </div>
           </div>
-          <div className="flex items-center t:items-center m:items-end">
-            <div className="flex gap-[12px]">
-              {!isAuthor && (
-                <SendChat
-                  receiver={Number(activityData?.userId)}
-                  activityId={Number(activityData?.id)}
-                />
-              )}
-              <ShareButton
-                type="none-bg"
-                title={activityData?.title}
-                bannerImageUrl={activityData?.bannerImageUrl}
-                description={activityData?.description}
-                activityId={id}
-              />
-            </div>
+          <div className="flex t:items-center m:items-end">
+            <ShareButton
+              type="none-bg"
+              title={activityData?.title}
+              bannerImageUrl={activityData?.bannerImageUrl}
+              description={activityData?.description}
+              activityId={id}
+            />
             {isAuthor && (
               <div className="flex items-center">
                 <MeatballButton onClick={toggleMenu} />
@@ -252,7 +244,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
           />
         )}
         <div className="flex gap-4 m:block m:relative">
-          <div className="mb-20 ipad-pro:w-[725px] w-full m:px-[24px]">
+          <div className="mb-20 w-full ipad-pro:w-[725px] t:w-full m:w-full m:px-[24px]">
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid pt-10 m:pt-6" />
             <div className="flex flex-col gap-4">
               <p className="text-nomad-black dark:text-var-gray2 font-bold text-xl">
@@ -302,7 +294,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
                   >
                     <div className="flex-shrink-0">
                       <Image
-                        src={review.user.profileImageUrl}
+                        src={review.user.profileImageUrl || profileThumbnail}
                         alt={`${review.user.nickname}의 프로필 이미지`}
                         width={45}
                         height={45}

diff --git a/components/Button/TopButton.tsx b/components/Button/TopButton.tsx
@@ -1,8 +1,11 @@
 import Image from 'next/image';
 import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 const TopButton = () => {
   const [showButton, setShowButton] = useState(false);
+  const router = useRouter();
+  const isActivityDetailPage = router.pathname.startsWith('/activity-details/');
 
   const scrollToTop = () => {
     window.scroll({
@@ -26,7 +29,13 @@ const TopButton = () => {
   return (
     <>
       {showButton && (
-        <div className="fixed right-[30px] m:right-[14px] bottom-[30px] z-30">
+        <div
+          className="fixed z-30"
+          style={{
+            bottom: isActivityDetailPage ? '70px' : '30px',
+            right: isActivityDetailPage ? '13px' : '30px',
+          }}
+        >
           <button
             onClick={scrollToTop}
             type="button"

diff --git a/components/CatergoryBtn/CatergoryBtn.tsx b/components/CatergoryBtn/CatergoryBtn.tsx
@@ -37,7 +37,7 @@ export default function CatergoryBtn({ categoryName }: CategoryBtnProps) {
 
   return (
     <button
-      className={`flex items-center justify-center rounded-[15px] border-[1px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
+      className={`flex items-center justify-center rounded-[15px] border-[2px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
       onClick={handleClick}
     >
       <p className={`text-[18px] p:font-[600] m:text-[14px] ${textColor}`}>

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);
@@ -41,25 +46,21 @@ function SendChat({ receiver, activityId }: SendChatProps) {
 
   return (
     <>
-      <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 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>
       {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/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
@@ -157,7 +157,7 @@ function AllActivities() {
 
   return (
     <div ref={PaginationScrollRef}>
-      <div className="flex justify-between">
+      <div className="flex justify-between mt-[120px]">
         <div className="relative t:w-[520px] m:w-[230px]">
           <div className="flex gap-[24px] t:gap-[14px] m:gap-[8px] t:w-[520px] m:w-[230px] overflow-auto scrollbar-hide">
             {Kategories.map((Kategorie, index) => (

diff --git a/components/MyActivity/Card/Card.tsx b/components/MyActivity/Card/Card.tsx
@@ -12,6 +12,8 @@ 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 (
@@ -69,7 +71,7 @@ function Card({
 }: CardProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
-  const { userData } = useUserData();
+  const isDarkMode = useRecoilValue(darkModeState);
 
   const handleClickMeatball = () => {
     setIsPopoverOpen(!isPopoverOpen);
@@ -132,7 +134,11 @@ function Card({
           <div className="m:w-[32px] m:h-[32px] flex items-center">
             <button onClick={handleClickChat}>
               <Image
-                src="/icon/chat_bubble.svg"
+                src={
+                  isDarkMode
+                    ? '/icon/chat_bubble_gray.svg'
+                    : '/icon/chat_bubble.svg'
+                }
                 alt="문의 내역"
                 width={30}
                 height={30}
@@ -144,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
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { CloseButtonBold } from '../Button/Button';
 import {
   ChatListProps,
   ChatPopupProps,
@@ -13,14 +12,27 @@ 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();
+    if (message === '') return;
     if (isAdmin) {
       socket.emit(
         'sendMessageAdmin',
@@ -43,15 +55,50 @@ 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">
-      <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 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 h-[30px]">
-            <CloseButtonBold onClick={closePopup} />
+            {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>
           </div>
         </div>
         <div className="flex flex-col h-[500px]">
@@ -60,6 +107,10 @@ function ChatPopup({
               activityId={activityId}
               handleSenderId={setSenderId}
               handleSendEnable={setIsSendEnabled}
+              isEnter={isEnter}
+              handleIsEnter={setIsEnter}
+              handleNickName={setNickName}
+              handleProfile={setProfile}
             />
           ) : (
             <ShowChatList />
@@ -91,18 +142,23 @@ 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) => {
+  const handleClickRoom = (userId: number, index: number) => {
     socket.emit('inquiryAdmin', userData.id, activityId, userId, (res: any) => {
       console.log('inquiryAdmin res', res);
     });
-    setIsEnter(true);
+    handleIsEnter(true);
     handleSenderId(userId);
     handleSendEnable(true);
+    handleNickName(rooms[index].user.name);
+    handleProfile(rooms[index].user.profile);
   };
 
   useEffect(() => {
@@ -129,8 +185,8 @@ function ShowChatRoomList({
               <div key={room.user.id} className="flex justify-center">
                 <button
                   type="button"
-                  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`}
+                  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">
                     <Image
@@ -141,7 +197,7 @@ function ShowChatRoomList({
                     />
                   </div>
                   <div className="flex flex-col items-start">
-                    <div className="font-[500] text-nomad-black">
+                    <div className="font-[500] text-nomad-black dark:text-var-gray2">
                       {room.user.name}
                     </div>
                     <div className="text-var-gray6">
@@ -153,7 +209,7 @@ function ShowChatRoomList({
             ))}
           </div>
         ) : (
-          <div className="flex justify-center items-center">
+          <div className="flex justify-center items-center mt-[20px]">
             <p>아직 문의 채팅이 없습니다.</p>
           </div>
         ))}
@@ -200,7 +256,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'
+                  : 'bg-var-gray3 text-var-dark1'
               }`}
             >
               {message}

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;
 }
 
@@ -21,6 +23,10 @@ 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 {