[REFACTOR] 검색 바 추가

frontend/src/components/common/SearchHeader.tsx

@@ -0,0 +1,129 @@
+import { useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import SearchIcon from '@assets/icons/search_icon.svg';
+import VideoIcon from '@assets/icons/video_icon.svg';
+import { ASSETS } from '@constants/assets';
+
+const SearchHeader = () => {
+  const navigate = useNavigate();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (searchInputRef.current) {
+      searchInputRef.current.value = e.target.value;
+    }
+  };
+
+  const handleSearch = () => {
+    // api 연결 필요
+    console.log('submit', searchInputRef.current?.value);
+  };
+
+  return (
+    <SearchHeaderContainer>
+      <LogoContainer onClick={() => navigate('/')}>
+        <img src={ASSETS.IMAGES.LOGO.GIF} alt="로고" />
+      </LogoContainer>
+      <SearchBox>
+        <SearchInputWrapper>
+          <SearchInput
+            type="text"
+            placeholder="컨퍼런스 검색"
+            ref={searchInputRef}
+            onChange={handleInputChange}
+          />
+          <div onClick={handleSearch}>
+            <SearchIconStyled />
+          </div>
+        </SearchInputWrapper>
+      </SearchBox>
+      <StudioBox onClick={() => navigate('/host')}>
+        <VideoIconStyled />
+        스튜디오
+      </StudioBox>
+    </SearchHeaderContainer>
+  );
+};
+
+export default SearchHeader;
+
+const SearchHeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+  height: 60px;
+  min-width: 800px;
+  position: fixed;
+  left: 45px;
+  top: 0;
+  right: 45px;
+  z-index: 11000;
+  background: ${({ theme }) => theme.tokenColors['surface-default']};
+  color: ${({ theme }) => theme.tokenColors['text-strong']};
+`;
+
+const LogoContainer = styled.div`
+  height: 20px;
+  cursor: pointer;
+
+  img {
+    height: 100%;
+  }
+`;
+
+const SearchBox = styled.div`
+  display: flex;
+  align-items: center;
+  width: 400px;
+`;
+
+const SearchInputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  height: 100%;
+  padding: 10px 40px 10px 20px;
+  border: 1px solid ${({ theme }) => theme.colorMap.gray[900]};
+  border-radius: 20px;
+  color: ${({ theme }) => theme.tokenColors['text-strong']};
+  background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  &:focus {
+    border-color: ${({ theme }) => theme.tokenColors['brand-default']};
+    outline: none;
+  }
+`;
+
+const SearchIconStyled = styled(SearchIcon)`
+  position: absolute;
+  top: 50%;
+  right: -50px;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+const StudioBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px 0 0;
+  ${({ theme }) => theme.tokenTypographys['display-bold16']};
+  background-color: ${({ theme }) => theme.tokenColors['primary-default']};
+  color: ${({ theme }) => theme.tokenColors['color-white']};
+  border: 1px solid ${({ theme }) => theme.colorMap.gray[900]};
+  border-radius: 20px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colorMap.gray[900]};
+  }
+`;
+
+const VideoIconStyled = styled(VideoIcon)``;

frontend/src/components/main/index.ts

@@ -2,4 +2,4 @@ export { default as RecommendLive } from './RecommendLive';
 export { default as MainLiveSection } from './MainLiveSection';
 export { default as MainReplaySection } from './MainReplaySection';
 export { default as ServiceBanner } from '@common/ServiceBanner';
-export { default as MainHeader } from '@common/Header';
+export { default as MainHeader } from '@common/SearchHeader';

frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = <T>(value: T, delay: number = 300): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;