Merge pull request #97 from KW-AUTA/fix/94-serachbarFix

hywznn · web-flow · commit fb2f7c983ad3 · 2025-07-16T21:11:59.000+09:00
diff --git a/src/components/layout/page-layout/Header.tsx b/src/components/layout/page-layout/Header.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useUserProfile } from '@/store/queries/user/useUserQueries';
@@ -11,6 +11,7 @@ import { useGetProjectList } from '@/store/queries/project/useProjectQueries';
 import { useDebounce } from '@/hooks/useDebounce';
 import BellBadge from '@/components/ui/BellBadge';
 import { ProjectListData } from '@/types/project.type';
+import StatusBadge, { StatusType } from '@/pages/project/_components/StatusBadge';
 // import { RootState } from '@/store/redux/store';
 
 export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
@@ -22,6 +23,8 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
   const [showNotification, setShowNotification] = useState(false);
   const notificationRef = useRef<HTMLDivElement>(null);
   const debouncedInputValue = useDebounce(inputValue, 300);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // const [dropdownPos, setDropdownPos] = useState({ left: 0, top: 0, width: 0 });
   // const projectName = useSelector((state: RootState) => state.searchReducer.projectName);
   const { data: suggestedProjects = [] } = useGetProjectList({
     projectName: debouncedInputValue,
@@ -38,16 +41,21 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
   //   { enabled: !!debouncedInputValue }
   // );
 
-  useEffect(() => {
-    if (!showNotification) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (notificationRef.current && !notificationRef.current.contains(e.target as Node)) {
-        setShowNotification(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showNotification]);
+  // function updateDropdownPos() {
+  //   if (inputRef.current) {
+  //     const rect = inputRef.current.getBoundingClientRect();
+  //     setDropdownPos({ left: rect.left, top: rect.bottom, width: rect.width });
+  //   }
+  // }
+
+  // useEffect(() => {
+  //   if (!showRecent) return;
+  //   updateDropdownPos();
+  //   window.addEventListener('resize', updateDropdownPos);
+  //   return () => {
+  //     window.removeEventListener('resize', updateDropdownPos);
+  //   };
+  // }, [showRecent]);
 
   const handleSearch = (keyword?: string) => {
     const searchWord = keyword ?? inputValue;
@@ -100,6 +108,7 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
           <img src={searchIcon} alt="search button" className="absolute left-4 top-2 w-6 h-6" />
         </button>
         <input
+          ref={inputRef}
           type="text"
           placeholder="프로젝트 검색"
           className="w-full rounded-full pl-10 text-base"
@@ -114,7 +123,7 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
         />
         {showRecent && (
           <div
-            className="absolute left-0 top-full mt-2 w-full min-w-[180px] max-w-[360px] md:max-w-none bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-50 max-h-60 overflow-auto sm:w-full sm:left-0 sm:right-0 sm:mx-auto"
+            className="absolute left-0 top-full mt-2 w-full min-w-[180px] max-w-[360px] md:max-w-none bg-white border border-gray-200 rounded-lg shadow-lg p-4 max-h-60 overflow-auto sm:w-full sm:left-0 sm:right-0 sm:mx-auto z-[99999]"
             style={{ minHeight: 48 }}>
             {inputValue.trim() ? (
               suggestedProjects.length > 0 ? (
@@ -130,14 +139,7 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
                           setTimeout(() => handleSearch(proj.projectName), 0);
                         }}>
                         <span>{proj.projectName}</span>
-                        <span
-                          className={
-                            proj.projectStatus === 'COMPLETED'
-                              ? 'ml-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700'
-                              : 'ml-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700'
-                          }>
-                          {proj.projectStatus === 'COMPLETED' ? '완료' : '진행중'}
-                        </span>
+                        <StatusBadge status={proj.projectStatus as StatusType} className="ml-2" />
                       </li>
                     ))}
                   </ul>
@@ -161,7 +163,6 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
                 <div className="text-xs text-gray-400 mb-1">최근 검색어</div>
                 <ul className="mb-2">
                   {recentSearches.map((item) => {
-                    // 프로젝트명과 완전 일치하는 프로젝트 찾기
                     const matched = suggestedProjects.find(
                       (p: ProjectListData) => p.projectName.toLowerCase() === item.toLowerCase()
                     );
@@ -177,16 +178,7 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
                           }}>
                           {item}
                         </span>
-                        {matched && (
-                          <span
-                            className={
-                              matched.projectStatus === 'COMPLETED'
-                                ? 'ml-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700'
-                                : 'ml-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700'
-                            }>
-                            {matched.projectStatus === 'COMPLETED' ? '완료' : '진행중'}
-                          </span>
-                        )}
+                        {matched && <StatusBadge status={matched.projectStatus as StatusType} className="ml-2" />}
                         <button
                           className="ml-2 text-gray-400 hover:text-red-400 opacity-70 group-hover:opacity-100 transition"
                           onMouseDown={(e) => {
diff --git a/src/components/layout/page-layout/Portal.tsx b/src/components/layout/page-layout/Portal.tsx
@@ -0,0 +1,8 @@
+import { createPortal } from 'react-dom';
+import { ReactNode } from 'react';
+
+export default function Portal({ children }: { children: ReactNode }) {
+  if (typeof window === 'undefined') return null;
+  const el = document.getElementById('portal-root') || document.body;
+  return createPortal(children, el);
+}
diff --git a/src/components/ui/input/Input.tsx b/src/components/ui/input/Input.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, InputHTMLAttributes, useId } from 'react';
+import { forwardRef, ChangeEvent, InputHTMLAttributes, useId } from 'react';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
@@ -10,17 +10,10 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   onEnterPress?: () => void;
 }
 
-export default function Input({
-  label,
-  name,
-  value,
-  className = '',
-  labelClassName = '',
-  required = false,
-  onChange,
-  onEnterPress,
-  ...props
-}: InputProps) {
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { label, name, value, className = '', labelClassName = '', required = false, onChange, onEnterPress, ...props },
+  ref
+) {
   const inputId = useId();
 
   const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -38,6 +31,7 @@ export default function Input({
         </label>
       )}
       <input
+        ref={ref}
         id={inputId}
         type="text"
         className={`w-full bg-background border-[0.5px] border-typography-gray rounded-15 px-4 py-3 placeholder:text-typography-gray focus:border-none focus:shadow-custom focus:outline-none ${className}`}
@@ -50,4 +44,6 @@ export default function Input({
       />
     </div>
   );
-}
+});
+
+export default Input;
diff --git a/src/pages/test/_components/searchHeader/SearchHeader.tsx b/src/pages/test/_components/searchHeader/SearchHeader.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, useRef, useState, useEffect } from 'react';
 import Input from '@/components/ui/input/Input';
 import Select from '@/components/ui/select/Select';
 import Button from '@/components/ui/button/Button';
@@ -29,6 +29,31 @@ export default function SearchHeader({
   onNameSortChange,
   onDateSortChange
 }: SearchHeaderProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [showRecent, setShowRecent] = useState(false);
+
+  const handleInputFocus = () => {
+    setShowRecent(true);
+    // 최근 검색어 불러오기 등 추가 로직
+  };
+
+  useEffect(() => {
+    if (!showRecent) return;
+    function handleClickOutside(e: MouseEvent | TouchEvent) {
+      const input = inputRef.current;
+      const dropdown = document.getElementById('search-dropdown');
+      if (input && !input.contains(e.target as Node) && dropdown && !dropdown.contains(e.target as Node)) {
+        setShowRecent(false);
+      }
+    }
+    window.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      window.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showRecent]);
+
   return (
     <section className="flex items-center justify-between w-full gap-4 pt-5 pb-9">
       <div className="relative flex-1 max-w-[510px] min-w-0">
@@ -39,6 +64,7 @@ export default function SearchHeader({
           onClick={onSearch}
         />
         <Input
+          ref={inputRef}
           type="text"
           placeholder="프로젝트 검색"
           className="w-full max-h-[35px] rounded-20 pl-10 border-[0.5px] border-typography-gray max-md:placeholder:text-[12px]"
@@ -49,9 +75,17 @@ export default function SearchHeader({
               onSearch();
             }
           }}
+          onFocus={handleInputFocus}
         />
+        {showRecent && (
+          <div
+            id="search-dropdown"
+            className="absolute left-0 top-full mt-2 w-full min-w-[180px] max-w-[510px] md:max-w-none bg-white border border-gray-200 rounded-lg shadow-lg p-4 max-h-60 overflow-auto z-[9999]"
+            style={{ minHeight: 48 }}>
+            {/* 드롭다운 내용 */}
+          </div>
+        )}
       </div>
-
       <div className="flex gap-2">
         <Button
           leftIcon={<ResetIcon className="transition-transform duration-500 ease-out group-hover:rotate-90" />}
