Feat/칵테일 페이지 검색 및 정렬기능#22

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,

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: '칵테일에 관한 모든 이야기',
 };
 

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: '칵테일을 좋아하는 사람들을 위한 서비스 로그인 페이지',
 };
 

src/app/mypage/my-active/my-comment/page.tsx

@@ -2,7 +2,7 @@ import MyComment from '@/domains/mypage/components/pages/my-active/MyComment';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 

src/app/mypage/my-active/my-like/page.tsx

@@ -3,7 +3,7 @@ import MyLike from '@/domains/mypage/components/pages/my-active/MyLike';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 

src/app/mypage/my-active/my-post/page.tsx

@@ -2,7 +2,7 @@ import MyPost from '@/domains/mypage/components/pages/my-active/MyPost';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 

src/app/mypage/my-alarm/page.tsx

@@ -3,7 +3,7 @@ import MyAlarm from '@/domains/mypage/components/pages/my-alarm/MyAlarm';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 

src/app/mypage/my-bar/page.tsx

@@ -2,7 +2,7 @@ import MyBar from '@/domains/mypage/components/pages/my-bar/MyBar';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 마이페이지',
+  title: '마이페이지',
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 

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>

src/domains/recipe/api/CocktailSearch.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { Cocktail } from '../types/types';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+interface Props {
+  setData: Dispatch<SetStateAction<Cocktail[]>>;
+  setNoResults: Dispatch<React.SetStateAction<boolean>>;
+}
+
+function CocktailSearch({ setData, setNoResults }: Props) {
+  const [alcoholStrengths, setAlcoholStrengths] = useState<string[]>([]);
+  const [cocktailTypes, setCocktailTypes] = useState<string[]>([]);
+  const [alcoholBaseTypes, setAlcoholBaseTypes] = useState<string[]>([]);
+
+  const searchApi = async (v?: string) => {
+    const keyword = v?.trim() ?? '';
+    const body = {
+      keyword,
+      alcoholStrengths,
+      cocktailTypes,
+      alcoholBaseTypes,
+      page: 0,
+      size: 100,
+    };
+
+    if (!keyword && !alcoholStrengths.length && !cocktailTypes.length && !alcoholBaseTypes.length) {
+      setData([]);
+      setNoResults(false);
+      return null;
+    }
+
+    const res = await fetch(`${getApi}/cocktails/search`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    const json = await res.json();
+
+    setData(json.data);
+    setNoResults(json.data.length === 0);
+  };
+
+  useEffect(() => {
+    searchApi();
+  }, [alcoholStrengths, cocktailTypes, alcoholBaseTypes]);
+
+  return {
+    searchApi,
+    setAlcoholBaseTypes,
+    setAlcoholStrengths,
+    setCocktailTypes,
+    alcoholBaseTypes,
+    alcoholStrengths,
+    cocktailTypes,
+  };
+}
+export default CocktailSearch;

src/domains/recipe/api/RecipeFetch.tsx

@@ -0,0 +1,50 @@
+'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;
+}
+// api/cocktais fetch용
+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(), { method: 'GET' });
+    if (!res.ok) throw new Error('레시피 데이터 요청실패');
+
+    const json = await res.json();
+    const list: Cocktail[] = json.data ?? [];
+
+    // 중복 아이디 에러있어서 Map으로 Merge
+    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 };
+};

src/domains/recipe/components/details/BackBtn.tsx

@@ -1,14 +1,22 @@
 'use client';
+
+import { useRouter } from 'next/navigation';
 import Back from '@/shared/assets/icons/back_36.svg';
-import Link from 'next/link';
 
-function BackBtn() {
+function BackButton() {
+  const router = useRouter();
+
+  const handleClick = () => {
+    const url = sessionStorage.getItem('saveUrl');
+    if (!url) return;
+    router.push(url);
+  };
+
   return (
-    <button type="button" className="z-1" aria-label="뒤로가기">
-      <Link href="/recipe">
-        <Back />
-      </Link>
+    <button type="button" className="z-1" aria-label="뒤로가기" onClick={handleClick}>
+      <Back />
     </button>
   );
 }
-export default BackBtn;
+
+export default BackButton;