From 43c2235246e2fdcadacbf614dfd19f421d601871 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Thu, 2 Jan 2025 06:26:16 +0900 Subject: [PATCH 01/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterSection.tsx | 7 +++++-- src/lib/utils/filterUtils.ts | 16 ++++++++-------- src/types/bookclubs.ts | 2 ++ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index c024f7d2..130eeceb 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -33,8 +33,11 @@ function FilterSection({ const updateMemberLimitFilter = (selectedValue: string | undefined) => { const memberLimit = getMemberLimit(selectedValue); - if (selectedValue !== undefined) { - onFilterChange({ memberLimit }); + if (memberLimit) { + onFilterChange({ + memberLimitMin: memberLimit.min, + memberLimitMax: memberLimit.max, + }); } }; diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 38619435..71988bd5 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -2,14 +2,14 @@ import { BookClubParams } from '@/types/bookclubs'; export const getMemberLimit = (selectedValue: string | undefined) => { switch (selectedValue) { - case 'TWO_FOUR': - return 4; - case 'FIVE_SEVEN': - return 7; - case 'EIGHT_TEN': - return 10; - case 'OVER_ELEVEN': - return 11; + case 'THREE_FIVE': + return { min: 3, max: 5 }; + case 'SIX_EIGHT': + return { min: 6, max: 8 }; + case 'NINE_ELEVEN': + return { min: 9, max: 11 }; + case 'TWELVE': + return { min: 12, max: 20 }; default: return undefined; } diff --git a/src/types/bookclubs.ts b/src/types/bookclubs.ts index 9e8fa8a9..16dd35d5 100644 --- a/src/types/bookclubs.ts +++ b/src/types/bookclubs.ts @@ -8,6 +8,8 @@ export interface BookClubParams { page?: number; size?: number; searchKeyword?: string; + memberLimitMin?: number; + memberLimitMax?: number; } //TODO: imageUrl. isPast, clubStatus, reviewScore 수정 From c1b7b3c8e44207c85f4229aae69dff220f78672c Mon Sep 17 00:00:00 2001 From: wynter24 Date: Thu, 2 Jan 2025 06:26:16 +0900 Subject: [PATCH 02/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterSection.tsx | 7 +++++-- src/lib/utils/filterUtils.ts | 16 ++++++++-------- src/types/bookclubs.ts | 2 ++ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index c024f7d2..130eeceb 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -33,8 +33,11 @@ function FilterSection({ const updateMemberLimitFilter = (selectedValue: string | undefined) => { const memberLimit = getMemberLimit(selectedValue); - if (selectedValue !== undefined) { - onFilterChange({ memberLimit }); + if (memberLimit) { + onFilterChange({ + memberLimitMin: memberLimit.min, + memberLimitMax: memberLimit.max, + }); } }; diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 38619435..71988bd5 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -2,14 +2,14 @@ import { BookClubParams } from '@/types/bookclubs'; export const getMemberLimit = (selectedValue: string | undefined) => { switch (selectedValue) { - case 'TWO_FOUR': - return 4; - case 'FIVE_SEVEN': - return 7; - case 'EIGHT_TEN': - return 10; - case 'OVER_ELEVEN': - return 11; + case 'THREE_FIVE': + return { min: 3, max: 5 }; + case 'SIX_EIGHT': + return { min: 6, max: 8 }; + case 'NINE_ELEVEN': + return { min: 9, max: 11 }; + case 'TWELVE': + return { min: 12, max: 20 }; default: return undefined; } diff --git a/src/types/bookclubs.ts b/src/types/bookclubs.ts index 9e8fa8a9..16dd35d5 100644 --- a/src/types/bookclubs.ts +++ b/src/types/bookclubs.ts @@ -8,6 +8,8 @@ export interface BookClubParams { page?: number; size?: number; searchKeyword?: string; + memberLimitMin?: number; + memberLimitMax?: number; } //TODO: imageUrl. isPast, clubStatus, reviewScore 수정 From 17e4ef8c3c8b97d50a2ee5662a1a1101c79b8205 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 07:28:54 +0900 Subject: [PATCH 03/18] =?UTF-8?q?=F0=9F=92=84[Design]=20=EC=A7=80=EB=82=9C?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=EB=B0=8F=20=EC=B7=A8=EC=86=8C=EB=90=9C?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=ED=91=9C=EC=8B=9C=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/bookclub/components/ClubListSection.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx index 999fcea1..9f7d6bca 100644 --- a/src/features/bookclub/components/ClubListSection.tsx +++ b/src/features/bookclub/components/ClubListSection.tsx @@ -32,8 +32,8 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { isLiked={club.isLiked} current={club.memberCount} max={club.memberLimit} - isPast={isPastDate(club.endDate, today)} // 지난 모임 여부 - isCanceled={false} // 모임 취소 여부 (API 값에 따라 변경 가능) + isPast={isPastDate(club.targetDate, today)} // 지난 모임 여부 + isCanceled={club.isInactive} // 모임 취소 여부 bookClubType={club.bookClubType} meetingType={club.meetingType} clubStatus={clubStatus( @@ -44,7 +44,6 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { )} onLikeClick={() => console.log(`${club.title} 좋아요 클릭`)} onClick={() => router.push(`/bookclub/${club.id}`)} - onDelete={() => console.log(`${club.title} 삭제 클릭`)} /> )) ) : ( From 62289d83921fe1dc993caa83ca47f83b1ae38e94 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 07:33:09 +0900 Subject: [PATCH 04/18] =?UTF-8?q?=F0=9F=90=9B[Fix]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=EC=A0=84=EC=B2=B4=EC=9D=BC=20=EB=95=8C=20=ED=8C=8C?= =?UTF-8?q?=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=84=A4=EC=A0=95=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/utils/filterUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 71988bd5..6e459676 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -11,7 +11,7 @@ export const getMemberLimit = (selectedValue: string | undefined) => { case 'TWELVE': return { min: 12, max: 20 }; default: - return undefined; + return { min: 3, max: 20 }; } }; From a2d5009f62a227f040a484a08e1132ce977e922b Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 10:13:45 +0900 Subject: [PATCH 05/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=8B=A0=EC=B2=AD=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=20=ED=95=84=ED=84=B0=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.ts | 5 +++- src/components/common-layout/FilterBar.tsx | 3 ++ .../common-layout/FilterSection.tsx | 29 +++++++++++++++++-- .../bookclub/components/BookClubMainPage.tsx | 4 ++- .../bookclub/hooks/useFetchBookClubList.ts | 4 +++ 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/next.config.ts b/next.config.ts index 1be1526f..51ca252f 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,7 +2,10 @@ import type { NextConfig } from 'next'; const nextConfig: NextConfig = { images: { - domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'], + domains: [ + 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com', + 'codeit-bookco.s3.ap-northeast-2.amazonaws.com', + ], }, instrumentation: { enabled: true, diff --git a/src/components/common-layout/FilterBar.tsx b/src/components/common-layout/FilterBar.tsx index 2c8b24d5..3f650976 100644 --- a/src/components/common-layout/FilterBar.tsx +++ b/src/components/common-layout/FilterBar.tsx @@ -10,6 +10,7 @@ interface FilterBarProps { filters: BookClubParams; handleFilterChange: (newFilter: Partial) => void; bookClubs: BookClub[]; + initialBookClubs: BookClub[]; setBookClubs: Dispatch>; } @@ -17,6 +18,7 @@ function FilterBar({ filters, handleFilterChange, bookClubs, + initialBookClubs, setBookClubs, }: FilterBarProps) { return ( @@ -30,6 +32,7 @@ function FilterBar({ /> diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index 130eeceb..137649e4 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -2,31 +2,54 @@ import DropDown from '@/components/drop-down/DropDown'; import FilterCheckbox from '@/components/filter-checkbox/FilterCheckbox'; -import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react'; +import { + ChangeEvent, + Dispatch, + SetStateAction, + useEffect, + useState, +} from 'react'; import SortingButton from '@/components/sorting-button/SortingButton'; import { BookClub, BookClubParams } from '../../types/bookclubs'; import { getMeetingType, getMemberLimit } from '@/lib/utils/filterUtils'; +import { clubStatus } from '@/lib/utils/clubUtils'; interface CategoryTabsProps { bookClubs: BookClub[]; + initialBookClubs: BookClub[]; setBookClubs: Dispatch>; onFilterChange: (newFilters: Partial) => void; } function FilterSection({ bookClubs, + initialBookClubs, setBookClubs, onFilterChange, }: CategoryTabsProps) { const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능 + useEffect(() => { + console.log('체크 상태: ', showAvailableOnly); + console.log('신청 가능 모임: ', bookClubs); + }); + const toggleAvailableOnly = (e: ChangeEvent) => { const isChecked = e.target.checked; setShowAvailableOnly(isChecked); const filteredBookClubs = isChecked - ? bookClubs.filter((club) => club.memberCount < club.memberLimit) - : bookClubs; + ? bookClubs.filter( + (club) => + club.memberCount < club.memberLimit && + clubStatus( + club.memberCount, + club.memberLimit, + club.endDate, + new Date(), + ) !== 'closed', + ) + : initialBookClubs; setBookClubs(filteredBookClubs); }; diff --git a/src/features/bookclub/components/BookClubMainPage.tsx b/src/features/bookclub/components/BookClubMainPage.tsx index 92ce900c..462c8846 100644 --- a/src/features/bookclub/components/BookClubMainPage.tsx +++ b/src/features/bookclub/components/BookClubMainPage.tsx @@ -9,7 +9,8 @@ import { useRouter } from 'next/navigation'; function BookClubMainPage() { // 커스텀 훅에서 상태와 핸들러 가져오기 - const { bookClubs, setBookClubs, filters, updateFilters } = useBookClubList(); + const { bookClubs, initialBookClubs, setBookClubs, filters, updateFilters } = + useBookClubList(); const router = useRouter(); @@ -45,6 +46,7 @@ function BookClubMainPage() { filters={filters} handleFilterChange={handleFilterChange} bookClubs={bookClubs} + initialBookClubs={initialBookClubs} setBookClubs={setBookClubs} /> diff --git a/src/features/bookclub/hooks/useFetchBookClubList.ts b/src/features/bookclub/hooks/useFetchBookClubList.ts index c7fd8b99..26d69a49 100644 --- a/src/features/bookclub/hooks/useFetchBookClubList.ts +++ b/src/features/bookclub/hooks/useFetchBookClubList.ts @@ -4,6 +4,7 @@ import { BookClub, BookClubParams } from '@/types/bookclubs'; const useBookClubList = () => { const [bookClubs, setBookClubs] = useState([]); + const [initialBookClubs, setInitialBookClubs] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [filters, setFilters] = useState({ @@ -21,6 +22,8 @@ const useBookClubList = () => { try { const data = await getBookClubs(filters); // API 호출 setBookClubs(data); + setInitialBookClubs(data); + console.log(data); } catch (err) { setError(err as Error); } finally { @@ -38,6 +41,7 @@ const useBookClubList = () => { return { bookClubs, + initialBookClubs, setBookClubs, loading, error, From 5f7322676f5488b2e224ba31ed1e3a09916adb45 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Thu, 2 Jan 2025 06:26:16 +0900 Subject: [PATCH 06/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterSection.tsx | 7 +++++-- src/lib/utils/filterUtils.ts | 16 ++++++++-------- src/types/bookclubs.ts | 2 ++ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index c024f7d2..130eeceb 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -33,8 +33,11 @@ function FilterSection({ const updateMemberLimitFilter = (selectedValue: string | undefined) => { const memberLimit = getMemberLimit(selectedValue); - if (selectedValue !== undefined) { - onFilterChange({ memberLimit }); + if (memberLimit) { + onFilterChange({ + memberLimitMin: memberLimit.min, + memberLimitMax: memberLimit.max, + }); } }; diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 38619435..71988bd5 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -2,14 +2,14 @@ import { BookClubParams } from '@/types/bookclubs'; export const getMemberLimit = (selectedValue: string | undefined) => { switch (selectedValue) { - case 'TWO_FOUR': - return 4; - case 'FIVE_SEVEN': - return 7; - case 'EIGHT_TEN': - return 10; - case 'OVER_ELEVEN': - return 11; + case 'THREE_FIVE': + return { min: 3, max: 5 }; + case 'SIX_EIGHT': + return { min: 6, max: 8 }; + case 'NINE_ELEVEN': + return { min: 9, max: 11 }; + case 'TWELVE': + return { min: 12, max: 20 }; default: return undefined; } diff --git a/src/types/bookclubs.ts b/src/types/bookclubs.ts index 9e8fa8a9..16dd35d5 100644 --- a/src/types/bookclubs.ts +++ b/src/types/bookclubs.ts @@ -8,6 +8,8 @@ export interface BookClubParams { page?: number; size?: number; searchKeyword?: string; + memberLimitMin?: number; + memberLimitMax?: number; } //TODO: imageUrl. isPast, clubStatus, reviewScore 수정 From 9648124921d95337616c44285d2623b5526288b1 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 07:28:54 +0900 Subject: [PATCH 07/18] =?UTF-8?q?=F0=9F=92=84[Design]=20=EC=A7=80=EB=82=9C?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=EB=B0=8F=20=EC=B7=A8=EC=86=8C=EB=90=9C?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=ED=91=9C=EC=8B=9C=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/bookclub/components/ClubListSection.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx index 999fcea1..9f7d6bca 100644 --- a/src/features/bookclub/components/ClubListSection.tsx +++ b/src/features/bookclub/components/ClubListSection.tsx @@ -32,8 +32,8 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { isLiked={club.isLiked} current={club.memberCount} max={club.memberLimit} - isPast={isPastDate(club.endDate, today)} // 지난 모임 여부 - isCanceled={false} // 모임 취소 여부 (API 값에 따라 변경 가능) + isPast={isPastDate(club.targetDate, today)} // 지난 모임 여부 + isCanceled={club.isInactive} // 모임 취소 여부 bookClubType={club.bookClubType} meetingType={club.meetingType} clubStatus={clubStatus( @@ -44,7 +44,6 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { )} onLikeClick={() => console.log(`${club.title} 좋아요 클릭`)} onClick={() => router.push(`/bookclub/${club.id}`)} - onDelete={() => console.log(`${club.title} 삭제 클릭`)} /> )) ) : ( From 28277c8900d2fd38a190bffa6e0bf02ac5899b04 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 07:33:09 +0900 Subject: [PATCH 08/18] =?UTF-8?q?=F0=9F=90=9B[Fix]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=EC=A0=84=EC=B2=B4=EC=9D=BC=20=EB=95=8C=20=ED=8C=8C?= =?UTF-8?q?=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=84=A4=EC=A0=95=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/utils/filterUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 71988bd5..6e459676 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -11,7 +11,7 @@ export const getMemberLimit = (selectedValue: string | undefined) => { case 'TWELVE': return { min: 12, max: 20 }; default: - return undefined; + return { min: 3, max: 20 }; } }; From 8306b0fd6e78e9f4066a1372326963aaaffe6ae2 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 10:13:45 +0900 Subject: [PATCH 09/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=8B=A0=EC=B2=AD=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=20=ED=95=84=ED=84=B0=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.ts | 5 +++- src/components/common-layout/FilterBar.tsx | 3 ++ .../common-layout/FilterSection.tsx | 29 +++++++++++++++++-- .../bookclub/components/BookClubMainPage.tsx | 4 ++- .../bookclub/hooks/useFetchBookClubList.ts | 4 +++ 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/next.config.ts b/next.config.ts index 1be1526f..51ca252f 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,7 +2,10 @@ import type { NextConfig } from 'next'; const nextConfig: NextConfig = { images: { - domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'], + domains: [ + 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com', + 'codeit-bookco.s3.ap-northeast-2.amazonaws.com', + ], }, instrumentation: { enabled: true, diff --git a/src/components/common-layout/FilterBar.tsx b/src/components/common-layout/FilterBar.tsx index 2c8b24d5..3f650976 100644 --- a/src/components/common-layout/FilterBar.tsx +++ b/src/components/common-layout/FilterBar.tsx @@ -10,6 +10,7 @@ interface FilterBarProps { filters: BookClubParams; handleFilterChange: (newFilter: Partial) => void; bookClubs: BookClub[]; + initialBookClubs: BookClub[]; setBookClubs: Dispatch>; } @@ -17,6 +18,7 @@ function FilterBar({ filters, handleFilterChange, bookClubs, + initialBookClubs, setBookClubs, }: FilterBarProps) { return ( @@ -30,6 +32,7 @@ function FilterBar({ /> diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index 130eeceb..137649e4 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -2,31 +2,54 @@ import DropDown from '@/components/drop-down/DropDown'; import FilterCheckbox from '@/components/filter-checkbox/FilterCheckbox'; -import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react'; +import { + ChangeEvent, + Dispatch, + SetStateAction, + useEffect, + useState, +} from 'react'; import SortingButton from '@/components/sorting-button/SortingButton'; import { BookClub, BookClubParams } from '../../types/bookclubs'; import { getMeetingType, getMemberLimit } from '@/lib/utils/filterUtils'; +import { clubStatus } from '@/lib/utils/clubUtils'; interface CategoryTabsProps { bookClubs: BookClub[]; + initialBookClubs: BookClub[]; setBookClubs: Dispatch>; onFilterChange: (newFilters: Partial) => void; } function FilterSection({ bookClubs, + initialBookClubs, setBookClubs, onFilterChange, }: CategoryTabsProps) { const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능 + useEffect(() => { + console.log('체크 상태: ', showAvailableOnly); + console.log('신청 가능 모임: ', bookClubs); + }); + const toggleAvailableOnly = (e: ChangeEvent) => { const isChecked = e.target.checked; setShowAvailableOnly(isChecked); const filteredBookClubs = isChecked - ? bookClubs.filter((club) => club.memberCount < club.memberLimit) - : bookClubs; + ? bookClubs.filter( + (club) => + club.memberCount < club.memberLimit && + clubStatus( + club.memberCount, + club.memberLimit, + club.endDate, + new Date(), + ) !== 'closed', + ) + : initialBookClubs; setBookClubs(filteredBookClubs); }; diff --git a/src/features/bookclub/components/BookClubMainPage.tsx b/src/features/bookclub/components/BookClubMainPage.tsx index 92ce900c..462c8846 100644 --- a/src/features/bookclub/components/BookClubMainPage.tsx +++ b/src/features/bookclub/components/BookClubMainPage.tsx @@ -9,7 +9,8 @@ import { useRouter } from 'next/navigation'; function BookClubMainPage() { // 커스텀 훅에서 상태와 핸들러 가져오기 - const { bookClubs, setBookClubs, filters, updateFilters } = useBookClubList(); + const { bookClubs, initialBookClubs, setBookClubs, filters, updateFilters } = + useBookClubList(); const router = useRouter(); @@ -45,6 +46,7 @@ function BookClubMainPage() { filters={filters} handleFilterChange={handleFilterChange} bookClubs={bookClubs} + initialBookClubs={initialBookClubs} setBookClubs={setBookClubs} /> diff --git a/src/features/bookclub/hooks/useFetchBookClubList.ts b/src/features/bookclub/hooks/useFetchBookClubList.ts index c7fd8b99..26d69a49 100644 --- a/src/features/bookclub/hooks/useFetchBookClubList.ts +++ b/src/features/bookclub/hooks/useFetchBookClubList.ts @@ -4,6 +4,7 @@ import { BookClub, BookClubParams } from '@/types/bookclubs'; const useBookClubList = () => { const [bookClubs, setBookClubs] = useState([]); + const [initialBookClubs, setInitialBookClubs] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [filters, setFilters] = useState({ @@ -21,6 +22,8 @@ const useBookClubList = () => { try { const data = await getBookClubs(filters); // API 호출 setBookClubs(data); + setInitialBookClubs(data); + console.log(data); } catch (err) { setError(err as Error); } finally { @@ -38,6 +41,7 @@ const useBookClubList = () => { return { bookClubs, + initialBookClubs, setBookClubs, loading, error, From e3694e21a22289d20840902be2c8793300c3bc1d Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 12:21:39 +0900 Subject: [PATCH 10/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=EC=9A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterSection.tsx | 10 +++++----- src/features/bookclub/components/ClubListSection.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index 137649e4..adda2138 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -6,7 +6,7 @@ import { ChangeEvent, Dispatch, SetStateAction, - useEffect, + // useEffect, useState, } from 'react'; import SortingButton from '@/components/sorting-button/SortingButton'; @@ -29,10 +29,10 @@ function FilterSection({ }: CategoryTabsProps) { const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능 - useEffect(() => { - console.log('체크 상태: ', showAvailableOnly); - console.log('신청 가능 모임: ', bookClubs); - }); + // useEffect(() => { + // console.log('체크 상태: ', showAvailableOnly); + // console.log('신청 가능 모임: ', bookClubs); + // }); const toggleAvailableOnly = (e: ChangeEvent) => { const isChecked = e.target.checked; diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx index 9f7d6bca..9c7a6ee9 100644 --- a/src/features/bookclub/components/ClubListSection.tsx +++ b/src/features/bookclub/components/ClubListSection.tsx @@ -7,6 +7,7 @@ import { useMemo } from 'react'; import EmptyState from '@/components/common-layout/EmptyState'; import { clubStatus } from '@/lib/utils/clubUtils'; import { BookClub } from '@/types/bookclubs'; +import { useLikeClub, useUnLikeClub } from '@/lib/hooks'; interface ClubListSectionProps { bookClubs: BookClub[]; @@ -14,9 +15,15 @@ interface ClubListSectionProps { function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { const router = useRouter(); + const { onConfirmUnLike } = useUnLikeClub(); + const { onConfirmLike } = useLikeClub(); const today = useMemo(() => new Date(), []); + const handleLikeClub = (isLiked: boolean, id: number) => { + isLiked ? onConfirmUnLike(id) : onConfirmLike(id); + }; + return (
{bookClubs?.length > 0 ? ( @@ -42,7 +49,7 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { club.endDate, today, )} - onLikeClick={() => console.log(`${club.title} 좋아요 클릭`)} + onLikeClick={() => handleLikeClub(club.isLiked, club.id)} onClick={() => router.push(`/bookclub/${club.id}`)} /> )) From 9d40f095abc9b7042b5edf7e446290f74e25bcb9 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 15:22:38 +0900 Subject: [PATCH 11/18] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=EB=AA=A8?= =?UTF-8?q?=EC=9E=84=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=ED=82=A4=20=EC=82=AC=EC=9A=A9=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/book-club/bookClubMainAPI.ts | 2 +- .../bookclub/components/BookClubMainPage.tsx | 24 ++++++++--- .../bookclub/hooks/useFetchBookClubList.ts | 43 ++++++++----------- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/src/api/book-club/bookClubMainAPI.ts b/src/api/book-club/bookClubMainAPI.ts index 06143f21..b9c57b0b 100644 --- a/src/api/book-club/bookClubMainAPI.ts +++ b/src/api/book-club/bookClubMainAPI.ts @@ -10,7 +10,7 @@ export const bookClubMainAPI = { //북클럽 목록 조회 getBookClubs: async (params?: BookClubParams) => { - await apiClient.get('/book-clubs', { params }); + return await apiClient.get('/book-clubs', { params }); }, //단일 북클럽 조회 diff --git a/src/features/bookclub/components/BookClubMainPage.tsx b/src/features/bookclub/components/BookClubMainPage.tsx index 462c8846..8d027d28 100644 --- a/src/features/bookclub/components/BookClubMainPage.tsx +++ b/src/features/bookclub/components/BookClubMainPage.tsx @@ -6,11 +6,17 @@ import { useAuthStore } from '@/store/authStore'; import ClubListSection from './ClubListSection'; import Button from '@/components/button/Button'; import { useRouter } from 'next/navigation'; +import Loading from '@/components/loading/Loading'; function BookClubMainPage() { - // 커스텀 훅에서 상태와 핸들러 가져오기 - const { bookClubs, initialBookClubs, setBookClubs, filters, updateFilters } = - useBookClubList(); + const { + clubList, + initialBookClubs, + setClubList, + isLoading, + filters, + updateFilters, + } = useBookClubList(); const router = useRouter(); @@ -45,11 +51,17 @@ function BookClubMainPage() { - + {isLoading ? ( +
+ +
+ ) : ( + + )} ); } diff --git a/src/features/bookclub/hooks/useFetchBookClubList.ts b/src/features/bookclub/hooks/useFetchBookClubList.ts index 26d69a49..1f150f5d 100644 --- a/src/features/bookclub/hooks/useFetchBookClubList.ts +++ b/src/features/bookclub/hooks/useFetchBookClubList.ts @@ -1,12 +1,12 @@ -import { useState, useEffect, useCallback } from 'react'; -import { getBookClubs } from '../api/bookclubApi'; +import { useState, useEffect } from 'react'; import { BookClub, BookClubParams } from '@/types/bookclubs'; +import { useQuery } from '@tanstack/react-query'; +import { bookClubs } from '@/api/book-club/react-query'; const useBookClubList = () => { - const [bookClubs, setBookClubs] = useState([]); + // TODO: 신청 가능 필터 param 추가시 clubList, initialBookClubs 상태 관리x + const [clubList, setClubList] = useState([]); const [initialBookClubs, setInitialBookClubs] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); const [filters, setFilters] = useState({ bookClubType: 'ALL', meetingType: 'ALL', @@ -16,34 +16,29 @@ const useBookClubList = () => { searchKeyword: '', }); - const fetchData = useCallback(async () => { - setLoading(true); - setError(null); - try { - const data = await getBookClubs(filters); // API 호출 - setBookClubs(data); - setInitialBookClubs(data); - console.log(data); - } catch (err) { - setError(err as Error); - } finally { - setLoading(false); - } - }, [filters]); + const { data, isLoading, error } = useQuery({ + ...bookClubs.all(filters), + }); + const clubInfo = data?.data.bookClubs; + + // TODO: param 추가시, useEffect 대신 clubInfo 직접 사용 useEffect(() => { - fetchData(); - }, [fetchData]); + if (clubInfo) { + setClubList(clubInfo); + setInitialBookClubs(clubInfo); // 초기 데이터 설정 + } + }, [clubInfo]); const updateFilters = (newFilters: Partial) => { setFilters((prevFilters) => ({ ...prevFilters, ...newFilters })); }; return { - bookClubs, + clubList, initialBookClubs, - setBookClubs, - loading, + setClubList, + isLoading, error, filters, updateFilters, From 03091fb179ae4e2a9c13dff86d7f11cbade5286a Mon Sep 17 00:00:00 2001 From: wynter24 Date: Thu, 2 Jan 2025 06:26:16 +0900 Subject: [PATCH 12/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterSection.tsx | 7 +++++-- src/lib/utils/filterUtils.ts | 16 ++++++++-------- src/types/bookclubs.ts | 2 ++ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index c024f7d2..130eeceb 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -33,8 +33,11 @@ function FilterSection({ const updateMemberLimitFilter = (selectedValue: string | undefined) => { const memberLimit = getMemberLimit(selectedValue); - if (selectedValue !== undefined) { - onFilterChange({ memberLimit }); + if (memberLimit) { + onFilterChange({ + memberLimitMin: memberLimit.min, + memberLimitMax: memberLimit.max, + }); } }; diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 38619435..71988bd5 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -2,14 +2,14 @@ import { BookClubParams } from '@/types/bookclubs'; export const getMemberLimit = (selectedValue: string | undefined) => { switch (selectedValue) { - case 'TWO_FOUR': - return 4; - case 'FIVE_SEVEN': - return 7; - case 'EIGHT_TEN': - return 10; - case 'OVER_ELEVEN': - return 11; + case 'THREE_FIVE': + return { min: 3, max: 5 }; + case 'SIX_EIGHT': + return { min: 6, max: 8 }; + case 'NINE_ELEVEN': + return { min: 9, max: 11 }; + case 'TWELVE': + return { min: 12, max: 20 }; default: return undefined; } diff --git a/src/types/bookclubs.ts b/src/types/bookclubs.ts index 8a9c97f1..11337c3b 100644 --- a/src/types/bookclubs.ts +++ b/src/types/bookclubs.ts @@ -8,6 +8,8 @@ export interface BookClubParams { page?: number; size?: number; searchKeyword?: string; + memberLimitMin?: number; + memberLimitMax?: number; } export interface MyProfileParams { From 65cef5bf0af621e48a4735c225a03b6543634ce7 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 07:28:54 +0900 Subject: [PATCH 13/18] =?UTF-8?q?=F0=9F=92=84[Design]=20=EC=A7=80=EB=82=9C?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=EB=B0=8F=20=EC=B7=A8=EC=86=8C=EB=90=9C?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=ED=91=9C=EC=8B=9C=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/bookclub/components/ClubListSection.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx index 999fcea1..9f7d6bca 100644 --- a/src/features/bookclub/components/ClubListSection.tsx +++ b/src/features/bookclub/components/ClubListSection.tsx @@ -32,8 +32,8 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { isLiked={club.isLiked} current={club.memberCount} max={club.memberLimit} - isPast={isPastDate(club.endDate, today)} // 지난 모임 여부 - isCanceled={false} // 모임 취소 여부 (API 값에 따라 변경 가능) + isPast={isPastDate(club.targetDate, today)} // 지난 모임 여부 + isCanceled={club.isInactive} // 모임 취소 여부 bookClubType={club.bookClubType} meetingType={club.meetingType} clubStatus={clubStatus( @@ -44,7 +44,6 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { )} onLikeClick={() => console.log(`${club.title} 좋아요 클릭`)} onClick={() => router.push(`/bookclub/${club.id}`)} - onDelete={() => console.log(`${club.title} 삭제 클릭`)} /> )) ) : ( From fbdd76f949f591cae4843026423a0a6a3a4235a7 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 07:33:09 +0900 Subject: [PATCH 14/18] =?UTF-8?q?=F0=9F=90=9B[Fix]=20=EC=9D=B8=EC=9B=90?= =?UTF-8?q?=EC=88=98=20=EC=A0=84=EC=B2=B4=EC=9D=BC=20=EB=95=8C=20=ED=8C=8C?= =?UTF-8?q?=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=84=A4=EC=A0=95=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/utils/filterUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts index 71988bd5..6e459676 100644 --- a/src/lib/utils/filterUtils.ts +++ b/src/lib/utils/filterUtils.ts @@ -11,7 +11,7 @@ export const getMemberLimit = (selectedValue: string | undefined) => { case 'TWELVE': return { min: 12, max: 20 }; default: - return undefined; + return { min: 3, max: 20 }; } }; From f84af88a44062e63bd56e72b0b6fcc53da369e9b Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 10:13:45 +0900 Subject: [PATCH 15/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=8B=A0=EC=B2=AD=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=20=ED=95=84=ED=84=B0=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterBar.tsx | 3 ++ .../common-layout/FilterSection.tsx | 29 +++++++++++++++++-- .../bookclub/components/BookClubMainPage.tsx | 4 ++- .../bookclub/hooks/useFetchBookClubList.ts | 4 +++ 4 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/components/common-layout/FilterBar.tsx b/src/components/common-layout/FilterBar.tsx index 2c8b24d5..3f650976 100644 --- a/src/components/common-layout/FilterBar.tsx +++ b/src/components/common-layout/FilterBar.tsx @@ -10,6 +10,7 @@ interface FilterBarProps { filters: BookClubParams; handleFilterChange: (newFilter: Partial) => void; bookClubs: BookClub[]; + initialBookClubs: BookClub[]; setBookClubs: Dispatch>; } @@ -17,6 +18,7 @@ function FilterBar({ filters, handleFilterChange, bookClubs, + initialBookClubs, setBookClubs, }: FilterBarProps) { return ( @@ -30,6 +32,7 @@ function FilterBar({ /> diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index 130eeceb..137649e4 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -2,31 +2,54 @@ import DropDown from '@/components/drop-down/DropDown'; import FilterCheckbox from '@/components/filter-checkbox/FilterCheckbox'; -import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react'; +import { + ChangeEvent, + Dispatch, + SetStateAction, + useEffect, + useState, +} from 'react'; import SortingButton from '@/components/sorting-button/SortingButton'; import { BookClub, BookClubParams } from '../../types/bookclubs'; import { getMeetingType, getMemberLimit } from '@/lib/utils/filterUtils'; +import { clubStatus } from '@/lib/utils/clubUtils'; interface CategoryTabsProps { bookClubs: BookClub[]; + initialBookClubs: BookClub[]; setBookClubs: Dispatch>; onFilterChange: (newFilters: Partial) => void; } function FilterSection({ bookClubs, + initialBookClubs, setBookClubs, onFilterChange, }: CategoryTabsProps) { const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능 + useEffect(() => { + console.log('체크 상태: ', showAvailableOnly); + console.log('신청 가능 모임: ', bookClubs); + }); + const toggleAvailableOnly = (e: ChangeEvent) => { const isChecked = e.target.checked; setShowAvailableOnly(isChecked); const filteredBookClubs = isChecked - ? bookClubs.filter((club) => club.memberCount < club.memberLimit) - : bookClubs; + ? bookClubs.filter( + (club) => + club.memberCount < club.memberLimit && + clubStatus( + club.memberCount, + club.memberLimit, + club.endDate, + new Date(), + ) !== 'closed', + ) + : initialBookClubs; setBookClubs(filteredBookClubs); }; diff --git a/src/features/bookclub/components/BookClubMainPage.tsx b/src/features/bookclub/components/BookClubMainPage.tsx index 92ce900c..462c8846 100644 --- a/src/features/bookclub/components/BookClubMainPage.tsx +++ b/src/features/bookclub/components/BookClubMainPage.tsx @@ -9,7 +9,8 @@ import { useRouter } from 'next/navigation'; function BookClubMainPage() { // 커스텀 훅에서 상태와 핸들러 가져오기 - const { bookClubs, setBookClubs, filters, updateFilters } = useBookClubList(); + const { bookClubs, initialBookClubs, setBookClubs, filters, updateFilters } = + useBookClubList(); const router = useRouter(); @@ -45,6 +46,7 @@ function BookClubMainPage() { filters={filters} handleFilterChange={handleFilterChange} bookClubs={bookClubs} + initialBookClubs={initialBookClubs} setBookClubs={setBookClubs} /> diff --git a/src/features/bookclub/hooks/useFetchBookClubList.ts b/src/features/bookclub/hooks/useFetchBookClubList.ts index c7fd8b99..26d69a49 100644 --- a/src/features/bookclub/hooks/useFetchBookClubList.ts +++ b/src/features/bookclub/hooks/useFetchBookClubList.ts @@ -4,6 +4,7 @@ import { BookClub, BookClubParams } from '@/types/bookclubs'; const useBookClubList = () => { const [bookClubs, setBookClubs] = useState([]); + const [initialBookClubs, setInitialBookClubs] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [filters, setFilters] = useState({ @@ -21,6 +22,8 @@ const useBookClubList = () => { try { const data = await getBookClubs(filters); // API 호출 setBookClubs(data); + setInitialBookClubs(data); + console.log(data); } catch (err) { setError(err as Error); } finally { @@ -38,6 +41,7 @@ const useBookClubList = () => { return { bookClubs, + initialBookClubs, setBookClubs, loading, error, From b4ad6bdec67f5c32fece1be2a5b532d5103157eb Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 12:21:39 +0900 Subject: [PATCH 16/18] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=EC=9A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-layout/FilterSection.tsx | 10 +++++----- src/features/bookclub/components/ClubListSection.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/common-layout/FilterSection.tsx b/src/components/common-layout/FilterSection.tsx index 137649e4..adda2138 100644 --- a/src/components/common-layout/FilterSection.tsx +++ b/src/components/common-layout/FilterSection.tsx @@ -6,7 +6,7 @@ import { ChangeEvent, Dispatch, SetStateAction, - useEffect, + // useEffect, useState, } from 'react'; import SortingButton from '@/components/sorting-button/SortingButton'; @@ -29,10 +29,10 @@ function FilterSection({ }: CategoryTabsProps) { const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능 - useEffect(() => { - console.log('체크 상태: ', showAvailableOnly); - console.log('신청 가능 모임: ', bookClubs); - }); + // useEffect(() => { + // console.log('체크 상태: ', showAvailableOnly); + // console.log('신청 가능 모임: ', bookClubs); + // }); const toggleAvailableOnly = (e: ChangeEvent) => { const isChecked = e.target.checked; diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx index 9f7d6bca..9c7a6ee9 100644 --- a/src/features/bookclub/components/ClubListSection.tsx +++ b/src/features/bookclub/components/ClubListSection.tsx @@ -7,6 +7,7 @@ import { useMemo } from 'react'; import EmptyState from '@/components/common-layout/EmptyState'; import { clubStatus } from '@/lib/utils/clubUtils'; import { BookClub } from '@/types/bookclubs'; +import { useLikeClub, useUnLikeClub } from '@/lib/hooks'; interface ClubListSectionProps { bookClubs: BookClub[]; @@ -14,9 +15,15 @@ interface ClubListSectionProps { function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { const router = useRouter(); + const { onConfirmUnLike } = useUnLikeClub(); + const { onConfirmLike } = useLikeClub(); const today = useMemo(() => new Date(), []); + const handleLikeClub = (isLiked: boolean, id: number) => { + isLiked ? onConfirmUnLike(id) : onConfirmLike(id); + }; + return (
{bookClubs?.length > 0 ? ( @@ -42,7 +49,7 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) { club.endDate, today, )} - onLikeClick={() => console.log(`${club.title} 좋아요 클릭`)} + onLikeClick={() => handleLikeClub(club.isLiked, club.id)} onClick={() => router.push(`/bookclub/${club.id}`)} /> )) From 8701596bc63a8bf34f584d173dcda9c634bc72c1 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 15:22:38 +0900 Subject: [PATCH 17/18] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=EB=AA=A8?= =?UTF-8?q?=EC=9E=84=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=ED=82=A4=20=EC=82=AC=EC=9A=A9=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/book-club/bookClubMainAPI.ts | 2 +- .../bookclub/components/BookClubMainPage.tsx | 24 ++++++++--- .../bookclub/hooks/useFetchBookClubList.ts | 43 ++++++++----------- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/src/api/book-club/bookClubMainAPI.ts b/src/api/book-club/bookClubMainAPI.ts index 5eafb190..e5dce58f 100644 --- a/src/api/book-club/bookClubMainAPI.ts +++ b/src/api/book-club/bookClubMainAPI.ts @@ -10,7 +10,7 @@ export const bookClubMainAPI = { //북클럽 목록 조회 getBookClubs: async (params?: BookClubParams) => { - await apiClient.get('/book-clubs', { params }); + return await apiClient.get('/book-clubs', { params }); }, //단일 북클럽 조회 diff --git a/src/features/bookclub/components/BookClubMainPage.tsx b/src/features/bookclub/components/BookClubMainPage.tsx index 462c8846..8d027d28 100644 --- a/src/features/bookclub/components/BookClubMainPage.tsx +++ b/src/features/bookclub/components/BookClubMainPage.tsx @@ -6,11 +6,17 @@ import { useAuthStore } from '@/store/authStore'; import ClubListSection from './ClubListSection'; import Button from '@/components/button/Button'; import { useRouter } from 'next/navigation'; +import Loading from '@/components/loading/Loading'; function BookClubMainPage() { - // 커스텀 훅에서 상태와 핸들러 가져오기 - const { bookClubs, initialBookClubs, setBookClubs, filters, updateFilters } = - useBookClubList(); + const { + clubList, + initialBookClubs, + setClubList, + isLoading, + filters, + updateFilters, + } = useBookClubList(); const router = useRouter(); @@ -45,11 +51,17 @@ function BookClubMainPage() { - + {isLoading ? ( +
+ +
+ ) : ( + + )} ); } diff --git a/src/features/bookclub/hooks/useFetchBookClubList.ts b/src/features/bookclub/hooks/useFetchBookClubList.ts index 26d69a49..1f150f5d 100644 --- a/src/features/bookclub/hooks/useFetchBookClubList.ts +++ b/src/features/bookclub/hooks/useFetchBookClubList.ts @@ -1,12 +1,12 @@ -import { useState, useEffect, useCallback } from 'react'; -import { getBookClubs } from '../api/bookclubApi'; +import { useState, useEffect } from 'react'; import { BookClub, BookClubParams } from '@/types/bookclubs'; +import { useQuery } from '@tanstack/react-query'; +import { bookClubs } from '@/api/book-club/react-query'; const useBookClubList = () => { - const [bookClubs, setBookClubs] = useState([]); + // TODO: 신청 가능 필터 param 추가시 clubList, initialBookClubs 상태 관리x + const [clubList, setClubList] = useState([]); const [initialBookClubs, setInitialBookClubs] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); const [filters, setFilters] = useState({ bookClubType: 'ALL', meetingType: 'ALL', @@ -16,34 +16,29 @@ const useBookClubList = () => { searchKeyword: '', }); - const fetchData = useCallback(async () => { - setLoading(true); - setError(null); - try { - const data = await getBookClubs(filters); // API 호출 - setBookClubs(data); - setInitialBookClubs(data); - console.log(data); - } catch (err) { - setError(err as Error); - } finally { - setLoading(false); - } - }, [filters]); + const { data, isLoading, error } = useQuery({ + ...bookClubs.all(filters), + }); + const clubInfo = data?.data.bookClubs; + + // TODO: param 추가시, useEffect 대신 clubInfo 직접 사용 useEffect(() => { - fetchData(); - }, [fetchData]); + if (clubInfo) { + setClubList(clubInfo); + setInitialBookClubs(clubInfo); // 초기 데이터 설정 + } + }, [clubInfo]); const updateFilters = (newFilters: Partial) => { setFilters((prevFilters) => ({ ...prevFilters, ...newFilters })); }; return { - bookClubs, + clubList, initialBookClubs, - setBookClubs, - loading, + setClubList, + isLoading, error, filters, updateFilters, From 014b2d8d98dcc0a8fc94e0a9ff1c085124990f82 Mon Sep 17 00:00:00 2001 From: wynter24 Date: Fri, 3 Jan 2025 15:55:47 +0900 Subject: [PATCH 18/18] =?UTF-8?q?=F0=9F=90=9B[Fix]=20=EC=B0=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20FilterBar=20=EB=88=84=EB=9D=BD=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80=20#264?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/club-wish/components/WishPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/club-wish/components/WishPage.tsx b/src/features/club-wish/components/WishPage.tsx index 6cb3f6ac..272aa81b 100644 --- a/src/features/club-wish/components/WishPage.tsx +++ b/src/features/club-wish/components/WishPage.tsx @@ -23,6 +23,7 @@ function WishPage() { handleFilterChange={() => {}} bookClubs={mockBookClubs} setBookClubs={() => {}} + initialBookClubs={[]} />