Merge remote-tracking branch 'origin/dev' into feat/mypage#106

Author: mtm-git1018

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;