[feat]칵테일 검색기능

mtm-git1018 · mtm-git1018 · commit 1b4850b0e1fc · 2025-10-05T16:16:11.000+09:00
diff --git a/next.config.ts b/next.config.ts
@@ -2,7 +2,12 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   images: {
-    domains: ['www.thecocktaildb.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname:'www.thecocktaildb.com'
+      }
+    ]
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
@@ -3,7 +3,7 @@ import PageHeader from '@/domains/shared/components/page-header/PageHeader';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 커뮤니티',
+  title: '커뮤니티',
   description: '칵테일에 관한 모든 이야기',
 };
 
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -4,7 +4,7 @@ import loginBg from '@/shared/assets/images/login_bg.webp';
 import SocialLogin from '@/domains/login/main/SocialLogin';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 로그인',
+  title: '로그인',
   description: '칵테일을 좋아하는 사람들을 위한 서비스 로그인 페이지',
 };
 
diff --git a/src/app/mypage/my-active/my-comment/page.tsx b/src/app/mypage/my-active/my-comment/page.tsx
@@ -2,7 +2,7 @@
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
diff --git a/src/app/mypage/my-active/my-like/page.tsx b/src/app/mypage/my-active/my-like/page.tsx
@@ -2,7 +2,7 @@
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
diff --git a/src/app/mypage/my-active/my-post/page.tsx b/src/app/mypage/my-active/my-post/page.tsx
@@ -2,7 +2,7 @@
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
diff --git a/src/app/mypage/my-alarm/page.tsx b/src/app/mypage/my-alarm/page.tsx
@@ -3,7 +3,7 @@ import Alarm from '@/domains/mypage/components/Alarm';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
diff --git a/src/app/mypage/my-bar/page.tsx b/src/app/mypage/my-bar/page.tsx
@@ -2,7 +2,7 @@ import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
diff --git a/src/app/recipe/page.tsx b/src/app/recipe/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from 'next';
-import Input from '@/shared/components/Input-box/Input';
 
-import Accordion from '../../domains/recipe/components/main/Accordion';
 import PageHeader from '@/domains/shared/components/page-header/PageHeader';
 import { Suspense } from 'react';
 import SkeletonRecipe from '@/domains/recipe/skeleton/SkeletonRecipe';
-import Cocktails from '@/domains/recipe/main/Cocktails';
+import Cocktails from '@/domains/recipe/components/main/Cocktails';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 칵테일레시피',
+  title: '칵테일레시피',
   description: '칵테일 레시피가 궁금하신 분들을 위한 레시피 페이지',
 };
 
