[Merge] 모임 페이지 branch와 develop 병합 #72

src/app/bookclub/page.tsx

@@ -1,3 +1,9 @@
+import { BookClubMainPage } from '@/features/bookclub/components';
+
 export default function Home() {
-  return <div></div>;
+  return (
+    <>
+      <BookClubMainPage />
+    </>
+  );
 }

src/components/card/Card.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import Chip from '@/components/chip/Chip';
 import ParticipantCounter from '../participant-counter/ParticipantCounter';

src/components/drop-down/DropDown.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useRef, useState } from 'react';
 import { IcDropDown } from '../../../public/icons';
 import Avatar from '../avatar/Avatar';

src/components/sorting-button/SortingButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useState } from 'react';
 import { IcSorting } from '../../../public/icons/index';
 

src/features/bookclub/components/BookClubMainPage.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Header, FilterBar, Main } from '@/features/bookclub/components';
+import { useState } from 'react';
+
+function BookClubMainPage() {
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedTab, setSelectedTab] = useState('전체');
+  // const [selectedOnOff, setSelectedOnOff] = useState<string | undefined>(
+  //   undefined,
+  // );
+  // const [selectedMemberCount, setSelectedMemberCount] = useState<
+  //   string | undefined
+  // >(undefined);
+  // const [selectedChecking, setSelectedChecking] = useState(false);
+  // const [selectedSorting, setSelectedSorting] = useState<string | undefined>(
+  //   undefined,
+  // );
+
+  return (
+    <>
+      <Header />
+      <FilterBar
+        searchValue={searchValue}
+        setSearchValue={setSearchValue}
+        selectedTab={selectedTab}
+        setSelectedTab={setSelectedTab}
+        // setSelectedOnOff={setSelectedOnOff}
+        // setSelectedMemberCount={setSelectedMemberCount}
+        // selectedChecking={selectedChecking}
+        // setSelectedChecking={setSelectedChecking}
+        // setSelectedSorting={setSelectedSorting}
+      />
+      <Main />
+    </>
+  );
+}
+
+export default BookClubMainPage;

src/features/bookclub/components/FilterBar.tsx

@@ -0,0 +1,77 @@
+// import DropDown from '@/components/drop-down/DropDown';
+// import FilterCheckbox from '@/components/filter-checkbox/FilterCheckbox';
+import SearchBox from '@/components/search-box/SearchBox';
+// import SortingButton from '@/components/sorting-button/SortingButton';
+import Tab from '@/components/tab/Tab';
+
+interface FilterBarProps {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  selectedTab: string;
+  setSelectedTab: (value: string) => void;
+  // setSelectedOnOff: (value: string | undefined) => void;
+  // setSelectedMemberCount: (value: string | undefined) => void;
+  // selectedChecking: boolean;
+  // setSelectedChecking: (value: boolean) => void;
+  // setSelectedSorting: (value: string | undefined) => void;
+}
+
+function FilterBar({
+  searchValue,
+  setSearchValue,
+  selectedTab,
+  setSelectedTab,
+  // setSelectedOnOff,
+  // setSelectedMemberCount,
+  // selectedChecking,
+  // setSelectedChecking,
+  // setSelectedSorting,
+}: FilterBarProps) {
+  return (
+    <section className="flex w-full flex-col gap-y-[10px] px-[20px] pt-[20px] md:px-[24px] lg:px-[102px]">
+      <div>
+        <Tab
+          items={['전체', '자유책', '지정책']}
+          activeTab={selectedTab}
+          onTabChange={(item) => setSelectedTab(item)}
+          tabType="MAIN_TAB"
+        />
+        <hr className="-mx-[20px] border-t border-gray-normal-01 md:-mx-[24px] lg:-mx-[102px]" />
+      </div>
+      <div className="bg-white">
+        <SearchBox
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          aria-label="책 검색"
+        />
+      </div>
+      {/* <div className="flex w-full gap-x-2 overflow-x-auto whitespace-nowrap sm:justify-between [&::-webkit-scrollbar]:hidden">
+        <div className="flex items-center gap-x-2">
+          <DropDown
+            variant="onOff"
+            onChangeSelection={setSelectedOnOff}
+            aria-label="온라인/오프라인 선택"
+          />
+          <DropDown
+            variant="memberCount"
+            onChangeSelection={setSelectedMemberCount}
+            aria-label="인원 수 선택"
+          />
+          <FilterCheckbox
+            label="신청가능"
+            checked={selectedChecking}
+            onChange={(e) => setSelectedChecking(e.target.checked)}
+            aria-label="신청가능 필터"
+          />
+        </div>
+        <SortingButton
+          variant="byDeadline"
+          onClickSorting={setSelectedSorting}
+          aria-label="마감임박 정렬"
+        />
+      </div> */}
+    </section>
+  );
+}
+
+export default FilterBar;

