From 230314956c5fb65e5addd94d8d99e25e8a38b3cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 15:27:34 +0900
Subject: [PATCH 01/13] =?UTF-8?q?feat=20:=20APIResponse=20=ED=95=98?=
 =?UTF-8?q?=EB=82=98=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/api/types.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/lib/api/types.ts

diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
new file mode 100644
index 0000000..b835249
--- /dev/null
+++ b/src/lib/api/types.ts
@@ -0,0 +1,7 @@
+// ~/types/auth.ts에 정의되어 있는건 아는데 거기 있는 거보단 여기가 맞을 거 같아서 빼두겠습니다.
+export type ApiResponse<T> = {
+  isSuccess: boolean;
+  code: string;
+  message: string;
+  result: T;
+};
\ No newline at end of file

From 833509837a47b16d55234ed4f1d52c5cab082bc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 16:50:47 +0900
Subject: [PATCH 02/13] =?UTF-8?q?feat=20:=20=EB=AA=A8=EC=9E=84=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A3=BC=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/api/endpoints/Clubs.ts | 6 ++++++
 src/lib/api/endpoints/Image.ts | 8 ++++++++
 src/lib/api/endpoints/index.ts | 2 ++
 3 files changed, 16 insertions(+)
 create mode 100644 src/lib/api/endpoints/Clubs.ts
 create mode 100644 src/lib/api/endpoints/Image.ts

diff --git a/src/lib/api/endpoints/Clubs.ts b/src/lib/api/endpoints/Clubs.ts
new file mode 100644
index 0000000..14c393e
--- /dev/null
+++ b/src/lib/api/endpoints/Clubs.ts
@@ -0,0 +1,6 @@
+import { API_BASE_URL } from "../endpoints";
+
+export const CLUBS = {
+  create: `${API_BASE_URL}/clubs`, // POST /api/clubs
+  checkName: `${API_BASE_URL}/clubs/check-name`, // GET /api/clubs/check-name?clubName=
+} as const;
\ No newline at end of file
diff --git a/src/lib/api/endpoints/Image.ts b/src/lib/api/endpoints/Image.ts
new file mode 100644
index 0000000..9237435
--- /dev/null
+++ b/src/lib/api/endpoints/Image.ts
@@ -0,0 +1,8 @@
+import { API_BASE_URL } from "../endpoints";
+
+export type ImageUploadType = "PROFILE" | "CLUB" | "NOTICE";
+
+export const IMAGE = {
+  uploadUrl: (type: ImageUploadType) =>
+    `${API_BASE_URL}/image/${type}/upload-url`, // POST
+} as const;
\ No newline at end of file
diff --git a/src/lib/api/endpoints/index.ts b/src/lib/api/endpoints/index.ts
index 463a8a2..cdbbf5f 100644
--- a/src/lib/api/endpoints/index.ts
+++ b/src/lib/api/endpoints/index.ts
@@ -3,3 +3,5 @@ export * from "./auth";
 export * from "./bookstory";
 export * from "./member";
 export * from "./book";
+export * from "./Clubs";
+export * from "./Image";

From 2e0b84fe1865b3ad7a617f175dc4a25ddfc52373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 16:51:11 +0900
Subject: [PATCH 03/13] =?UTF-8?q?chore=20:=20=EB=AA=A8=EC=9E=84=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20type=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/groups/clubCreate.ts | 61 ++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/types/groups/clubCreate.ts

diff --git a/src/types/groups/clubCreate.ts b/src/types/groups/clubCreate.ts
new file mode 100644
index 0000000..70324e3
--- /dev/null
+++ b/src/types/groups/clubCreate.ts
@@ -0,0 +1,61 @@
+// src/types/groups/clubCreate.ts
+import type { BookCategory, ParticipantType } from "@/types/groups/groups";
+
+
+export type ClubLink = {
+  link: string;
+  label: string;
+};
+
+export type CreateClubRequest = {
+  name: string;
+  description: string;
+  profileImageUrl: string | null; // 없으면 null로 보내는 게 깔끔
+  region: string;
+  category: ClubCategoryCode[];
+  participantTypes: ParticipantType[];
+  links: ClubLink[];
+  open: boolean;
+};
+
+
+// src/types/groups/clubCreate.ts
+
+export type ClubCategoryCode =
+  | "FICTION_POETRY_DRAMA"
+  | "ESSAY"
+  | "HUMANITIES"
+  | "SOCIAL_SCIENCE"
+  | "POLITICS_DIPLOMACY_DEFENSE"
+  | "ECONOMY_MANAGEMENT"
+  | "SELF_DEVELOPMENT"
+  | "HISTORY_CULTURE"
+  | "SCIENCE"
+  | "COMPUTER_IT"
+  | "ART_POP_CULTURE"
+  | "TRAVEL"
+  | "FOREIGN_LANGUAGE"
+  | "CHILDREN_BOOKS"
+  | "RELIGION_PHILOSOPHY";
+
+export const BOOK_CATEGORY_TO_CODE: Record<BookCategory, ClubCategoryCode> = {
+  "여행": "TRAVEL",
+  "외국어": "FOREIGN_LANGUAGE",
+  "어린이/청소년": "CHILDREN_BOOKS",       
+  "종교/철학": "RELIGION_PHILOSOPHY",
+  "소설/시/희곡": "FICTION_POETRY_DRAMA",
+  "에세이": "ESSAY",
+  "인문학": "HUMANITIES",
+  "사회과학": "SOCIAL_SCIENCE",             
+  "정치/외교/국방": "POLITICS_DIPLOMACY_DEFENSE",
+  "경제/경영": "ECONOMY_MANAGEMENT",        
+  "자기계발": "SELF_DEVELOPMENT",           
+  "역사/문화": "HISTORY_CULTURE",
+  "과학": "SCIENCE",
+  "컴퓨터/IT": "COMPUTER_IT",
+  "예술/대중문화": "ART_POP_CULTURE",      
+};
+
+export function mapBookCategoriesToCodes(categories: BookCategory[]) {
+  return categories.map((c) => BOOK_CATEGORY_TO_CODE[c]);
+}
\ No newline at end of file

From d2f45cbc9dac54613b7329c86f160f7d300a8303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 16:51:49 +0900
Subject: [PATCH 04/13] =?UTF-8?q?feat=20:=20=EB=AA=A8=EC=9E=84=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=ED=8E=98=EC=9D=B4=EC=A7=80=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/groups/create/page.tsx               | 993 ++++++++++---------
 src/hooks/mutations/useCreateClubMutation.ts |  19 +
 src/hooks/queries/useCreateClubQueries.ts    |  17 +
 src/services/clubService.ts                  |  19 +
 src/services/imageService.ts                 |  48 +
 5 files changed, 622 insertions(+), 474 deletions(-)
 create mode 100644 src/hooks/mutations/useCreateClubMutation.ts
 create mode 100644 src/hooks/queries/useCreateClubQueries.ts
 create mode 100644 src/services/clubService.ts
 create mode 100644 src/services/imageService.ts

diff --git a/src/app/groups/create/page.tsx b/src/app/groups/create/page.tsx
index 5c14412..8effe14 100644
--- a/src/app/groups/create/page.tsx
+++ b/src/app/groups/create/page.tsx
@@ -1,13 +1,29 @@
-'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 +31,32 @@ 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<NameCheckState>("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<string | null>(null);
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null); 
   const [visibility, setVisibility] = useState<"공개" | "비공개" | null>(null);
   const fileRef = useRef<HTMLInputElement | null>(null);
+
   // Step 3
   const [selectedCategories, setSelectedCategories] = useState<BookCategory[]>([]);
   const [selectedParticipants, setSelectedParticipants] = useState<ParticipantLabel[]>([]);
