[CHORE] 이미지 에셋 최적화

frontend/src/components/client/Player.tsx

@@ -2,10 +2,10 @@ import { useState, useEffect, useRef } from 'react';
 import Hls from 'hls.js';
 import styled from 'styled-components';
 
-import playerLoading from '@assets/player_loading.gif';
 import CustomPlayIcon from '@assets/icons/custom_play_icon.svg';
 import PauseIcon from '@assets/icons/pause_icon.svg';
 import PlayIcon from '@assets/icons/play_icon.svg';
+import { ASSETS } from '@constants/assets';
 
 const Player = ({ videoUrl }: { videoUrl: string }) => {
   const [onHLSReady, setOnHLSReady] = useState(false);
@@ -86,9 +86,7 @@ const Player = ({ videoUrl }: { videoUrl: string }) => {
               tabIndex={0} // Video 요소가 포커스를 받을 수 있도록 설정
             />
             {showIcon && (
-              <IconOverlay $isFullscreen={isFullscreen}>
-                {isPaused ? <PlayIcon /> : <PauseIcon />}
-              </IconOverlay>
+              <IconOverlay $isFullscreen={isFullscreen}>{isPaused ? <PlayIcon /> : <PauseIcon />}</IconOverlay>
             )}
           </>
         ) : (
@@ -105,7 +103,9 @@ export default Player;
 
 const PlayerContainer = styled.div<{ $onHLSReady: boolean }>`
   background: ${({ $onHLSReady, theme }) =>
-    $onHLSReady ? theme.tokenColors['surface-default'] : `url(${playerLoading}) no-repeat center / cover`};
+    $onHLSReady
+      ? theme.tokenColors['surface-default']
+      : `url(${ASSETS.IMAGES.PLAYER.LOADING}) no-repeat center / cover`};
   padding-top: 56.25%;
   position: relative;
 `;

frontend/src/components/client/PlayerInfo.tsx

@@ -1,8 +1,8 @@
+import { ASSETS } from '@constants/assets';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import sampleProfile from '@assets/sample_profile.png';
-import ServiceBanner from '@common/ServiceBanner';
 import ShowInfoBadge from '@common/ShowInfoBadge';
 import { ClientLive } from '@type/live';
 import { updateElapsedTime } from '@utils/updateElapsedTime';
@@ -22,7 +22,7 @@
     }, 1000);
 
     return () => clearInterval(interval);
   }, [startDate]);
 
   return (
     <PlayerInfoContainer>
@@ -49,7 +49,9 @@
           </LiveInfo>
         </VideoInfo>
       </PlayerInfoBox>
-      <ServiceBanner />
+      <BannerLink href="https://boostcamp.connect.or.kr/" target="_blank" rel="noopener noreferrer">
+        <Banner src={ASSETS.IMAGES.BANNER.CLIENT} alt="Client Banner" />
+      </BannerLink>
     </PlayerInfoContainer>
   );
 };
@@ -148,3 +150,22 @@
   color: ${({ theme }) => theme.tokenColors['text-bold']};
   ${({ theme }) => theme.tokenTypographys['display-bold12']};
 `;
+
+const BannerLink = styled.a`
+  display: block;
+  margin-top: 24px;
+  border-radius: 7px;
+  overflow: hidden;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+const Banner = styled.img`
+  width: 100%;
+  aspect-ratio: 16 / 2;
+  object-fit: cover;
+  display: block;
+`;

frontend/src/components/host/Header.tsx

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
-import Logo from '@assets/logo.gif';
 import { useNavigate } from 'react-router-dom';