src/features/bookclub/components/Header.tsx

@@ -0,0 +1,23 @@
+import Button from '@/components/button/Button';
+
+function Header() {
+  return (
+    <header className="flex h-[120px] w-full min-w-[336px] items-end bg-green-light-01 px-[20px] py-[30px] sm:justify-between md:px-[24px] lg:px-[102px]">
+      <h1
+        className="flex-nowrap text-[20px] font-bold leading-[30px] tracking-tighter text-black md:text-2xl"
+        aria-labelledby="header-title"
+      >
+        반가워요, <span className="text-green-normal-01">북코</span>님!
+        <br />책 모임에 참여해 보세요
+      </h1>
+      <Button
+        text="모임 만들기"
+        size="small"
+        fillType="solid"
+        themeColor="green-normal-01"
+      />
+    </header>
+  );
+}
+
+export default Header;

src/features/bookclub/components/Main.tsx

@@ -0,0 +1,55 @@
+import SimpleCard from '@/components/card/simple-card/SimpleCard';
+import { Meeting } from '@/components/card/types';
+
+const mockImgSrc = '/images/profile.png';
+
+const mockMeeting: Meeting = {
+  meetingInfo: {
+    title: '을지로에서 만나는 독서 모임',
+    category: '자유책',
+    location: '을지로 3가',
+    datetime: '12/14(토) 오전 10:00',
+  },
+  participationStatus: {
+    currentParticipants: 17,
+    maxParticipants: 20,
+    isConfirmed: true,
+    confirmedVariant: 'confirmed',
+    participants: [
+      {
+        src: mockImgSrc,
+        alt: '참가자1',
+      },
+      {
+        src: mockImgSrc,
+        alt: '참가자2',
+      },
+      {
+        src: mockImgSrc,
+        alt: '참가자3',
+      },
+    ],
+  },
+  imageInfo: {
+    url: mockImgSrc,
+    isLiked: true,
+    onLikeClick: () => alert('좋아요를 눌렀습니다!'),
+  },
+  isPast: false,
+  isCanceled: false,
+  actions: {
+    onClick: () => alert('카드를 클릭했습니다!'),
+    onDelete: () => alert('모임을 삭제했습니다!'),
+  },
+};
+
+function Main() {
+  return (
+    <main className="flex w-full min-w-[336px] flex-col items-center gap-y-[26px] bg-gray-light-01 px-[20px] pt-[18px] sm:justify-between md:px-[24px] lg:px-[102px]">
+      <SimpleCard meeting={mockMeeting} />
+      <SimpleCard meeting={mockMeeting} />
+    </main>
+  );
+}
+
+export default Main;

src/features/bookclub/components/index.ts

@@ -1 +1,4 @@
-export {};
+export { default as BookClubMainPage } from './BookClubMainPage';
+export { default as Header } from './Header';
+export { default as Main } from './Main';
+export { default as FilterBar } from './FilterBar';