feat: 검색창 애니메이션 적용

package.json

@@ -29,6 +29,7 @@
     "@tanstack/react-query": "^5.59.8",
     "@tanstack/react-query-devtools": "^5.59.8",
     "axios": "^1.7.7",
+    "es-hangul": "^2.2.1",
     "jotai": "^2.10.0",
     "overlay-kit": "^1.4.1",
     "react": "^18.3.1",

src/features/search/data/professors.json

@@ -0,0 +1,65 @@
+[
+  {
+    "name": "권순일",
+    "labLocation": "대양AI 624호",
+    "phoneNumber": "02-3408-3847",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "백성욱",
+    "labLocation": "대양AI 622호",
+    "phoneNumber": "02-3408-3797",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "이종원",
+    "labLocation": "대양AI 619호",
+    "phoneNumber": "02-3408-3798",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "송오영",
+    "labLocation": "대양AI 625호",
+    "phoneNumber": "02-3408-3830",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "최준연",
+    "labLocation": "대양AI 620호",
+    "phoneNumber": "02-3408-3887",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "박상일",
+    "labLocation": "대양AI 626호",
+    "phoneNumber": "02-3408-3832",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "변재욱",
+    "labLocation": "대양AI 604호",
+    "phoneNumber": "02-3408-1847",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "이은상",
+    "labLocation": "대양AI 621호",
+    "phoneNumber": "02-3408-2975",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  },
+  {
+    "name": "정승화",
+    "labLocation": "대양AI 623호",
+    "phoneNumber": "02-3408-3795",
+    "email": "[email protected]",
+    "department": "소프트웨어학과"
+  }
+]

src/features/search/models/Professor.ts

@@ -0,0 +1,7 @@
+export interface Professor {
+  name: string;
+  labLocation: string;
+  phoneNumber: string;
+  email: string;
+  department: string;
+}

src/features/search/ui/components/ModalSearch.tsx

@@ -0,0 +1,37 @@
+import { overlay } from 'overlay-kit';
+import React from 'react';
+import styled from 'styled-components';
+
+interface ModalSearchProps {
+  open: boolean;
+  onClose: () => void;
+  onExit: () => void;
+}
+
+const ModalSearch: React.FC<ModalSearchProps> = ({ open, onClose, onExit }) => {
+  return (
+    <>
+      <ModalBackground>
+        <button
+          type='button'
+          onClick={() => {
+            onExit();
+          }}
+        >
+          asdf
+        </button>
+      </ModalBackground>
+    </>
+  );
+};
+
+export default ModalSearch;
+
+const ModalBackground = styled.div`
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;

src/features/search/ui/components/SearchInput.tsx

@@ -1,29 +1,169 @@
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { Professor } from '@semo-client/features/search/models/Professor.ts';
+import { SearchResults } from '@semo-client/features/search/ui/components/SearchResults.tsx';
+import SearchIcon from '@semo-client/ui/assets/icons/Icon';
+import searchPalette from '@semo-client/ui/styles/pallete/searchPalette.ts';
 
-export const SearchInput = () => {
-  return <StyledInput type='text' placeholder='무엇이든 검색해 보세요...' />;
+interface SearchInputProps {
+  query: string;
+  setQuery: (query: string) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: () => void;
+  results: Professor[];
+}
+
+export const SearchInput: React.FC<SearchInputProps> = ({
+  query,
+  setQuery,
+  onChange,
+  onSubmit,
+  results,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverlayVisible, setIsOverlayVisible] = useState(false);
+
+  const handleExpand = () => {
+    setIsExpanded(true);
+    setIsOverlayVisible(true);
+  };
+
+  const handleCollapse = () => {
+    setIsExpanded(false);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      onSubmit();
+      handleCollapse();
+    }
+  };
+
+  useEffect(() => {
+    if (!isExpanded) {
+      // 오버레이를 애니메이션 후에 숨김
+      const timeoutId = setTimeout(() => {
+        setIsOverlayVisible(false);
+      }, 300); // 트랜지션 시간과 동일하게 설정
+
+      // 검색창 초기화
+      setQuery('');
+
+      return () => clearTimeout(timeoutId);
+    } else {
+      setIsOverlayVisible(true);
+    }
+  }, [isExpanded]);
+
+  return (
+    <>
+      <SearchInputWrapper isExpanded={isExpanded}>
+        <InputContainer isExpanded={isExpanded}>
+          <SearchIconWrapper>
+            <SearchIcon
+              width={24}
+              height={24}
+              fill={searchPalette.blackGray[50]}
+            />
+          </SearchIconWrapper>
+          <StyledInput
+            type='text'
+            placeholder='무엇이든 검색해 보세요...'
+            value={query}
+            onChange={onChange}
+            onKeyPress={handleKeyPress}
+            onClick={e => {
+              e.stopPropagation();
+              handleExpand();
+            }}
+            isExpanded={isExpanded}
+            autoFocus={isExpanded}
+          />
+        </InputContainer>
+        {results.length != 0 && (
+          <SearchResults value={query} results={results} />
+        )}
+      </SearchInputWrapper>
+
+      {isOverlayVisible && (
+        <Overlay isExpanded={isExpanded} onClick={handleCollapse} />
+      )}
+    </>
+  );
 };
 
-const StyledInput = styled.input`
+const SearchInputWrapper = styled.div<{ isExpanded: boolean }>`
+  position: absolute;
+  top: ${({ isExpanded }) => (isExpanded ? '40%' : '65%')};
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  width: ${({ isExpanded }) => (isExpanded ? '50%' : '500px')};
+  transition: 0.3s ease-in-out;
+`;
+
+const InputContainer = styled.div<{ isExpanded: boolean }>`
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 54px;
-  border-radius: 8px;
+  border-radius: ${({ isExpanded }) =>
+    isExpanded ? '8px 8px 0 0' : '8px'}; /* 조건부 border-radius */
+  background-color: ${({ isExpanded }) =>
+    isExpanded ? searchPalette.blackGray[90] : searchPalette.blackGray[70]};
+  border: 1px solid ${searchPalette.whiteGray[30]};
+  padding: 0 14px;
+  gap: 10px;
+  font-size: 20px;
+  color: #fff;
+
+  &:focus-within {
+    outline: none;
+    border-color: ${searchPalette.whiteGray[50]};
+    background: ${({ isExpanded }) =>
+      isExpanded ? searchPalette.whiteGray[70] : '#000000'};
+  }
+
+  /* 애니메이션 효과 */
+  transition: all 0.3s ease-in-out;
+`;
 
-  background-color: rgba(0, 0, 0, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  padding: 10px 14px;
+const SearchIconWrapper = styled.div`
   display: flex;
-  gap: 10px;
   align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease-in-out;
+`;
 
+const StyledInput = styled.input<{ isExpanded: boolean }>`
+  flex: 1;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: ${({ isExpanded }) =>
+    isExpanded ? searchPalette.black : searchPalette.white};
   font-size: 20px;
-  color: #fff;
+  position: relative;
+  z-index: 2;
 
   &::placeholder {
-    color: rgba(255, 255, 255, 0.5);
+    color: ${({ isExpanded }) =>
+      isExpanded ? '#000' : searchPalette.whiteGray[50]};
   }
 
   &:focus {
     outline: none;
   }
 `;
+
+const Overlay = styled.div<{ isExpanded: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${searchPalette.blackGray[90]};
+  z-index: 999;
+  opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
+  transition: opacity 0.3s ease-in-out;
+`;