Merge branch 'prod-fe' of https://github.com/boostcampwm-2024/web22-L…

…iBoo into prod-fe
boostcampwm-2024 · Dec 2, 2024 · d640193 · d640193
2 parents f54be8e + 84f2f68
commit d640193
Show file tree

Hide file tree

Showing 15 changed files with 139 additions and 55 deletions.
diff --git a/.github/workflows/prod-fe-docker.yml b/.github/workflows/prod-fe-docker.yml
@@ -3,7 +3,7 @@ name: Build and Push Docker Image
 on:
   push:
     branches:
-      - prod-fe
+      - test-prod-fe
 
 jobs:
   build:
@@ -51,6 +51,6 @@ jobs:
           mkdir -p ~/.ssh
           echo "$SSH_PEM_KEY" > ~/.ssh/SSH_PEM_KEY.pem
           chmod 600 ~/.ssh/SSH_PEM_KEY.pem
-          ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no [email protected] 'cd prod && bash prod_fe.sh'
+          ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no $SSH_USERNAME@test.liboo.kr 'cd prod && bash prod_fe.sh'
 
 
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -14,8 +14,8 @@ services:
       - "1935:1935"
       - "3000:3000"
     volumes:
-      - /etc/letsencrypt/live/liboo.kr:/etc/letsencrypt/live/liboo.kr:ro
-      - /etc/letsencrypt/archive/liboo.kr:/etc/letsencrypt/archive/liboo.kr:ro
+      - /etc/letsencrypt/live/test.liboo.kr:/etc/letsencrypt/live/test.liboo.kr:ro
+      - /etc/letsencrypt/archive/test.liboo.kr:/etc/letsencrypt/archive/test.liboo.kr:ro
       - /etc/nginx/ssl/dhparams.pem:/etc/nginx/ssl/dhparams.pem:ro
 
     networks:

diff --git a/fe.build.yaml b/fe.build.yaml
@@ -6,7 +6,7 @@ services:
     build:
       context: nginx
       dockerfile: dockerfile
-    image: liboost/nginx:latest
+    image: liboost/test-nginx:latest
     ports:
       - "80:80"
       - "443:443"

diff --git a/frontend/src/apis/fetchChatRule.ts b/frontend/src/apis/fetchChatRule.ts
@@ -0,0 +1,17 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+
+export type ChatRuleResponse = {
+  notice: string;
+  channelName: string;
+};
+
+export const fetchChatRule = async ({ sessionKey }: { sessionKey: string }): Promise<ChatRuleResponse> => {
+  const response: AxiosResponse<ChatRuleResponse> = await fetchInstance().get('/streams/notice', {
+    params: {
+      sessionKey
+    }
+  });
+
+  return response.data;
+};
diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts
@@ -1,7 +1,7 @@
 import { QueryClient, DefaultOptions } from '@tanstack/react-query';
 import axios from 'axios';
 
-export const BASE_URL = 'https://liboo.kr';
+export const BASE_URL = 'https://test.liboo.kr';
 export const RTMP_PORT = '1935';
 export const RTMP_HTTP_PORT = '8000';
 export const API_PORT = '3000';

