사이드, 아이디어 검색창 애니메이션을 추가한다

src/assets/styles/_mixin.scss

@@ -50,6 +50,28 @@ $mobile: 'screen and (max-width: 758px)';
   }
 }
 
+@mixin slide_keyframes {
+  @keyframes slidein {
+    from {
+      width: 150px;
+    }
+
+    to {
+      width: 300px;
+    }
+  }
+
+  @keyframes slideout {
+    from {
+      width: 300px;
+    }
+
+    to {
+      width: 150px;
+    }
+  }
+}
+
 @mixin modal_wrapper {
   @include flex_col();
   position: fixed;
@@ -73,7 +95,7 @@ $mobile: 'screen and (max-width: 758px)';
   -moz-user-select: -moz-none;
   -webkit-user-select: none;
   -khtml-user-select: none;
-  user-select:none;
+  user-select: none;
 }
 
 // * $bgc: background-color (e.g. #fff)

src/pages/IdeaPage/IdeaPage.module.scss

@@ -23,6 +23,29 @@
       .searchArea {
         @include flex_row(flex-end);
 
+        .ideaPageSeachbar {
+          @include slide_keyframes;
+
+          input {
+            width: 150px;
+          }
+
+          &.isInputFocusOut {
+            input {
+              animation-duration: 0.2s;
+              animation-name: slideout;
+            }
+          }
+
+          &.isInputFocus {
+            input {
+              width: 300px;
+              animation-duration: 0.2s;
+              animation-name: slidein;
+            }
+          }
+        }
+
         svg {
           cursor: pointer;
           padding: 0px 5.5px;

src/pages/IdeaPage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 import styles from './IdeaPage.module.scss';
 import Search from '@src/assets/Search.svg';
@@ -12,7 +12,7 @@ import IdeaCardContainer from '@src/components/Idea/IdeaCardContainer';
 import { useAuth } from '@src/hooks/useUserQuery';
 import Typography from '@src/components/common/Typography';
 import { setIdea, useAppDispatch, useIdeaState } from '@src/store';
-import Input from '@src/components/common/Input';
+import Input, { ParentRef } from '@src/components/common/Input';
 import { useQueryClient } from 'react-query';
 import HashTagBanner from '@src/components/HashTagBanner';
 import { useGetHashTags } from '@src/hooks/useHashTagQuery';
@@ -26,12 +26,16 @@ interface IdeaPageProps {
 const IdeaPage = ({ handleToTop }: IdeaPageProps) => {
   const { search } = useIdeaState();
   const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [isInputFocus, setIsInputFocus] = useState(false);
   const queryClient = useQueryClient();
   const { isDone, sort } = useIdeaState();
   const dispatch = useAppDispatch();
   const { data: isAuth } = useAuth();
   const { data: hashTagInfos, isSuccess: isHashTagSuccess } = useGetHashTags();
 
+  const wrapperRef = useRef<HTMLInputElement>(null);
+  const searchRef = useRef({} as ParentRef);
+
   const {
     isModalVisible: isAlertVisible,
     modalMessage: alertMessage,
@@ -45,6 +49,18 @@ const IdeaPage = ({ handleToTop }: IdeaPageProps) => {
     hideModal: hideIdeaForm,
   } = useModalControl();
 
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('click', handleClickOutside, true);
+  }, []);
+
+  const handleClickOutside = ({ target }: MouseEvent) => {
+    if (!wrapperRef.current?.contains(target as HTMLDivElement)) {
+      setIsFilterOpen(false);
+    }
+  };
+
   return (
     <div className={styles.IdeaPage}>
       <div className={styles.ideaCardContainer}>
@@ -55,7 +71,7 @@ const IdeaPage = ({ handleToTop }: IdeaPageProps) => {
           <div className={styles.searchArea}>
             <Setting onClick={() => setIsFilterOpen((prev) => !prev)} />
             {isFilterOpen && (
-              <>
+              <div ref={wrapperRef}>
                 <label className={styles.isDoneCheckbox}>
                   <Typography fontSize="xs" lineHeight="wide" textColor="gray">
                     해결되었어요
@@ -69,15 +85,30 @@ const IdeaPage = ({ handleToTop }: IdeaPageProps) => {
                     <span className={styles.isDoneCheckmark} />
                   </>
                 </label>
-              </>
+              </div>
             )}
-            <Search />
+            <Search
+              onClick={() => {
+                setIsInputFocus(true);
+                searchRef.current.focus();
+              }}
+            />
             <Input
+              ref={searchRef}
+              className={cn(
+                styles.ideaPageSeachbar,
+                isInputFocus ? styles.isInputFocus : styles.isInputFocusOut,
+              )}
               placeholder="검색어를 입력해주세요"
               onChange={(e) =>
                 dispatch(setIdea({ search: e.target.value.split(' ') }))
               }
               value={search?.join(' ')}
+              onFocus={() => {
+                setIsFilterOpen(false);
+                setIsInputFocus(true);
+              }}
+              onBlur={() => setIsInputFocus(false)}
             />
           </div>
         </div>

src/pages/SidePage/SidePage.module.scss

@@ -18,7 +18,7 @@
       backdrop-filter: blur(30px);
 
       z-index: 100;
-      
+
       &.isGithubVisible {
         z-index: 0;
       }
@@ -30,6 +30,34 @@
       .searchArea {
         @include flex_row(flex-end);
 
+        .sideFilter {
+          @include flex_row();
+          gap: 5px;
+        }
+
+        .sidePageSeachbar {
+          @include slide_keyframes;
+
+          input {
+            width: 150px;
+          }
+
+          &.isInputFocusOut {
+            input {
+              animation-duration: 0.2s;
+              animation-name: slideout;
+            }
+          }
+
+          &.isInputFocus {
+            input {
+              width: 300px;
+              animation-duration: 0.2s;
+              animation-name: slidein;
+            }
+          }
+        }
+
         svg {
           cursor: pointer;
           padding: 0px 5.5px;

src/pages/SidePage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import styles from './SidePage.module.scss';
@@ -21,7 +21,7 @@ import {
 import Dropdown, { ListsEachObject } from '@src/components/Dropdown';
 import Typography from '@src/components/common/Typography';
 import { setSide, useAppDispatch, useSideState } from '@src/store';
-import Input from '@src/components/common/Input';
+import Input, { ParentRef } from '@src/components/common/Input';
 import { useAuth } from '@src/hooks/useUserQuery';
 import { useLocation } from 'react-router-dom';
 import { GuideText } from '@src/constant/enums';
@@ -42,9 +42,14 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
   }, [status]);
 
   const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [isInputFocus, setIsInputFocus] = useState(false);
 
   const dispatch = useAppDispatch();
   const { isRecruiting, sort } = useSideState();
+
+  const wrapperRef = useRef<HTMLInputElement>(null);
+  const searchRef = useRef({} as ParentRef);
+
   const {
     isModalVisible: isAlertVisible,
     modalMessage: alertMessage,
@@ -63,6 +68,18 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
   const { data: organizationData } = useGetOrganization();
   const { data: skillsData } = useGetSkills();
 
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('click', handleClickOutside, true);
+  }, []);
+
+  const handleClickOutside = ({ target }: MouseEvent) => {
+    if (!wrapperRef.current?.contains(target as HTMLDivElement)) {
+      setIsFilterOpen(false);
+    }
+  };
+
   return (
     <div className={styles.SidePage}>
       <div className={styles.sideCardContainer}>
@@ -78,7 +95,7 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
           <div className={styles.searchArea}>
             <Setting onClick={() => setIsFilterOpen((prev) => !prev)} />
             {isFilterOpen && (
-              <>
+              <div ref={wrapperRef} className={styles.sideFilter}>
                 <Dropdown
                   lists={categoryData?.data as string[]}
                   title="category"
@@ -106,14 +123,29 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
                     <span className={styles.teamAvailableCheckmark} />
                   </>
                 </label>
-              </>
+              </div>
             )}
-            <Search />
+            <Search
+              onClick={() => {
+                setIsInputFocus(true);
+                searchRef.current.focus();
+              }}
+            />
             <Input
+              ref={searchRef}
+              className={cn(
+                styles.sidePageSeachbar,
+                isInputFocus ? styles.isInputFocus : styles.isInputFocusOut,
+              )}
               placeholder="검색어를 입력해주세요"
               onChange={(e) =>
                 dispatch(setSide({ search: e.target.value.split(' ') }))
               }
+              onFocus={() => {
+                setIsFilterOpen(false);
+                setIsInputFocus(true);
+              }}
+              onBlur={() => setIsInputFocus(false)}
             />
           </div>
         </div>