feat: 질문 닉네임 선택 시에도 팝업 뜨도록 세팅

boostcampwm-2024 · Dec 2, 2024 · b22d74a · b22d74a
1 parent f12f819
commit b22d74a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 19 deletions.
diff --git a/frontend/src/components/chat/ChatList.tsx b/frontend/src/components/chat/ChatList.tsx
@@ -18,7 +18,7 @@ const ChatItemWrapper = memo(
     if (chat.msgType === CHATTING_TYPES.QUESTION) {
       return (
         <ChatItem>
-          <QuestionCard type="client" question={chat} />
+          <QuestionCard type="client" question={chat} onNicknameClick={handleNicknameClick} />
         </ChatItem>
       );
     } else if (chat.msgType === CHATTING_TYPES.NOTICE) {
@@ -44,7 +44,7 @@ const ChatItemWrapper = memo(
         <ChatItem>
           <NormalChat $isHost={chat.owner === 'host'} $pointColor={chat.owner === 'host' ? '#0ADD91' : chat.color}>
             <span className="text_point user_name" onClick={handleNicknameClick}>
-              {chat.owner === 'me' ? '🧀 ' : chat.owner === 'host' ? <StyledIcon as={HostIconGreen} /> : null}
+              {chat.owner === 'me' ? '🧀' : chat.owner === 'host' ? <StyledIcon as={HostIconGreen} /> : null}
               {chat.nickname}
             </span>
             <span className="chat_message">{chat.msg}</span>

diff --git a/frontend/src/components/chat/ChatQuestionSection.tsx b/frontend/src/components/chat/ChatQuestionSection.tsx
@@ -1,10 +1,11 @@
 import { memo, useState, useCallback } from 'react';
 import styled from 'styled-components';
 import QuestionCard from './QuestionCard';
-import { MessageReceiveData, MessageSendData } from '@type/chat';
+import { MessageReceiveData, MessageSendData, UserInfoData } from '@type/chat';
 import { CHATTING_SOCKET_SEND_EVENT } from '@constants/chat';
 import { getStoredId } from '@utils/id';
 import { UserType } from '@type/user';
+import { useChat } from '@contexts/chatContext';
 
 export interface ChatQuestionSectionProps {
   questions: MessageReceiveData[];
@@ -38,6 +39,18 @@ const ChatQuestionSection = ({ questions, worker, userType, roomId }: ChatQuesti
     [worker, roomId, userId]
   );
 
+  const { dispatch } = useChat();
+
+  const onNicknameClick = useCallback(
+    (data: UserInfoData) => {
+      dispatch({
+        type: 'SET_SELECTED_USER',
+        payload: data
+      });
+    },
+    [dispatch]
+  );
+
   return (
     <SectionWrapper>
       <SectionContainer>
@@ -51,18 +64,32 @@ const ChatQuestionSection = ({ questions, worker, userType, roomId }: ChatQuesti
               question={questions[0]}
               handleQuestionDone={handleQuestionDone}
               ellipsis={!expanded}
+              onNicknameClick={() =>
+                onNicknameClick({
+                  nickname: questions[0].nickname,
+                  socketId: questions[0].socketId,
+                  entryTime: questions[0].entryTime,
+                  owner: questions[0].owner
+                })
+              }
             />
             {expanded &&
-              questions
-                .slice(1)
-                .map((question) => (
-                  <QuestionCard
-                    key={question.questionId}
-                    type={userType}
-                    question={question}
-                    handleQuestionDone={handleQuestionDone}
-                  />
-                ))}
+              questions.slice(1).map((question) => (
+                <QuestionCard
+                  key={question.questionId}
+                  type={userType}
+                  question={question}
+                  handleQuestionDone={handleQuestionDone}
+                  onNicknameClick={() =>
+                    onNicknameClick({
+                      nickname: question.nickname,
+                      socketId: question.socketId,
+                      entryTime: question.entryTime,
+                      owner: question.owner
+                    })
+                  }
+                />
+              ))}
             <SwipeBtn onClick={toggleSection} />
           </>
         )}

diff --git a/frontend/src/components/chat/QuestionCard.tsx b/frontend/src/components/chat/QuestionCard.tsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef } from 'react';
+import { memo, useEffect, useMemo, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import CheckIcon from '@assets/icons/check.svg';
 import { MessageReceiveData } from '@type/chat';
@@ -10,9 +10,10 @@ interface QuestionCardProps {
   question: MessageReceiveData;
   handleQuestionDone?: (questionId: number) => void;
   ellipsis?: boolean;
+  onNicknameClick: () => void;
 }
 
-export const QuestionCard = ({ type, question, handleQuestionDone, ellipsis = false }: QuestionCardProps) => {
+const QuestionCard = ({ type, question, handleQuestionDone, onNicknameClick, ellipsis = false }: QuestionCardProps) => {
   const startDateFormat = useMemo(() => new Date(question.msgTime), [question.msgTime]);
   const nowRef = useRef<Date>(new Date());
 
@@ -36,19 +37,29 @@ export const QuestionCard = ({ type, question, handleQuestionDone, ellipsis = fa
 
   const timeElement = useRef<HTMLSpanElement>(null);
 
+  const handleQuestionDoneMemoized = useCallback(() => {
+    if (handleQuestionDone) {
+      handleQuestionDone(question.questionId as number);
+    }
+  }, [handleQuestionDone, question.questionId]);
+
+  const onNicknameClickMemoized = useCallback(() => {
+    onNicknameClick();
+  }, [onNicknameClick]);
+
   return (
     <QuestionCardContainer>
       <QuestionCardTop>
         <QuestionInfo>
-          <span className="name_info">
+          <span className="name_info" onClick={onNicknameClickMemoized}>
             <StyledIcon as={QuestionUserIcon} /> {question.nickname}
           </span>
           <span className="time_info" ref={timeElement}>
             {formatTime.current}
           </span>
         </QuestionInfo>
         {type === 'host' && handleQuestionDone && (
-          <CheckBtn onClick={() => handleQuestionDone(question.questionId as number)}>
+          <CheckBtn onClick={handleQuestionDoneMemoized}>
             <StyledCheckIcon />
           </CheckBtn>
         )}
@@ -59,7 +70,14 @@ export const QuestionCard = ({ type, question, handleQuestionDone, ellipsis = fa
   );
 };
 
-export default memo(QuestionCard);
+// shouldComponentUpdate를 내부에서 사용할 수 있도록 memo 사용
+export default memo(QuestionCard, (prevProps, nextProps) => {
+  return (
+    prevProps.question.questionId === nextProps.question.questionId &&
+    prevProps.type === nextProps.type &&
+    prevProps.ellipsis === nextProps.ellipsis
+  );
+});
 
 const QuestionCardContainer = styled.div`
   display: flex;
@@ -86,7 +104,12 @@ const QuestionInfo = styled.div`
   align-items: end;
   gap: 12px;
   .name_info {
-    ${({ theme }) => theme.tokenTypographys['display-bold12']}
+    border-radius: 7px;
+    ${({ theme }) => theme.tokenTypographys['display-bold12']};
+    cursor: pointer;
+    &:hover {
+      color: #bbbbbb;
+    }
   }
   .time_info {
     ${({ theme }) => theme.tokenTypographys['display-medium12']}