Merge pull request #55 from prgrms-web-devcourse-final-project/feat/cocktailPage#17

Feat/cocktail page#17

Author: mtm-git1018

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+
   // TurboPack 설정
   experimental: {
     turbo: {

src/api/test.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import SelectBox from '@/shared/components/InputBox/SelectBox';
+
+const selectOption = [
+  {
+    id: 'abv',
+    option: ['', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
+    title: '도수',
+  },
+  {
+    id: 'base',
+    option: ['', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
+    title: '베이스',
+  },
+  {
+    id: 'glass',
+    option: ['', '클래식', '롱', '슈터', '숏'],
+    title: '글라스',
+  },
+];
+
+function Accordion() {
+  return (
+    <ul className="flex w-full gap-3">
+      {selectOption.map(({ id, option, title }) => {
+        return (
+          <li key={id}>
+            <SelectBox option={option} title={title} id={id} groupKey="filter" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+export default Accordion;

src/app/recipe/components/Accordion.tsx

@@ -1,6 +1,10 @@
 import PageHeader from '@/shared/components/pageHeader/PageHeader';
 import { Metadata } from 'next';
-import Glass from '@/shared/assets/images/recipe_page_header.png';
+import Glass from '@/shared/assets/images/recipe_page_header.webp';
+import SelectBox from '@/shared/components/InputBox/SelectBox';
+import Input from '@/shared/components/InputBox/Input';
+import CocktailList from '@/shared/components/recipePage/cocktailList/CocktailList';
+import Accordion from './components/Accordion';
 
 export const metadata: Metadata = {
   title: 'SSOUL | 칵테일레시피',
@@ -10,12 +14,33 @@ export const metadata: Metadata = {
 function Page() {
   return (
     <div className="w-full">
-      <PageHeader
-        src={Glass}
-        title="Cocktail Recipes"
-        description="다양하고 재밌는 칵테일 레시피"
-      />
-      <div className="page-layout max-w-1224"></div>
+      <section>
+        <PageHeader
+          src={Glass}
+          title="Cocktail Recipes"
+          description="다양하고 재밌는 칵테일 레시피"
+        />
+      </section>
+      <div className="page-layout max-w-1224 mt-6">
+        <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>
+        <section>
+          <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
+            <p>n개</p>
+            <SelectBox option={['', '댓글순', '인기순']} title="최신순" />
+          </div>
+          <section className="mt-5">
+            <CocktailList />
+          </section>
+        </section>
+      </div>
     </div>
   );
 }

src/app/recipe/page.tsx

@@ -0,0 +1,32 @@
+// zustand
+import { create } from 'zustand';
+
+// select박스 아코디언 메뉴
+export type ID = string | number;
+
+type AccordionState = {
+  openByGroup: Record<string, ID | null>;
+};
+
+type AccordionAction = {
+  setOpen: (group: string, id: ID | null) => void;
+  toggle: (group: string, id: ID) => void;
+  closeGroup: (group: string) => void;
+};
+
+type Accordion = AccordionState & AccordionAction;
+
+export const useAccordionStore = create<Accordion>((set) => ({
+  openByGroup: {},
+  setOpen: (group, id) => set((s) => ({ openByGroup: { ...s.openByGroup, [group]: id } })),
+
+  // 같은 id가 이미 열려있으면 닫고 id 교체
+  toggle: (group, id) =>
+    set((s) => {
+      const cur = s.openByGroup[group] ?? null;
+      return { openByGroup: { ...s.openByGroup, [group]: cur === id ? null : id } };
+    }),
+
+  // 선택 후 닫기
+  closeGroup: (group) => set((s) => ({ openByGroup: { ...s.openByGroup, [group]: null } })),
+}));

src/shared/@store/accordionStore.ts

@@ -1,44 +1,82 @@
-import { Ref, useState } from 'react';
+'use client';
+import { Ref, useMemo, useState } from 'react';
 import Down from '@/shared/assets/icons/selectDown_24.svg';
+import { ID, useAccordionStore } from '@/shared/@store/accordionStore';
+import { useShallow } from 'zustand/shallow';
 
 interface Props {
+  id?: ID;
+  groupKey?: string;
   ref?: Ref<HTMLButtonElement | null>;
   option: string[];
   title: string;
+  onChange?: (value: string) => void;
 }
 
-function SelectBox({ ref, option, title }: Props) {
+// groupKey를 Props로 내릴경우 == 아코디언 없는 경우 == select박스
+function SelectBox({ id, groupKey, ref, option, title, onChange }: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const [select, setSelect] = useState('');
 
+  const ingroup = !!groupKey;
+  // groupkey일 경우 전달받은 ID로 식별 아닐경우 title로 식별
+  const keyId = useMemo<ID>(() => id ?? title, [id, title]);
+
+  const { openId, toggleGroup, closeGroup } = useAccordionStore(
+    useShallow((s) => ({
+      openId: ingroup ? (s.openByGroup[groupKey] ?? null) : null,
+      toggleGroup: s.toggle,
+      closeGroup: s.closeGroup,
+    }))
+  );
+
+  //groupkey가 있을 떄와 없을때로 구분해서 state혹은 store로 관리
+  const localOpen = ingroup ? openId === keyId : isOpen;
+
+  const toggle = () => {
+    if (ingroup) toggleGroup(groupKey, keyId);
+    else setIsOpen((v) => !v);
+  };
+
+  const close = () => {
+    if (ingroup) closeGroup(groupKey);
+    else setIsOpen(false);
+  };
+
   const handleChoose = (v: string) => {
-    setIsOpen(!isOpen);
-    if (!v) {
-      setSelect(title);
-    } else {
-      setSelect(v);
-    }
+    const value = v || title;
+    setSelect(value);
+    onChange?.(value);
+    close();
   };
 
   return (
     <div className="flex flex-col gap-2 relative h-6">
       <button
         ref={ref}
         className="flex gap-2 cursor-pointer text-base"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={toggle}
         aria-expanded={isOpen}
       >
         {select ? select : title}
-        {isOpen ? (
+        {localOpen ? (
           <Down className="rotate-180 duration-300" />
         ) : (
           <Down className="rotate-0 duration-300" />
         )}
       </button>
 
       <ul
-        className={`w-30 bg-white text-gray-dark p-2 rounded-xl  duration-200  absolute transition-all 
-         ${isOpen ? 'opacity-100 top-8 right-0' : 'opacity-0 pointer-events-none top-4 right-0'}`}
+        className={`w-30 bg-white text-gray-dark p-2 rounded-xl z-99 duration-200  absolute transition-all 
+         ${
+           groupKey
+             ? localOpen
+               ? 'opacity-100 top-8 left-0'
+               : 'opacity-0 pointer-events-none top-4 left-0'
+             : localOpen
+               ? 'opacity-100 top-8 right-0'
+               : 'opacity-0 pointer-events-none top-4 right-0'
+         }`}
         role="listbox"
       >
         {option.map((v, i) => (