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

…r-web22-LiBoo into prod-be
boostcampwm-2024 · Jan 20, 2025 · 8a3739f · 8a3739f
2 parents b29759e + e6cf79d
commit 8a3739f
Show file tree

Hide file tree

Showing 44 changed files with 801 additions and 454 deletions.
diff --git a/backend/mainServer/src/common/constants.ts b/backend/mainServer/src/common/constants.ts
@@ -1,5 +1,5 @@
 export const DEFAULT_VALUE = {
-  THUMBNAIL_IMG_URL : 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.png',
-  NOTICE : '쾌적한 컨퍼런스 환경을 위해 상대방을 존중하는 언어를 사용해 주시길 바랍니다.\n모두가 배움과 소통을 즐길 수 있는 문화를 함께 만들기에 동참해주세요.',
+  THUMBNAIL_IMG_URL : 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.webp',
+  NOTICE : '쾌적한 컨퍼런스 환경을 위해 상대방을 존중하는 언어를 사용해 주시길 바랍니다. 모두가 배움과 소통을 즐길 수 있는 문화를 함께 만들기에 동참해주세요.',
   HOST_NAME : '방송 진행자',
 };
diff --git a/backend/mainServer/src/dto/liveCurationDto.ts b/backend/mainServer/src/dto/liveCurationDto.ts
@@ -7,7 +7,7 @@ export class LiveCurationDto {
   liveId: string = '';
   liveTitle: string = '';
   liveImageUrl: string = '';
-  defaultThumbnailImageUrl: string = 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.png';
+  defaultThumbnailImageUrl: string = 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.webp';
   concurrentUserCount: number = 0;
   channel: ChannelDto = {
     channelId : '',
@@ -23,7 +23,7 @@ export function fromLiveCurationDto(memoryDbDto: MemoryDbDto): LiveCurationDto {
     sessionKey,
     liveTitle,
     liveImageUrl,
-    defaultThumbnailImageUrl = 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.png',
+    defaultThumbnailImageUrl = 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.webp',
     concurrentUserCount,
     channel,
     category,

diff --git a/backend/mainServer/src/dto/replayVideoDto.ts b/backend/mainServer/src/dto/replayVideoDto.ts
@@ -34,13 +34,13 @@ export class ReplayVideoDto {
 
   @ApiProperty({
     description: '썸네일 이미지 URL',
-    example: 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.png',
+    example: 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.webp',
   })
     thumbnailImageUrl: string = '';
 
   @ApiProperty({
     description: '트레일러 방송 URL',
-    example: 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.png',
+    example: 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.webp',
     required: false,
   })
     trailerUrl?: string = '';

diff --git a/backend/mainServer/src/mock-data/mock-data.service.ts b/backend/mainServer/src/mock-data/mock-data.service.ts
@@ -12,7 +12,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session001',
       liveTitle: 'Tech Conference 2024',
       category: 'Technology',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test1_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test1_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test1-live-image.png',
       tags: ['Conference', 'Tech', '2024'],
       startDate: new Date('2024-11-21T09:00:00'),
@@ -30,7 +30,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session002',
       liveTitle: 'DAN24',
       category: 'Art',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test2_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test2_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test2-live-image.png',
       tags: ['Dan', 'Showcase', 'Art'],
       startDate: new Date('2024-11-21T12:00:00'),
@@ -48,7 +48,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session003',
       liveTitle: 'Gaming Tournament Finals',
       category: 'Gaming',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test3_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test3_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test3-live-image.png',
       tags: ['Gaming', 'Esports', 'Finals'],
       startDate: new Date('2024-11-21T15:00:00'),
@@ -66,7 +66,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session004',
       liveTitle: 'Music Live Show',
       category: 'Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test4_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test4_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test4-live-image.png',
       tags: ['Music', 'Live', 'Concert'],
       startDate: new Date('2024-11-21T19:00:00'),
@@ -84,7 +84,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session005',
       liveTitle: 'Cooking with Pros',
       category: 'Food',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test5_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test5_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test5-live-image.png',
       tags: ['Cooking', 'Food', 'Recipes'],
       startDate: new Date('2024-11-22T12:00:00'),
@@ -102,7 +102,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session006',
       liveTitle: 'Tech Conference 2024',
       category: 'Technology',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test6_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test6_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test6-live-image.png',
       tags: ['Tech', 'Conference', 'Innovation'],
       startDate: new Date('2024-11-22T15:00:00'),
@@ -120,7 +120,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session007',
       liveTitle: 'Art Masterclass',
       category: 'Art',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test7_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test7_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test7-live-image.png',
       tags: ['Art', 'Painting', 'Creative'],
       startDate: new Date('2024-11-23T10:00:00'),
@@ -138,7 +138,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session008',
       liveTitle: 'Fitness Live Session',
       category: 'Health',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test8_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test8_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test8-live-image.png',
       tags: ['Fitness', 'Health', 'Workout'],
       startDate: new Date('2024-11-23T16:00:00'),
@@ -156,7 +156,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'session009',
       liveTitle: 'Travel Vlog Live',
       category: 'Travel',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test9_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test9_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test9-live-image.png',
       tags: ['Travel', 'Adventure', 'Vlog'],
       startDate: new Date('2024-11-24T09:00:00'),
@@ -174,7 +174,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session',
       liveTitle: 'Replay Title',
       category: 'Replay Category',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test10_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test10_thumbnail.webp',
       liveImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/test10-live-image.png',
       tags: ['replay', '다시보기'],
       startDate: new Date(Date.now() - 60 * 60 * 1000), // 1 hour ago
@@ -188,7 +188,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session001',
       liveTitle: 'Replay Tech Conference 2024',
       category: 'Replay Technology',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test1_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test1_thumbnail.webp',
       tags: ['Replay', 'Conference', 'Tech'],
       startDate: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
       endDate: new Date(Date.now() - 90 * 60 * 1000), // 90 minutes ago
@@ -202,7 +202,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session002',
       liveTitle: 'Replay DAN24',
       category: 'Replay Art',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test2_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test2_thumbnail.webp',
       tags: ['Replay', 'Dan', 'Art'],
       startDate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
       endDate: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
@@ -216,7 +216,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session003',
       liveTitle: 'Replay Gaming Tournament Finals',
       category: 'Replay Gaming',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test3_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test3_thumbnail.webp',
       tags: ['Replay', 'Gaming', 'Esports'],
       startDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
       endDate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
@@ -230,7 +230,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session004',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test4_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test4_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
@@ -244,7 +244,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session005',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test5_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test5_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
@@ -258,7 +258,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session006',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test6_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test6_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
@@ -272,7 +272,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session007',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test7_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test7_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
@@ -286,7 +286,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session008',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test8_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test8_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
@@ -300,7 +300,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session009',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test9_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test9_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
@@ -314,7 +314,7 @@ export class MockDataService implements OnModuleInit {
       liveId: 'replay_session010',
       liveTitle: 'Replay Music Showcase',
       category: 'Replay Music',
-      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test10_thumbnail.png',
+      defaultThumbnailImageUrl: 'https://kr.object.ncloudstorage.com/web22/static/replay_test10_thumbnail.webp',
       tags: ['Replay', 'Music', 'Showcase'],
       startDate: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
       endDate: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago

diff --git a/frontend/package.json b/frontend/package.json
@@ -28,6 +28,7 @@
     "react-content-loader": "^7.0.2",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.27.0",
     "socket.io-client": "^4.8.1",
@@ -41,6 +42,7 @@
     "@eslint/js": "^9.13.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-helmet": "^6",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.14.0",

diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
@@ -0,0 +1,9 @@
+User-agent: *
+Disallow: /admin/
+Disallow: /login/
+Disallow: /user/
+Allow: /public/
+Allow: /images/
+Allow: /assets/
+
+Sitemap: https://liboo.kr/sitemap.xml
diff --git a/frontend/src/apis/queries/chat/useFetchChatRule.ts b/frontend/src/apis/queries/chat/useFetchChatRule.ts
@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { ChatRuleResponse, fetchChatRule } from '@apis/fetchChatRule';
 
-export const useFetchChatRule = ({ sessionKey }: { sessionKey: string }) => {
+export const useFetchChatRule = ({ roomId }: { roomId: string }) => {
   return useQuery<ChatRuleResponse, Error>({
     queryKey: ['chatRule'],
-    queryFn: () => fetchChatRule({ sessionKey }),
+    queryFn: () => fetchChatRule({ sessionKey: roomId }),
     refetchOnWindowFocus: false
   });
 };
diff --git a/frontend/src/components/chat/ChatHeader.tsx b/frontend/src/components/chat/ChatHeader.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useChatUIContext } from '@contexts/ChatUIContext';
 import ThreePointIcon from '@assets/icons/three-point.svg';
 import OutIcon from '@assets/icons/out.svg';
-import { memo, useCallback, useContext, useEffect, useRef } from 'react';
 import LayerPopup from './LayerPopup';
-import { ChatContext } from 'src/contexts/chatContext';
 
 interface ChatHeaderProps {
   outBtnHandler: () => void;
@@ -18,20 +18,19 @@ const MemoizedHeaderBtn = memo(({ onClick, icon }: { onClick: () => void; icon:
 MemoizedHeaderBtn.displayName = 'MemoizedHeaderBtn';
 
 export const ChatHeader = ({ outBtnHandler }: ChatHeaderProps) => {
-  const { state, dispatch } = useContext(ChatContext);
+  const { state, handlers } = useChatUIContext();
   const headerRef = useRef<HTMLDivElement>(null);
 
   const toggleSettings = useCallback(() => {
-    dispatch({ type: 'TOGGLE_SETTINGS' });
-  }, [dispatch]);
+    handlers.toggleSettings();
+  }, [handlers]);
 
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
-      if (headerRef.current && !headerRef.current.contains(event.target as Node) && state.isSettingsOpen) {
-        dispatch({ type: 'CLOSE_SETTINGS' });
-      }
+      if (headerRef.current && !headerRef.current.contains(event.target as Node) && state.isSettingsOpen)
+        handlers.closeSettings();
     },
-    [dispatch, state.isSettingsOpen]
+    [handlers, state.isSettingsOpen]
   );
 
   useEffect(() => {
@@ -68,7 +67,6 @@ const ChatHeaderContainer = styled.div`
 const HeaderBtn = styled.button`
   display: flex;
   color: ${({ theme }) => theme.tokenColors['text-bold']};
-  cursor: pointer;
 `;
 
 const StyledIcon = styled.svg`

diff --git a/frontend/src/components/chat/ChatInput.tsx b/frontend/src/components/chat/ChatInput.tsx
@@ -6,25 +6,20 @@ import SendIcon from '@assets/icons/send.svg';
 import { useRef, useEffect, useState, KeyboardEvent, memo } from 'react';
 import { CHATTING_SOCKET_SEND_EVENT, CHATTING_TYPES } from '@constants/chat';
 import { ChattingSendTypes } from '@type/chat';
-import { getStoredId } from '@utils/id';
-import { UserType } from '@type/user';
-
-interface ChatInputProps {
-  worker: MessagePort | null;
-  userType: UserType;
-  roomId: string;
-}
+import { useChatWorkerContext } from '@contexts/ChatWorkerContext';
+import { useChatSessionContext } from '@contexts/ChatSessionContext';
 
 const INITIAL_TEXTAREA_HEIGHT = 20;
 
-const ChatInput = ({ worker, userType, roomId }: ChatInputProps) => {
+const ChatInput = () => {
+  const { sendMessage } = useChatWorkerContext();
+  const { userType, roomId, userId } = useChatSessionContext();
+
   const [hasInput, setHasInput] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [msgType, setMsgType] = useState<ChattingSendTypes>(CHATTING_TYPES.NORMAL);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const userId = getStoredId();
-
   const handleMsgType = () => {
     if (!userType) return;
 
@@ -37,7 +32,9 @@ const ChatInput = ({ worker, userType, roomId }: ChatInputProps) => {
   };
 
   const handleMessageSend = () => {
-    if (!worker || !textareaRef.current || !textareaRef.current.value.trim()) return;
+    if (!textareaRef.current || !textareaRef.current.value.trim()) {
+      return;
+    }
 
     const message = textareaRef.current.value.trim();
     const eventMap = {
@@ -48,13 +45,10 @@ const ChatInput = ({ worker, userType, roomId }: ChatInputProps) => {
 
     const eventName = eventMap[msgType];
 
-    worker.postMessage({
-      type: eventName,
-      payload: {
-        roomId,
-        userId,
-        msg: message
-      }
+    sendMessage(eventName, {
+      roomId,
+      userId,
+      msg: message
     });
 
     resetTextareaHeight();
@@ -88,7 +82,7 @@ const ChatInput = ({ worker, userType, roomId }: ChatInputProps) => {
       if (textarea) {
         requestAnimationFrame(() => {
           textarea.style.height = `${INITIAL_TEXTAREA_HEIGHT}px`;
-          textarea.style.height = `${textarea.scrollHeight - 5}px`;
+          textarea.style.height = `${textarea.scrollHeight}px`;
         });
       }
     };
@@ -185,7 +179,7 @@ const ChatInputWrapper = styled.div<{ $hasInput: boolean; $isFocused: boolean }>
 
 const ChatInputArea = styled.textarea`
   width: 100%;
-  min-height: 20px;
+  min-height: 25px;
   max-height: 40px;
   scrollbar-width: none;
   resize: none;
@@ -195,7 +189,7 @@ const ChatInputArea = styled.textarea`
   ${({ theme }) => theme.tokenTypographys['display-medium16']};
   background-color: transparent;
   white-space: normal;
-  line-height: 23px;
+  padding: 0px 0px;
 `;
 
 const InputBtn = styled.button`