@@ -43,38 +65,90 @@ export default function CreateClubWizardPreview() {
   // Step 4
   const [links, setLinks] = useState<SnsLink[]>([{ 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 === 2) {
+      // 공개/비공개는 필수
+      if (!visibility) 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();
-    if (step === 4) return true; // 선택
+    if (step === 4) return true;
     return false;
-  }, [step, clubName, clubDescription,nameCheck ,visibility, selectedCategories, selectedParticipants, activityArea]);
+  }, [
+    step,
+    clubName,
+    clubDescription,
+    nameCheck,
+    visibility,
+    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 (e) {
+      setNameCheck("idle");
+      toast.error("이름 중복 확인 실패");
+    }
   };
 
-  const pickImage = (file: File) => {
+  // 이미지 선택: 미리보기 + presigned 업로드 + 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 (e) {
+
+      setProfileImageUrl(null);
+      toast.error("이미지 업로드 실패");
+    }
   };
 
   const toggleWithLimit = <T,>(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<SnsLink>) => {
     setLinks((prev) => prev.map((it, i) => (i === idx ? { ...it, ...patch } : it)));
@@ -88,407 +162,405 @@ export default function CreateClubWizardPreview() {
     setLinks((prev) => prev.filter((_, i) => i !== idx));
   };
 
+  // 모임 생성 (최종)
+  const onSubmitCreateClub = async () => {
+    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: visibility === "공개",
+      };
+
+
+      const msg = await createClub.mutateAsync(payload);
+
+      toast.success(typeof msg === "string" ? msg : msg?.result ?? "성공");
+      router.push("/groups");
+    } catch (e) {
+      toast.error("모임 생성 실패");
+    }
+  };
+
   return (
     <div className="min-h-screen max-w-[1440px] mx-auto ">
-      
-
-        {/* breadcrumb */}
-        <div className="flex gap-5 px-[10px] py-3 border-b border-Gray-2 t:mx-4 ">
-          <Link href="/groups" className="shrink-0">
-            <p className="body_1 t:subhead_4_1 cursor-pointer">모임</p>
-          </Link>
-
-          <Image
-            className="block t:hidden shrink-0"
-            src="/Polygon.svg"
-            alt=""
-            width={9}
-            height={9}
-          />
-
-          <Image
-            className="hidden t:block shrink-0"
-            src="/Polygon.svg"
-            alt=""
-            width={16}
-            height={16}
-          />
-
-          <p className="body_1 t:subhead_4_1">새 모임 생성</p>
-        </div>
-
-
-        <div className="w-full max-w-[1040px] mx-auto px-6 t:px-10 pt-6 pb-16 ">
-          {/* step dots */}
-          <div className="mb-7">
-            <div className="flex items-center gap-6">
-              <StepDot n={1} current={step} />
-              <StepDot n={2} current={step} />
-              <StepDot n={3} current={step} />
-              <StepDot n={4} current={step} />
-            </div>
+      {/* breadcrumb */}
+      <div className="flex gap-5 px-[10px] py-3 border-b border-Gray-2 t:mx-4 ">
+        <Link href="/groups" className="shrink-0">
+          <p className="body_1 t:subhead_4_1 cursor-pointer">모임</p>
+        </Link>
+
+        <Image className="block t:hidden shrink-0" src="/Polygon.svg" alt="" width={9} height={9} />
+        <Image className="hidden t:block shrink-0" src="/Polygon.svg" alt="" width={16} height={16} />
+        <p className="body_1 t:subhead_4_1">새 모임 생성</p>
+      </div>
+
+      <div className="w-full max-w-[1040px] mx-auto px-6 t:px-10 pt-6 pb-16 ">
+        {/* step dots */}
+        <div className="mb-7">
+          <div className="flex items-center gap-6">
+            <StepDot n={1} current={step} />
+            <StepDot n={2} current={step} />
+            <StepDot n={3} current={step} />
+            <StepDot n={4} current={step} />
           </div>
+        </div>
 
-        {/* 본문 박스 */}
         <main className="">
-
           {/* STEP 1 */}
           {step === 1 && (
-                  <section>
-                    <h2 className="subhead_4_1 t:subhead_1">
-                      독서 모임 이름을 입력해주세요!
-                    </h2>
-
-                    <div className="mt-4 flex items-center gap-5">
-                      <input
-                        value={clubName}
-                        onChange={(e) => {
-                          setClubName(e.target.value);
-                          setNameCheck("idle");
-                        }}
-                        placeholder="독서 모임 이름을 입력해주세요."
-                        className="w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] p-4 outline-none  bg-white  body_1_3 t:subhead_4_1"
-                      />
-
-                      <button
-                        type="button"
-                        onClick={fakeCheckName}
-                        disabled={DuplicationCheckisDisabled}
-                        aria-busy={nameCheck === "checking"}
-                        className={cx(
-                          `
-                            flex justify-center items-center
-                            w-[100px] h-[48px] t:w-[128px] t:h-[56px]
-                            px-1 py-3 rounded-[8px]
-                            body_1_2
-                            hover:opacity-90 active:opacity-80
-                            disabled:opacity-50 disabled:cursor-not-allowed
-                          `,
-                          DuplicationCheckisConfirmed 
-                            ? "bg-primary-1 text-White border border-primary-1 disabled:opacity-100 disabled:cursor-default"
-                            : "border border-Subbrown-3 bg-Subbrown-4 text-primary-3"
-                        )}
-                      >
-                        {nameCheck === "checking" ? "확인중" : "중복확인"}
-                      </button>
-
-                    </div>
-
-                    <div className="body_2_3 t:body_1_3 text-Gray-3 mt-3">
-                      다른 이름을 입력하거나, 기수 또는 지역명을 추가해 구분해주세요.
-                      <br />
-                      예) 독서재량 2기, 독서재량 서울, 북적북적 인문학팀
-                    </div>
-
-                    <div className="mt-1 text-[12px]">
-                      {nameCheck === "available" && (
-                        <p className="text-[#367216] body_1_4">사용 가능한 모임 이름입니다.</p>
-                      )}
-                      {nameCheck === "duplicate" && (
-                        <p className="text-[#FF8045] body_1_4">이미 존재하는 모임 이름입니다.</p>
-                      )}
-                    </div>
-
-                    <h2 className="mt-[56px] subhead_1 subhead_4_1 t:subhead_1">
-                      모임의 소개글을 입력해주세요!
-                    </h2>
-                    <textarea
-                      value={clubDescription}
-                      onChange={(e) => {
-                        setClubDescription(e.target.value);
-                        autoResize(e.currentTarget);
-                      }}
-                      onInput={(e) => autoResize(e.currentTarget)} // 초기/붙여넣기 대응
-                      placeholder="자유롭게 입력해주세요! (500자 제한)"
-                      className="
-                        w-full
-                        min-h-[200px] t:min-h-[260px]
-                        rounded-[8px]
-                        border border-Subbrown-4
-                        bg-White
-                        p-5 mt-5
-                        no-scrollbar
-                        resize-none
-                        outline-none
-                        Body_1_3
-                        placeholder:text-Gray-3
-                      "
-                    />                        
-                    <div className="mt-6 flex justify-end">
-                      <button
-                        type="button"
-                        onClick={onNext}
-                        disabled={!canNext}
-                        className={cx(
-                          "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
-                          "w-full t:w-[148px]",
-                          "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                          "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
-                        )}
-                      >
-                        다음
-                      </button>
-
-                    </div>
-                  </section>
+            <section>
+              <h2 className="subhead_4_1 t:subhead_1">독서 모임 이름을 입력해주세요!</h2>
+
+              <div className="mt-4 flex items-center gap-5">
+                <input
+                  value={clubName}
+                  onChange={(e) => {
+                    setClubName(e.target.value);
+                    setNameCheck("idle");
+                  }}
+                  placeholder="독서 모임 이름을 입력해주세요."
+                  className="w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] p-4 outline-none  bg-white  body_1_3 t:subhead_4_1"
+                />
+
+                <button
+                  type="button"
+                  onClick={onCheckName}
+                  disabled={DuplicationCheckisDisabled}
+                  aria-busy={nameCheck === "checking"}
+                  className={cx(
+                    `
+                      flex justify-center items-center
+                      w-[100px] h-[48px] t:w-[128px] t:h-[56px]
+                      px-1 py-3 rounded-[8px]
+                      body_1_2
+                      hover:opacity-90 active:opacity-80
+                      disabled:opacity-50 disabled:cursor-not-allowed
+                    `,
+                    DuplicationCheckisConfirmed
+                      ? "bg-primary-1 text-White border border-primary-1 disabled:opacity-100 disabled:cursor-default"
+                      : "border border-Subbrown-3 bg-Subbrown-4 text-primary-3"
+                  )}
+                >
+                  {nameCheck === "checking" ? "확인중" : "중복확인"}
+                </button>
+              </div>
+
+              <div className="body_2_3 t:body_1_3 text-Gray-3 mt-3">
+                다른 이름을 입력하거나, 기수 또는 지역명을 추가해 구분해주세요.
+                <br />
+                예) 독서재량 2기, 독서재량 서울, 북적북적 인문학팀
+              </div>
+
+              <div className="mt-1 text-[12px]">
+                {nameCheck === "available" && (
+                  <p className="text-[#367216] body_1_4">사용 가능한 모임 이름입니다.</p>
+                )}
+                {nameCheck === "duplicate" && (
+                  <p className="text-[#FF8045] body_1_4">이미 존재하는 모임 이름입니다.</p>
+                )}
+              </div>
+
+              <h2 className="mt-[56px] subhead_1 subhead_4_1 t:subhead_1">모임의 소개글을 입력해주세요!</h2>
+              <textarea
+                value={clubDescription}
+                onChange={(e) => {
+                  setClubDescription(e.target.value);
+                  autoResize(e.currentTarget);
+                }}
+                onInput={(e) => autoResize(e.currentTarget)}
+                placeholder="자유롭게 입력해주세요! (500자 제한)"
+                className="
+                  w-full
+                  min-h-[200px] t:min-h-[260px]
+                  rounded-[8px]
+                  border border-Subbrown-4
+                  bg-White
+                  p-5 mt-5
+                  no-scrollbar
+                  resize-none
+                  outline-none
+                  Body_1_3
+                  placeholder:text-Gray-3
+                "
+              />
+
+              <div className="mt-6 flex justify-end">
+                <button
+                  type="button"
+                  onClick={onNext}
+                  disabled={!canNext}
+                  className={cx(
+                    "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "w-full t:w-[148px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  다음
+                </button>
+              </div>
+            </section>
           )}
+
           {/* STEP 2 */}
           {step === 2 && (
-              <section>
-                <h2 className="subhead_4_1 t:subhead_1 text-Gray-7">
-                  모임의 프로필 사진을 업로드 해주세요!
-                </h2>
-
-                <div className="mt-4 flex items-start gap-6">
-                  {/* profile preview */}
-                  <div className="relative w-[96px] h-[80px] t:w-[194px] t:h-[162px] rounded-[10px] overflow-hidden bg-Subbrown-4 flex items-center justify-center">
-                    {selectedImageUrl ? (
-                      <img
-                        src={selectedImageUrl}
-                        alt="preview"
-                        className="w-full h-full object-cover"
+            <section>
+              <h2 className="subhead_4_1 t:subhead_1 text-Gray-7">모임의 프로필 사진을 업로드 해주세요!</h2>
+
+              <div className="mt-4 flex items-start gap-6">
+                <div className="relative w-[96px] h-[80px] t:w-[194px] t:h-[162px] rounded-[10px] overflow-hidden bg-Subbrown-4 flex items-center justify-center">
+                  {selectedImageUrl ? (
+                    <img src={selectedImageUrl} alt="preview" className="w-full h-full object-cover" />
+                  ) : (
+                    <>
+                      <Image
+                        src="/default_profile_2.svg"
+                        alt="기본 프로필"
+                        fill
+                        sizes="96px"
+                        className="object-contain t:hidden"
+                        priority
                       />
-                    ) : (
-                      <>
-                        {/* mobile default */}
-                        <Image
-                          src="/default_profile_2.svg"
-                          alt="기본 프로필"
-                          fill
-                          sizes="96px"
-                          className="object-contain t:hidden"
-                          priority
-                        />
-                        {/* t~ desktop default */}
-                        <Image
-                          src="/default_profile_1.svg"
-                          alt="기본 프로필"
-                          fill
-                          sizes="194px"
-                          className="object-contain hidden t:block"
-                          priority
-                        />
-                      </>
-                    )}
-                  </div>
-
-                  {/* action buttons */}
-                  <div className="flex flex-col gap-2">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setSelectedImageUrl(null);
-                        setProfileMode("default");
-                      }}
-                      className={cx(
-                        "flex justify-center items-center gap-[10px] w-[200px] h-[36px] px-4 py-3 rounded-[8px] border body_1_3",
-                        "hover:brightness-98 hover:-translate-y-[1px] cursor-pointer",
-                        profileMode === "default"
-                          ? "bg-primary-2 border-primary-2 text-White"
-                          : "bg-Subbrown-4 border-Subbrown-3 text-primary-3"
-                      )}
-                    >
-                      기본 프로필 사용하기
-                    </button>
-
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setProfileMode("upload");
-                        fileRef.current?.click();
-                      }}
-                      className={cx(
-                        "flex justify-center items-center gap-[10px] w-[200px] h-[36px] px-4 py-3 rounded-[8px] border body_1_3",
-                        "hover:brightness-98 hover:-translate-y-[1px] cursor-pointer",
-                        profileMode === "upload"
-                          ? "bg-primary-2 border-primary-1 text-White"
-                          : "bg-Subbrown-4 border-Subbrown-3 text-primary-3"
-                      )}
-                    >
-                      사진 업로드하기
-                    </button>
-
-                    <input
-                      ref={fileRef}
-                      type="file"
-                      accept="image/*"
-                      className="hidden"
-                      onChange={(e) => {
-                        const f = e.target.files?.[0];
-                        if (f) {
-                          setProfileMode("upload");
-                          pickImage(f);
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-
-                <h2 className="mt-7 subhead_4_1 t:subhead_1 text-Gray-7">
-                  모임의 공개여부를 알려주세요!
-                </h2>
-
-                <div className="mt-4 flex flex-col gap-3 text-Gray-7">
-                  <button
-                    type="button"
-                    onClick={() => setVisibility("공개")}
-                    className="flex items-center gap-3 cursor-pointer select-none text-left"
-                  >
-                    <Image
-                      src={visibility === "공개" ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"}
-                      alt=""
-                      width={24}
-                      height={24}
-                    />
-                    <span className="subhead_4_1">공개</span>
-                  </button>
-
-                  <button
-                    type="button"
-                    onClick={() => setVisibility("비공개")}
-                    className="flex items-center gap-3 cursor-pointer select-none text-left"
-                  >
-                    <Image
-                      src={visibility === "비공개" ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"}
-                      alt=""
-                      width={24}
-                      height={24}
-                    />
-                    <span className="subhead_4_1">비공개</span>
-                  </button>
+                      <Image
+                        src="/default_profile_1.svg"
+                        alt="기본 프로필"
+                        fill
+                        sizes="194px"
+                        className="object-contain hidden t:block"
+                        priority
+                      />
+                    </>
+                  )}
                 </div>
 
-                {/* bottom buttons: mobile = 다음 풀폭, t~ = 이전/다음 오른쪽 정렬 */}
-                <div className="mt-7 flex justify-end t:gap-3">
+                <div className="flex flex-col gap-2">
                   <button
                     type="button"
-                    onClick={onPrev}
+                    onClick={() => {
+                      setSelectedImageUrl(null);
+                      setProfileImageUrl(null);
+                      setProfileMode("default");
+                    }}
                     className={cx(
-                      "hidden t:flex justify-center items-center gap-[10px] w-[148px] h-[48px] px-4 py-3 rounded-[8px]",
-                      "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                      "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
-                      
+                      "flex justify-center items-center gap-[10px] w-[200px] h-[36px] px-4 py-3 rounded-[8px] border body_1_3",
+                      "hover:opacity-90 active:opacity-80",
+                      profileMode === "default"
+                        ? "bg-primary-1 border-primary-1 text-White"
+                        : "bg-Subbrown-4 border-Subbrown-3 text-primary-3"
                     )}
                   >
-                    이전
+                    기본 프로필 사용하기
                   </button>
 
                   <button
                     type="button"
-                    onClick={onNext}
-                    disabled={!canNext}
+                    onClick={() => {
+                      setProfileMode("upload");
+                      fileRef.current?.click();
+                    }}
                     className={cx(
-                      "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
-                      "w-full t:w-[148px]",
-                      "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                      "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                      "flex justify-center items-center gap-[10px] w-[200px] h-[36px] px-4 py-3 rounded-[8px] border body_1_3",
+                      "hover:opacity-90 active:opacity-80",
+                      profileMode === "upload"
+                        ? "bg-primary-1 border-primary-1 text-White"
+                        : "bg-Subbrown-4 border-Subbrown-3 text-primary-3"
                     )}
                   >
-                    다음
+                    사진 업로드하기
                   </button>
+
+                  <input
+                    ref={fileRef}
+                    type="file"
+                    accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
+                    className="hidden"
+                    onChange={(e) => {
+                      const f = e.target.files?.[0];
+                      if (f) {
+                        setProfileMode("upload");
+                        pickImage(f);
+                      }
+                    }}
+                  />
+
+                  {profileMode === "upload" && (
+                    <p className="body_1_4 text-Gray-3">
+                      {uploadImage.isPending
+                        ? "업로드 중..."
+                        : profileImageUrl
+                        ? "업로드 완료"
+                        : "업로드 실패 시 다시 시도"}
+                    </p>
+                  )}
                 </div>
-              </section>
+              </div>
+
+              <h2 className="mt-7 subhead_4_1 t:subhead_1 text-Gray-7">모임의 공개여부를 알려주세요!</h2>
+
+              <div className="mt-4 flex flex-col gap-3 text-Gray-7">
+                <button type="button" onClick={() => setVisibility("공개")} className="flex items-center gap-3 cursor-pointer select-none text-left">
+                  <Image src={visibility === "공개" ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"} alt="" width={24} height={24} />
+                  <span className="subhead_4_1">공개</span>
+                </button>
+
+                <button type="button" onClick={() => setVisibility("비공개")} className="flex items-center gap-3 cursor-pointer select-none text-left">
+                  <Image src={visibility === "비공개" ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"} alt="" width={24} height={24} />
+                  <span className="subhead_4_1">비공개</span>
+                </button>
+              </div>
+
+              <div className="mt-7 flex justify-end t:gap-3">
+                <button
+                  type="button"
+                  onClick={onPrev}
+                  className={cx(
+                    "hidden t:flex justify-center items-center gap-[10px] w-[148px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  이전
+                </button>
+
+                <button
+                  type="button"
+                  onClick={onNext}
+                  disabled={!canNext}
+                  className={cx(
+                    "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "w-full t:w-[148px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  다음
+                </button>
+              </div>
+            </section>
           )}
+
           {/* STEP 3 */}
           {step === 3 && (
-                  <section>
-                    <h2 className="subhead_4_1 t:subhead_1">
-                      선호하는 독서 카테고리를 선택해주세요!{" "}
-                      <span className="hidden t:box Gray_4 caption_1_1">(최대 6개)</span>
-                    </h2>
-
-                    <div className="mt-4 flex flex-wrap gap-2.5">
-                      {BOOK_CATEGORIES.map((c) => (
-                        <Chip
-                          key={c}
-                          label={c}
-                          selected={selectedCategories.includes(c)}
-                          onClick={() => setSelectedCategories((prev) => toggleWithLimit(prev, c, 6))}
-                        />
-                      ))}
-                    </div>
-
-                    <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]">활동 지역을 입력해주세요!</h2>
-                    <input
-                      value={activityArea}
-                      onChange={(e) => setActivityArea(e.target.value)}
-                      placeholder="활동 지역을 입력해주세요 (40자 제한)"
-                      className="mt-4 w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] body_1_3 bg-white px-4 outline-none"
-                    />
-
-                    <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]">
-                      모임의 대상을 선택해주세요! <span className="text-[12px] text-[#8D8D8D]">(최대 6개)</span>
-                    </h2>
-
-                    <div className="mt-4 flex flex-wrap gap-2.5">
-                      {PARTICIPANTS.map((p) => (
-                        <Chip
-                          key={p}
-                          label={p}
-                          selected={selectedParticipants.includes(p)}
-                          onClick={() => setSelectedParticipants((prev) => toggleWithLimit(prev, p, 6))}
-                        />
-                      ))}
-                    </div>
-
-                    
-                  {/* bottom buttons: mobile = 다음 풀폭, t~ = 이전/다음 오른쪽 정렬 */}
-                  <div className="mt-7 flex justify-end t:gap-3">
-                    <button
-                      type="button"
-                      onClick={onPrev}
-                      className={cx(
-                        "hidden t:flex justify-center items-center gap-[10px] w-[148px] h-[48px] px-4 py-3 rounded-[8px]",
-                        "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                        "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
-                      )}
-                    >
-                      이전
-                    </button>
-
-                    <button
-                    type="button"
-                    onClick={onNext}
-                    disabled={!canNext}
-                    className={cx(
-                      "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
-                      "w-full t:w-[148px]",
-                      "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                      "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
-                    )}
-                  >
-                    다음
-                  </button>
-                  </div>
-                  </section>
+            <section>
+              <h2 className="subhead_4_1 t:subhead_1">
+                선호하는 독서 카테고리를 선택해주세요!{" "}
+                <span className="text-[12px] text-[#8D8D8D]">(최대 6개)</span>
+              </h2>
+
+              <div className="mt-4 flex flex-wrap gap-2.5">
+                {BOOK_CATEGORIES.map((c) => (
+                  <Chip
+                    key={c}
+                    label={c}
+                    selected={selectedCategories.includes(c)}
+                    onClick={() => setSelectedCategories((prev) => toggleWithLimit(prev, c, 6))}
+                  />
+                ))}
+              </div>
+
+              <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]">활동 지역을 입력해주세요!</h2>
+              <input
+                value={activityArea}
+                onChange={(e) => setActivityArea(e.target.value)}
+                placeholder="활동 지역을 입력해주세요 (40자 제한)"
+                className="mt-4 w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] body_1_3 bg-white px-4 outline-none"
+              />
+
+              <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]">
+                모임의 대상을 선택해주세요! <span className="text-[12px] text-[#8D8D8D]">(최대 6개)</span>
+              </h2>
+
+              <div className="mt-4 flex flex-wrap gap-2.5">
+                {PARTICIPANTS.map((p) => (
+                  <Chip
+                    key={p}
+                    label={p}
+                    selected={selectedParticipants.includes(p)}
+                    onClick={() => setSelectedParticipants((prev) => toggleWithLimit(prev, p, 6))}
+                  />
+                ))}
+              </div>
+
+              <div className="mt-7 flex justify-end t:gap-3">
+                <button
+                  type="button"
+                  onClick={onPrev}
+                  className={cx(
+                    "hidden t:flex justify-center items-center gap-[10px] w-[148px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  이전
+                </button>
+
+                <button
+                  type="button"
+                  onClick={onNext}
+                  disabled={!canNext}
+                  className={cx(
+                    "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "w-full t:w-[148px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  다음
+                </button>
+              </div>
+            </section>
           )}
 
           {/* STEP 4 */}
           {step === 4 && (
-                  <section>
-                    <h2 className="subhead_4_1 t:subhead_1 mb-4">
-                      SNS나 링크 연동이 있다면 해주세요! (선택)
-                    </h2>
-
-                  <div className="">
-                  {links.map((it, idx) => (
-                    <div
-                      key={idx}
+            <section>
+              <h2 className="subhead_4_1 t:subhead_1 mb-4">SNS나 링크 연동이 있다면 해주세요! (선택)</h2>
+
+              <div className="">
+                {links.map((it, idx) => (
+                  <div key={idx} className="flex flex-col gap-4 py-3 t:flex-row t:items-center">
+                    <input
+                      value={it.label}
+                      onChange={(e) => updateLink(idx, { label: e.target.value })}
+                      placeholder="링크 대체 텍스트 입력(최대 20자)"
+                      maxLength={20}
                       className="
-                        flex flex-col gap-4 py-3
-                        t:flex-row t:items-center
+                        w-full t:w-[35%] h-[44px] t:h-[56px]
+                        rounded-[8px]
+                        border border-Subbrown-4
+                        bg-White
+                        px-4
+                        outline-none
+                        body_1_3
+                        placeholder:text-Gray-3
                       "
-                    >
+                    />
+
+                    <div className="flex gap-3 w-full t:flex-1">
                       <input
-                        value={it.label}
-                        onChange={(e) => updateLink(idx, { label: e.target.value })}
-                        placeholder="링크 대체 텍스트 입력(최대 20자)"
-                        maxLength={20}
+                        value={it.url}
+                        onChange={(e) => updateLink(idx, { url: e.target.value })}
+                        placeholder="링크 입력(최대 100자)"
+                        maxLength={100}
                         className="
-                          w-full t:w-[35%] h-[44px] t:h-[56px]
+                          flex-1
+                          h-[44px] t:h-[56px]
                           rounded-[8px]
-                          border border-Subbrown-4
-                          bg-White
+                          border border-Subbrown-4 bg-White
                           px-4
                           outline-none
                           body_1_3
@@ -496,99 +568,72 @@ export default function CreateClubWizardPreview() {
                         "
                       />
 
-                      <div className="flex gap-3 w-full t:flex-1">
-                        <input
-                          value={it.url}
-                          onChange={(e) => updateLink(idx, { url: e.target.value })}
-                          placeholder="링크 입력(최대 100자)"
-                          maxLength={100}
-                          className="
-                            flex-1
-                            h-[44px] t:h-[56px]
-                            rounded-[8px]
-                            border border-Subbrown-4 bg-White
-                            px-4
-                            outline-none
-                            body_1_3
-                            placeholder:text-Gray-3
-                          "
-                        />
-
-                        <button
-                          type="button"
-                          onClick={() => removeLinkRow(idx)}
-                          disabled={links.length <= 1}
-                          className="
-                            w-[44px] h-[44px] t:w-[56px] t:h-[56px]
-                            rounded-[8px]
-                            bg-Gray-1
-                            flex items-center justify-center
-                            hover:brightness-97 hover:-translate-y-[1px] cursor-pointer
-                            disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-Gray-1
-                          "
-                          title="삭제"
-                        >
-                          <Image
-                            src={"/icon_minus_1.svg"}
-                            alt=""
-                            width={24}
-                            height={24}
-                          />
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-
-                  <button
-                    type="button"
-                    onClick={addLinkRow}
-                    className="
-                      w-full h-[56px] rounded-[8px]
-                      bg-Gray-1
-                      flex items-center justify-center
-                      hover:brightness-97 hover:-translate-y-[1px] cursor-pointer
-                    "
-                    title="추가"
-                  >
-                    <Image src={"/icon_plus_1.svg"} alt="" width={24} height={24} />
-                  </button>
-                </div>
-
-
-
-
-                    <div className="mt-10 flex justify-between">
                       <button
-                      type="button"
-                      onClick={onPrev}
-                      className={cx(
-                        "hidden t:flex justify-center items-center gap-[10px] w-[148px] h-[48px] px-4 py-3 rounded-[8px]",
-                        "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                        "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
-                      )}
-                    >
-                      이전
-                    </button>
-
-                    <button
-                      type="button"
-                      onClick={onNext}
-                      disabled={!canNext}
-                      className={cx(
-                        "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
-                        "w-full t:w-[148px]",
-                        "bg-primary-1 text-White hover:brightness-90 hover:-translate-y-[1px] cursor-pointer",
-                        "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
-                      )}
-                    >
-                      다음
-                    </button>
-
+                        type="button"
+                        onClick={() => removeLinkRow(idx)}
+                        disabled={links.length <= 1}
+                        className="
+                          w-[44px] h-[44px] t:w-[56px] t:h-[56px]
+                          rounded-[8px]
+                          bg-Gray-1
+                          flex items-center justify-center
+                          hover:bg-Gray-2
+                          disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-Gray-1
+                        "
+                        title="삭제"
+                      >
+                        <Image src={"/icon_minus_1.svg"} alt="" width={24} height={24} />
+                      </button>
                     </div>
-                  </section>
+                  </div>
+                ))}
+
+                <button
+                  type="button"
+                  onClick={addLinkRow}
+                  className="
+                    w-full h-[56px] rounded-[8px]
+                    bg-Gray-1
+                    flex items-center justify-center
+                    hover:bg-Gray-2
+                  "
+                  title="추가"
+                >
+                  <Image src={"/icon_plus_1.svg"} alt="" width={24} height={24} />
+                </button>
+              </div>
+
+              <div className="mt-10 flex justify-between">
+                <button
+                  type="button"
+                  onClick={onPrev}
+                  className={cx(
+                    "hidden t:flex justify-center items-center gap-[10px] w-[148px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  이전
+                </button>
+
+                <button
+                  type="button"
+                  onClick={onSubmitCreateClub}
+                  disabled={!canNext || createClub.isPending || uploadImage.isPending}
+                  className={cx(
+                    "flex justify-center items-center gap-[10px] h-[48px] px-4 py-3 rounded-[8px]",
+                    "w-full t:w-[148px]",
+                    "bg-primary-1 hover:bg-primary-3 text-White",
+                    "disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"
+                  )}
+                >
+                  {createClub.isPending ? "생성 중..." : "모임 생성"}
+                </button>
+              </div>
+            </section>
           )}
         </main>
-        </div>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/hooks/mutations/useCreateClubMutation.ts b/src/hooks/mutations/useCreateClubMutation.ts
new file mode 100644
index 0000000..04d84d7
--- /dev/null
+++ b/src/hooks/mutations/useCreateClubMutation.ts
@@ -0,0 +1,19 @@
+"use client";
+
+import { clubService } from "@/services/clubService";
+import { imageService } from "@/services/imageService";
+import { CreateClubRequest } from "@/types/groups/clubCreate";
+import { useMutation } from "@tanstack/react-query";
+
+
+export const useUploadClubImageMutation = () => {
+  return useMutation({
+    mutationFn: (file: File) => imageService.uploadClubImage(file),
+  });
+};
+
+export const useCreateClubMutation = () => {
+  return useMutation({
+    mutationFn: (payload: CreateClubRequest) => clubService.createClub(payload),
+  });
+};
\ No newline at end of file
diff --git a/src/hooks/queries/useCreateClubQueries.ts b/src/hooks/queries/useCreateClubQueries.ts
new file mode 100644
index 0000000..4f972f0
--- /dev/null
+++ b/src/hooks/queries/useCreateClubQueries.ts
@@ -0,0 +1,17 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { clubService } from "@/services/clubService";
+
+export const useClubNameCheckQuery = (clubName: string) => {
+  const name = clubName.trim();
+
+  return useQuery({
+    queryKey: ["clubs", "check-name", name],
+    queryFn: async () => {
+      const res = await clubService.checkNameDuplicate(name);
+      return res.result;
+    },
+    enabled: false,
+  });
+};
\ No newline at end of file
diff --git a/src/services/clubService.ts b/src/services/clubService.ts
new file mode 100644
index 0000000..fd5dc69
--- /dev/null
+++ b/src/services/clubService.ts
@@ -0,0 +1,19 @@
+// src/services/clubService.ts
+import { apiClient } from "@/lib/api/client";
+import { CLUBS } from "@/lib/api/endpoints/Clubs";
+import type { ApiResponse } from "@/lib/api/types";
+import { CreateClubRequest } from "@/types/groups/clubCreate";
+
+
+export const clubService = {
+  // GET /api/clubs/check-name?clubName=...
+  // result: boolean (보통 true=중복, false=사용가능)
+  checkNameDuplicate: (clubName: string) =>
+    apiClient.get<ApiResponse<boolean>>(CLUBS.checkName, {
+      params: { clubName },
+    }),
+
+  // POST /api/clubs
+  createClub: (payload: CreateClubRequest) =>
+    apiClient.post<ApiResponse<string>>(CLUBS.create, payload),
+};
\ No newline at end of file
diff --git a/src/services/imageService.ts b/src/services/imageService.ts
new file mode 100644
index 0000000..4301f11
--- /dev/null
+++ b/src/services/imageService.ts
@@ -0,0 +1,48 @@
+// src/services/imageService.ts
+import { apiClient } from "@/lib/api/client";
+import type { ApiResponse } from "@/lib/api/types";
+import { IMAGE, type ImageUploadType } from "@/lib/api/endpoints/Image";
+
+type PresignedRequest = {
+  originalFileName: string;
+  contentType: string;
+};
+
+type PresignedResult = {
+  presignedUrl: string;
+  imageUrl: string;
+};
+
+async function putToPresignedUrl(presignedUrl: string, file: File, contentType: string) {
+  const res = await fetch(presignedUrl, {
+    method: "PUT",
+    headers: { "Content-Type": contentType },
+    body: file,
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`S3 업로드 실패 (HTTP ${res.status}) ${text}`);
+  }
+}
+
+export const imageService = {
+  // POST /api/image/{type}/upload-url
+  getUploadUrl: (type: ImageUploadType, body: PresignedRequest) =>
+    apiClient.post<ApiResponse<PresignedResult>>(IMAGE.uploadUrl(type), body),
+
+  // ✅ create 페이지에서 쓰는 "CLUB 업로드 한방"
+  uploadClubImage: async (file: File) => {
+    const contentType = file.type || "application/octet-stream";
+
+    const presigned = await imageService.getUploadUrl("CLUB", {
+      originalFileName: file.name,
+      contentType,
+    });
+
+    const { presignedUrl, imageUrl } = presigned.result;
+
+    await putToPresignedUrl(presignedUrl, file, contentType);
+    return imageUrl;
+  },
+};
\ No newline at end of file

From e5dd1d8d49f7bc4bfb69e77d021bcad8e2d2d710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 22:20:47 +0900
Subject: [PATCH 05/13] =?UTF-8?q?fix=20:=20s3=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EA=B7=B8=EB=A6=BC=EC=9D=84=20=EC=93=B0?=
 =?UTF-8?q?=EB=A0=A4=EB=A9=B4=20=EC=9D=B4=EB=A0=87=EA=B2=8C=20=ED=95=B4?=
 =?UTF-8?q?=EC=95=BC=ED=95=9C=EB=8B=A4=EA=B3=A0=20=ED=95=9C=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/next.config.ts b/next.config.ts
index c6b5d61..b427f9f 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -9,6 +9,11 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "image.aladin.co.kr",
       },
+      {
+        protocol: "https",
+        hostname: "checkmo-s3-presigned.s3.ap-northeast-2.amazonaws.com",
+        pathname: "/**",
+      },
     ],
   },
 };

From 57ddc1abe572a132fc891e663d5ac96326cbe8b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 22:21:16 +0900
Subject: [PATCH 06/13] =?UTF-8?q?chore=20:=20=EB=8D=94=EB=AF=B8=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/groups/groupSearchDummy.ts | 185 -----------------------------
 1 file changed, 185 deletions(-)
 delete mode 100644 src/app/groups/groupSearchDummy.ts

diff --git a/src/app/groups/groupSearchDummy.ts b/src/app/groups/groupSearchDummy.ts
deleted file mode 100644
index dd74f87..0000000
--- a/src/app/groups/groupSearchDummy.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-// Dummydata
-
-import type { GroupSummary } from '@/components/base-ui/Group-Search/search_mybookclub';
-import { ClubSummary } from './page';
-
-
-export const mydummyGroup: GroupSummary[] = [
-  { id: '1', name: '모임1' },
-  { id: '2', name: '모임2' },
-  { id: '3', name: '모임3' },
-  { id: '4', name: '모임4' },
-  { id: '1', name: '모임11241' },
-  { id: '2', name: '모임51212' },
-  { id: '3', name: '모임125153' },
-  { id: '4', name: '모임12512514' },
-  
-];
-
-export const dummyClubs: ClubSummary[] = [
-  {
-    clubId: 201,
-    name: "오늘도 한 페이지",
-    profileImageUrl: null,
-    category: [1,12,13],
-    public: true,
-    applytype: "Yes",
-    region: "서울",
-    participantTypes: ["STUDENT", "MEETING"],
-    reason: "함께 성장하는 모임입니다.",
-  },
-  {
-    clubId: 202,
-    name: "퇴근 후 북클럽",
-    profileImageUrl: null,
-    category: [2,6],
-    public: true,
-    applytype: "Wait",
-    region: "경기",
-    participantTypes: ["WORKER", "OFFLINE"],
-    reason: "퇴근 후 알찬 시간",
-  },
-  {
-    clubId: 203,
-    name: "새벽 독서단",
-    profileImageUrl: null,
-    category: [11,3],
-    public: false,
-    applytype: "Wait",
-    region: "온라인",
-    participantTypes: ["ONLINE"],
-    reason: "새벽 기상 미션",
-  },
-  {
-    clubId: 204,
-    name: "고전 읽는 사람들",
-    profileImageUrl: null,
-    category: [4,12],
-    public: true,
-    applytype: "No",
-    region: "부산",
-    participantTypes: ["CLUB", "OFFLINE"],
-    reason: "고전의 깊이",
-  },
-  {
-    clubId: 205,
-    name: "SF/판타지 탐험대",
-    profileImageUrl: null,
-    category: [13,5],
-    public: true,
-    applytype: "Yes",
-    region: "대구",
-    participantTypes: ["MEETING", "OFFLINE"],
-    reason: "상상력을 자극하는 시간",
-  },
-  {
-    clubId: 206,
-    name: "비문학 한 주 한 권",
-    profileImageUrl: null,
-    category: [5,11,6],
-    public: true,
-    applytype: "Yes",
-    region: "인천",
-    participantTypes: ["WORKER", "MEETING"],
-    reason: "지식을 넓히는 독서",
-  },
-  {
-    clubId: 207,
-    name: "자기계발 실천 모임",
-    profileImageUrl: null,
-    category: [7],
-    public: false,
-    applytype: "No",
-    region: "온라인",
-    participantTypes: ["ONLINE", "WORKER"],
-    reason: "자기계발 끝판왕",
-  },
-  {
-    clubId: 208,
-    name: "시와 산책",
-    profileImageUrl: null,
-    category: [8],
-    public: true,
-    applytype: "Wait",
-    region: "서울",
-    participantTypes: ["STUDENT", "OFFLINE"],
-    reason: "감성을 채우는 시간",
-  },
-  {
-    clubId: 209,
-    name: "추리소설 연구회",
-    profileImageUrl: null,
-    category: [9],
-    public: true,
-    applytype: "Yes",
-    region: "대전",
-    participantTypes: ["CLUB", "MEETING"],
-    reason: "범인은 누구인가",
-  },
-  {
-    clubId: 210,
-    name: "에세이 공방",
-    profileImageUrl: null,
-    category: [10],
-    public: true,
-    applytype: "Wait",
-    region: "광주",
-    participantTypes: ["MEETING", "OFFLINE"],
-    reason: "글쓰기의 즐거움",
-  },
-  {
-    clubId: 211,
-    name: "경제 뉴스 같이 읽기",
-    profileImageUrl: null,
-    category: [11],
-    public: false,
-    applytype: "No",
-    region: "온라인",
-    participantTypes: ["ONLINE", "WORKER"],
-    reason: "경제를 보는 눈",
-  },
-  {
-    clubId: 212,
-    name: "철학 입문 스터디",
-    profileImageUrl: null,
-    category: [12],
-    public: true,
-    applytype: "Yes",
-    region: "서울",
-    participantTypes: ["STUDENT", "CLUB"],
-    reason: "생각의 깊이를 더하다",
-  },
-  {
-    clubId: 213,
-    name: "영어 원서 챌린지",
-    profileImageUrl: null,
-    category: [13],
-    public: true,
-    applytype: "Wait",
-    region: "온라인",
-    participantTypes: ["ONLINE", "STUDENT"],
-    reason: "영어 실력 향상",
-  },
-  {
-    clubId: 214,
-    name: "그림책 어른 모임",
-    profileImageUrl: null,
-    category: [14],
-    public: true,
-    applytype: "Yes",
-    region: "경기",
-    participantTypes: ["MEETING", "OFFLINE"],
-    reason: "동심으로 돌아가는 시간",
-  },
-  {
-    clubId: 215,
-    name: "월간 책 수다방",
-    profileImageUrl: null,
-    category: [15],
-    public: false,
-    applytype: "Wait",
-    region: "부산",
-    participantTypes: ["CLUB", "OFFLINE"],
-    reason: "책 수다의 매력",
-  },
-];

From e4c38ebc1f66d8dcdf8800dfd586e74b58f8a7a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 22:22:06 +0900
Subject: [PATCH 07/13] =?UTF-8?q?feat=20:=20=EA=B2=80=EC=83=89=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/mutations/useSearchClubMutations.ts | 13 +++
 src/hooks/queries/useSearchClubQueries.ts     | 63 ++++++++++++
 src/lib/api/endpoints/Clubs.ts                |  4 +
 src/services/clubService.ts                   | 44 ++++++++-
 src/types/groups/clubsearch.ts                | 98 +++++++++++++++++++
 5 files changed, 221 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/mutations/useSearchClubMutations.ts
 create mode 100644 src/hooks/queries/useSearchClubQueries.ts
 create mode 100644 src/types/groups/clubsearch.ts

diff --git a/src/hooks/mutations/useSearchClubMutations.ts b/src/hooks/mutations/useSearchClubMutations.ts
new file mode 100644
index 0000000..ace2458
--- /dev/null
+++ b/src/hooks/mutations/useSearchClubMutations.ts
@@ -0,0 +1,13 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { clubService } from "@/services/clubService";
+import type { ClubJoinRequest } from "@/types/groups/clubsearch";
+
+type Vars = { clubId: number; body: ClubJoinRequest };
+
+export function useClubJoinMutation() {
+  return useMutation<string, Error, Vars>({
+    mutationFn: ({ clubId, body }) => clubService.joinClub(clubId, body),
+  });
+}
\ No newline at end of file
diff --git a/src/hooks/queries/useSearchClubQueries.ts b/src/hooks/queries/useSearchClubQueries.ts
new file mode 100644
index 0000000..a416ce4
--- /dev/null
+++ b/src/hooks/queries/useSearchClubQueries.ts
@@ -0,0 +1,63 @@
+"use client";
+
+import {
+  useInfiniteQuery,
+  useQuery,
+  type InfiniteData,
+} from "@tanstack/react-query";
+import { clubService } from "@/services/clubService";
+import type {
+  ClubSearchParams,
+  ClubSearchResult,
+  MyClubsResult,
+  RecommendationsResult,
+} from "@/types/groups/clubsearch";
+
+export const clubQueryKeys = {
+  myClubs: ["clubs", "my"] as const,
+  recommendations: ["clubs", "recommendations"] as const,
+  search: (params: Omit<ClubSearchParams, "cursorId">) =>
+    ["clubs", "search", params] as const,
+};
+
+export function useMyClubsQuery() {
+  return useQuery<MyClubsResult>({
+    queryKey: clubQueryKeys.myClubs,
+    queryFn: clubService.getMyClubs,
+  });
+}
+
+export function useClubRecommendationsQuery(enabled: boolean) {
+  return useQuery<RecommendationsResult>({
+    queryKey: clubQueryKeys.recommendations,
+    queryFn: clubService.getRecommendations,
+    enabled,
+  });
+}
+
+export function useInfiniteClubSearchQuery(
+  params: Omit<ClubSearchParams, "cursorId">,
+  enabled: boolean
+) {
+  return useInfiniteQuery<
+    ClubSearchResult,
+    Error,
+    InfiniteData<ClubSearchResult>,
+    ReturnType<typeof clubQueryKeys.search>,
+    number | undefined
+  >({
+    queryKey: clubQueryKeys.search(params),
+    enabled,
+    
+    initialPageParam: undefined,
+
+    queryFn: ({ pageParam }) =>
+      clubService.searchClubs({
+        ...params,
+        cursorId: pageParam, // undefined면 service가 제거해줌
+      }),
+
+    getNextPageParam: (lastPage) =>
+      lastPage.hasNext ? (lastPage.nextCursor ?? undefined) : undefined,
+  });
+}
\ No newline at end of file
diff --git a/src/lib/api/endpoints/Clubs.ts b/src/lib/api/endpoints/Clubs.ts
index 14c393e..3a5d995 100644
--- a/src/lib/api/endpoints/Clubs.ts
+++ b/src/lib/api/endpoints/Clubs.ts
@@ -3,4 +3,8 @@ import { API_BASE_URL } from "../endpoints";
 export const CLUBS = {
   create: `${API_BASE_URL}/clubs`, // POST /api/clubs
   checkName: `${API_BASE_URL}/clubs/check-name`, // GET /api/clubs/check-name?clubName=
+  myClubs: `${API_BASE_URL}/me/clubs`,
+  recommendations: `${API_BASE_URL}/clubs/recommendations`,
+  search: `${API_BASE_URL}/clubs/search`,
+  join: (clubId: number) => `${API_BASE_URL}/clubs/${clubId}/join`,
 } as const;
\ No newline at end of file
diff --git a/src/services/clubService.ts b/src/services/clubService.ts
index fd5dc69..ddecb05 100644
--- a/src/services/clubService.ts
+++ b/src/services/clubService.ts
@@ -3,7 +3,14 @@ import { apiClient } from "@/lib/api/client";
 import { CLUBS } from "@/lib/api/endpoints/Clubs";
 import type { ApiResponse } from "@/lib/api/types";
 import { CreateClubRequest } from "@/types/groups/clubCreate";
-
+import type {
+  ClubJoinRequest,
+  ClubJoinResponse,
+  ClubSearchParams,
+  ClubSearchResponse,
+  MyClubsResponse,
+  RecommendationsResponse,
+} from "@/types/groups/clubsearch";
 
 export const clubService = {
   // GET /api/clubs/check-name?clubName=...
@@ -16,4 +23,39 @@ export const clubService = {
   // POST /api/clubs
   createClub: (payload: CreateClubRequest) =>
     apiClient.post<ApiResponse<string>>(CLUBS.create, payload),
+
+
+  getMyClubs: async () => {
+    const res = await apiClient.get<MyClubsResponse>(CLUBS.myClubs);
+    return res.result;
+  },
+
+  getRecommendations: async () => {
+    const res = await apiClient.get<RecommendationsResponse>(
+      CLUBS.recommendations
+    );
+    return res.result;
+  },
+
+  searchClubs: async (params: ClubSearchParams) => {
+  const cleaned: any = { ...params };
+  if (cleaned.cursorId == null) delete cleaned.cursorId;
+  if (typeof cleaned.keyword === "string" && cleaned.keyword.trim() === "") {
+    delete cleaned.keyword;
+  }
+  if (cleaned.inputFilter == null) delete cleaned.inputFilter;
+
+  const res = await apiClient.get<ClubSearchResponse>(CLUBS.search, {
+    params: cleaned,
+  });
+  return res.result;
+},
+
+  joinClub: async (clubId: number, body: ClubJoinRequest) => {
+    const res = await apiClient.post<ClubJoinResponse>(
+      CLUBS.join(clubId),
+      body
+    );
+    return res.result;
+  },
 };
\ No newline at end of file
diff --git a/src/types/groups/clubsearch.ts b/src/types/groups/clubsearch.ts
new file mode 100644
index 0000000..7717e31
--- /dev/null
+++ b/src/types/groups/clubsearch.ts
@@ -0,0 +1,98 @@
+import { ApiResponse } from "@/lib/api/types";
+
+export type MyClubItem = {
+  clubId: number;
+  clubName: string;
+};
+
+export type MyClubsResult = {
+  clubList: MyClubItem[];
+};
+
+export type MyClubsResponse = ApiResponse<MyClubsResult>;
+
+// ===== 2) 모임 추천: GET /api/clubs/recommendations =====
+export type ClubCategoryDTO = {
+  code: string;
+  description: string;
+};
+
+export type ParticipantTypeDTO = {
+  code: string; // ex) STUDENT, WORKER...
+  description: string;
+};
+
+export type ClubLinkDTO = {
+  link: string;
+  label: string;
+};
+
+export type ClubDTO = {
+  clubId: number;
+  name: string;
+  description: string;
+  profileImageUrl: string | null;
+  region: string;
+  category: ClubCategoryDTO[];
+  participantTypes: ParticipantTypeDTO[];
+  links: ClubLinkDTO[];
+  open: boolean;
+};
+
+export type ClubInfoDTO = {
+  club: ClubDTO;
+  myStatus: string; // NONE, REQUESTED, MEMBER ... (백엔드 enum 확정 전)
+};
+
+export type RecommendationItemDTO = {
+  rank: number;
+  clubInfo: ClubInfoDTO;
+  overlapCount: number;
+  activeMemberCount: number;
+  lastActivityAt: string;
+};
+
+export type RecommendationsResult = {
+  recommendations: RecommendationItemDTO[];
+};
+
+export type RecommendationsResponse = ApiResponse<RecommendationsResult>;
+
+// ===== 3) 모임 검색: GET /api/clubs/search =====
+export type InputFilter = "NAME" | "REGION";
+
+export type OutputFilter =
+  | "ALL"
+  | "STUDENT"
+  | "WORKER"
+  | "ONLINE"
+  | "CLUB"
+  | "MEETING"
+  | "OFFLINE";
+
+export type ClubListItemDTO = {
+  club: ClubDTO;
+  myStatus: string;
+};
+
+export type ClubSearchResult = {
+  clubList: ClubListItemDTO[];
+  hasNext: boolean;
+  nextCursor: number | null;
+};
+
+export type ClubSearchResponse = ApiResponse<ClubSearchResult>;
+
+export type ClubSearchParams = {
+  keyword?: string;          
+  inputFilter?: InputFilter | null;
+  outputFilter: OutputFilter;
+  cursorId?: number | null;
+};
+
+// ===== 4) 모임 가입 신청: POST /api/clubs/{clubId}/join =====
+export type ClubJoinRequest = {
+  joinMessage: string;
+};
+
+export type ClubJoinResponse = ApiResponse<string>;
\ No newline at end of file

From 6eb7efb5a4203f6ddbe8eb68d1cccf8c5dbc6118 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 22:23:06 +0900
Subject: [PATCH 08/13] =?UTF-8?q?feat=20:=20API=20=EC=97=B0=EA=B2=B0=20+?=
 =?UTF-8?q?=20=EC=97=B0=EA=B2=B0=EC=97=90=20=EB=94=B0=EB=A5=B8=20UI?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/groups/page.tsx                       | 350 ++++++++++++++----
 .../Group-Search/search_club_apply_modal.tsx  | 119 +++---
 .../search_clublist/search_clublist_item.tsx  | 215 +++++------
 .../Group-Search/search_mybookclub.tsx        |  40 +-
 4 files changed, 428 insertions(+), 296 deletions(-)

diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 934c5cf..d123dcc 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -1,68 +1,254 @@
-'use client'
-import React, { useState } from 'react' 
-import { useRouter } from 'next/navigation';
+"use client";
 
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
 
-import ButtonWithoutImg from '@/components/base-ui/button_without_img';
-import SearchGroupSearch from '@/components/base-ui/Group-Search/search_groupsearch';
-import Mybookclub from '@/components/base-ui/Group-Search/search_mybookclub'
+import ButtonWithoutImg from "@/components/base-ui/button_without_img";
+import SearchGroupSearch from "@/components/base-ui/Group-Search/search_groupsearch";
+import Mybookclub, {
+  type GroupSummary,
+} from "@/components/base-ui/Group-Search/search_mybookclub";
 
-import { mydummyGroup, dummyClubs} from './groupSearchDummy';
-import { ApplyType, Category, ParticipantType } from '@/types/groups/groups';
-import SearchClubListItem from '@/components/base-ui/Group-Search/search_clublist/search_clublist_item';
-import SearchClubApplyModal from '@/components/base-ui/Group-Search/search_club_apply_modal';
+import SearchClubListItem, {
+  type ClubSummary,
+} from "@/components/base-ui/Group-Search/search_clublist/search_clublist_item";
+import SearchClubApplyModal from "@/components/base-ui/Group-Search/search_club_apply_modal";
 
+import type { Category, ParticipantType } from "@/types/groups/groups";
+import type {
+  ClubCategoryDTO,
+  ClubDTO,
+  ClubListItemDTO,
+  ClubSearchParams,
+  InputFilter,
+  OutputFilter,
+  RecommendationItemDTO,
+} from "@/types/groups/clubsearch";
 
-export type { Category, ParticipantType };
+import {
+  useClubRecommendationsQuery,
+  useInfiniteClubSearchQuery,
+  useMyClubsQuery,
+} from "@/hooks/queries/useSearchClubQueries";
+import { useClubJoinMutation } from "@/hooks/mutations/useSearchClubMutations";
 
+function mapCategoryToOutputFilter(category: Category): OutputFilter {
+  switch (category) {
+    case "대학생":
+      return "STUDENT";
+    case "직장인":
+      return "WORKER";
+    case "온라인":
+      return "ONLINE";
+    case "동아리":
+      return "CLUB";
+    case "모임":
+      return "MEETING";
+    case "대면":
+      return "OFFLINE";
+    case "전체":
+    default:
+      return "ALL";
+  }
+}
+
+function mapInputFilter(group: boolean, region: boolean): InputFilter | null {
+  if (group && !region) return "NAME";
+  if (!group && region) return "REGION";
+  return null; // 둘 다 선택 or 둘 다 해제
+}
+
+const CATEGORY_LABEL_TO_NUM: Record<string, number> = {
+  여행: 1,
+  외국어: 2,
+  "어린이/청소년": 3,
+  "종교/철학": 4,
+  "소설/시/희곡": 5,
+  에세이: 6,
+  인문학: 7,
+  과학: 8,
+  "컴퓨터/IT": 9,
+  "경제/경영": 10,
+  자기계발: 11,
+  사회과학: 12,
+  "정치/외교/국방": 13,
+  "역사/문화": 14,
+  "예술/대중문화": 15,
+};
+
+function mapCategories(dto: ClubCategoryDTO[]): number[] {
+  return dto
+    .map((c) => {
+      const byDesc = CATEGORY_LABEL_TO_NUM[c.description];
+      if (byDesc) return byDesc;
+      const n = Number(c.code);
+      return Number.isFinite(n) ? n : null;
+    })
+    .filter((v): v is number => typeof v === "number" && v >= 1 && v <= 15);
+}
+
+function mapApplyType(myStatus: string): "No" | "Wait" | "Yes" {
+  // 안전 기본값: NONE만 No, MEMBER/JOINED류 Yes, 나머지 Wait
+  if (myStatus === "NONE") return "No";
+  if (myStatus === "MEMBER" || myStatus === "JOINED") return "Yes";
+  return "Wait";
+}
+
+function mapClubDTOToSummary(
+  club: ClubDTO,
+  myStatus: string,
+  reason = ""
+): ClubSummary {
+  return {
+    reason,
+    clubId: club.clubId,
+    name: club.name,
+    profileImageUrl: club.profileImageUrl,
+    category: mapCategories(club.category),
+    public: club.open,
+    applytype: mapApplyType(myStatus),
+    region: club.region,
+    participantTypes: club.participantTypes
+      .map((p) => p.code as ParticipantType)
+      .filter(Boolean),
+  };
+}
 
-export interface ClubSummary {
-  reason: string;
-  clubId: number;
-  name: string;
-  profileImageUrl?: string | null; // 없으면 기본 이미지 쓰면 됨
-  category: number[]; // 복수 가능
-  public: boolean;
-  applytype: ApplyType;
-  region: string;
-  participantTypes: ParticipantType[];
+function mapRecommendationItem(item: RecommendationItemDTO): ClubSummary {
+  const reason = `겹치는 모임 ${item.overlapCount}개 · 활동멤버 ${item.activeMemberCount}명`;
+  return mapClubDTOToSummary(item.clubInfo.club, item.clubInfo.myStatus, reason);
+}
+
+function mapSearchItem(item: ClubListItemDTO): ClubSummary {
+  return mapClubDTOToSummary(item.club, item.myStatus);
 }
 
 export default function Searchpage() {
-  // 검색창 요소들
-  const [q, setQ] = useState('');
-  const [category,setCategory] = useState<Category>('전체');
-  const [group, setGroup] = useState<boolean>(false);
-  const [region, setRegion] = useState<boolean>(false);
+  const router = useRouter();
+
+  const [q, setQ] = useState("");
+  const [category, setCategory] = useState<Category>("전체");
+  const [group, setGroup] = useState(false);
+  const [region, setRegion] = useState(false);
+
+  const [appliedParams, setAppliedParams] = useState<Omit<ClubSearchParams, "cursorId"> | null>(null);
+
+  // 추천/검색 모드 판단
+  const isSearchMode = appliedParams !== null;
 
+  // ===== 가입 모달 =====
   const [applyClubId, setApplyClubId] = useState<number | null>(null);
-  const selectedClub = dummyClubs.find((c) => c.clubId === applyClubId) ?? null;
-  // 모달
-  const router = useRouter();
-  
 
-  const onClickVisit = (clubId: number) => {
-    router.push(`/groups/${clubId}`);
-  };
+  // ===== Queries =====
+  const {
+    data: myClubsData,
+    isLoading: myClubsLoading,
+  } = useMyClubsQuery();
+
+  const { data: recData, isLoading: recLoading } = useClubRecommendationsQuery(!isSearchMode);
+
+  // 검색은 appliedParams 있을 때만 실행
+  const {
+    data: searchData,
+    isFetching: searchFetching,
+    hasNextPage,
+    fetchNextPage,
+    refetch: refetchSearch,
+  } = useInfiniteClubSearchQuery(
+    appliedParams ?? { search: undefined, inputFilter: null, outputFilter: "ALL" },
+    isSearchMode
+  );
+
+  // ===== Mutation =====
+  const { mutateAsync: joinAsync, isPending: joinPending } =
+    useClubJoinMutation();
 
-  const onClickApply = (clubId: number) => {
+  // ===== UI 데이터 변환 =====
+  const myGroups: GroupSummary[] = useMemo(() => {
+    const list = myClubsData?.clubList ?? [];
+    return list.map((c) => ({ id: String(c.clubId), name: c.clubName }));
+  }, [myClubsData]);
+
+  const recommendationClubs: ClubSummary[] = useMemo(() => {
+    const list = recData?.recommendations ?? [];
+    return list.map(mapRecommendationItem);
+  }, [recData]);
+
+  const searchedClubs: ClubSummary[] = useMemo(() => {
+    const pages = searchData?.pages ?? [];
+    return pages.flatMap((p) => p.clubList.map(mapSearchItem));
+  }, [searchData]);
+
+  const clubsToRender = isSearchMode ? searchedClubs : recommendationClubs;
+  const selectedClub =
+    clubsToRender.find((c) => c.clubId === applyClubId) ?? null;
+
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!isSearchMode) return;
+    const el = sentinelRef.current;
+    if (!el) return;
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        const first = entries[0];
+        if (!first?.isIntersecting) return;
+        if (hasNextPage && !searchFetching) fetchNextPage();
+      },
+      { root: null, rootMargin: "200px", threshold: 0 }
+    );
+
+    io.observe(el);
+    return () => io.disconnect();
+  }, [isSearchMode, hasNextPage, searchFetching, fetchNextPage]);
+
+  // ===== Handlers =====
+  const onClickVisit = (clubId: number) => router.push(`/groups/${clubId}`);
+
+  const onClickApply = (clubId: number) =>
     setApplyClubId((prev) => (prev === clubId ? null : clubId));
-  };
+
   const onCloseApply = () => setApplyClubId(null);
 
-  const onSubmitApply = (clubId: number, reason: string) => {
+  const onSubmitApply = async (clubId: number, reason: string) => {
     if (!reason.trim()) return;
+    if (joinPending) return;
 
-    console.log('apply:', clubId, reason);
-    // TODO API
-    setApplyClubId(null);
+    try {
+      const msg = await joinAsync({
+        clubId,
+        body: { joinMessage: reason.trim() },
+      });
+      toast.success(msg);
+      setApplyClubId(null);
+    } catch (e: any) {
+      toast.error(e?.message ?? "가입 신청에 실패했습니다.");
+    }
   };
 
+const onSubmitSearch = () => {
+  const keyword = q.trim();
+
+  // 검색없으면 추천모드로
+  if (!keyword) {
+    setAppliedParams(null); 
+    return;
+  }
+  setAppliedParams({
+    outputFilter: mapCategoryToOutputFilter(category),
+    inputFilter: mapInputFilter(group, region),
+    keyword: keyword,
+  });
+
+  refetchSearch();
+};
   return (
-    <div className= 'max-w-[1440px] flex flex-col gap-6 d:flex-row mt-3 sm:mt-5 d:mt-6 mx-auto px-6'>
-      
+    <div className="max-w-[1440px] flex flex-col gap-6 d:flex-row mt-3 sm:mt-5 d:mt-6 mx-auto px-6">
       <aside className="d:w-[332px]">
-        <p className='body_1 t:subhead_2'>독서 모임</p>
+        <p className="body_1 t:subhead_2">독서 모임</p>
+
         {/* 모바일 */}
         <div className="flex w-full t:hidden mt-5 mb-2">
           <ButtonWithoutImg
@@ -71,36 +257,36 @@ export default function Searchpage() {
             bgColorVar="--Primary_1"
             borderColorVar="--Primary_1"
             textColorVar="--White"
-            className=" flex-1 body_1 hover:brightness-95 hover:-translate-y-[1px] cursor-pointer"
-            onClick={() => router.push('/groups/create')}
-          />                
+            className="flex-1 body_1 hover:brightness-95 hover:-translate-y-[1px] cursor-pointer"
+            onClick={() => router.push("/groups/create")}
+          />
         </div>
 
         {/* 테블릿 이상 */}
         <div className="hidden w-full t:flex mt-5 mb-4">
-           <ButtonWithoutImg
+          <ButtonWithoutImg
             text="+ 모임 생성하기"
             height={56}
             bgColorVar="--Primary_1"
             borderColorVar="--Primary_1"
             textColorVar="--White"
             className="flex-1 subhead_4_1 hover:brightness-95 hover:-translate-y-[1px] cursor-pointer"
-            onClick={() => router.push('/groups/create')}
+            onClick={() => router.push("/groups/create")}
           />
-                    
         </div>
 
-        <Mybookclub groups={mydummyGroup} />
+        {/* 로딩 중에도 로고 나오게 */}
+        <Mybookclub groups={myGroups} isLoading={myClubsLoading} />
       </aside>
 
-      <main className = "w-full max-w-[1440px]" >
+      <main className="w-full max-w-[1440px]">
         <div>
-          <p className='body_1 t:subhead_2'>모임 검색하기</p>  
-          <div className='mt-4 d:mt-5 mb-5'>
+          <p className="body_1 t:subhead_2">모임 검색하기</p>
+          <div className="mt-4 d:mt-5 mb-5">
             <SearchGroupSearch
               value={q}
               onChange={setQ}
-              onSubmit={() => console.log(q, category, group, region)}
+              onSubmit={onSubmitSearch}
               category={category}
               setCategory={setCategory}
               group={group}
@@ -112,35 +298,39 @@ export default function Searchpage() {
         </div>
 
         <div className="w-full">
-            <div className="flex flex-col gap-4 ">
-              {dummyClubs.map((club) => (
-                <SearchClubListItem
-                  key={club.clubId}
-                  club={club}
-                  onClickVisit={onClickVisit}
-                  onClickApply={onClickApply}
-                  applyOpenId={applyClubId}
-                  onCloseApply={onCloseApply}
-                  onSubmitApply={onSubmitApply}
-                />
-              ))}
-            </div>
+          <div className="flex flex-col gap-4">
+            {clubsToRender.map((club) => (
+              <SearchClubListItem
+                key={club.clubId}
+                club={club}
+                onClickVisit={onClickVisit}
+                onClickApply={onClickApply}
+                applyOpenId={applyClubId}
+                onCloseApply={onCloseApply}
+                onSubmitApply={onSubmitApply}
+              />
+            ))}
+          </div>
+
+          {/* 추천 로딩 */}
+          {!isSearchMode && recLoading && (
+            <p className="mt-3 body_2_2 text-Gray-4">불러오는 중…</p>
+          )}
+
+          {/* 검색 무한 스크롤 sentinel */}
+          {isSearchMode && <div ref={sentinelRef} className="h-10" />}
         </div>
-      
       </main>
 
       {/* 태블릿 이상: 기존 모달 */}
-    <div className="hidden t:block">
-      <SearchClubApplyModal
-        open={applyClubId !== null}
-        club={selectedClub}
-        onClose={onCloseApply}
-        onSubmit={onSubmitApply}
-      />
+      <div className="hidden t:block">
+        <SearchClubApplyModal
+          open={applyClubId !== null}
+          club={selectedClub}
+          onClose={onCloseApply}
+          onSubmit={onSubmitApply}
+        />
+      </div>
     </div>
-
-    </div>
-     
-    
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/src/components/base-ui/Group-Search/search_club_apply_modal.tsx b/src/components/base-ui/Group-Search/search_club_apply_modal.tsx
index a375f68..5875153 100644
--- a/src/components/base-ui/Group-Search/search_club_apply_modal.tsx
+++ b/src/components/base-ui/Group-Search/search_club_apply_modal.tsx
@@ -1,65 +1,56 @@
-'use client';
+"use client";
 
-import { ClubSummary } from '@/app/groups/page';
-import Image from 'next/image';
-import { useEffect, useRef, useState } from 'react';
-import ClubCategoryTags from './search_clublist/search_club_category_tags';
+import type { ClubSummary } from "@/components/base-ui/Group-Search/search_clublist/search_clublist_item";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import ClubCategoryTags from "./search_clublist/search_club_category_tags";
 
-
-const DEFAULT_CLUB_IMG = '/ClubDefaultImg.svg';
+const DEFAULT_CLUB_IMG = "/ClubDefaultImg.svg";
 
 const PARTICIPANT_KO: Record<string, string> = {
-  STUDENT: '대학생',
-  WORKER: '직장인',
-  ONLINE: '온라인',
-  CLUB: '동아리',
-  MEETING: '모임',
-  OFFLINE: '대면',
+  STUDENT: "대학생",
+  WORKER: "직장인",
+  ONLINE: "온라인",
+  CLUB: "동아리",
+  MEETING: "모임",
+  OFFLINE: "대면",
 };
 
 type Props = {
   open: boolean;
   club: ClubSummary | null;
   onClose: () => void;
-  onSubmit: (club: number, reason: string) => void;
+  onSubmit: (clubId: number, reason: string) => void;
 };
 
-export default function SearchClubApplyModal({
-  open,
-  club,
-  onClose,
-  onSubmit,
-}: Props) {
-  const [reason, setReason] = useState('');
+export default function SearchClubApplyModal({ open, club, onClose, onSubmit }: Props) {
+  const [reason, setReason] = useState("");
   const taRef = useRef<HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
-    if (open) setReason('');
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    if (open) setReason("");
   }, [open]);
 
-  // ESC로 닫기
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
+      if (e.key === "Escape") onClose();
     };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
 
-  // textarea auto-resize: 스크롤 없고, 내용만큼 커짐 -> 모달도 같이 커짐
   const autoResize = () => {
     const el = taRef.current;
     if (!el) return;
-    el.style.height = 'auto';
+    el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   };
 
   useEffect(() => {
     if (!open) return;
     autoResize();
-    // 열리자마자 높이 맞추기
-    // requestAnimationFrame으로 폰트/레이아웃 적용 이후 한번 더
     requestAnimationFrame(autoResize);
   }, [open]);
 
@@ -67,28 +58,23 @@ export default function SearchClubApplyModal({
 
   const imgSrc = club.profileImageUrl ?? DEFAULT_CLUB_IMG;
   const participantText =
-    club.participantTypes?.map((t) => PARTICIPANT_KO[t] ?? t).join(', ') ?? '-';
+    club.participantTypes?.map((t) => PARTICIPANT_KO[t] ?? t).join(", ") ?? "-";
 
   return (
     <div className="fixed inset-0 z-50">
-      {/* overlay */}
       <div className="absolute inset-0 bg-black/30" onClick={onClose} />
 
-      {/* center */}
       <div className="absolute inset-0 flex items-center justify-center px-6">
         <div
           className={[
-            'w-full max-w-[1040px]',
-            'flex flex-col items-end gap-4',
-            'p-[28px]',
-            'rounded-[8px] bg-White',
-            'shadow-lg',
-          ].join(' ')}
+            "w-full max-w-[1040px]",
+            "flex flex-col items-end gap-4",
+            "p-[28px]",
+            "rounded-[12px] bg-White",
+            "shadow-lg",
+          ].join(" ")}
         >
-
-          {/* 내용 영역 */}
           <div className="w-full flex items-start justify-between gap-6">
-            {/* 왼쪽: 이미지 + 텍스트 */}
             <div className="flex items-start gap-6 min-w-0">
               <Image
                 src={imgSrc}
@@ -99,48 +85,34 @@ export default function SearchClubApplyModal({
               />
 
               <div className="min-w-0">
-                {/* 이름 */}
                 <p className="subhead_2 text-Gray-7">{club.name}</p>
-
-                {/* 카테고리 */}
                 <div className="mt-2">
                   <ClubCategoryTags category={club.category} />
                 </div>
 
-                {/* 모임대상 / 활동지역 */}
                 <div className="mt-3 flex flex-col gap-1">
-                  <p className="Body_1_2 text-Gray-4">
+                  <p className="body_1_2 text-Gray-4">
                     모임 대상 : <span className="text-Gray-7">{participantText}</span>
                   </p>
-                  <p className="Body_1_2 text-Gray-4">
+                  <p className="body_1_2 text-Gray-4">
                     활동 지역 : <span className="text-Gray-7">{club.region}</span>
                   </p>
                 </div>
               </div>
             </div>
 
-            {/* 오른쪽 */}
             <div className="flex flex-col items-end gap-2">
-              <button type="button" onClick={onClose} className="shrink-0 hover:brightness-90 cursor-pointer">
+              <button type="button" onClick={onClose} className="shrink-0">
                 <Image src="/cancle_button.svg" alt="닫기" width={24} height={24} />
               </button>
 
               <div className="flex items-center gap-1 shrink-0">
-                <span className="Body_2_2 text-Gray-4">
-                  {club.public ? '공개' : '비공개'}
-                </span>
-                <Image
-                  src={club.public ? '/Unlock.svg' : '/lock.svg'}
-                  alt=""
-                  width={20}
-                  height={20}
-                />
+                <span className="body_2_2 text-Gray-4">{club.public ? "공개" : "비공개"}</span>
+                <Image src={club.public ? "/Unlock.svg" : "/lock.svg"} alt="" width={20} height={20} />
               </div>
             </div>
-            
           </div>
 
-          {/* textarea: ✅ auto-resize, 스크롤 없이 모달이 길어짐 */}
           <div className="w-full">
             <textarea
               ref={taRef}
@@ -152,26 +124,25 @@ export default function SearchClubApplyModal({
               maxLength={300}
               placeholder="신청 사유를 입력해주세요(300자 제한)"
               className={[
-                'w-full',
-                'resize-none overflow-hidden', // 스크롤 없애고 길이 늘림
-                'rounded-[8px] bg-Gray-1 p-4',
-                'outline-none',
-                'Body_1_2 text-Gray-7 placeholder:text-Gray-3',
-              ].join(' ')}
+                "w-full",
+                "resize-none overflow-hidden",
+                "rounded-[8px] bg-Gray-1 p-4",
+                "outline-none",
+                "body_1_2 text-Gray-7 placeholder:text-Gray-3",
+              ].join(" ")}
               rows={4}
             />
           </div>
 
-          {/* 하단 버튼 */}
           <div className="w-full flex justify-end">
             <button
               type="button"
-              onClick={() => onSubmit(club.clubId,reason)}
+              onClick={() => onSubmit(club.clubId, reason)}
               className={[
-                'w-[132px] h-[40px] px-4 rounded-[8px]',
-                'bg-primary-2 text-White border border-primary-2',
-                'body_1_2 hover:brightness-90 cursor-pointer',
-              ].join(' ')}
+                "h-[40px] px-4 rounded-[8px]",
+                "bg-primary-2 text-White border border-primary-2",
+                "body_1_2",
+              ].join(" ")}
               disabled={reason.trim().length === 0}
             >
               가입 신청하기
@@ -181,4 +152,4 @@ export default function SearchClubApplyModal({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx b/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
index f77e043..d0d11c1 100644
--- a/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
+++ b/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
@@ -1,30 +1,42 @@
-'use client';
+"use client";
 
-import Image from 'next/image';
-import React from 'react';
-import ClubCategoryTags from './search_club_category_tags';
-import { ClubSummary } from '@/app/groups/page';
+import Image from "next/image";
+import React from "react";
+import ClubCategoryTags from "./search_club_category_tags";
+import type { ApplyType, ParticipantType } from "@/types/groups/groups";
 
-
-const DEFAULT_CLUB_IMG = '/ClubDefaultImg.svg';
+const DEFAULT_CLUB_IMG = "/ClubDefaultImg.svg";
 
 // participantTypes 한글 매핑
 const PARTICIPANT_KO: Record<string, string> = {
-  STUDENT: '대학생',
-  WORKER: '직장인',
-  ONLINE: '온라인',
-  CLUB: '동아리',
-  MEETING: '모임',
-  OFFLINE: '대면',
+  STUDENT: "대학생",
+  WORKER: "직장인",
+  ONLINE: "온라인",
+  CLUB: "동아리",
+  MEETING: "모임",
+  OFFLINE: "대면",
 };
 
 const APPLY_META: Record<
-  ClubSummary['applytype'],
+  ApplyType,
   { label?: string; icon?: string; labelClass?: string }
 > = {
   No: {},
-  Wait: { label: '신청 완료', icon: '/GreenCheck.svg', labelClass: 'text-green-600' },
-  Yes: { label: '가입 됨', icon: '/BrownCheck.svg', labelClass: 'text-primary-3' },
+  Wait: { label: "신청 완료", icon: "/GreenCheck.svg", labelClass: "text-green-600" },
+  Yes: { label: "가입 됨", icon: "/BrownCheck.svg", labelClass: "text-primary-3" },
+};
+
+// ✅ UI 컴포넌트 계약 타입은 UI 쪽에 둔다
+export type ClubSummary = {
+  reason: string;
+  clubId: number;
+  name: string;
+  profileImageUrl?: string | null;
+  category: number[];
+  public: boolean;
+  applytype: ApplyType;
+  region: string;
+  participantTypes: ParticipantType[];
 };
 
 type Props = {
@@ -37,6 +49,17 @@ type Props = {
   applyOpenId: number | null;
 };
 
+function safeImageSrc(src?: string | null) {
+    if (!src) return DEFAULT_CLUB_IMG;
+
+    if (src === "string") return DEFAULT_CLUB_IMG;
+    if (src.startsWith("/")) return src;
+    if (src.startsWith("http://") || src.startsWith("https://")) return src;
+
+    return DEFAULT_CLUB_IMG;
+}
+
+
 export default function SearchClubListItem({
   club,
   onClickVisit,
@@ -45,30 +68,30 @@ export default function SearchClubListItem({
   onCloseApply,
   onSubmitApply,
 }: Props) {
-  const imgSrc = club.profileImageUrl ?? DEFAULT_CLUB_IMG;
+
+  const imgSrc = safeImageSrc(club.profileImageUrl);
   const isOpen = applyOpenId === club.clubId;
 
-  const [reason, setReason] = React.useState('');
+  const [reason, setReason] = React.useState("");
   React.useEffect(() => {
-    if (!isOpen) setReason('');
+    if (!isOpen) setReason("");
   }, [isOpen]);
 
   const participantText = club.participantTypes
     .map((t) => PARTICIPANT_KO[t] ?? t)
-    .join(', ');
+    .join(", ");
 
   const applyMeta = APPLY_META[club.applytype];
 
   return (
     <div
       className={[
-        'w-full max-w-[1440px] p-4',
-        'rounded-[8px] border-2 border-Subbrown-4 bg-White',
-        'flex flex-col gap-4',
-        't:h-[180px]',
-      ].join(' ')}
+        "w-full max-w-[1440px] p-4",
+        "rounded-[8px] border-2 border-Subbrown-4 bg-White",
+        "flex flex-col gap-4",
+        "t:h-[180px]",
+      ].join(" ")}
     >
-      {/* 상단(기존 카드 내용)만 가로 배치 */}
       <div className="flex justify-between">
         {/* Left - Tablet */}
         <div className="hidden t:flex flex-1 items-start gap-6 min-w-0">
@@ -80,7 +103,6 @@ export default function SearchClubListItem({
             className="shrink-0 rounded-[8px] object-cover"
           />
           <div className="min-w-0">
-            {/* 이름, 태그 */}
             <div className="min-w-0">
               <p className="subhead_2 text-Gray-7 truncate">{club.name}</p>
               <div className="mt-1">
@@ -88,10 +110,9 @@ export default function SearchClubListItem({
               </div>
             </div>
 
-            {/* 모임 대상, 지역 */}
             <div className="mt-3 flex flex-col gap-1">
               <p className="body_1_2 text-Gray-4">
-                모임 대상 : <span className="text-Gray-7">{participantText || '-'}</span>
+                모임 대상 : <span className="text-Gray-7">{participantText || "-"}</span>
               </p>
               <p className="body_1_2 text-Gray-4">
                 활동 지역 : <span className="text-Gray-7">{club.region}</span>
@@ -101,65 +122,44 @@ export default function SearchClubListItem({
         </div>
 
         {/* Left - Mobile */}
-      <div className="t:hidden flex flex-1 flex-col min-w-0">
-        {/* 제목/태그 + 상태(모바일에서 오른쪽 글 영역) */}
-        <div className="flex items-start justify-between gap-2 min-w-0">
-          <div className="min-w-0 flex-1">
+        <div className="t:hidden flex flex-1 flex-col min-w-0">
+          <div className="min-w-0">
             <p className="body_1 text-Gray-7 truncate">{club.name}</p>
             <div className="mt-1">
               <ClubCategoryTags category={club.category} className="body_2_2" />
             </div>
           </div>
 
-          <div className="shrink-0 flex flex-col items-end gap-1">
-            <div className="flex items-center gap-1">
-              <span className="body_1_2 text-Gray-4">{club.public ? '공개' : '비공개'}</span>
-              <Image src={club.public ? '/Unlock.svg' : '/lock.svg'} alt="" width={16} height={16} />
+          <div className="mt-5 flex items-start gap-4">
+            <Image
+              src={imgSrc}
+              alt="모임 이미지"
+              width={72}
+              height={72}
+              className="shrink-0 rounded-[8px] object-cover"
+            />
+            <div className="flex flex-col gap-1 min-w-0">
+              <p className="body_2_2 text-Gray-4">
+                모임 대상 : <span className="text-Gray-7">{participantText || "-"}</span>
+              </p>
+              <p className="body_2_2 text-Gray-4">
+                활동 지역 : <span className="text-Gray-7">{club.region}</span>
+              </p>
             </div>
-
-            {applyMeta.label && (
-              <div className="flex items-center gap-1">
-                <span className={['body_1_2', applyMeta.labelClass ?? 'text-Gray-4'].join(' ')}>
-                  {applyMeta.label}
-                </span>
-                {applyMeta.icon && <Image src={applyMeta.icon} alt="" width={16} height={16} />}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 이미지 + 정보 (이제 오른쪽 버튼이 없어서 풀폭으로 널찍해짐) */}
-        <div className="mt-5 flex items-start gap-4">
-          <Image
-            src={imgSrc}
-            alt="모임 이미지"
-            width={72}
-            height={72}
-            className="shrink-0 rounded-[8px] object-cover"
-          />
-          <div className="flex flex-col gap-1 min-w-0">
-            <p className="body_2_2 text-Gray-4">
-              모임 대상 : <span className="text-Gray-7">{participantText || '-'}</span>
-            </p>
-            <p className="body_2_2 text-Gray-4">
-              활동 지역 : <span className="text-Gray-7">{club.region}</span>
-            </p>
           </div>
         </div>
-      </div>
 
-        {/* RIGHT (Tablet~) */}
-        <div className="hidden t:flex shrink-0 flex-col items-end t:justify-between t:h-full">
-          {/* 공개/비공개 + 상태 */}
+        {/* RIGHT */}
+        <div className="shrink-0 flex flex-col items-end t:justify-between t:h-full">
           <div className="flex flex-col items-end gap-1">
             <div className="flex items-center gap-1">
-              <span className="body_1_2 text-Gray-4">{club.public ? '공개' : '비공개'}</span>
-              <Image src={club.public ? '/Unlock.svg' : '/lock.svg'} alt="" width={16} height={16} />
+              <span className="body_1_2 text-Gray-4">{club.public ? "공개" : "비공개"}</span>
+              <Image src={club.public ? "/Unlock.svg" : "/lock.svg"} alt="" width={16} height={16} />
             </div>
 
             {applyMeta.label && (
               <div className="flex items-center gap-1">
-                <span className={['body_1_2', applyMeta.labelClass ?? 'text-Gray-4'].join(' ')}>
+                <span className={["body_1_2", applyMeta.labelClass ?? "text-Gray-4"].join(" ")}>
                   {applyMeta.label}
                 </span>
                 {applyMeta.icon && <Image src={applyMeta.icon} alt="" width={16} height={16} />}
@@ -167,22 +167,21 @@ export default function SearchClubListItem({
             )}
           </div>
 
-          {/* 버튼 */}
-          <div className="w-[100px] w-[132px] mt-auto">
-            {club.applytype === 'No' && (
+          <div className="w-[100px] t:w-[132px] mt-auto">
+            {club.applytype === "No" && (
               <button
                 type="button"
                 onClick={() => onClickApply?.(club.clubId)}
                 className={[
-                  'h-[28px] t:h-[40px] px-4 py-2 w-full',
-                  'flex items-center justify-center',
-                  'rounded-[8px]',
-                  'bg-primary-2 text-White hover:brightness-90 cursor-pointer',
-                  'body_2_2 t:body_1_2',
-                  'mb-1',
-                ].join(' ')}
+                  "h-[28px] t:h-[40px] px-4 py-2 w-full",
+                  "flex items-center justify-center",
+                  "rounded-[8px]",
+                  "bg-primary-2 text-White",
+                  "body_2_2 t:body_1_2",
+                  "mb-1",
+                ].join(" ")}
               >
-                <span className="t:hidden">{isOpen ? '신청 닫기' : '가입신청하기'}</span>
+                <span className="t:hidden">{isOpen ? "신청 닫기" : "가입신청하기"}</span>
                 <span className="hidden t:inline">가입신청하기</span>
               </button>
             )}
@@ -191,13 +190,13 @@ export default function SearchClubListItem({
               type="button"
               onClick={() => onClickVisit?.(club.clubId)}
               className={[
-                'h-[28px] t:h-[40px] px-4 py-2 w-full',
-                'flex items-center justify-center gap-[10px]',
-                'rounded-[8px]',
-                'border border-primary-1',
-                'bg-background text-primary-3 hover:brightness-95 cursor-pointer',
-                'body_2_2 t:body_1_2',
-              ].join(' ')}
+                "h-[28px] t:h-[40px] px-4 py-2 w-full",
+                "flex items-center justify-center gap-[10px]",
+                "rounded-[8px]",
+                "border border-primary-1",
+                "bg-background text-primary-3",
+                "body_2_2 t:body_1_2",
+              ].join(" ")}
             >
               방문하기
             </button>
@@ -205,36 +204,8 @@ export default function SearchClubListItem({
         </div>
       </div>
 
-      <div className="t:hidden w-full flex gap-2">
-        {club.applytype === 'No' && (
-          <button
-            type="button"
-            onClick={() => onClickApply?.(club.clubId)}
-            className={[
-              'flex-1 h-[28px] rounded-[10px] body_2_1',
-              'bg-primary-2 text-White hover:brightness-90 cursor-pointer',
-            ].join(' ')}
-          >
-            {isOpen ? '신청 닫기' : '가입신청하기'}
-          </button>
-        )}
-
-        <button
-          type="button"
-          onClick={() => onClickVisit?.(club.clubId)}
-          className={[
-            club.applytype === 'No' ? 'flex-1' : 'w-full',
-            'h-[28px] rounded-[10px] body_2_1',
-            'border border-primary-1 bg-background text-primary-3 hover:brightness-95 cursor-pointer',
-          ].join(' ')}
-        >
-          방문하기
-        </button>
-      </div>
-
-
       {/* ✅ 모바일에서만: 아이템 아래로 확장 신청폼 */}
-      {club.applytype === 'No' && isOpen && (
+      {club.applytype === "No" && isOpen && (
         <div className="t:hidden w-full">
           <textarea
             value={reason}
@@ -247,9 +218,9 @@ export default function SearchClubListItem({
             disabled={!reason.trim()}
             onClick={() => onSubmitApply(club.clubId, reason)}
             className={[
-              'mt-4 w-full h-[44px] rounded-[10px] body_1_2 hover:brightness-95 cursor-pointer',
-              reason.trim() ? 'bg-primary-2 text-White' : 'bg-Gray-2 text-Gray-4',
-            ].join(' ')}
+              "mt-4 w-full h-[44px] rounded-[10px] body_1_2",
+              reason.trim() ? "bg-primary-2 hover:bg-primary-1 text-White" : "bg-Gray-2 text-Gray-4",
+            ].join(" ")}
           >
             가입신청하기
           </button>
diff --git a/src/components/base-ui/Group-Search/search_mybookclub.tsx b/src/components/base-ui/Group-Search/search_mybookclub.tsx
index 07cd23d..7b667a9 100644
--- a/src/components/base-ui/Group-Search/search_mybookclub.tsx
+++ b/src/components/base-ui/Group-Search/search_mybookclub.tsx
@@ -2,26 +2,30 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 export type GroupSummary = { id: string; name: string };
 
 type Props = {
   groups: GroupSummary[];
+  isLoading?: boolean;
 };
 
 function getLimitByViewport() {
-  if (typeof window === "undefined") return 3; // SSR fallback
-  if (window.matchMedia("(min-width: 1440px)").matches) return 6; // d~
-  if (window.matchMedia("(min-width: 768px)").matches) return 4;  // t
-  return 3; // mobile
+  if (typeof window === "undefined") return 3;
+  if (window.matchMedia("(min-width: 1440px)").matches) return 6;
+  if (window.matchMedia("(min-width: 768px)").matches) return 4;
+  return 3;
 }
 
-export default function Mybookclub({ groups }: Props) {
+export default function Mybookclub({ groups, isLoading = false }: Props) {
   const count = groups.length;
 
   const [open, setOpen] = useState(false);
   const [limit, setLimit] = useState(3);
 
+  const router = useRouter();
+
   useEffect(() => {
     const apply = () => setLimit(getLimitByViewport());
     apply();
@@ -31,7 +35,6 @@ export default function Mybookclub({ groups }: Props) {
 
     const onChange = () => apply();
 
-    // 타입 이슈 회피용 캐스팅 (구형 브라우저는 신경 끄기)
     (mqd as MediaQueryList).addEventListener("change", onChange);
     (mqt as MediaQueryList).addEventListener("change", onChange);
 
@@ -41,31 +44,28 @@ export default function Mybookclub({ groups }: Props) {
     };
   }, []);
 
-
-  const showToggle = count > limit;
+  const showToggle = !isLoading && count > limit;
 
   const displayGroups = useMemo(() => {
+    if (isLoading) return [];
     if (!showToggle) return groups;
     return open ? groups : groups.slice(0, limit);
-  }, [groups, open, limit, showToggle]);
+  }, [groups, open, limit, showToggle, isLoading]);
 
   return (
     <aside
       className={[
         "flex flex-col w-full d:w-[332px] p-5 rounded-[8px] bg-Subbrown-4",
-        // 높이 고정 대신 자연스럽게. 펼쳤을 때만 스크롤
         open && showToggle ? "max-h-[814px]" : "",
       ].join(" ")}
     >
-      {/* 0개: 로고만 */}
-      {count === 0 ? (
-        <div className="h-[] flex items-center justify-center py-4 t:py-10 d:py-20">
-        <Image src="/logo2.svg" alt="로고" height={300} width={300} />
-
+      {/* ✅ 로딩 중이거나 0개면 로고 */}
+      {isLoading || count === 0 ? (
+        <div className="flex items-center justify-center py-4 t:py-10 d:py-20">
+          <Image src="/logo2.svg" alt="로고" height={300} width={300} />
         </div>
       ) : (
         <>
-          {/* 리스트 */}
           <div
             className={[
               "grid grid-cols-1 t:grid-cols-2 d:grid-cols-1 flex-col gap-2",
@@ -75,7 +75,8 @@ export default function Mybookclub({ groups }: Props) {
             {displayGroups.map((group) => (
               <div
                 key={group.id}
-                className="flex w-full h-[36px] t:h-[52px] py-3 px-4 items-center rounded-lg bg-white  hover:brightness-98 hover:-translate-y-[1px] cursor-pointer"
+                onClick={() => router.push(`/groups/${group.id}`)}
+                className="flex w-full h-[36px] t:h-[52px] py-3 px-4 items-center rounded-lg bg-white hover:brightness-98 hover:-translate-y-[1px] cursor-pointer"
               >
                 <span className="text-Gray-7 body_1_2 t:subhead_4_1">
                   {group.name}
@@ -84,7 +85,6 @@ export default function Mybookclub({ groups }: Props) {
             ))}
           </div>
 
-          {/* 전체보기/접기만 */}
           {showToggle && (
             <div className="mt-3">
               <button
@@ -98,7 +98,7 @@ export default function Mybookclub({ groups }: Props) {
                     <Image src="/ArrowTop.svg" alt="" width={24} height={24} />
                   </div>
                 ) : (
-                  <div className="flex items-center justify-center gap-1 hover:brightness-98  cursor-pointer">
+                  <div className="flex items-center justify-center gap-1 hover:brightness-98 cursor-pointer">
                     <span className="text-Gray-7 body_1_2">전체보기</span>
                     <Image src="/ArrowDown.svg" alt="" width={24} height={24} />
                   </div>
@@ -110,4 +110,4 @@ export default function Mybookclub({ groups }: Props) {
       )}
     </aside>
   );
-}
+}
\ No newline at end of file

From f4f6348be26a9e00e2749ca548bcc089b46664b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 22:23:31 +0900
Subject: [PATCH 09/13] =?UTF-8?q?fix=20:=20create=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/groups/create/page.tsx | 97 +++++++++++++++++++++++-----------
 1 file changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/app/groups/create/page.tsx b/src/app/groups/create/page.tsx
index 8effe14..c2810d9 100644
--- a/src/app/groups/create/page.tsx
+++ b/src/app/groups/create/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useMemo, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -53,8 +54,11 @@ export default function CreateClubWizardPreview() {
   // Step 2
   const [profileMode, setProfileMode] = useState<"default" | "upload">("default");
   const [selectedImageUrl, setSelectedImageUrl] = useState<string | null>(null);
-  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null); 
-  const [visibility, setVisibility] = useState<"공개" | "비공개" | null>(null);
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
+
+  // ✅ 서버에 그대로 보내는 값: open(boolean)
+  const [open, setOpen] = useState<boolean | null>(null);
+
   const fileRef = useRef<HTMLInputElement | null>(null);
 
   // Step 3
@@ -71,25 +75,32 @@ export default function CreateClubWizardPreview() {
   const createClub = useCreateClubMutation();
 
   const canNext = useMemo(() => {
-    if (step === 1) return Boolean(clubName.trim() && clubDescription.trim() && nameCheck === "available");
+    if (step === 1)
+      return Boolean(clubName.trim() && clubDescription.trim() && nameCheck === "available");
 
     if (step === 2) {
-      // 공개/비공개는 필수
-      if (!visibility) return false;
+      // ✅ 공개/비공개는 필수
+      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();
+    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,
+    open,
     profileMode,
     profileImageUrl,
     uploadImage.isPending,
@@ -119,13 +130,13 @@ export default function CreateClubWizardPreview() {
         setNameCheck("available");
         toast.success("사용 가능한 모임 이름입니다.");
       }
-    } catch (e) {
+    } catch {
       setNameCheck("idle");
       toast.error("이름 중복 확인 실패");
     }
   };
 
-  // 이미지 선택: 미리보기 + presigned 업로드 + imageUrl 저장
+  // 이미지 선택: 미리보기 + 업로드 + imageUrl 저장
   const pickImage = async (file: File) => {
     // 로컬 미리보기
     const reader = new FileReader();
@@ -134,13 +145,14 @@ export default function CreateClubWizardPreview() {
 
     try {
       const imageUrl = await uploadImage.mutateAsync(file);
-
       setProfileImageUrl(imageUrl);
       toast.success("프로필 이미지 업로드 완료");
-    } catch (e) {
-
+    } catch {
       setProfileImageUrl(null);
       toast.error("이미지 업로드 실패");
+
+      // ✅ 같은 파일 다시 선택 가능하게 input 초기화
+      if (fileRef.current) fileRef.current.value = "";
     }
   };
 
@@ -154,9 +166,7 @@ export default function CreateClubWizardPreview() {
     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));
@@ -164,6 +174,12 @@ export default function CreateClubWizardPreview() {
 
   // 모임 생성 (최종)
   const onSubmitCreateClub = async () => {
+    // 안전장치: Step2 open 미선택이면 막기
+    if (open === null) {
+      toast.error("공개/비공개를 선택해주세요.");
+      return;
+    }
+
     try {
       const category = mapBookCategoriesToCodes(selectedCategories);
       const participantTypes: ParticipantType[] = selectedParticipants.map(
@@ -182,23 +198,23 @@ export default function CreateClubWizardPreview() {
         category,
         participantTypes,
         links: linksPayload,
-        open: visibility === "공개",
+        open: open === true, // ✅ boolean 확정
       };
 
-
+      // ✅ 규칙대로면 service에서 res.result(string)만 반환해야 함
       const msg = await createClub.mutateAsync(payload);
+      toast.success(msg.result);
 
-      toast.success(typeof msg === "string" ? msg : msg?.result ?? "성공");
       router.push("/groups");
-    } catch (e) {
+    } catch {
       toast.error("모임 생성 실패");
     }
   };
 
   return (
-    <div className="min-h-screen max-w-[1440px] mx-auto ">
+    <div className="min-h-screen max-w-[1440px] mx-auto">
       {/* breadcrumb */}
-      <div className="flex gap-5 px-[10px] py-3 border-b border-Gray-2 t:mx-4 ">
+      <div className="flex gap-5 px-[10px] py-3 border-b border-Gray-2 t:mx-4">
         <Link href="/groups" className="shrink-0">
           <p className="body_1 t:subhead_4_1 cursor-pointer">모임</p>
         </Link>
@@ -208,7 +224,7 @@ export default function CreateClubWizardPreview() {
         <p className="body_1 t:subhead_4_1">새 모임 생성</p>
       </div>
 
-      <div className="w-full max-w-[1040px] mx-auto px-6 t:px-10 pt-6 pb-16 ">
+      <div className="w-full max-w-[1040px] mx-auto px-6 t:px-10 pt-6 pb-16">
         {/* step dots */}
         <div className="mb-7">
           <div className="flex items-center gap-6">
@@ -219,7 +235,7 @@ export default function CreateClubWizardPreview() {
           </div>
         </div>
 
-        <main className="">
+        <main>
           {/* STEP 1 */}
           {step === 1 && (
             <section>
@@ -233,7 +249,7 @@ export default function CreateClubWizardPreview() {
                     setNameCheck("idle");
                   }}
                   placeholder="독서 모임 이름을 입력해주세요."
-                  className="w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] p-4 outline-none  bg-white  body_1_3 t:subhead_4_1"
+                  className="w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] p-4 outline-none bg-white body_1_3 t:subhead_4_1"
                 />
 
                 <button
@@ -274,7 +290,7 @@ export default function CreateClubWizardPreview() {
                 )}
               </div>
 
-              <h2 className="mt-[56px] subhead_1 subhead_4_1 t:subhead_1">모임의 소개글을 입력해주세요!</h2>
+              <h2 className="mt-[56px] subhead_4_1 t:subhead_1">모임의 소개글을 입력해주세요!</h2>
               <textarea
                 value={clubDescription}
                 onChange={(e) => {
@@ -354,6 +370,7 @@ export default function CreateClubWizardPreview() {
                       setSelectedImageUrl(null);
                       setProfileImageUrl(null);
                       setProfileMode("default");
+                      if (fileRef.current) fileRef.current.value = "";
                     }}
                     className={cx(
                       "flex justify-center items-center gap-[10px] w-[200px] h-[36px] px-4 py-3 rounded-[8px] border body_1_3",
@@ -402,7 +419,7 @@ export default function CreateClubWizardPreview() {
                       {uploadImage.isPending
                         ? "업로드 중..."
                         : profileImageUrl
-                        ? "업로드 완료"
+                        ? ""
                         : "업로드 실패 시 다시 시도"}
                     </p>
                   )}
@@ -412,13 +429,31 @@ export default function CreateClubWizardPreview() {
               <h2 className="mt-7 subhead_4_1 t:subhead_1 text-Gray-7">모임의 공개여부를 알려주세요!</h2>
 
               <div className="mt-4 flex flex-col gap-3 text-Gray-7">
-                <button type="button" onClick={() => setVisibility("공개")} className="flex items-center gap-3 cursor-pointer select-none text-left">
-                  <Image src={visibility === "공개" ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"} alt="" width={24} height={24} />
+                <button
+                  type="button"
+                  onClick={() => setOpen(true)}
+                  className="flex items-center gap-3 cursor-pointer select-none text-left"
+                >
+                  <Image
+                    src={open === true ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"}
+                    alt=""
+                    width={24}
+                    height={24}
+                  />
                   <span className="subhead_4_1">공개</span>
                 </button>
 
-                <button type="button" onClick={() => setVisibility("비공개")} className="flex items-center gap-3 cursor-pointer select-none text-left">
-                  <Image src={visibility === "비공개" ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"} alt="" width={24} height={24} />
+                <button
+                  type="button"
+                  onClick={() => setOpen(false)}
+                  className="flex items-center gap-3 cursor-pointer select-none text-left"
+                >
+                  <Image
+                    src={open === false ? "/CheckBox_Yes.svg" : "/CheckBox_No.svg"}
+                    alt=""
+                    width={24}
+                    height={24}
+                  />
                   <span className="subhead_4_1">비공개</span>
                 </button>
               </div>
@@ -530,7 +565,7 @@ export default function CreateClubWizardPreview() {
             <section>
               <h2 className="subhead_4_1 t:subhead_1 mb-4">SNS나 링크 연동이 있다면 해주세요! (선택)</h2>
 
-              <div className="">
+              <div>
                 {links.map((it, idx) => (
                   <div key={idx} className="flex flex-col gap-4 py-3 t:flex-row t:items-center">
                     <input

From 8e6bf10cdd15586d033a8903cf5bd0bdd2060ca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Wed, 25 Feb 2026 22:35:48 +0900
Subject: [PATCH 10/13] chore : type error

---
 src/app/groups/page.tsx  | 2 +-
 src/utils/groupMapper.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index d123dcc..2b9fbff 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -156,7 +156,7 @@ export default function Searchpage() {
     fetchNextPage,
     refetch: refetchSearch,
   } = useInfiniteClubSearchQuery(
-    appliedParams ?? { search: undefined, inputFilter: null, outputFilter: "ALL" },
+    appliedParams ?? { keyword: undefined, inputFilter: null, outputFilter: "ALL" },
     isSearchMode
   );
 
diff --git a/src/utils/groupMapper.ts b/src/utils/groupMapper.ts
index 73e0e09..2a12cca 100644
--- a/src/utils/groupMapper.ts
+++ b/src/utils/groupMapper.ts
@@ -1,4 +1,5 @@
-import { Category, ParticipantType } from "@/app/groups/page";
+import { Category, ParticipantType } from "@/types/groups/groups";
+
 
 
 /** UI 카테고리 → API participantType (전체는 필터 없음이라 null) */

From d6d27fd2ce91bf19f5608d1d48d81ab91ce91957 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Thu, 26 Feb 2026 18:58:01 +0900
Subject: [PATCH 11/13] =?UTF-8?q?fix=20:=20=EC=82=AC=EC=A7=84=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search_clublist/search_clublist_item.tsx  | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx b/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
index d0d11c1..5fb9cf2 100644
--- a/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
+++ b/src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
@@ -95,13 +95,15 @@ export default function SearchClubListItem({
       <div className="flex justify-between">
         {/* Left - Tablet */}
         <div className="hidden t:flex flex-1 items-start gap-6 min-w-0">
-          <Image
-            src={imgSrc}
-            alt="모임 이미지"
-            width={148}
-            height={148}
-            className="shrink-0 rounded-[8px] object-cover"
-          />
+          <div className="relative shrink-0 w-[148px] h-[148px] rounded-[8px] overflow-hidden">
+            <Image
+              src={imgSrc}
+              alt="모임 이미지"
+              fill
+              sizes="148px"
+              className="object-cover"
+            />
+          </div>
           <div className="min-w-0">
             <div className="min-w-0">
               <p className="subhead_2 text-Gray-7 truncate">{club.name}</p>
@@ -131,13 +133,15 @@ export default function SearchClubListItem({
           </div>
 
           <div className="mt-5 flex items-start gap-4">
-            <Image
-              src={imgSrc}
-              alt="모임 이미지"
-              width={72}
-              height={72}
-              className="shrink-0 rounded-[8px] object-cover"
-            />
+            <div className="relative shrink-0 w-[148px] h-[148px] rounded-[8px] overflow-hidden">
+                <Image
+                  src={imgSrc}
+                  alt="모임 이미지"
+                  fill
+                  sizes="148px"
+                  className="object-cover"
+                />
+            </div>
             <div className="flex flex-col gap-1 min-w-0">
               <p className="body_2_2 text-Gray-4">
                 모임 대상 : <span className="text-Gray-7">{participantText || "-"}</span>

From f2087c34ff9b964262b2b27d8e1d8dc7f1b03e24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Thu, 26 Feb 2026 23:28:47 +0900
Subject: [PATCH 12/13] =?UTF-8?q?fix=20:=20build=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/clubService.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/services/clubService.ts b/src/services/clubService.ts
index c41c9a8..2263f0b 100644
--- a/src/services/clubService.ts
+++ b/src/services/clubService.ts
@@ -3,14 +3,8 @@ import { apiClient } from "@/lib/api/client";
 import { CLUBS } from "@/lib/api/endpoints/Clubs";
 import type { ApiResponse } from "@/lib/api/types";
 import { CreateClubRequest } from "@/types/groups/clubCreate";
-import type 
-  ClubJoinRequest,
-  ClubJoinResponse,
-  ClubSearchParams,
-  ClubSearchResponse,
-  MyClubsResponse,
-  RecommendationsResponse,
-} from "@/types/groups/clubsearch";
+import { ClubJoinRequest, ClubJoinResponse, ClubSearchParams, ClubSearchResponse, MyClubsResponse, RecommendationsResponse } from "@/types/groups/clubsearch";
+
 
 export const clubService = {
   // GET /api/clubs/check-name?clubName=...

From cf2831946b6379c8daa5e8dfa8e94e72f7658523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B8=B0=ED=98=84?= <luke0985>
Date: Thu, 26 Feb 2026 23:29:02 +0900
Subject: [PATCH 13/13] =?UTF-8?q?style=20:=20=EB=82=B4=20=EB=AA=A8?=
 =?UTF-8?q?=EC=9E=84=EC=AA=BD=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=95=88?=
 =?UTF-8?q?=EC=83=9D=EA=B8=B0=EA=B2=8C=EB=81=94=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                                       | 8 ++++++++
 src/components/base-ui/Group-Search/search_mybookclub.tsx | 2 +-
 src/components/base-ui/home/home_bookclub.tsx             | 6 +++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 086e1a3..0fa9b48 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -175,3 +175,11 @@ body {
 @utility animate-slide-down {
   animation: slide-down 0.3s ease-out;
 }
+
+@utility no-scrollbar {
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/components/base-ui/Group-Search/search_mybookclub.tsx b/src/components/base-ui/Group-Search/search_mybookclub.tsx
index 7b667a9..e756de8 100644
--- a/src/components/base-ui/Group-Search/search_mybookclub.tsx
+++ b/src/components/base-ui/Group-Search/search_mybookclub.tsx
@@ -69,7 +69,7 @@ export default function Mybookclub({ groups, isLoading = false }: Props) {
           <div
             className={[
               "grid grid-cols-1 t:grid-cols-2 d:grid-cols-1 flex-col gap-2",
-              open && showToggle ? "overflow-y-auto pr-1" : "",
+              open && showToggle ? "overflow-y-auto pr-1 no-scrollbar" : "",
             ].join(" ")}
           >
             {displayGroups.map((group) => (
diff --git a/src/components/base-ui/home/home_bookclub.tsx b/src/components/base-ui/home/home_bookclub.tsx
index 90ec5e6..099c8ab 100644
--- a/src/components/base-ui/home/home_bookclub.tsx
+++ b/src/components/base-ui/home/home_bookclub.tsx
@@ -39,9 +39,9 @@ export default function HomeBookclub({ groups }: Props) {
       {count > 0 && (
         <div
           className={[
-            'flex flex-col gap-2',
-            open ? 'flex-1 overflow-y-auto pr-1' : '',
-          ].join(' ')}
+            "flex flex-col gap-2",
+            open ? "flex-1 overflow-y-auto no-scrollbar" : "",
+          ].join(" ")}
         >
           {displayGroups.map((group) => (
             <div