+import { ASSETS } from '@constants/assets';
 
 export default function Header() {
   const navigate = useNavigate();
 
   return (
     <Container>
       <LogoContainer onClick={() => navigate('/')}>
-        <img src={Logo} alt="로고" />
+        <img src={ASSETS.IMAGES.LOGO.GIF} alt="로고" />
       </LogoContainer>
       STUDIO
     </Container>

frontend/src/components/host/Player.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components';
 import SettingInfo from './SettingInfo';
 import { usePortal } from '@hooks/usePortal';
 import { useModal } from '@hooks/useModal';
-import playerLoading from '@assets/player_loading.gif';
 import StreamingView from './StreamingView';
 import StreamingStatus from './StreamingStatus';
+import { ASSETS } from '@constants/assets';
 
 interface PlayerProps {
   onStreaming: boolean;
@@ -30,7 +30,8 @@ export default function Player({ onStreaming }: PlayerProps) {
 }
 
 const Container = styled.div<ContainerProps>`
-  background: ${({ $onStreaming }) => ($onStreaming ? '#000' : `url(${playerLoading}) no-repeat center / cover`)};
+  background: ${({ $onStreaming }) =>
+    $onStreaming ? '#000' : `url(${ASSETS.IMAGES.PLAYER.LOADING}) no-repeat center / cover`};
   width: 100%;
   padding-top: 56.25%;
   position: relative;

frontend/src/components/main/LiveVideoCard.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
-import sampleThumbnail from '@assets/sampleThumbnail.png';
 import sampleProfile from '@assets/sample_profile.png';
 import ShowInfoBadge from '@common/ShowInfoBadge';
+import { ASSETS } from '@constants/assets';
 import { RecentLive } from '@type/live';
 import { LiveBadge, LiveViewCountBadge } from './ThumbnailBadge';
 
@@ -60,7 +60,7 @@ const VideoCardContainer = styled.div`
 `;
 
 const VideoCardThumbnail = styled.div`
-  background: #21242a url(${sampleThumbnail}) no-repeat center center / cover;
+  background: #21242a url(${ASSETS.IMAGES.THUMBNAIL.DEFAULT}) no-repeat center center / cover;
   overflow: hidden;
   border-radius: 12px;
   display: block;

frontend/src/components/main/MainHeader.tsx

@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
-import Logo from '@assets/logo.gif';
 import SearchIcon from '@assets/icons/search_icon.svg';
 import VideoIcon from '@assets/icons/video_icon.svg';
+import { ASSETS } from '@constants/assets';
 
 const MainHeader = () => {
   const navigate = useNavigate();
 
   return (
     <HeaderContainer>
       <LogoContainer onClick={() => window.location.reload()}>
-        <img src={Logo} alt="로고" />
+        <img src={ASSETS.IMAGES.LOGO.GIF} alt="로고" />
       </LogoContainer>
       <SearchBox>
         <SearchInputWrapper>
@@ -49,7 +49,7 @@ const HeaderContainer = styled.div`
 const LogoContainer = styled.div`
   height: 30px;
   cursor: pointer;
-  
+
   img {
     height: 100%;
   }
@@ -75,7 +75,7 @@ const SearchInput = styled.input`
   color: ${({ theme }) => theme.tokenColors['text-strong']};
   background-color: ${({ theme }) => theme.tokenColors['surface-default']};
   ${({ theme }) => theme.tokenTypographys['display-medium16']};
-  
+
   &:focus {
     border-color: ${({ theme }) => theme.tokenColors['brand-default']};
     outline: none;

frontend/src/components/main/ReplayVideoCard.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
-import sampleThumbnail from '@assets/sampleThumbnail.png';
 import sampleProfile from '@assets/sample_profile.png';
 import ShowInfoBadge from '@common/ShowInfoBadge';
+import { ASSETS } from '@constants/assets';
 import { RecentLive } from '@type/live';
 import { ReplayBadge, ReplayViewCountBadge } from './ThumbnailBadge';
 
@@ -60,7 +60,7 @@ const VideoCardContainer = styled.div`
 `;
 
 const VideoCardThumbnail = styled.div`
-  background: #21242a url(${sampleThumbnail}) no-repeat center center / cover;
+  background: #21242a url(${ASSETS.IMAGES.THUMBNAIL.DEFAULT}) no-repeat center center / cover;
   overflow: hidden;
   border-radius: 12px;
   display: block;

frontend/src/constants/assets.ts

@@ -0,0 +1,16 @@
+export const ASSETS = {
+  IMAGES: {
+    LOGO: {
+      GIF: 'https://kr.object.ncloudstorage.com/web22/static/logo.gif'
+    },
+    PLAYER: {
+      LOADING: 'https://kr.object.ncloudstorage.com/web22/static/player_loading.gif'
+    },
+    THUMBNAIL: {
+      DEFAULT: 'https://kr.object.ncloudstorage.com/web22/static/liboo_default_thumbnail.png'
+    },
+    BANNER: {
+      CLIENT: 'https://kr.object.ncloudstorage.com/web22/static/client_banner.png'
+    }
+  }
+} as const;