@@ -20,15 +18,6 @@ function Page() {
       </section>
       <div className="page-layout max-w-1224 mt-6">
         <Suspense fallback={<SkeletonRecipe />}>
-          <section className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">
-            <Accordion />
-            <Input
-              placeholder="내용을 입력해 주세요."
-              id="search"
-              variant="search"
-              className="w-full md:max-w-80"
-            />
-          </section>
           <Cocktails />
         </Suspense>
       </div>
diff --git a/src/domains/recipe/api/CocktailSearch.tsx b/src/domains/recipe/api/CocktailSearch.tsx
@@ -0,0 +1,30 @@
+import { getApi } from '@/app/api/config/appConfig';
+import { Cocktail } from '../types/types';
+import { Dispatch, SetStateAction } from 'react';
+
+interface Props {
+  setData: Dispatch<SetStateAction<Cocktail[]>>;
+  setNoResults: Dispatch<React.SetStateAction<boolean>>;
+}
+
+function CocktailSearch({ setData, setNoResults }: Props) {
+  const searchApi = async (v: string) => {
+    const keyword = v.trim();
+    if (!keyword) {
+      setData([]);
+      return;
+    }
+
+    const res = await fetch(`${getApi}/cocktails/search`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ keyword }),
+    });
+    const json = await res.json();
+    setData(json.data);
+    setNoResults(json.data.length === 0);
+  };
+
+  return { searchApi };
+}
+export default CocktailSearch;
diff --git a/src/domains/recipe/api/RecipeFetch.tsx b/src/domains/recipe/api/RecipeFetch.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { getApi } from '@/app/api/config/appConfig';
+import { Cocktail } from '../types/types';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+
+interface Props {
+  setData: React.Dispatch<React.SetStateAction<Cocktail[]>>;
+  lastId: number | null;
+  setLastId: Dispatch<SetStateAction<number | null>>;
+  hasNextPage: boolean;
+  setHasNextPage: Dispatch<SetStateAction<boolean>>;
+  SIZE?: number;
+}
+
+export const RecipeFetch = ({
+  setData,
+  lastId,
+  setLastId,
+  hasNextPage,
+  setHasNextPage,
+  SIZE = 20,
+}: Props) => {
+  const fetchData = useCallback(async () => {
+    if (!hasNextPage) return;
+    const url = new URL(`${getApi}/cocktails`);
+    url.searchParams.set('size', String(SIZE));
+    if (typeof lastId === 'number') {
+      url.searchParams.set('lastId', String(lastId));
+    }
+
+    const res = await fetch(url.toString());
+    if (!res.ok) throw new Error('레시피 데이터 요청실패');
+
+    const json = await res.json();
+    const list: Cocktail[] = json.data ?? [];
+
+    setData((prev) =>
+      Array.from(new Map([...prev, ...list].map((i) => [i.cocktailId, i])).values())
+    );
+
+    if (list.length > 0) {
+      setLastId(list[list.length - 1].cocktailId);
+    }
+
+    setHasNextPage(list.length === SIZE);
+  }, [hasNextPage, lastId, setData, setLastId, setHasNextPage, SIZE]);
+  return { fetchData };
+};
diff --git a/src/domains/recipe/components/main/Accordion.tsx b/src/domains/recipe/components/main/Accordion.tsx
@@ -5,7 +5,7 @@ import SelectBox from '@/shared/components/select-box/SelectBox';
 const SELECT_OPTIONS = [
   {
     id: 'abv',
-    option: ['전체', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
+    option: ['전체', '논알콜', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
     title: '도수',
   },
   {
diff --git a/src/domains/recipe/components/main/CocktailFilter.tsx b/src/domains/recipe/components/main/CocktailFilter.tsx
@@ -1,9 +1,9 @@
 import SelectBox from '@/shared/components/select-box/SelectBox';
 
-function CocktailFilter({ cocktailsEA }: { cocktailsEA: number[] }) {
+function CocktailFilter({ cocktailsEA }: { cocktailsEA: string }) {
   return (
     <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
-      <p>{cocktailsEA[0]}개</p>
+      <p>{cocktailsEA}개</p>
       <SelectBox option={['', '댓글순', '인기순']} title="최신순" />
     </div>
   );
diff --git a/src/domains/recipe/components/main/CocktailList.tsx b/src/domains/recipe/components/main/CocktailList.tsx
@@ -3,12 +3,12 @@ import { useRef } from 'react';
 
 import Link from 'next/link';
 import { useIntersectionObserver } from '@/domains/shared/hook/useIntersectionObserver';
-import { Cocktail } from '../types/types';
+import { Cocktail } from '../../types/types';
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 
 interface Props {
   cocktails: Cocktail[];
-  RecipeFetch: (cursor?: string | undefined) => Promise<void>;
+  RecipeFetch?: (cursor?: string | undefined) => Promise<void>;
   hasNextPage: boolean;
   lastId: number | null;
   onItemClick: () => void;
@@ -17,8 +17,9 @@ interface Props {
 function CocktailList({ cocktails, RecipeFetch, hasNextPage, lastId, onItemClick }: Props) {
   const cocktailRef = useRef(null);
   const onIntersect: IntersectionObserverCallback = ([entry]) => {
+    if (!RecipeFetch) return;
     if (!lastId) return;
-    if (entry.isIntersecting && lastId > 1) {
+    if (entry.isIntersecting) {
       RecipeFetch();
     }
   };
diff --git a/src/domains/recipe/components/main/CocktailSearchBar.tsx b/src/domains/recipe/components/main/CocktailSearchBar.tsx
@@ -0,0 +1,20 @@
+import Input from '@/shared/components/Input-box/Input';
+
+interface Props {
+  value: string;
+  onChange: (v: string) => void;
+}
+
+function CocktailSearchBar({ value, onChange }: Props) {
+  return (
+    <Input
+      placeholder="내용을 입력해 주세요."
+      id="search"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      variant="search"
+      className="w-full md:max-w-80"
+    />
+  );
+}
+export default CocktailSearchBar;
diff --git a/src/domains/recipe/components/main/Cocktails.tsx b/src/domains/recipe/components/main/Cocktails.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { useEffect } from 'react';
+import CocktailFilter from './CocktailFilter';
+import CocktailList from './CocktailList';
+import { Cocktail } from '../../types/types';
+import { useMemoScroll } from '../../../shared/hook/useMemoScroll';
+import Accordion from './Accordion';
+import { RecipeFetch } from '../../api/RecipeFetch';
+import CocktailSearchBar from './CocktailSearchBar';
+import useSearchControl from '../../hook/useSearchControl';
+import CocktailSearch from '../../api/CocktailSearch';
+
+function Cocktails() {
+  const {
+    data,
+    setData,
+    lastId,
+    setLastId,
+    hasNextPage,
+    setHasNextPage,
+    handleItemClick,
+    shouldFetch,
+  } = useMemoScroll<Cocktail>({
+    storageKey: 'cocktails_scroll_state',
+    eventName: 'resetCocktailsScroll',
+  });
+  const { inputValue, keyword, isSearching, onInputChange, noResults, setNoResults } =
+    useSearchControl({ delay: 300, storageKey: 'cocktails_scoll_state' });
+  const { fetchData } = RecipeFetch({ setData, lastId, setLastId, hasNextPage, setHasNextPage });
+  const { searchApi } = CocktailSearch({ setData, setNoResults });
+  const countLabel = isSearching
+    ? hasNextPage
+      ? `검색결과 현재 ${data.length}+`
+      : `검색결과 총 ${data.length}`
+    : hasNextPage
+      ? `전체 ${data.length}+`
+      : `전체 ${data.length}`;
+
+  // 초기 로드 시 검색어가 있으면 검색 실행
+  useEffect(() => {
+    const readyForFirstLoad = !isSearching && hasNextPage && lastId == null && data.length === 0;
+
+    if (readyForFirstLoad) {
+      fetchData();
+    }
+  }, [hasNextPage]);
+
+  // 검색어 변경 시
+  useEffect(() => {
+    if (isSearching && keyword.trim()) {
+      setLastId(null);
+      setHasNextPage(false);
+      searchApi(keyword.trim());
+    } else if (!isSearching) {
+      // 검색어를 지웠을 때만 초기화
+      setData([]);
+      setLastId(null);
+      setHasNextPage(true);
+    }
+  }, [keyword, isSearching]);
+
+  // 일반 fetch
+  useEffect(() => {
+    if (!shouldFetch) return;
+    if (isSearching) return;
+    fetchData();
+  }, [shouldFetch, isSearching]);
+
+  return (
+    <section>
+      <div className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">
+        <Accordion />
+        <CocktailSearchBar value={inputValue} onChange={onInputChange} />
+      </div>
+      <CocktailFilter cocktailsEA={countLabel} />
+      <section className="mt-5">
+        {isSearching && noResults ? (
+          <div>검색결과가 없습니다.</div>
+        ) : (
+          <CocktailList
+            cocktails={data}
+            RecipeFetch={isSearching ? undefined : fetchData}
+            hasNextPage={isSearching ? false : hasNextPage}
+            lastId={lastId}
+            onItemClick={handleItemClick}
+          />
+        )}
+      </section>
+    </section>
+  );
+}
+
+export default Cocktails;
diff --git a/src/domains/recipe/details/DetailItem.tsx b/src/domains/recipe/details/DetailItem.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import Label from '@/domains/shared/components/label/Label';
 import AbvGraph from '@/domains/shared/components/abv-graph/AbvGraph';
 import { labelTitle } from '../utills/labelTitle';
-import useGlass from './hook/useGlass';
+import useGlass from '../hook/useGlass';
 
 interface Props {
   name: string;
diff --git a/src/domains/recipe/details/DetailRecipe.tsx b/src/domains/recipe/details/DetailRecipe.tsx
@@ -1,4 +1,4 @@
-import { ozToMl } from './hook/ozToMl';
+import { ozToMl } from '../hook/ozToMl';
 
 type Recipe = {
   ingredientName: string;
diff --git a/src/domains/recipe/hook/ozToMl.ts b/src/domains/recipe/hook/ozToMl.ts
diff --git a/src/domains/recipe/hook/useGlass.tsx b/src/domains/recipe/hook/useGlass.tsx
diff --git a/src/domains/recipe/hook/useSearchControl.tsx b/src/domains/recipe/hook/useSearchControl.tsx
diff --git a/src/domains/recipe/main/Cocktails.tsx b/src/domains/recipe/main/Cocktails.tsx
diff --git a/src/shared/components/Input-box/Input.tsx b/src/shared/components/Input-box/Input.tsx
