Feat/cocktail page#17

next.config.ts

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

src/app/community/page.tsx

@@ -1,4 +1,37 @@
+import CommunityFilter from '@/shared/components/community/CommunityFilter';
+import CommunityHeader from '@/shared/components/community/CommunityHeader';
+import CommunityTab from '@/shared/components/community/CommunityTab';
+import PostCard from '@/shared/components/community/PostCard';
+import WriteBtn from '@/shared/components/community/WriteBtn';
+
 function Page() {
-  return <div></div>;
+  return (
+    <main className="page-layout max-w-1024">
+      <div className="mt-3 mb-10 flex flex-col gap-8 ">
+        <section aria-labelledby="community-heading">
+          <h1 id="community-heading" className="sr-only">
+            커뮤니티 페이지
+          </h1>
+          <CommunityHeader />
+        </section>
+
+        <section
+          aria-label="탭과 글쓰기"
+          className="flex justify-between item-center sm:flex-row flex-col gap-4 mt-1"
+        >
+          <CommunityTab />
+          <WriteBtn />
+        </section>
+
+        <section aria-label="게시물 목록">
+          <CommunityFilter />
+          <PostCard label="레시피" />
+          <PostCard label="팁" />
+          <PostCard label="질문" />
+          <PostCard label="자유" />
+        </section>
+      </div>
+    </main>
+  );
 }
 export default Page;

src/app/recipe/components/Accordion.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/page.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/shared/@store/accordionStore.ts

@@ -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/components/InputBox/SelectBox.tsx

@@ -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 w-30">
+    <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' : 'opacity-0 pointer-events-none top-4'}`}
+        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) => (

src/shared/components/community/CommunityFilter.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import SelectBox from '../InputBox/SelectBox';
+function CommunityFilter() {
+  return (
+    <section
+      className="w-full flex justify-between items-center border-b-1 border-gray-light pb-1.5"
+      aria-label="커뮤니티 정렬 필터"
+    >
+      <p aria-live="polite">100개</p>
+      <SelectBox option={['최신순', '인기순', '댓글순']} title={'최신순'} />
+    </section>
+  );
+}
+
+export default CommunityFilter;

src/shared/components/community/CommunityHeader.tsx

@@ -0,0 +1,12 @@
+import PageHeader from '../pageHeader/PageHeader';
+import headerImg from '@/shared/assets/images/community_page_header.webp';
+
+function CommunityHeader() {
+  return (
+    <section aria-label="커뮤니티 헤더">
+      <PageHeader src={headerImg} title="Community" description="칵테일에 관한 모든 이야기" />
+    </section>
+  );
+}
+
+export default CommunityHeader;

src/shared/components/community/CommunityTab.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import tw from '@/shared/utills/tw';
+import { useState } from 'react';
+
+const tabItem = [
+  { title: '전체' },
+  { title: '레시피' },
+  { title: '팁' },
+  { title: '질문' },
+  { title: '자유' },
+];
+
+function CommunityTab() {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+
+  return (
+    <section className="relative sm:w-[70%] w-full" aria-label="커뮤니티 탭">
+      <div className="w-full overflow-x-scroll no-scrollbar scroll-smooth">
+        <div className="flex gap-3 w-max" aria-label="커뮤니티 카테고리">
+          {tabItem.map(({ title }, idx) => (
+            <button
+              key={title + idx}
+              role="tab"
+              aria-selected={selectedIdx === idx}
+              tabIndex={selectedIdx === idx ? 0 : -1}
+              onClick={() => setSelectedIdx(idx)}
+              className={tw(
+                `border-1 py-1 px-3 rounded-2xl transition-colors ease-in`,
+                selectedIdx === idx ? 'bg-secondary text-primary' : ''
+              )}
+            >
+              {title}
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CommunityTab;

src/shared/components/community/PostCard.tsx

@@ -0,0 +1,44 @@
+import Image from 'next/image';
+import prePost from '@/shared/assets/images/prepost_img.webp';
+import PostLabel from './PostLabel';
+
+function PostCard({ label }: { label: string }) {
+  return (
+    <article className="pt-[30] pb-3 border-b-1 border-gray-light">
+      <PostLabel title={label} />
+
+      <section className="flex items-start justify-between mt-3 cursor-pointer" role="link">
+        <div className="flex flex-col gap-3">
+          <p className="font-bold sm:text-xl text-lg">칵테일 만들 때 준비물</p>
+          <div className="font-light sm:text-[15px] text-sm">
+            <p>칵테일 처음 만들어 보는데 랄랄</p>
+            <p>가나다라마바사아자차카파타하</p>
+          </div>
+          <ul
+            className="flex font-light sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
+            aria-label="게시글 정보"
+          >
+            <li>실버븬</li>
+            <li aria-hidden="true">|</li>
+            <li>3분 전</li>
+            <li aria-hidden="true">|</li>
+            <li>조회 3</li>
+            <li aria-hidden="true">|</li>
+            <li>댓글 3</li>
+          </ul>
+        </div>
+        <figure className="flex items-start">
+          <Image
+            src={prePost}
+            alt="예비사진"
+            width={120}
+            height={120}
+            className="md:w-[120px] sm:w-[100px] w-[80px] self-start"
+          />
+        </figure>
+      </section>
+    </article>
+  );
+}
+
+export default PostCard;