diff --git a/frontend/src/apis/queries/chat/useFetchChatRule.ts b/frontend/src/apis/queries/chat/useFetchChatRule.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { ChatRuleResponse, fetchChatRule } from '@apis/fetchChatRule';
+
+export const useFetchChatRule = ({ sessionKey }: { sessionKey: string }) => {
+  return useQuery<ChatRuleResponse, Error>({
+    queryKey: ['chatRule'],
+    queryFn: () => fetchChatRule({ sessionKey }),
+    refetchOnWindowFocus: false
+  });
+};
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) {
@@ -43,12 +43,8 @@ const ChatItemWrapper = memo(
       return (
         <ChatItem>
           <NormalChat $isHost={chat.owner === 'host'} $pointColor={chat.owner === 'host' ? '#0ADD91' : chat.color}>
-            {chat.owner === 'me' ? (
-              <span className="text_point">🧀</span>
-            ) : chat.owner === 'host' ? (
-              <StyledIcon as={HostIconGreen} />
-            ) : null}
-            <span className="text_point" onClick={handleNicknameClick}>
+            <span className="text_point user_name" onClick={handleNicknameClick}>
+              {chat.owner === 'me' ? '🧀' : chat.owner === 'host' ? <StyledIcon as={HostIconGreen} /> : null}
               {chat.nickname}
             </span>
             <span className="chat_message">{chat.msg}</span>
@@ -171,6 +167,15 @@ const NormalChat = styled.div<{ $isHost: boolean; $pointColor: string }>`
     line-height: 1.5;
   }
 
+  .user_name {
+    cursor: pointer;
+    padding: 2px;
+    border-radius: 5px;
+    &:hover {
+      background-color: #393939;
+    }
+  }
+
   overflow-wrap: break-word;
   word-break: break-word;
 `;

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/ChatRoomLayout.tsx b/frontend/src/components/chat/ChatRoomLayout.tsx
@@ -49,7 +49,7 @@ const ChatRoomLayout = ({ userType, roomId }: ChatRoomLayoutProps) => {
 
         {state.isNoticePopupOpen && (
           <PopupWrapper>
-            <NoticeCard />
+            <NoticeCard sessionKey={roomId} />
           </PopupWrapper>
         )}
 

diff --git a/frontend/src/components/chat/NoticeCard.tsx b/frontend/src/components/chat/NoticeCard.tsx
@@ -1,14 +1,17 @@
 import styled from 'styled-components';
 import CloseIcon from '@assets/icons/close.svg';
-import { useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 import { ChatContext } from 'src/contexts/chatContext';
+import { useFetchChatRule } from '@apis/queries/chat/useFetchChatRule';
 
-export const NoticeCard = () => {
+export const NoticeCard = ({ sessionKey }: { sessionKey: string }) => {
   const { dispatch } = useContext(ChatContext);
 
-  const toggleSettings = () => {
+  const toggleSettings = useCallback(() => {
     dispatch({ type: 'TOGGLE_ANNOUNCEMENT_POPUP' });
-  };
+  }, [dispatch]);
+
+  const { data: noticeInfo } = useFetchChatRule({ sessionKey });
 
   return (
     <NoticeCardContainer>
@@ -17,28 +20,22 @@ export const NoticeCard = () => {
           <NoticeCardProfile></NoticeCardProfile>
           <NoticeCardArea>
             <div className="text_info">
-              <span className="text_point">네이버 부스트 캠프</span>
+              <span className="text_point">{noticeInfo?.channelName}</span>
               <span>님의</span>
             </div>
-            <div className="text_strong">컨퍼런스 공지 📢</div>
+            <div className="text_strong">채팅 규칙 📢</div>
           </NoticeCardArea>
         </NoticeCardWrapper>
         <CloseBtn onClick={toggleSettings}>
           <StyledCloseIcon />
         </CloseBtn>
       </NoticeCardHeader>
 
-      <NoticeMessage>
-        - 질문은 질문 채팅으로 부탁드립니다
-        <br /> - 컨퍼런스 보러와주셔서 감사합니다
-        <br /> - 컨퍼런스 보러와주셔서 감사합니다
-        <br /> - 컨퍼런스 보러와주셔서 감사합니다
-        <br /> - 컨퍼런스 보러와주셔서 감사합니다
-      </NoticeMessage>
+      <NoticeMessage>{noticeInfo?.notice}</NoticeMessage>
     </NoticeCardContainer>
   );
 };
-export default NoticeCard;
+export default memo(NoticeCard);
 
 const NoticeCardContainer = styled.div`
   display: flex;
@@ -113,5 +110,7 @@ const NoticeMessage = styled.p`
   margin-top: 10px;
   max-height: 170px;
   overflow-y: auto;
-  ${({ theme }) => theme.tokenTypographys['display-bold14']}
+  ${({ theme }) => theme.tokenTypographys['display-bold14']};
+  white-space: pre-line;
+  word-break: keep-all;
 `;
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']}

diff --git a/frontend/src/components/host/SettingInfo.tsx b/frontend/src/components/host/SettingInfo.tsx
@@ -57,8 +57,8 @@ export default function SettingInfo({ closeModal }: SettingInfoProps) {
                   <SettingRow>
                     <Label htmlFor="streamUrl">스트림 URL</Label>
                     <ValueWithButton>
-                      <StreamURL>rtmp://liboo.kr:1935/live</StreamURL>
-                      <CopyButton onClick={() => navigator.clipboard.writeText('rtmp://liboo.kr:1935/live')}>
+                      <StreamURL>rtmp://test.liboo.kr:1935/live</StreamURL>
+                      <CopyButton onClick={() => navigator.clipboard.writeText('rtmp://test.liboo.kr:1935/live')}>
                         복사
                       </CopyButton>
                     </ValueWithButton>

diff --git a/frontend/src/contexts/chatContext.tsx b/frontend/src/contexts/chatContext.tsx
@@ -70,7 +70,7 @@ const chatReducer = (state: ChatState, action: Action): ChatState => {
 const initialState: ChatState = {
   isSettingsOpen: false,
   settingOption: null,
-  isNoticePopupOpen: false,
+  isNoticePopupOpen: true,
   isUserInfoPopupOpen: false,
   selectedUser: null
 };

diff --git a/nginx/conf.d/rtmp.conf b/nginx/conf.d/rtmp.conf
@@ -1,10 +1,10 @@
 server {
     listen 8000 ssl;  # HTTPS 8000 포트 수신
-    server_name liboo.kr;
+    server_name test.liboo.kr;
 
-    ssl_certificate "/etc/letsencrypt/live/liboo.kr/fullchain.pem";
+    ssl_certificate "/etc/letsencrypt/live/test.liboo.kr/fullchain.pem";
     ssl_protocols TLSv1.2 TLSv1.3;
-    ssl_certificate_key "/etc/letsencrypt/live/liboo.kr/privkey.pem";
+    ssl_certificate_key "/etc/letsencrypt/live/test.liboo.kr/privkey.pem";
     ssl_dhparam "/etc/nginx/ssl/dhparams.pem";
     add_header Strict-Transport-Security "max-age=31536000";
 

diff --git a/nginx/conf.d/ssl.conf b/nginx/conf.d/ssl.conf
@@ -5,12 +5,15 @@ server {
         # listen [::]:443 ssl http2 default_server;
         client_max_body_size 10M;
 
-        ssl_certificate "/etc/letsencrypt/live/liboo.kr/fullchain.pem";
+        ssl_certificate "/etc/letsencrypt/live/test.liboo.kr/fullchain.pem";
         ssl_protocols TLSv1.2 TLSv1.3;
-        ssl_certificate_key "/etc/letsencrypt/live/liboo.kr/privkey.pem";
+        ssl_certificate_key "/etc/letsencrypt/live/test.liboo.kr/privkey.pem";
         ssl_dhparam "/etc/nginx/ssl/dhparams.pem";
         add_header Strict-Transport-Security "max-age=31536000";
-        server_name liboo.kr;
+        server_name test.liboo.kr;
+
+        root /usr/share/nginx/html;
+        index index.html;
 
         root /usr/share/nginx/html;
         index index.html;