diff --git a/package-lock.json b/package-lock.json
index ebe27e49..36ce19e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,4 +1,3 @@
-
 {
   "name": "codeit3-fe",
   "version": "0.1.0",
diff --git a/public/images/defaultBookClub.jpg b/public/images/defaultBookClub.jpg
new file mode 100644
index 00000000..ec670aad
Binary files /dev/null and b/public/images/defaultBookClub.jpg differ
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 0c4fff54..c438b273 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -4,7 +4,7 @@ import AuthImage from '@/features/auth/container/auth-image/AuthImage';
 
 function Login() {
   return (
-    <div className="mx-auto flex w-full flex-1 flex-col items-center justify-center px-4 lg:flex-row lg:justify-between">
+    <div className="flex w-full flex-1 flex-col items-center justify-center px-4 lg:flex-row lg:justify-between">
       <AuthImage isLoginPage={true} />
       <Suspense fallback={<div>Loading...</div>}>
         <LoginForm />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d3902156..8abe04c8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,9 @@
+import { BookClubMainPage } from '@/features/bookclub/components';
+
 export default function Home() {
   return (
     <div>
-      <h3>hello world</h3>
+      <BookClubMainPage />
     </div>
   );
 }
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 673f3881..de681fd0 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,4 +1,4 @@
-import ProfilePage from '@/features/profile/components/ProfilePage';
+import ProfilePage from '@/features/profile/container/ProfilePage';
 import React from 'react';
 
 const Profile = () => {
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 2f8308d1..05e28876 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -200,6 +200,7 @@ function Card(props: CardProps) {
       case 'defaultClub':
       default: {
         const {
+          clubId,
           imageUrl,
           imageAlt,
           title,
@@ -211,10 +212,11 @@ function Card(props: CardProps) {
           max,
           isPast,
           isCanceled,
-          meetingType,
+          // meetingType,
+          bookClubType,
           onClick,
           onDelete,
-          status,
+          clubStatus,
         } = props as DefaultClubCard & { variant: 'defaultClub' };
 
         return (
@@ -227,11 +229,14 @@ function Card(props: CardProps) {
               onLikeClick={onLikeClick}
             />
 
-            <Card.Box onClick={onClick} className="justify-between">
+            <Card.Box
+              onClick={() => onClick(clubId)}
+              className="justify-between"
+            >
               <div className="flex flex-col gap-0.5">
                 <div className="flex justify-between">
                   <Card.Title>{title}</Card.Title>
-                  <ClubChip variant={meetingType} isPast={isPast} />
+                  <ClubChip variant={bookClubType} isPast={isPast} />
                 </div>
                 <div className="flex items-center gap-1.5">
                   <Card.Location>{location}</Card.Location>
@@ -246,7 +251,7 @@ function Card(props: CardProps) {
                     max={max}
                     isPast={isPast}
                   />
-                  <ClubChip variant={status} isPast={isPast} />
+                  <ClubChip variant={clubStatus} isPast={isPast} />
                 </div>
                 <ProgressBar
                   percentage={(current / max) * 100}
@@ -254,22 +259,24 @@ function Card(props: CardProps) {
                 />
               </div>
             </Card.Box>
-            {isCanceled && <Card.Overlay onDelete={onDelete} />}
+            {isCanceled && <Card.Overlay onDelete={() => onDelete()} />}
           </div>
         );
       }
 
       case 'participatedClub': {
         const {
+          clubId,
           imageUrl,
           imageAlt,
-          isLiked,
-          onLikeClick,
+          // isLiked,
+          // onLikeClick,
           isCanceled,
           onClick,
           onDelete,
-          status,
-          meetingType,
+          clubStatus,
+          // meetingType,
+          bookClubType,
           title,
           location,
           datetime,
@@ -283,17 +290,20 @@ function Card(props: CardProps) {
             <Card.Image
               url={imageUrl}
               alt={imageAlt}
-              isLiked={isLiked}
-              onLikeClick={onLikeClick}
+              // isLiked={isLiked}
+              // onLikeClick={onLikeClick}
             />
-            <Card.Box onClick={onClick} className="justify-between">
+            <Card.Box
+              onClick={() => onClick(clubId)}
+              className="justify-between"
+            >
               <div className="flex flex-col gap-2.5">
                 <div className="flex justify-between">
                   <div className="flex gap-2">
                     <ClubChip variant={isPast ? 'completed' : 'scheduled'} />
-                    <ClubChip variant={status} />
+                    <ClubChip variant={clubStatus} />
                   </div>
-                  <ClubChip variant={meetingType} />
+                  <ClubChip variant={bookClubType} />
                 </div>
                 <div className="flex flex-col">
                   <Card.Title>{title}</Card.Title>
@@ -324,7 +334,7 @@ function Card(props: CardProps) {
                       lightColor="gray-normal-01"
                       onClick={(e) => {
                         e.stopPropagation();
-                        onCancel();
+                        onCancel(clubId);
                       }}
                       className="w-full"
                     />
@@ -332,18 +342,20 @@ function Card(props: CardProps) {
                 </div>
               </div>
             </Card.Box>
-            {isCanceled && <Card.Overlay onDelete={onDelete} />}
+            {isCanceled && <Card.Overlay onDelete={() => onDelete(clubId)} />}
           </div>
         );
       }
 
       case 'hostedClub': {
         const {
+          clubId,
           imageUrl,
           imageAlt,
           onClick,
-          status,
-          meetingType,
+          clubStatus,
+          // meetingType,
+          bookClubType,
           isPast,
           title,
           location,
@@ -355,11 +367,14 @@ function Card(props: CardProps) {
         return (
           <div className="flex flex-col gap-6 md:flex-row">
             <Card.Image url={imageUrl} alt={imageAlt} />
-            <Card.Box onClick={onClick} className="justify-between">
+            <Card.Box
+              onClick={() => onClick(clubId)}
+              className="justify-between"
+            >
               <div className="flex flex-col gap-2.5">
                 <div className="flex justify-between">
-                  <ClubChip variant={isPast ? 'completed' : status} />
-                  <ClubChip variant={meetingType} />
+                  <ClubChip variant={isPast ? 'completed' : clubStatus} />
+                  <ClubChip variant={bookClubType} />
                 </div>
                 <div className="flex flex-col">
                   <Card.Title>{title}</Card.Title>
@@ -413,6 +428,7 @@ function Card(props: CardProps) {
 
       case 'detailedClub': {
         const {
+          clubId,
           imageUrl,
           imageAlt,
           title,
@@ -420,12 +436,13 @@ function Card(props: CardProps) {
           datetime,
           isLiked,
           onLikeClick,
-          meetingType,
+          // meetingType,
+          bookClubType,
           current,
           max,
           isPast,
           host,
-          status,
+          clubStatus,
           participants,
           onClick,
           isHost,
@@ -542,13 +559,13 @@ function Card(props: CardProps) {
                 />
 
                 <Card.Box
-                  onClick={onClick}
-                  className="cursor-default justify-between"
+                  onClick={() => onClick(clubId)}
+                  className="justify-between"
                 >
                   <div className="flex flex-col gap-0.5">
                     <div className="flex justify-between">
                       <Card.Title>{title}</Card.Title>
-                      <ClubChip variant={meetingType} isPast={isPast} />
+                      <ClubChip variant={bookClubType} isPast={isPast} />
                     </div>
                     <div className="flex items-center gap-1.5">
                       <Card.Location>{location}</Card.Location>
@@ -574,7 +591,7 @@ function Card(props: CardProps) {
                           ))}
                         </AvatarGroup>
                       </div>
-                      <ClubChip variant={status} isPast={isPast} />
+                      <ClubChip variant={clubStatus} isPast={isPast} />
                     </div>
                     <ProgressBar
                       percentage={(current / max) * 100}
@@ -598,7 +615,7 @@ function Card(props: CardProps) {
     >
       <article
         className={twMerge(
-          'relative flex h-full w-full min-w-[336px] flex-col',
+          'relative flex h-full min-w-[336px] flex-col md:w-full',
         )}
       >
         {renderCardContent()}
diff --git a/src/components/card/ClubCard.stories.tsx b/src/components/card/ClubCard.stories.tsx
index f5164924..7e66b561 100644
--- a/src/components/card/ClubCard.stories.tsx
+++ b/src/components/card/ClubCard.stories.tsx
@@ -13,9 +13,9 @@ const meta = {
       control: 'select',
       options: ['FREE', 'FIXED'],
     },
-    status: {
+    clubStatus: {
       control: 'select',
-      options: ['completed', 'scheduled', 'pending', 'confirmed', 'closed'],
+      options: ['pending', 'confirmed', 'closed'],
     },
   },
   tags: ['autodocs'],
@@ -28,12 +28,14 @@ const baseArgs = {
   // ClubCard 기본 인터페이스의 속성들
   imageUrl: 'https://picsum.photos/400/300',
   imageAlt: '모임 이미지',
+  clubId: 45,
   title: '을지로 독서 모임',
   location: '을지로 3가',
   datetime: '12/14(토) 오전 10:00',
-  meetingType: 'FREE' as const,
+  meetingType: 'OFFLINE' as const,
+  bookClubType: 'FREE' as const,
   isPast: false,
-  status: 'confirmed' as const,
+  clubStatus: 'confirmed' as const,
   onClick: () => alert('카드 클릭!'),
 } as const;
 
diff --git a/src/components/card/types/clubCard.ts b/src/components/card/types/clubCard.ts
index 5298db4b..a71972af 100644
--- a/src/components/card/types/clubCard.ts
+++ b/src/components/card/types/clubCard.ts
@@ -4,15 +4,17 @@ interface ClubCard {
   imageAlt?: string;
 
   // 모임 정보
+  clubId: number;
   title: string;
   location: string;
   datetime: string;
-  meetingType: 'FREE' | 'FIXED';
+  meetingType: 'ONLINE' | 'OFFLINE';
+  bookClubType: 'FREE' | 'FIXED';
   isPast: boolean; // 지난 모임인지 아닌지
-  status: 'completed' | 'scheduled' | 'pending' | 'confirmed' | 'closed'; // 개설 현황
+  clubStatus: 'pending' | 'confirmed' | 'closed'; // 개설 현황
 
   // 액션 (카드 클릭시 라우터 처리 등)
-  onClick: () => void;
+  onClick: (clubId: number) => void;
 }
 
 interface DefaultClubCard extends ClubCard {
@@ -31,16 +33,16 @@ interface DefaultClubCard extends ClubCard {
 
 interface ParticipatedClubCard extends ClubCard {
   // 찜 정보
-  isLiked: boolean;
-  onLikeClick: () => void;
+  // isLiked: boolean;
+  // onLikeClick: () => void;
 
   // 취소 정보 (블러)
   isCanceled: boolean;
-  onDelete: () => void;
+  onDelete: (clubId: number) => void;
 
   // 버튼 액션
   onWriteReview: () => void; // 리뷰 작성
-  onCancel: () => void; // 모임 취소
+  onCancel: (clubId: number) => void; // 모임 취소
 }
 
 interface HostedClubCard extends ClubCard {
diff --git a/src/components/header/HeaderBar.tsx b/src/components/header/HeaderBar.tsx
index efddc10f..3cfba709 100644
--- a/src/components/header/HeaderBar.tsx
+++ b/src/components/header/HeaderBar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import NavButton from './NavButton';
 import { NAV_ITEMS } from '@/constants/navigation';
 import { usePathname, useRouter } from 'next/navigation';
@@ -10,18 +10,14 @@ import { logout } from '@/features/auth/api/auth';
 
 function HeaderBar() {
   const pathname = usePathname();
-  const { isLoggedIn, user, checkLoginStatus } = useAuthStore();
+  const { isLoggedIn, user } = useAuthStore();
   const router = useRouter();
 
-  useEffect(() => {
-    checkLoginStatus();
-  }, [checkLoginStatus]);
-
   const handleDropDownChange = async (value: string | undefined) => {
     if (value === 'LOGOUT') {
       try {
         await logout();
-        router.replace('/exchange');
+        router.replace('/bookclub');
       } catch (error) {
         console.error('로그아웃 실패:', error);
       }
diff --git a/src/components/pop-up-button/PopUpButton.tsx b/src/components/pop-up-button/PopUpButton.tsx
new file mode 100644
index 00000000..e60fb587
--- /dev/null
+++ b/src/components/pop-up-button/PopUpButton.tsx
@@ -0,0 +1,23 @@
+const THEME_COLOR = {
+  cancel: 'border border-orange-600 bg-white text-orange-600 mr-[8px]',
+  confirm: 'bg-orange-600 text-white',
+};
+
+interface PopUpButtonProps {
+  isConfirm: boolean;
+  // onClick: (
+  //   event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLDivElement>,
+  // ) => void;
+}
+
+function PopUpButton({ isConfirm }: PopUpButtonProps) {
+  return (
+    <button
+      className={`h-[44px] w-[120px] rounded-lg ${isConfirm ? THEME_COLOR.confirm : THEME_COLOR.cancel}`}
+    >
+      {isConfirm ? '확인' : '취소'}
+    </button>
+  );
+}
+
+export default PopUpButton;
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
index 11e5e5a6..a19206f3 100644
--- a/src/constants/navigation.ts
+++ b/src/constants/navigation.ts
@@ -1,5 +1,5 @@
 export const NAV_ITEMS = [
-  { id: 'bookco', href: '/exchange', label: 'bookco' },
+  { id: 'bookco', href: '/bookclub', label: 'bookco' },
   { id: 'bookclub', href: '/bookclub', label: '책 모임' },
   { id: 'exchange', href: '/exchange', label: '책 교환' },
   { id: 'wish', href: '/wish', label: '찜 목록' },
diff --git a/src/features/auth/container/login-form/LoginForm.tsx b/src/features/auth/container/login-form/LoginForm.tsx
index 89d719e2..11ddd0a4 100644
--- a/src/features/auth/container/login-form/LoginForm.tsx
+++ b/src/features/auth/container/login-form/LoginForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Link from 'next/link';
@@ -8,12 +8,14 @@ import Link from 'next/link';
 import Button from '@/components/button/Button';
 import FormField from '@/features/auth/components/form-field/FormField';
 import { useLoginSubmit } from '@/features/auth/hooks/useLoginSubmit';
+import { useAuthStore } from '@/store/authStore';
 import {
   loginFormSchema,
   type LoginFormData,
 } from '@/features/auth/types/loginFormSchema';
 
 export default function LoginForm() {
+  const { checkLoginStatus } = useAuthStore();
   const {
     register,
     handleSubmit,
@@ -25,10 +27,14 @@ export default function LoginForm() {
     mode: 'onChange',
   });
 
+  useEffect(() => {
+    checkLoginStatus();
+  }, [checkLoginStatus]);
+
   const onSubmit = useLoginSubmit(setError, reset);
 
   return (
-    <div className="flex h-auto w-full flex-col items-center justify-center rounded-3xl bg-gray-light-02 px-4 py-8 sm:h-[422px] sm:w-[510px] sm:px-14">
+    <div className="flex w-full max-w-[400px] flex-col items-center justify-center rounded-3xl bg-gray-light-02 px-4 py-8 sm:h-[422px] sm:px-14 md:max-w-[588px] lg:max-w-[510px]">
       <div className="flex w-full flex-col items-center justify-center gap-6">
         <h3 className="text-2xl font-semibold">로그인</h3>
         <form
@@ -54,9 +60,10 @@ export default function LoginForm() {
           />
           <Button
             text="로그인"
-            size="large"
+            size="modal"
             fillType="solid"
             themeColor="green-normal-01"
+            className="w-full"
             isSubmitting={isSubmitting}
             disabled={!isValid}
           />
diff --git a/src/features/auth/hooks/useLoginSubmit.ts b/src/features/auth/hooks/useLoginSubmit.ts
index 016dad72..6cd2bfc4 100644
--- a/src/features/auth/hooks/useLoginSubmit.ts
+++ b/src/features/auth/hooks/useLoginSubmit.ts
@@ -17,7 +17,7 @@ export const useLoginSubmit = (
       console.log('로그인 성공:', response);
       reset();
 
-      const returnUrl = searchParams.get('returnUrl') || '/exchange';
+      const returnUrl = searchParams.get('returnUrl') || '/bookclub';
       router.replace(returnUrl);
     } catch (error) {
       handleAuthError(error, setError);
diff --git a/src/features/bookclub/components/ClubListSection.tsx b/src/features/bookclub/components/ClubListSection.tsx
index 219f6afe..b3af9f86 100644
--- a/src/features/bookclub/components/ClubListSection.tsx
+++ b/src/features/bookclub/components/ClubListSection.tsx
@@ -1,81 +1,105 @@
-// import { Meeting } from '@/components/card/types';
+'use client';
 
 import Card from '@/components/card/Card';
-import { CardProps } from '@/components/card/types';
+import { useRouter } from 'next/navigation';
 
-// const mockImgSrc = '/images/profile.png';
+const cardData = [
+  {
+    clubId: 1,
+    imageUrl: '/images/defaultBookClub.jpg',
+    imageAlt: '모임 이미지',
+    title: '독서 모임 1',
+    location: '서울 강남구',
+    datetime: '2024-01-20 14:00',
+    isLiked: false,
+    current: 3,
+    max: 8,
+    isPast: false,
+    isCanceled: false,
+    clubStatus: 'pending' as const,
+    meetingType: 'OFFLINE' as const,
+    bookClubType: 'FIXED' as const,
 
-// const mockMeeting: Meeting = {
-//   meetingInfo: {
-//     title: '을지로에서 만나는 독서 모임',
-//     category: '자유책',
-//     location: '을지로 3가',
-//     datetime: '12/14(토) 오전 10:00',
-//   },
-//   participationStatus: {
-//     currentParticipants: 17,
-//     maxParticipants: 20,
-//     isConfirmed: true,
-//     confirmedVariant: 'confirmed',
-//     participants: [
-//       {
-//         src: mockImgSrc,
-//         alt: '참가자1',
-//       },
-//       {
-//         src: mockImgSrc,
-//         alt: '참가자2',
-//       },
-//       {
-//         src: mockImgSrc,
-//         alt: '참가자3',
-//       },
-//     ],
-//   },
-//   imageInfo: {
-//     url: mockImgSrc,
-//     isLiked: true,
-//     onLikeClick: () => alert('좋아요를 눌렀습니다!'),
-//   },
-//   isPast: false,
-//   isCanceled: false,
-//   actions: {
-//     onClick: () => alert('카드를 클릭했습니다!'),
-//     onDelete: () => alert('모임을 삭제했습니다!'),
-//   },
-// };
+    // meetingType: 'FIXED', // 정확한 리터럴 값 설정
+    // status: 'pending',
+  },
+  {
+    clubId: 2,
+    imageUrl: '/images/defaultBookClub.jpg',
+    imageAlt: '모임 이미지',
+    title: '독서 모임 1',
+    location: '서울 강남구',
+    datetime: '2024-01-20 14:00',
+    isLiked: false,
+    current: 3,
+    max: 8,
+    isPast: false,
+    isCanceled: false,
+    clubStatus: 'pending' as const,
+    meetingType: 'OFFLINE' as const,
+    bookClubType: 'FIXED' as const,
 
-const defaultCardProps: CardProps = {
-  imageUrl: '/images/profile.png',
-  imageAlt: '모임 이미지',
-  title: '독서 모임',
-  location: '서울 강남구',
-  datetime: '2024-01-20 14:00',
-  isLiked: false,
-  current: 3,
-  max: 8,
-  isPast: false,
-  isCanceled: false,
-  meetingType: 'FIXED',
-  status: 'pending',
-  onLikeClick: () => {
-    console.log('좋아요 클릭');
+    // meetingType: 'FIXED', // 정확한 리터럴 값 설정
+    // status: 'pending',
   },
-  onClick: () => {
-    console.log('카드 클릭');
+  {
+    clubId: 3,
+    imageUrl: '/images/defaultBookClub.jpg',
+    imageAlt: '모임 이미지',
+    title: '독서 모임 1',
+    location: '서울 강남구',
+    datetime: '2024-01-20 14:00',
+    isLiked: false,
+    current: 3,
+    max: 8,
+    isPast: false,
+    isCanceled: false,
+    clubStatus: 'pending' as const,
+    meetingType: 'OFFLINE' as const,
+    bookClubType: 'FIXED' as const,
+
+    // meetingType: 'FIXED', // 정확한 리터럴 값 설정
+    // status: 'pending',
   },
-  onDelete: () => {
-    console.log('삭제 클릭');
+  {
+    clubId: 4,
+    imageUrl: '/images/defaultBookClub.jpg',
+    imageAlt: '모임 이미지',
+    title: '독서 모임 1',
+    location: '서울 강남구',
+    datetime: '2024-01-20 14:00',
+    isLiked: false,
+    current: 3,
+    max: 8,
+    isPast: false,
+    isCanceled: false,
+    clubStatus: 'pending' as const,
+    meetingType: 'OFFLINE' as const,
+    bookClubType: 'FIXED' as const,
+
+    // meetingType: 'FIXED', // 정확한 리터럴 값 설정
+    // status: 'pending',
   },
-};
+];
 
 function ClubListSection() {
+  const router = useRouter();
   return (
     <main className="flex w-full min-w-[336px] flex-col items-center gap-y-[26px] bg-gray-light-01 px-[20px] pt-[18px] sm:justify-between md:px-[24px] lg:px-[102px]">
-      <Card {...defaultCardProps} />
-      <Card {...defaultCardProps} />
-      <Card {...defaultCardProps} />
-      <Card {...defaultCardProps} />
+      {cardData.map((card, index) => (
+        <div className="md:w-full" key={index}>
+          <Card
+            {...card}
+            // // meetingType={'FIXED' as 'FIXED'}
+            // // status="pending"
+            // {...card}
+            variant="defaultClub"
+            onClick={() => router.push(`/bookclub/${card.clubId}`)}
+            onLikeClick={() => console.log('좋아요 클릭')}
+            onDelete={() => console.log('삭제 클릭')}
+          />
+        </div>
+      ))}
     </main>
   );
 }
diff --git a/src/features/bookclub/components/FilterSection.tsx b/src/features/bookclub/components/FilterSection.tsx
index e1193ab1..961d46b7 100644
--- a/src/features/bookclub/components/FilterSection.tsx
+++ b/src/features/bookclub/components/FilterSection.tsx
@@ -19,7 +19,7 @@ function FilterSection() {
           aria-label="책 검색"
         />
       </div>
-      <div className="flex w-full gap-x-2 overflow-x-auto whitespace-nowrap sm:justify-between [&::-webkit-scrollbar]:hidden">
+      <div className="flex w-full gap-x-2 whitespace-nowrap sm:justify-between [&::-webkit-scrollbar]:hidden">
         <div className="flex items-center gap-x-2">
           <DropDown
             variant="onOff"
diff --git a/src/features/bookclub/components/HeaderSection.tsx b/src/features/bookclub/components/HeaderSection.tsx
index 851afd19..51bc1f1a 100644
--- a/src/features/bookclub/components/HeaderSection.tsx
+++ b/src/features/bookclub/components/HeaderSection.tsx
@@ -1,6 +1,11 @@
+'use client';
+
 import Button from '@/components/button/Button';
+import { useRouter } from 'next/navigation';
 
 function HeaderSection() {
+  const router = useRouter();
+
   return (
     <header className="flex h-[120px] w-full min-w-[336px] items-end bg-green-light-01 px-[20px] py-[30px] sm:justify-between md:px-[24px] lg:px-[102px]">
       <h1
@@ -15,6 +20,7 @@ function HeaderSection() {
         size="small"
         fillType="solid"
         themeColor="green-normal-01"
+        onClick={() => router.push('/bookclub/create')}
       />
     </header>
   );
diff --git a/src/features/club-create/container/FormContainer.tsx b/src/features/club-create/container/FormContainer.tsx
index 25c0d45d..7d03a887 100644
--- a/src/features/club-create/container/FormContainer.tsx
+++ b/src/features/club-create/container/FormContainer.tsx
@@ -12,6 +12,7 @@ import {
   ImageField,
 } from '@/features/club-create/container';
 import { useBookClubForm } from '@/features/club-create/hooks';
+import PopUp from '@/components/pop-up/PopUp';
 
 function FormContainer() {
   const {
@@ -23,121 +24,133 @@ function FormContainer() {
     watch,
     onSubmit,
     isLoading,
+    showSuccessPopup,
+    handlePopUpClose,
+    handlePopUpConfirm,
   } = useBookClubForm();
 
   return (
-    <form onSubmit={onSubmit} className="flex flex-col gap-10">
-      <CreateClubFormField
-        label="모임 이름"
-        error={errors.title?.message}
-        currentLength={watch('title')?.length || 0}
-        maxLength={30}
-      >
-        <InputField
-          register={register('title')}
-          placeholder="지정책 모임인 경우, 책 이름을 넣어주세요"
-        />
-      </CreateClubFormField>
+    <>
+      <form onSubmit={onSubmit} className="flex flex-col gap-10">
+        <CreateClubFormField
+          label="모임 이름"
+          error={errors.title?.message}
+          currentLength={watch('title')?.length || 0}
+          maxLength={30}
+        >
+          <InputField
+            register={register('title')}
+            placeholder="지정책 모임인 경우, 책 이름을 넣어주세요"
+          />
+        </CreateClubFormField>
 
-      <CreateClubFormField
-        label="모임 상세 설명"
-        error={errors.description?.message}
-        currentLength={watch('description')?.length || 0}
-        maxLength={30}
-      >
-        <InputField
-          register={register('description')}
-          placeholder="모임에 대한 설명을 입력해 주세요 (오프라인 모임시 만나는 장소도 같이 입력해 주세요!)"
-        />
-      </CreateClubFormField>
+        <CreateClubFormField
+          label="모임 상세 설명"
+          error={errors.description?.message}
+          currentLength={watch('description')?.length || 0}
+          maxLength={30}
+        >
+          <InputField
+            register={register('description')}
+            placeholder="모임에 대한 설명을 입력해 주세요 (오프라인 모임시 만나는 장소도 같이 입력해 주세요!)"
+          />
+        </CreateClubFormField>
 
-      <ImageField
-        register={register}
-        setValue={setValue}
-        error={errors.image?.message?.toString()}
-      />
-
-      <CreateClubFormField
-        label="자유책 / 지정책"
-        error={errors.bookClubType?.message}
-      >
-        <RadioButtonGroup
-          options={[
-            {
-              label: '자유책',
-              value: 'FREE',
-              description:
-                '읽고 싶은 책을 자유롭게 선택하고 각자의 생각을 나눠요.',
-            },
-            {
-              label: '지정책',
-              value: 'FIXED',
-              description: '한 권의 책을 선정해 깊이 있는 토론을 진행해요.',
-            },
-          ]}
-          selectedValue={watch('bookClubType')}
-          register={register('bookClubType')}
+        <ImageField
+          register={register}
           setValue={setValue}
-          name="bookClubType"
+          error={errors.image?.message?.toString()}
         />
-      </CreateClubFormField>
 
-      <CreateClubFormField
-        label="온라인 / 오프라인"
-        error={errors.meetingType?.message}
-      >
-        <RadioButtonGroup
-          options={[
-            { label: '온라인', value: 'ONLINE' },
-            { label: '오프라인', value: 'OFFLINE' },
-          ]}
-          selectedValue={watch('meetingType')}
-          register={register('meetingType')}
-          setValue={setValue}
-          name="meetingType"
-          town={watch('town')}
+        <CreateClubFormField
+          label="자유책 / 지정책"
+          error={errors.bookClubType?.message}
+        >
+          <RadioButtonGroup
+            options={[
+              {
+                label: '자유책',
+                value: 'FREE',
+                description:
+                  '읽고 싶은 책을 자유롭게 선택하고 각자의 생각을 나눠요.',
+              },
+              {
+                label: '지정책',
+                value: 'FIXED',
+                description: '한 권의 책을 선정해 깊이 있는 토론을 진행해요.',
+              },
+            ]}
+            selectedValue={watch('bookClubType')}
+            register={register('bookClubType')}
+            setValue={setValue}
+            name="bookClubType"
+          />
+        </CreateClubFormField>
+
+        <CreateClubFormField
+          label="온라인 / 오프라인"
+          error={errors.meetingType?.message}
+        >
+          <RadioButtonGroup
+            options={[
+              { label: '온라인', value: 'ONLINE' },
+              { label: '오프라인', value: 'OFFLINE' },
+            ]}
+            selectedValue={watch('meetingType')}
+            register={register('meetingType')}
+            setValue={setValue}
+            name="meetingType"
+            town={watch('town')}
+          />
+        </CreateClubFormField>
+
+        <DatePickerContainer
+          control={control}
+          name="targetDate"
+          label="언제 만나나요?"
+          error={errors.targetDate?.message}
+          placeholder="만나는 날짜를 선택해 주세요!"
         />
-      </CreateClubFormField>
 
-      <DatePickerContainer
-        control={control}
-        name="targetDate"
-        label="언제 만나나요?"
-        error={errors.targetDate?.message}
-        placeholder="만나는 날짜를 선택해 주세요!"
-      />
+        <DatePickerContainer
+          control={control}
+          name="endDate"
+          label="언제 모임을 마감할까요?"
+          error={errors.endDate?.message}
+          placeholder="모임의 모집 마감 날짜를 선택해 주세요!"
+        />
 
-      <DatePickerContainer
-        control={control}
-        name="endDate"
-        label="언제 모임을 마감할까요?"
-        error={errors.endDate?.message}
-        placeholder="모임의 모집 마감 날짜를 선택해 주세요!"
-      />
+        <CreateClubFormField
+          label="모임 정원"
+          error={errors.memberLimit?.message}
+          currentLength={watch('memberLimit') || 0}
+          maxLength={20}
+        >
+          <InputField
+            type="number"
+            register={register('memberLimit', { valueAsNumber: true })}
+            placeholder="최소 3인이상 입력해 주세요"
+          />
+        </CreateClubFormField>
 
-      <CreateClubFormField
-        label="모임 정원"
-        error={errors.memberLimit?.message}
-        currentLength={watch('memberLimit') || 0}
-        maxLength={20}
-      >
-        <InputField
-          type="number"
-          register={register('memberLimit', { valueAsNumber: true })}
-          placeholder="최소 3인이상 입력해 주세요"
+        <Button
+          type="submit"
+          text={isLoading ? '생성 중...' : '확인'}
+          size="medium"
+          fillType="solid"
+          themeColor="green-normal-01"
+          disabled={!isValid || isLoading}
+          className="h-14"
         />
-      </CreateClubFormField>
+      </form>
 
-      <Button
-        type="submit"
-        text={isLoading ? '생성 중...' : '확인'}
-        size="medium"
-        fillType="solid"
-        themeColor="green-normal-01"
-        disabled={!isValid || isLoading}
-        className="h-14"
+      <PopUp
+        isOpen={showSuccessPopup}
+        label="새 모임이 성공적으로 생성되었습니다!"
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpConfirm={handlePopUpConfirm}
       />
-    </form>
+    </>
   );
 }
 
diff --git a/src/features/club-create/hooks/useBookClubForm.ts b/src/features/club-create/hooks/useBookClubForm.ts
index efe44f2c..efc4f1be 100644
--- a/src/features/club-create/hooks/useBookClubForm.ts
+++ b/src/features/club-create/hooks/useBookClubForm.ts
@@ -1,10 +1,17 @@
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { BookClubForm, bookClubSchema } from '../types';
-import { useCreateBookClub } from '@/features/club-create/hooks';
+import { useCreateBookClub } from './useCreateBookClub';
+import { usePopup } from './usePopup';
 
 export const useBookClubForm = () => {
   const { onSubmit: createBookClub, isLoading } = useCreateBookClub();
+  const {
+    setShowSuccessPopup,
+    showSuccessPopup,
+    handlePopUpClose,
+    handlePopUpConfirm,
+  } = usePopup();
 
   const form = useForm<BookClubForm>({
     resolver: zodResolver(bookClubSchema),
@@ -19,7 +26,14 @@ export const useBookClubForm = () => {
     watch,
   } = form;
 
-  const onSubmit = handleSubmit(createBookClub);
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      await createBookClub(data);
+      setShowSuccessPopup(true);
+    } catch (error) {
+      console.error(error);
+    }
+  });
 
   return {
     form,
@@ -31,5 +45,8 @@ export const useBookClubForm = () => {
     watch,
     onSubmit,
     isLoading,
+    showSuccessPopup,
+    handlePopUpClose,
+    handlePopUpConfirm,
   };
 };
diff --git a/src/features/club-create/hooks/useCreateBookClub.ts b/src/features/club-create/hooks/useCreateBookClub.ts
index 74765377..aa05ae29 100644
--- a/src/features/club-create/hooks/useCreateBookClub.ts
+++ b/src/features/club-create/hooks/useCreateBookClub.ts
@@ -14,7 +14,6 @@ export const useCreateBookClub = () => {
 
     try {
       const response = await createBookClub(data);
-      alert('북클럽이 성공적으로 생성되었습니다!');
       return response;
     } catch (error) {
       setError('북클럽 생성에 실패했습니다.');
diff --git a/src/features/club-create/hooks/usePopup.ts b/src/features/club-create/hooks/usePopup.ts
new file mode 100644
index 00000000..b4f7a892
--- /dev/null
+++ b/src/features/club-create/hooks/usePopup.ts
@@ -0,0 +1,26 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export const usePopup = () => {
+  const router = useRouter();
+  const [showSuccessPopup, setShowSuccessPopup] = useState(false);
+
+  const handlePopUpClose = () => {
+    setShowSuccessPopup(true);
+    router.push('/bookclub');
+  };
+
+  const handlePopUpConfirm = () => {
+    setShowSuccessPopup(true);
+    router.push('/bookclub');
+  };
+
+  return {
+    showSuccessPopup,
+    setShowSuccessPopup,
+    handlePopUpClose,
+    handlePopUpConfirm,
+  };
+};
diff --git a/src/features/club-details/components/HeaderSection.tsx b/src/features/club-details/components/HeaderSection.tsx
index 993267c7..c0353318 100644
--- a/src/features/club-details/components/HeaderSection.tsx
+++ b/src/features/club-details/components/HeaderSection.tsx
@@ -39,6 +39,7 @@ function HeaderSection() {
   const EXAMPLE_IMAGE = '/images/profile.png';
 
   const defaultCardProps: CardProps = {
+    clubId: 45,
     variant: 'detailedClub',
     imageUrl: EXAMPLE_IMAGE,
     imageAlt: '모임 이미지',
@@ -49,8 +50,9 @@ function HeaderSection() {
     current: 3,
     max: 8,
     isPast: false,
-    meetingType: 'FIXED',
-    status: 'pending',
+    meetingType: 'OFFLINE',
+    bookClubType: 'FIXED',
+    clubStatus: 'pending',
     onClick: () => {},
     onLikeClick: () => {
       setIsLiked(!isLiked);
@@ -104,7 +106,7 @@ function HeaderSection() {
   };
 
   return (
-    <header className="py-6">
+    <header className="flex justify-center py-6">
       <Card {...defaultCardProps} />
       <PopUp
         isOpen={isOpen}
diff --git a/src/features/profile/components/clubs/HostedClubsList.tsx b/src/features/profile/components/clubs/HostedClubsList.tsx
index 17650279..20efa5ab 100644
--- a/src/features/profile/components/clubs/HostedClubsList.tsx
+++ b/src/features/profile/components/clubs/HostedClubsList.tsx
@@ -1,3 +1,12 @@
-export default function HostedClubList() {
+import { User } from '../../types';
+
+interface HostedClubListProps {
+  user: User | null;
+  sortBy: string | undefined;
+}
+
+export default function HostedClubList({ user, sortBy }: HostedClubListProps) {
+  console.log(user);
+  console.log(sortBy);
   return <div>내가 만든 모임 뷰</div>;
 }
diff --git a/src/features/profile/components/clubs/JoinedClubList.tsx b/src/features/profile/components/clubs/JoinedClubList.tsx
index 6961689e..3062055c 100644
--- a/src/features/profile/components/clubs/JoinedClubList.tsx
+++ b/src/features/profile/components/clubs/JoinedClubList.tsx
@@ -1,3 +1,257 @@
-export default function JoinedClubList() {
-  return <div>나의 모임 뷰</div>;
+import Card from '@/components/card/Card';
+import { BookClub, User } from '../../types';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { WriteReviewModal } from '../clubs';
+
+interface JoinedClubListProps {
+  user: User | null;
+  sortBy: string | undefined;
+}
+
+const mockJoinedBookClubList: BookClub[] = [
+  {
+    clubId: 1,
+    title: '문학의 밤',
+    description: '다양한 문학 작품을 함께 읽고 토론하는 모임입니다.',
+    meetingType: 'OFFLINE',
+    bookClubType: 'FIXED',
+    targetDate: '2024-01-10',
+    endDate: '2024-12-10',
+    memberLimit: 20,
+    town: '서울',
+    memberCount: 15,
+    isLiked: true,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'confirmed',
+  },
+  {
+    clubId: 2,
+    title: '과학 탐험',
+    description:
+      '최신 과학 서적을 읽고 실험을 통해 배운 내용을 공유하는 모임입니다.',
+    meetingType: 'ONLINE',
+    bookClubType: 'FREE',
+    targetDate: '2024-02-15',
+    endDate: '2024-08-15',
+    memberLimit: 30,
+    town: '부산',
+    memberCount: 25,
+    isLiked: false,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'pending',
+  },
+  {
+    clubId: 3,
+    title: '추리 소설 독서회',
+    description: '추리 소설을 읽고 결말을 예측하며 토론하는 모임입니다.',
+    meetingType: 'OFFLINE',
+    bookClubType: 'FIXED',
+    targetDate: '2024-03-20',
+    endDate: '2024-11-20',
+    memberLimit: 10,
+    town: '대전',
+    memberCount: 8,
+    isLiked: true,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'confirmed',
+  },
+  {
+    clubId: 4,
+    title: '로맨스 북클럽',
+    description: '사랑과 감정을 주제로 한 로맨스 소설을 읽는 모임입니다.',
+    meetingType: 'ONLINE',
+    bookClubType: 'FREE',
+    targetDate: '2024-04-25',
+    endDate: '2024-10-25',
+    memberLimit: 25,
+    town: '인천',
+    memberCount: 20,
+    isLiked: false,
+    isCanceled: true,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'closed',
+  },
+  {
+    clubId: 5,
+    title: '비즈니스 책 모임',
+    description:
+      '비즈니스 전략과 아이디어를 다룬 책을 읽고 토론하는 모임입니다.',
+    meetingType: 'OFFLINE',
+    bookClubType: 'FIXED',
+    targetDate: '2024-05-30',
+    endDate: '2024-11-30',
+    memberLimit: 15,
+    town: '경기',
+    memberCount: 12,
+    isLiked: true,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: true,
+    clubStatus: 'closed',
+  },
+  {
+    clubId: 6,
+    title: '고전 문학',
+    description: '고전 문학 작품을 읽고 그 의미를 되새기는 모임입니다.',
+    meetingType: 'ONLINE',
+    bookClubType: 'FREE',
+    targetDate: '2024-06-05',
+    endDate: '2024-12-05',
+    memberLimit: 18,
+    town: '서울',
+    memberCount: 10,
+    isLiked: true,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'confirmed',
+  },
+  {
+    clubId: 7,
+    title: '환경 보호 독서회',
+    description: '환경과 관련된 주제의 책을 읽고 토론하는 모임입니다.',
+    meetingType: 'OFFLINE',
+    bookClubType: 'FIXED',
+    targetDate: '2024-07-15',
+    endDate: '2024-12-15',
+    memberLimit: 20,
+    town: '대구',
+    memberCount: 17,
+    isLiked: false,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'pending',
+  },
+  {
+    clubId: 8,
+    title: '스타트업 독서 모임',
+    description: '스타트업 관련 책을 읽고 창업 아이디어를 나누는 모임입니다.',
+    meetingType: 'ONLINE',
+    bookClubType: 'FREE',
+    targetDate: '2024-08-10',
+    endDate: '2024-12-10',
+    memberLimit: 10,
+    town: '서울',
+    memberCount: 7,
+    isLiked: true,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'confirmed',
+  },
+  {
+    clubId: 9,
+    title: '디지털 혁명',
+    description: '디지털 시대 혁신적인 책을 읽고 토론하는 모임입니다.',
+    meetingType: 'OFFLINE',
+    bookClubType: 'FIXED',
+    targetDate: '2024-09-05',
+    endDate: '2024-11-05',
+    memberLimit: 30,
+    town: '부산',
+    memberCount: 22,
+    isLiked: false,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'confirmed',
+  },
+  {
+    clubId: 10,
+    title: '인문학 읽기',
+    description: '인문학적 사유를 통해 통찰을 얻는 독서 모임입니다.',
+    meetingType: 'ONLINE',
+    bookClubType: 'FREE',
+    targetDate: '2024-10-12',
+    endDate: '2024-12-12',
+    memberLimit: 20,
+    town: '광주',
+    memberCount: 15,
+    isLiked: true,
+    isCanceled: false,
+    imageUrl: '/images/defaultBookClub.jpg',
+    isPast: false,
+    clubStatus: 'confirmed',
+  },
+];
+
+export default function JoinedClubList({ user, sortBy }: JoinedClubListProps) {
+  console.log(user, sortBy);
+
+  const router = useRouter();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // const bookClubList: BookClub[] = [];
+  const bookClubList = mockJoinedBookClubList;
+  const NO_LIST_MESSAGE =
+    '아직 신청한 모임이 없어요.\n지금 바로 책 모임을 신청해 보세요';
+
+  //카드 컴포넌트 클릭 시 해당 모임 상세페이지로 라우팅
+  const handleCardClick = (clubId: number) => {
+    router.push(`/bookclub/${clubId}`);
+  };
+
+  const handleCancelClick = (clubId: number) => {
+    alert(`${clubId}취소하기`);
+    //TODO: 취소 확인 팝업 표시, API작업 필요
+  };
+
+  const handleDeleteClick = (clubId: number) => {
+    alert(`${clubId}삭제하기`);
+    //TODO: 삭제 확인 팝업 표시, API 작업 필요
+  };
+
+  const onSubmitReview = (rating: number, review: string) => {
+    alert(`점수:${rating} 리뷰:${review}`);
+    //TODO: API 작업 필요
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="flex w-full flex-col items-center justify-center gap-y-[26px]">
+      <WriteReviewModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={(rating, review) => onSubmitReview(rating, review)}
+      />
+      {bookClubList.length === 0 ? (
+        <div className="flex h-full pt-[255px] text-center text-gray-normal-03">
+          <span className="whitespace-pre-wrap">{NO_LIST_MESSAGE}</span>
+        </div>
+      ) : (
+        bookClubList.map((bookClub, index) => (
+          <div key={index} className="md:w-full">
+            {/* TODO: isCanceled, imageUrl. isPast, status 수정 */}
+            <Card
+              variant="participatedClub"
+              clubId={bookClub.clubId}
+              isCanceled={bookClub.isCanceled}
+              imageUrl={bookClub.imageUrl}
+              title={bookClub.title}
+              location={bookClub.town}
+              datetime={bookClub.targetDate}
+              meetingType={bookClub.meetingType}
+              bookClubType={bookClub.bookClubType}
+              isPast={bookClub.isPast}
+              clubStatus={bookClub.clubStatus}
+              onClick={(clubId) => handleCardClick(clubId)}
+              onCancel={(clubId) => handleCancelClick(clubId)}
+              onWriteReview={() => setIsModalOpen(true)}
+              onDelete={(clubId) => handleDeleteClick(clubId)}
+            />
+          </div>
+        ))
+      )}
+    </div>
+  );
 }
diff --git a/src/features/profile/components/clubs/MyReviewList.tsx b/src/features/profile/components/clubs/MyReviewList.tsx
index 47c32930..75a20e5c 100644
--- a/src/features/profile/components/clubs/MyReviewList.tsx
+++ b/src/features/profile/components/clubs/MyReviewList.tsx
@@ -1,3 +1,12 @@
-export default function MyReviewList() {
+import { User } from '../../types';
+
+interface MyReviewListProps {
+  user: User | null;
+  sortBy: string | undefined;
+}
+
+export default function MyReviewList({ user, sortBy }: MyReviewListProps) {
+  console.log(user);
+  console.log(sortBy);
   return <div>나의 리뷰 뷰</div>;
 }
diff --git a/src/features/profile/components/WriteReviewModal.tsx b/src/features/profile/components/clubs/WriteReviewModal.tsx
similarity index 97%
rename from src/features/profile/components/WriteReviewModal.tsx
rename to src/features/profile/components/clubs/WriteReviewModal.tsx
index 0f2ba14d..b0e989b0 100644
--- a/src/features/profile/components/WriteReviewModal.tsx
+++ b/src/features/profile/components/clubs/WriteReviewModal.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import Modal from '@/components/modal/Modal';
-import RatingIcon from '../../../../public/icons/RatingIcon';
+import RatingIcon from '../../../../../public/icons/RatingIcon';
 
 const INITIAL_RATING = 5;
 const RATING_RANGE = [1, 2, 3, 4, 5] as const;
diff --git a/src/features/profile/components/clubs/index.ts b/src/features/profile/components/clubs/index.ts
new file mode 100644
index 00000000..abd2d29c
--- /dev/null
+++ b/src/features/profile/components/clubs/index.ts
@@ -0,0 +1,4 @@
+export { default as HostedClubList } from './HostedClubsList';
+export { default as JoinedClubList } from './JoinedClubList';
+export { default as MyReviewList } from './MyReviewList';
+export { default as WriteReviewModal } from './WriteReviewModal';
diff --git a/src/features/profile/components/exchange/ExchangeContents.tsx b/src/features/profile/components/exchange/ExchangeContents.tsx
index b7326c91..f7c2929c 100644
--- a/src/features/profile/components/exchange/ExchangeContents.tsx
+++ b/src/features/profile/components/exchange/ExchangeContents.tsx
@@ -1,12 +1,10 @@
 import SortingButton from '@/components/sorting-button/SortingButton';
 import { EXCHANGE_TABS, ExchangeTab } from '@/constants';
 import { useState } from 'react';
-import TradeRecords from './TradeRecords';
-import MyRegisteredBooks from './MyRegisteredBooks';
-import TradeReviews from './TradeReviews';
+import { MyRegisteredBooks, TradeRecords, TradeReviews } from '../exchange';
 import Tab from '@/components/tab/Tab';
 
-export default function ClubContents() {
+export default function ExchangeContents() {
   const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');
   const [selectedList, setSelectedList] = useState<ExchangeTab>(
     EXCHANGE_TABS[0],
diff --git a/src/features/profile/components/exchange/index.ts b/src/features/profile/components/exchange/index.ts
new file mode 100644
index 00000000..aaaf3d63
--- /dev/null
+++ b/src/features/profile/components/exchange/index.ts
@@ -0,0 +1,4 @@
+export { default as ExchangeContents } from './ExchangeContents';
+export { default as MyRegisteredBooks } from './MyRegisteredBooks';
+export { default as TradeRecords } from './TradeRecords';
+export { default as TradeReviews } from './TradeReviews';
diff --git a/src/features/profile/components/profile/Profile.stories.tsx b/src/features/profile/components/profile/Profile.stories.tsx
index fe17b4b2..d14873ca 100644
--- a/src/features/profile/components/profile/Profile.stories.tsx
+++ b/src/features/profile/components/profile/Profile.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Profile from './Profile';
-import User from '../../types/user';
+import { User } from '../../types';
 
 const mockUser: User = {
   teamId: '1',
diff --git a/src/features/profile/components/profile/Profile.test.tsx b/src/features/profile/components/profile/Profile.test.tsx
index 973cbd3f..dacf4893 100644
--- a/src/features/profile/components/profile/Profile.test.tsx
+++ b/src/features/profile/components/profile/Profile.test.tsx
@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import Profile from './Profile';
 import { render, screen } from '@testing-library/react';
-import User from '../../types/user';
 import userEvent from '@testing-library/user-event';
+import { User } from '../../types';
 
 const mockUser: User = {
   teamId: '1',
diff --git a/src/features/profile/components/profile/Profile.tsx b/src/features/profile/components/profile/Profile.tsx
index 85bbd5f1..92c82c70 100644
--- a/src/features/profile/components/profile/Profile.tsx
+++ b/src/features/profile/components/profile/Profile.tsx
@@ -3,14 +3,14 @@
 import { useState } from 'react';
 import Avatar from '@/components/avatar/Avatar';
 import { IcEdit } from '../../../../../public/icons/index';
-import ProfileEditModal from '../ProfileEditModal';
 import { ProfileEditData, ProfilePageProps } from '../../types';
+import ProfileEditModal from './ProfileEditModal';
 
 function Profile({ user }: ProfilePageProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const onSubmitEditProfile = (formData: ProfileEditData) => {
-    alert(`name:${formData.name}, companyName:${formData.companyName}`);
+    alert(`name:${formData.name}, companyName:${formData.description}`);
     setIsModalOpen(false);
   };
 
@@ -53,7 +53,7 @@ function Profile({ user }: ProfilePageProps) {
         {/* 프로필 이미지 */}
         <div className="mr-6 h-[80px] w-[80px] rounded-full border-[3px] border-gray-normal-01">
           <Avatar
-            src={user?.image ?? '/images/profile.png'}
+            src={user?.image || '/images/profile.png'}
             alt="profile_page_profile_image"
             size="max"
           />
diff --git a/src/features/profile/components/ProfileEditModal.tsx b/src/features/profile/components/profile/ProfileEditModal.tsx
similarity index 98%
rename from src/features/profile/components/ProfileEditModal.tsx
rename to src/features/profile/components/profile/ProfileEditModal.tsx
index 4091c7d3..6c67a17b 100644
--- a/src/features/profile/components/ProfileEditModal.tsx
+++ b/src/features/profile/components/profile/ProfileEditModal.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useAuthStore } from '@/store/authStore';
 import Avatar from '@/components/avatar/Avatar';
-import EditIcon from '../../../../public/icons/EditIcon';
 import Modal from '@/components/modal/Modal';
+import { EditIcon } from '../../../../../public/icons';
 
 interface ProfileData {
   name: string;
diff --git a/src/features/profile/components/profile/index.ts b/src/features/profile/components/profile/index.ts
new file mode 100644
index 00000000..1792c9cf
--- /dev/null
+++ b/src/features/profile/components/profile/index.ts
@@ -0,0 +1,2 @@
+export { default as ProfileEditModal } from './ProfileEditModal';
+export { default as Profile } from './Profile';
diff --git a/src/features/profile/components/clubs/ClubContents.tsx b/src/features/profile/container/ClubContents.tsx
similarity index 68%
rename from src/features/profile/components/clubs/ClubContents.tsx
rename to src/features/profile/container/ClubContents.tsx
index 6fa42003..6a14885b 100644
--- a/src/features/profile/components/clubs/ClubContents.tsx
+++ b/src/features/profile/container/ClubContents.tsx
@@ -1,29 +1,32 @@
 import SortingButton from '@/components/sorting-button/SortingButton';
 import { CLUB_TABS, ClubTab } from '@/constants';
 import { useState } from 'react';
-import JoinedClubList from './JoinedClubList';
-import MyReviewList from './MyReviewList';
-import HostedClubList from './HostedClubsList';
 import Tab from '@/components/tab/Tab';
+import { ProfilePageProps } from '../types';
+import {
+  HostedClubList,
+  JoinedClubList,
+  MyReviewList,
+} from '../components/clubs';
 
-export default function ClubContents() {
+export default function ClubContents({ user }: ProfilePageProps) {
   const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');
   const [selectedList, setSelectedList] = useState<ClubTab>(CLUB_TABS[0]);
 
   const renderList = (selectedList: ClubTab) => {
     switch (selectedList) {
       case CLUB_TABS[0]:
-        return <JoinedClubList />;
+        return <JoinedClubList user={user} sortBy={sortBy} />;
       case CLUB_TABS[1]:
-        return <HostedClubList />;
+        return <HostedClubList user={user} sortBy={sortBy} />;
       case CLUB_TABS[2]:
-        return <MyReviewList />;
+        return <MyReviewList user={user} sortBy={sortBy} />;
     }
   };
 
   return (
     <div
-      className="min-h-screen w-full flex-grow bg-gray-light-02 pt-3 sm:px-[20px] sm:pb-[44px] md:px-[24px] md:pb-[45px] lg:px-[102px] lg:pb-[41px]"
+      className="w-full flex-1 flex-grow bg-gray-light-02 pt-3 sm:px-[20px] sm:pb-[44px] md:px-[24px] md:pb-[45px] lg:px-[102px] lg:pb-[41px]"
       role="main"
     >
       <div className="flex items-center justify-between gap-x-2 sm:overflow-auto sm:whitespace-nowrap sm:[&::-webkit-scrollbar]:hidden">
diff --git a/src/features/profile/components/MainContent.tsx b/src/features/profile/container/MainContent.tsx
similarity index 67%
rename from src/features/profile/components/MainContent.tsx
rename to src/features/profile/container/MainContent.tsx
index cb24dd8c..483ebc3b 100644
--- a/src/features/profile/components/MainContent.tsx
+++ b/src/features/profile/container/MainContent.tsx
@@ -2,14 +2,15 @@
 import Tab from '@/components/tab/Tab';
 import { CONTENT_TABS, ContentTab } from '@/constants';
 import { useState } from 'react';
-import ClubContents from './clubs/ClubContents';
-import ExchangeContents from './exchange/ExchangeContents';
+import { ClubContents } from '../container';
+import ExchangeContents from '../components/exchange/ExchangeContents';
+import { ProfilePageProps } from '../types';
 
-function MainContent() {
+function MainContent({ user }: ProfilePageProps) {
   const [selectedTab, setSelectedTab] = useState<ContentTab>(CONTENT_TABS[0]);
 
   return (
-    <div>
+    <div className="flex w-full flex-1 flex-col">
       <div className="w-full border-b-2 sm:px-5 md:px-6 lg:px-[102px]">
         <Tab
           items={CONTENT_TABS}
@@ -19,7 +20,7 @@ function MainContent() {
         />
       </div>
       {selectedTab === CONTENT_TABS[0] ? (
-        <ClubContents />
+        <ClubContents user={user} />
       ) : (
         <ExchangeContents />
       )}
diff --git a/src/features/profile/container/ProfileHeader.tsx b/src/features/profile/container/ProfileHeader.tsx
new file mode 100644
index 00000000..305a9329
--- /dev/null
+++ b/src/features/profile/container/ProfileHeader.tsx
@@ -0,0 +1,14 @@
+import { ProfilePageProps } from '../types';
+import { Profile } from '../components/profile';
+
+export default function ProfileHeader({ user }: ProfilePageProps) {
+  return (
+    <div className="flex w-full min-w-[336px] flex-col items-center pb-[20px] pt-[24px] sm:pl-[20px] sm:pr-[19px] md:px-[24px] lg:px-[102px]">
+      {/* TODO: 프로필 페이지가 로그인된 유저의 프로필 페이지와 일치 여부 확인 후 마이페이지 or **님의 페이지 */}
+      <span className="w-full min-w-[336px] text-2xl font-bold text-gray-black">
+        마이 페이지
+      </span>
+      <Profile user={user} />
+    </div>
+  );
+}
diff --git a/src/features/profile/components/ProfilePage.tsx b/src/features/profile/container/ProfilePage.tsx
similarity index 72%
rename from src/features/profile/components/ProfilePage.tsx
rename to src/features/profile/container/ProfilePage.tsx
index a010bf05..f246ad0e 100644
--- a/src/features/profile/components/ProfilePage.tsx
+++ b/src/features/profile/container/ProfilePage.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import MainContent from './MainContent';
-import ProfileHeader from './ProfileHeader';
 import { useAuthStore } from '@/store/authStore';
+import { MainContent, ProfileHeader } from '../container';
 
 function ProfilePage() {
   const { user } = useAuthStore();
@@ -10,7 +9,7 @@ function ProfilePage() {
   return (
     <div className="flex w-full min-w-[375px] flex-1 flex-col">
       <ProfileHeader user={user} />
-      <MainContent />
+      <MainContent user={user} />
     </div>
   );
 }
diff --git a/src/features/profile/container/index.ts b/src/features/profile/container/index.ts
index cb0ff5c3..35ae0bdc 100644
--- a/src/features/profile/container/index.ts
+++ b/src/features/profile/container/index.ts
@@ -1 +1,4 @@
-export {};
+export { default as ClubContents } from './ClubContents';
+export { default as MainContent } from './MainContent';
+export { default as ProfileHeader } from './ProfileHeader';
+export { default as Profile } from './ProfilePage';
diff --git a/src/features/profile/types/index.ts b/src/features/profile/types/index.ts
index c948e72e..c7010aab 100644
--- a/src/features/profile/types/index.ts
+++ b/src/features/profile/types/index.ts
@@ -1,4 +1,13 @@
-import User from './user';
+export interface User {
+  teamId: string;
+  id: number;
+  email: string;
+  name: string;
+  description?: string | null;
+  image?: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
 
 export interface ProfilePageProps {
   user: User | null;
@@ -6,6 +15,25 @@ export interface ProfilePageProps {
 
 export interface ProfileEditData {
   name: string;
-  companyName?: string;
+  description?: string;
   image?: string | null;
 }
+
+//TODO: isCanceled, imageUrl. isPast, status 수정
+export interface BookClub {
+  clubId: number;
+  title: string;
+  description: string;
+  meetingType: 'ONLINE' | 'OFFLINE';
+  bookClubType: 'FREE' | 'FIXED';
+  targetDate: string;
+  endDate: string;
+  memberLimit: number;
+  town: string;
+  memberCount: number;
+  isLiked: boolean;
+  isCanceled: boolean;
+  imageUrl: string;
+  isPast: boolean;
+  clubStatus: 'pending' | 'confirmed' | 'closed';
+}
diff --git a/src/features/profile/types/user.ts b/src/features/profile/types/user.ts
index 2c5c42f5..81ab2bc2 100644
--- a/src/features/profile/types/user.ts
+++ b/src/features/profile/types/user.ts
@@ -1,10 +1,10 @@
-export default interface User {
-  teamId: string;
-  id: number;
-  email: string;
-  name: string;
-  description?: string | null;
-  image?: string | null;
-  createdAt: Date;
-  updatedAt: Date;
-}
+// export default interface User {
+//   teamId: string;
+//   id: number;
+//   email: string;
+//   name: string;
+//   description?: string | null;
+//   image?: string | null;
+//   createdAt: Date;
+//   updatedAt: Date;
+// }
diff --git a/src/middleware.ts b/src/middleware.ts
index 1b764c86..91fcba4a 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
-const AUTH_REQUIRED_PATHS = ['/wish', '/profile'];
+const AUTH_REQUIRED_PATHS = ['/wish', '/profile', '/bookclub/create'];
 
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
@@ -24,5 +24,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/wish', '/profile', '/login'],
+  matcher: ['/wish', '/profile', '/login', '/bookclub/create'],
 };