- {/* 1. 도서 상세 카드 */}
- {/* 2. 하단 상세 정보 영역 */}
- {/* 내비게이션 바 */}
-
+
- {/* 탭 컨텐츠 영역 */}
- {activeTab === "정기모임" && (
- <>
- {/* 2-1. 모임 정보 카드 */}
-
-
- {/* 2-2. 조별 멤버 리스트 영역 (Frame 2087328794) */}
-
- {/* 조 선택 필터 (Frame 2087328778) */}
- t.teamName)}
- selectedTeam={selectedTeam}
- onSelect={setSelectedTeam}
- />
-
- {/* 선택된 조의 멤버 리스트 섹션 (Frame 2087328793) */}
- {currentTeamData && (
-
-
+ {activeTab === "meeting" && (
+
)}
- {activeTab === '발제' && (
+ {activeTab === "topic" && (
setIsDebateWriting((v) => !v)}
onSendDebate={(text) => {
- console.log('send:', text);
- // TODO: API 붙일 곳
+ console.log("topic send:", { meetingId, text });
+ // TODO: topic API 연결부
return true;
}}
items={MOCK_DEBATE_TOPICS}
/>
)}
-
- {activeTab === '한줄평' && (
+ {activeTab === "review" && (
setIsReviewWriting((v) => !v)}
onSendReview={(text, rating) => {
- console.log('review send:', { text, rating });
+ console.log("review send:", { meetingId, text, rating });
+ // TODO: review API 연결부
return true;
}}
items={MOCK_REVIEWS}
- onClickMore={(id) => console.log('more:', id)}
+ onClickMore={(id) => console.log("more:", id)}
/>
)}
@@ -122,4 +127,4 @@ export default function AdminBookDetailPage() {
);
-}
+}
\ No newline at end of file
diff --git a/src/app/groups/[id]/bookcase/page.tsx b/src/app/groups/[id]/bookcase/page.tsx
index 16fc909..d85cf86 100644
--- a/src/app/groups/[id]/bookcase/page.tsx
+++ b/src/app/groups/[id]/bookcase/page.tsx
@@ -1,80 +1,94 @@
"use client";
-
import BookcaseCard from "@/components/base-ui/Bookcase/BookcaseCard";
import FloatingFab from "@/components/base-ui/Float";
+import { BookcaseApiResponse, groupByGeneration } from "@/types/groups/bookcasehome";
import { useParams, useRouter } from "next/navigation";
-// [1] 더미 데이터 생성 헬퍼 함수
-const createMockBooks = (generation: string, count: number) =>
- Array.from({ length: count }).map((_, i) => ({
- id: `${generation}-${i}`,
- title: "채식주의자",
- author: "한강 지음",
- imageUrl: "/dummy_book_cover.png",
- category: {
- generation: generation,
- genre: "소설/시/희곡",
- },
- rating: 4.5,
- }));
-
-// [2] 기수별 데이터 그룹화
-const BOOKCASE_DATA = [
- {
- generation: "8기",
- books: createMockBooks("8기", 8),
- },
- {
- generation: "7기",
- books: createMockBooks("7기", 7),
+//API 형태 그대로
+const MOCK_BOOKCASE_RESPONSE: BookcaseApiResponse = {
+ isSuccess: true,
+ code: "COMMON200",
+ message: "성공입니다.",
+ result: {
+ bookShelfInfoList: [
+ {
+ meetingInfo: { meetingId: 2, generation: 1, tag: "MEETING", averageRate: 3 },
+ bookInfo: {
+ bookId: "9791192625133",
+ title: "거인의 어깨 1 - 벤저민 그레이엄, 워런 버핏, 피터 린치에게 배우다",
+ author: "홍진채",
+ imgUrl: null,
+ },
+ },
+ {
+ meetingInfo: { meetingId: 1, generation: 1, tag: "MEETING", averageRate: 4.5 },
+ bookInfo: {
+ bookId: "9791192005317",
+ title: "살인자ㅇ난감",
+ author: "꼬마비",
+ imgUrl: null,
+ },
+ },
+ {
+ meetingInfo: { meetingId: 3, generation: 2, tag: "MEETING", averageRate: 3.8 },
+ bookInfo: {
+ bookId: "1",
+ title: "더미 책",
+ author: "더미 작가",
+ imgUrl: null,
+ },
+ },
+ ],
+ hasNext: false,
+ nextCursor: null,
},
-];
+};
export default function BookcasePage() {
const router = useRouter();
const params = useParams();
const groupId = params.id as string;
- const handleGoToDetail = (bookId: string) => {
- // 경로: /groups/[id]/admin/bookcase/[bookId]
- router.push(`/groups/${groupId}/bookcase/${bookId}`);
- };
+ const sections = groupByGeneration(MOCK_BOOKCASE_RESPONSE.result.bookShelfInfoList);
+
+ type TabParam = "topic" | "review" | "meeting";
+
+ const handleGoToDetail = (meetingId: number, tab: TabParam) => {
+ router.push(`/groups/${groupId}/bookcase/${meetingId}?tab=${tab}`);
+};
return (
{/* 책장 리스트 영역 */}
- {BOOKCASE_DATA.map((group) => (
+ {sections.map((section) => (
{/* 기수 라벨 */}
- {group.generation}
+ {section.generationLabel}
{/* 카드 리스트 */}
-
- {group.books.map((book) => (
+ {section.books.map((book) => (
handleGoToDetail(book.id)}
- onReviewClick={() => handleGoToDetail(book.id)}
- onMeetingClick={() => handleGoToDetail(book.id)}
+ onTopicClick={() => handleGoToDetail(book.meetingId, "topic")}
+ onReviewClick={() => handleGoToDetail(book.meetingId, "review")}
+ onMeetingClick={() => handleGoToDetail(book.meetingId, "meeting")}
/>
))}
-
))}
diff --git a/src/app/groups/[id]/layout.tsx b/src/app/groups/[id]/layout.tsx
index 6e061b4..77a7e43 100644
--- a/src/app/groups/[id]/layout.tsx
+++ b/src/app/groups/[id]/layout.tsx
@@ -18,7 +18,7 @@ export default function GroupDetailLayout({
const [isSidebarExpanded, setIsSidebarExpanded] = useState(false);
// 공지사항 작성 페이지, 책장 작성 페이지, 회원 관리 페이지는 레이아웃 적용 X
- if (pathname?.includes('/admin/notice/new') || pathname?.includes('/admin/bookcase/new') || pathname?.includes('/admin/members') || pathname?.includes('/admin/applicant')) {
+ if (pathname?.includes('/admin/notice/new') || pathname?.includes('/admin/bookcase') || pathname?.includes('/admin/members') || pathname?.includes('/admin/applicant')) {
return <>{children};
}
diff --git a/src/app/groups/[id]/page.tsx b/src/app/groups/[id]/page.tsx
index 76be133..3d5be6f 100644
--- a/src/app/groups/[id]/page.tsx
+++ b/src/app/groups/[id]/page.tsx
@@ -140,7 +140,7 @@ export default function AdminGroupHomePage() {
router.push(joinUrl)}
+ onClick={() => router.push(`${Number(groupId)}/notice/4`)}
bgColorVar="--Primary_1"
borderColorVar="--Primary_1"
textColorVar="--White"
diff --git a/src/app/groups/create/page.tsx b/src/app/groups/create/page.tsx
index 5c14412..c2810d9 100644
--- a/src/app/groups/create/page.tsx
+++ b/src/app/groups/create/page.tsx
@@ -1,13 +1,30 @@
-'use client'
+"use client";
+
import React, { useMemo, useRef, useState } from "react";
-import Image from 'next/image';
+import Image from "next/image";
import Link from "next/link";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
import StepDot from "@/components/base-ui/Group-Create/StepDot";
import Chip from "@/components/base-ui/Group-Create/Chip";
-import { BOOK_CATEGORIES, BookCategory, PARTICIPANT_LABEL_TO_TYPE, ParticipantLabel, PARTICIPANTS, ParticipantType } from "@/types/groups/groups";
+import {
+ BOOK_CATEGORIES,
+ BookCategory,
+ PARTICIPANT_LABEL_TO_TYPE,
+ ParticipantLabel,
+ PARTICIPANTS,
+ ParticipantType,
+} from "@/types/groups/groups";
+
+import { mapBookCategoriesToCodes } from "@/types/groups/clubCreate";
+import { useClubNameCheckQuery } from "@/hooks/queries/useCreateClubQueries";
+import {
+ useCreateClubMutation,
+ useUploadClubImageMutation,
+} from "@/hooks/mutations/useCreateClubMutation";
type NameCheckState = "idle" | "checking" | "available" | "duplicate";
-
type SnsLink = { label: string; url: string };
function cx(...classes: (string | false | null | undefined)[]) {
@@ -15,26 +32,35 @@ function cx(...classes: (string | false | null | undefined)[]) {
}
const autoResize = (el: HTMLTextAreaElement) => {
- el.style.height = "0px"; // shrink 먼저
+ el.style.height = "0px";
const H = el.scrollHeight + 5;
- el.style.height = `${H}px`; // 내용만큼 늘리기
+ el.style.height = `${H}px`;
};
export default function CreateClubWizardPreview() {
+ const router = useRouter();
+
const [step, setStep] = useState(1);
// Step 1
const [clubName, setClubName] = useState("");
const [clubDescription, setClubDescription] = useState("");
const [nameCheck, setNameCheck] = useState("idle");
+
const DuplicationCheckisConfirmed = nameCheck === "available";
- const DuplicationCheckisDisabled = !clubName.trim() || nameCheck === "checking" || DuplicationCheckisConfirmed ;
+ const DuplicationCheckisDisabled =
+ !clubName.trim() || nameCheck === "checking" || DuplicationCheckisConfirmed;
// Step 2
const [profileMode, setProfileMode] = useState<"default" | "upload">("default");
const [selectedImageUrl, setSelectedImageUrl] = useState(null);
- const [visibility, setVisibility] = useState<"공개" | "비공개" | null>(null);
+ const [profileImageUrl, setProfileImageUrl] = useState(null);
+
+ // ✅ 서버에 그대로 보내는 값: open(boolean)
+ const [open, setOpen] = useState(null);
+
const fileRef = useRef(null);
+
// Step 3
const [selectedCategories, setSelectedCategories] = useState([]);
const [selectedParticipants, setSelectedParticipants] = useState([]);
@@ -43,452 +69,533 @@ export default function CreateClubWizardPreview() {
// Step 4
const [links, setLinks] = useState([{ label: "", url: "" }]);
+ // API hooks
+ const nameQuery = useClubNameCheckQuery(clubName); // enabled:false라 버튼에서 refetch로만 호출됨
+ const uploadImage = useUploadClubImageMutation();
+ const createClub = useCreateClubMutation();
+
const canNext = useMemo(() => {
- if (step === 1) return Boolean(clubName.trim() && clubDescription.trim() && nameCheck === "available");
- if (step === 2) return Boolean(visibility);
- if (step === 3) return selectedCategories.length > 0 && selectedParticipants.length > 0 && activityArea.trim();
- if (step === 4) return true; // 선택
+ if (step === 1)
+ return Boolean(clubName.trim() && clubDescription.trim() && nameCheck === "available");
+
+ if (step === 2) {
+ // ✅ 공개/비공개는 필수
+ if (open === null) return false;
+
+ // 업로드 모드면 업로드 완료(=profileImageUrl 확보)까지 기다리게
+ if (profileMode === "upload") return Boolean(profileImageUrl) && !uploadImage.isPending;
+
+ // 기본 프로필 모드는 그냥 통과
+ return true;
+ }
+
+ if (step === 3)
+ return selectedCategories.length > 0 && selectedParticipants.length > 0 && activityArea.trim().length > 0;
+
+ if (step === 4) return true;
+
return false;
- }, [step, clubName, clubDescription,nameCheck ,visibility, selectedCategories, selectedParticipants, activityArea]);
+ }, [
+ step,
+ clubName,
+ clubDescription,
+ nameCheck,
+ open,
+ profileMode,
+ profileImageUrl,
+ uploadImage.isPending,
+ selectedCategories,
+ selectedParticipants,
+ activityArea,
+ ]);
const onPrev = () => setStep((v) => Math.max(1, v - 1));
const onNext = () => setStep((v) => Math.min(4, v + 1));
- const fakeCheckName = () => {
- if (!clubName.trim()) return;
+ // 2) 모임 이름 중복 확인
+ const onCheckName = async () => {
+ const name = clubName.trim();
+ if (!name) return;
+
setNameCheck("checking");
- setTimeout(() => {
- // 그냥 프리뷰용: 이름에 "중복" 들어가면 duplicate 처리
- if (clubName.includes("중복")) setNameCheck("duplicate");
- else setNameCheck("available");
- }, 500);
+
+ try {
+ const r = await nameQuery.refetch();
+ const isDuplicate = r.data; // boolean
+
+ if (isDuplicate) {
+ setNameCheck("duplicate");
+ toast.error("이미 존재하는 모임 이름입니다.");
+ } else {
+ setNameCheck("available");
+ toast.success("사용 가능한 모임 이름입니다.");
+ }
+ } catch {
+ setNameCheck("idle");
+ toast.error("이름 중복 확인 실패");
+ }
};
- const pickImage = (file: File) => {
+ // 이미지 선택: 미리보기 + 업로드 + imageUrl 저장
+ const pickImage = async (file: File) => {
+ // 로컬 미리보기
const reader = new FileReader();
reader.onloadend = () => setSelectedImageUrl(reader.result as string);
reader.readAsDataURL(file);
+
+ try {
+ const imageUrl = await uploadImage.mutateAsync(file);
+ setProfileImageUrl(imageUrl);
+ toast.success("프로필 이미지 업로드 완료");
+ } catch {
+ setProfileImageUrl(null);
+ toast.error("이미지 업로드 실패");
+
+ // ✅ 같은 파일 다시 선택 가능하게 input 초기화
+ if (fileRef.current) fileRef.current.value = "";
+ }
};
const toggleWithLimit = (arr: T[], item: T, limit: number) => {
- if (arr.includes(item)) return arr.filter((x) => x !== item);
- if (arr.length >= limit) return arr;
- return [...arr, item];
-};
+ if (arr.includes(item)) return arr.filter((x) => x !== item);
+ if (arr.length >= limit) return arr;
+ return [...arr, item];
+ };
const updateLink = (idx: number, patch: Partial) => {
setLinks((prev) => prev.map((it, i) => (i === idx ? { ...it, ...patch } : it)));
};
- const addLinkRow = () => {
- setLinks((prev) => [...prev, { label: "", url: "" }]);
- };
+ const addLinkRow = () => setLinks((prev) => [...prev, { label: "", url: "" }]);
const removeLinkRow = (idx: number) => {
setLinks((prev) => prev.filter((_, i) => i !== idx));
};
- return (
-
-
-
- {/* breadcrumb */}
-
-
-
모임
-
-
-
-
-
-
-
새 모임 생성
-
-
+ // 모임 생성 (최종)
+ const onSubmitCreateClub = async () => {
+ // 안전장치: Step2 open 미선택이면 막기
+ if (open === null) {
+ toast.error("공개/비공개를 선택해주세요.");
+ return;
+ }
+
+ try {
+ const category = mapBookCategoriesToCodes(selectedCategories);
+ const participantTypes: ParticipantType[] = selectedParticipants.map(
+ (label) => PARTICIPANT_LABEL_TO_TYPE[label]
+ );
+
+ const linksPayload = links
+ .map((l) => ({ label: l.label.trim(), link: l.url.trim() }))
+ .filter((l) => l.label && l.link);
+
+ const payload = {
+ name: clubName.trim(),
+ description: clubDescription.trim(),
+ profileImageUrl: profileMode === "upload" ? profileImageUrl : null,
+ region: activityArea.trim(),
+ category,
+ participantTypes,
+ links: linksPayload,
+ open: open === true, // ✅ boolean 확정
+ };
+
+ // ✅ 규칙대로면 service에서 res.result(string)만 반환해야 함
+ const msg = await createClub.mutateAsync(payload);
+ toast.success(msg.result);
+
+ router.push("/groups");
+ } catch {
+ toast.error("모임 생성 실패");
+ }
+ };
-
- {/* step dots */}
-
-
-
+ return (
+
+ {/* breadcrumb */}
+
+
+
모임
+
+
+
+
+
새 모임 생성
+
+
+
+ {/* step dots */}
+
- {/* 본문 박스 */}
-
-
+
{/* STEP 1 */}
{step === 1 && (
-
-
- 독서 모임 이름을 입력해주세요!
-
-
-
-
- {nameCheck === "checking" ? "확인중" : "중복확인"}
-
-
-
-
-
- 다른 이름을 입력하거나, 기수 또는 지역명을 추가해 구분해주세요.
-
-
-
- {nameCheck === "available" && (
-
사용 가능한 모임 이름입니다.
- )}
- {nameCheck === "duplicate" && (
-
이미 존재하는 모임 이름입니다.
- )}
-
- 모임의 소개글을 입력해주세요!
-
-