From a0ead0bc39bfffa6bf91004b3d1758ad28cb3b73 Mon Sep 17 00:00:00 2001
From: mgYang53 <mg960503@gmail.com>
Date: Thu, 19 Feb 2026 23:10:34 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20=EB=B0=8F=20?=
 =?UTF-8?q?CSS=20=ED=95=B5=20=EC=A0=9C=EA=B1=B0=20(#83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FullWidthLayout으로 9개 페이지 전환하여 뷰포트 핵 제거.
SubPageHeader/FormPageHeader 공유 컴포넌트로 뒤로가기 헤더 통일.
useScrollShadow 훅 추출로 스크롤 shadow 로직 DRY 개선.
shadow 값을 shadow-drop-bottom으로 전체 통일.
회고 페이지 CSS 변수 버그(--gnb-height) 수정 및 콘텐츠 래퍼 추가.
라우트 중복 경로 제거.
---
 src/features/book/components/BookLogList.tsx  |   6 +-
 src/pages/Books/BookDetailPage.tsx            |  12 +-
 src/pages/Books/BookReviewHistoryPage.tsx     |  36 +-
 src/pages/Gatherings/GatheringSettingPage.tsx | 270 +++++------
 src/pages/Meetings/MeetingCreatePage.tsx      | 427 +++++++++---------
 src/pages/Meetings/MeetingDetailPage.tsx      | 246 +++++-----
 src/pages/Meetings/MeetingSettingPage.tsx     | 126 +++---
 src/pages/PreOpinions/PreOpinionListPage.tsx  |  70 ++-
 .../MeetingRetrospectiveCreatePage.tsx        |  38 +-
 .../MeetingRetrospectivePage.tsx              |  30 +-
 src/pages/Topics/TopicCreatePage.tsx          | 146 +++---
 src/routes/index.tsx                          |  99 +---
 src/shared/components/FormPageHeader.tsx      |  84 ++++
 src/shared/components/SubPageHeader.tsx       |  11 +-
 src/shared/hooks/index.ts                     |   1 +
 src/shared/hooks/useScrollShadow.ts           |  14 +
 src/shared/layout/LandingLayout.tsx           |  12 +-
 17 files changed, 828 insertions(+), 800 deletions(-)
 create mode 100644 src/shared/components/FormPageHeader.tsx
 create mode 100644 src/shared/hooks/useScrollShadow.ts

diff --git a/src/features/book/components/BookLogList.tsx b/src/features/book/components/BookLogList.tsx
index 600a5d8..5990759 100644
--- a/src/features/book/components/BookLogList.tsx
+++ b/src/features/book/components/BookLogList.tsx
@@ -111,7 +111,7 @@ const BookLogList = ({ bookId, isRecording }: BookLogListProps) => {
   return (
     <section>
       {/* 감상 기록 헤더 - sticky */}
-      <div className="sticky top-[108px] z-30 bg-white [box-shadow:0_6px_6px_-4px_rgba(17,17,17,0.08)] w-screen ml-[calc(-50vw+50%)]">
+      <div className="sticky top-[108px] z-30 bg-white shadow-drop-bottom">
         <div className="mx-auto max-w-layout-max px-layout-padding py-base">
           <div className="flex justify-between mb-base">
             <h2 className="typo-heading2 text-grey-800">감상 기록</h2>
@@ -174,8 +174,8 @@ const BookLogList = ({ bookId, isRecording }: BookLogListProps) => {
       </div>
 
       {/* 기록 목록 - full-bleed 배경 */}
-      <div className="w-screen relative left-1/2 -translate-x-1/2 bg-grey-100">
-        <section className="max-w-[1200px] mx-auto py-xlarge">
+      <div className="bg-grey-100">
+        <section className="mx-auto max-w-layout-max px-layout-padding py-xlarge">
           {allRecords.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-base text-center">
               <p className="typo-subtitle2 text-grey-600">
diff --git a/src/pages/Books/BookDetailPage.tsx b/src/pages/Books/BookDetailPage.tsx
index 86096ca..4495476 100644
--- a/src/pages/Books/BookDetailPage.tsx
+++ b/src/pages/Books/BookDetailPage.tsx
@@ -17,11 +17,13 @@ export default function BookDetailPage() {
   return (
     <>
       <SubPageHeader label="내 책장" to="/books" />
-      <BookInfo
-        bookId={bookId}
-        isRecording={isRecording}
-        onToggleRecording={() => toggleReadingStatus()}
-      />
+      <div className="mx-auto max-w-layout-max px-layout-padding">
+        <BookInfo
+          bookId={bookId}
+          isRecording={isRecording}
+          onToggleRecording={() => toggleReadingStatus()}
+        />
+      </div>
       <BookLogList bookId={bookId} isRecording={isRecording} />
     </>
   )
diff --git a/src/pages/Books/BookReviewHistoryPage.tsx b/src/pages/Books/BookReviewHistoryPage.tsx
index 8b7216e..cdfcb52 100644
--- a/src/pages/Books/BookReviewHistoryPage.tsx
+++ b/src/pages/Books/BookReviewHistoryPage.tsx
@@ -18,23 +18,25 @@ export default function BookReviewHistoryPage() {
   return (
     <>
       <SubPageHeader label={bookDetail?.title ?? '뒤로가기'} to={ROUTES.BOOK_DETAIL(bookId)} />
-      <section className="py-base">
-        <h2 className="typo-heading2 text-grey-800 mb-large">지난 평가</h2>
-        {isLoading && <div className="mt-medium">로딩중...</div>}
-        {historyData?.items.map((item, idx) => (
-          <Fragment key={item.bookReviewHistoryId}>
-            <ReviewHistoryCard item={item} />
-            {historyData?.items.length !== idx + 1 && <Division />}
-          </Fragment>
-        ))}
-        {!isLoading && historyData?.items.length === 0 && (
-          <div className="mt-medium py-base flex justify-center">
-            <p className="typo-subtitle2 text-grey-600 text-center">
-              아직 이 책을 평가하지 않았어요. <br />다 읽고 나서 이 책이 어땠는지 알려주세요!
-            </p>
-          </div>
-        )}
-      </section>
+      <div className="mx-auto max-w-layout-max px-layout-padding">
+        <section className="py-base">
+          <h2 className="typo-heading2 text-grey-800 mb-large">지난 평가</h2>
+          {isLoading && <div className="mt-medium">로딩중...</div>}
+          {historyData?.items.map((item, idx) => (
+            <Fragment key={item.bookReviewHistoryId}>
+              <ReviewHistoryCard item={item} />
+              {historyData?.items.length !== idx + 1 && <Division />}
+            </Fragment>
+          ))}
+          {!isLoading && historyData?.items.length === 0 && (
+            <div className="mt-medium py-base flex justify-center">
+              <p className="typo-subtitle2 text-grey-600 text-center">
+                아직 이 책을 평가하지 않았어요. <br />다 읽고 나서 이 책이 어땠는지 알려주세요!
+              </p>
+            </div>
+          )}
+        </section>
+      </div>
     </>
   )
 }
diff --git a/src/pages/Gatherings/GatheringSettingPage.tsx b/src/pages/Gatherings/GatheringSettingPage.tsx
index c6a4e11..f5988a3 100644
--- a/src/pages/Gatherings/GatheringSettingPage.tsx
+++ b/src/pages/Gatherings/GatheringSettingPage.tsx
@@ -14,7 +14,7 @@ import {
   useRemoveMember,
   useUpdateGathering,
 } from '@/features/gatherings'
-import SubPageHeader from '@/shared/components/SubPageHeader'
+import FormPageHeader from '@/shared/components/FormPageHeader'
 import { ROUTES } from '@/shared/constants'
 import { showErrorToast, showToast } from '@/shared/lib/toast'
 import {
@@ -187,140 +187,142 @@ export default function GatheringSettingPage() {
   if (!gathering || gathering.currentUserRole !== 'LEADER') return null
 
   return (
-    <div className="flex flex-col gap-xlarge pb-medium">
-      <SubPageHeader to={ROUTES.GATHERING_DETAIL(gatheringId)} />
-
-      <h2 className="typo-heading3 text-black">독서모임 설정</h2>
-      {/* 독서모임 정보 섹션 */}
-      <Container>
-        <div className="flex items-center justify-between">
-          <Container.Title>독서모임 정보</Container.Title>
-          <div className="flex items-center gap-xsmall">
-            <Button
-              variant="danger"
-              outline
-              size="small"
-              onClick={handleDeleteGathering}
-              disabled={deleteMutation.isPending}
-            >
-              모임 삭제하기
-            </Button>
-            <Button
-              variant="primary"
-              size="small"
-              onClick={handleSave}
-              disabled={!isValid || updateMutation.isPending}
-            >
-              저장하기
-            </Button>
+    <>
+      <FormPageHeader
+        title="독서모임 설정"
+        actionLabel={updateMutation.isPending ? '...' : '저장하기'}
+        onAction={handleSave}
+        isActionDisabled={!isValid || updateMutation.isPending}
+        to={ROUTES.GATHERING_DETAIL(gatheringId)}
+      />
+      <div className="bg-grey-100">
+        <div className="mx-auto max-w-layout-max px-layout-padding">
+          <div className="flex flex-col gap-xlarge py-xlarge">
+            {/* 독서모임 정보 섹션 */}
+            <Container>
+              <div className="flex items-center justify-between">
+                <Container.Title>독서모임 정보</Container.Title>
+                <Button
+                  variant="danger"
+                  outline
+                  size="small"
+                  onClick={handleDeleteGathering}
+                  disabled={deleteMutation.isPending}
+                >
+                  모임 삭제하기
+                </Button>
+              </div>
+              <Container.Content className="flex flex-col gap-medium">
+                <Input
+                  label="독서모임 이름"
+                  placeholder="독서모임 이름을 입력해주세요."
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  maxLength={MAX_NAME_LENGTH}
+                />
+                <div className="flex flex-col gap-xsmall">
+                  <p className="text-left text-black typo-subtitle3">독서모임 설명</p>
+                  <Textarea
+                    placeholder="모임에 대한 설명을 적어주세요"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    maxLength={MAX_DESCRIPTION_LENGTH}
+                    height={80}
+                  />
+                </div>
+              </Container.Content>
+            </Container>
+            {/* 멤버 관리 섹션 */}
+            <Container>
+              <Container.Title>멤버 관리</Container.Title>
+              <Container.Content>
+                <Tabs
+                  value={activeTab}
+                  onValueChange={(value) => setActiveTab(value as MemberTab)}
+                  className="gap-0"
+                >
+                  <TabsList className="border-b border-grey-300" size="medium">
+                    <TabsTrigger value="PENDING" badge={pendingTotalCount} size="medium">
+                      승인 대기
+                    </TabsTrigger>
+                    <TabsTrigger value="ACTIVE" badge={activeTotalCount} size="medium">
+                      승인 완료
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="PENDING" className="pt-medium">
+                    {pendingMembers.length === 0 ? (
+                      <div className="flex h-35 items-center justify-center rounded-base border border-grey-300">
+                        <p className="text-center text-grey-600 typo-subtitle2">
+                          승인 대기 중인 멤버가 없어요.
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="flex flex-col gap-medium">
+                        <div className="grid grid-cols-1 gap-medium md:grid-cols-2 lg:grid-cols-3">
+                          {pendingMembers.map((member) => (
+                            <MemberCard
+                              key={member.gatheringMemberId}
+                              member={member}
+                              actions={['reject', 'approve']}
+                              onAction={handleMemberAction}
+                              disabled={joinRequestMutation.isPending}
+                            />
+                          ))}
+                        </div>
+                        {hasNextPending && (
+                          <Button
+                            variant="secondary"
+                            outline
+                            size="medium"
+                            onClick={() => fetchNextPending()}
+                            disabled={isFetchingNextPending}
+                          >
+                            {isFetchingNextPending ? '불러오는 중...' : '더보기'}
+                          </Button>
+                        )}
+                      </div>
+                    )}
+                  </TabsContent>
+                  <TabsContent value="ACTIVE" className="pt-medium">
+                    {activeMembers.length === 0 ? (
+                      <div className="flex h-35 items-center justify-center rounded-base border border-grey-300">
+                        <p className="text-center text-grey-600 typo-subtitle2">
+                          승인된 멤버가 없어요.
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="flex flex-col gap-medium">
+                        <div className="grid grid-cols-1 gap-medium md:grid-cols-2 lg:grid-cols-3">
+                          {activeMembers.map((member) => (
+                            <MemberCard
+                              key={member.gatheringMemberId}
+                              member={member}
+                              actions={['remove']}
+                              onAction={handleMemberAction}
+                              disabled={removeMemberMutation.isPending}
+                            />
+                          ))}
+                        </div>
+                        {hasNextActive && (
+                          <Button
+                            variant="secondary"
+                            outline
+                            size="medium"
+                            onClick={() => fetchNextActive()}
+                            disabled={isFetchingNextActive}
+                          >
+                            {isFetchingNextActive ? '불러오는 중...' : '더보기'}
+                          </Button>
+                        )}
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </Container.Content>
+            </Container>
           </div>
         </div>
-        <Container.Content className="flex flex-col gap-medium">
-          <Input
-            label="독서모임 이름"
-            placeholder="독서모임 이름을 입력해주세요."
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            maxLength={MAX_NAME_LENGTH}
-          />
-          <div className="flex flex-col gap-xsmall">
-            <p className="text-left text-black typo-subtitle3">독서모임 설명</p>
-            <Textarea
-              placeholder="모임에 대한 설명을 적어주세요"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              maxLength={MAX_DESCRIPTION_LENGTH}
-              height={80}
-            />
-          </div>
-        </Container.Content>
-      </Container>
-      {/* 멤버 관리 섹션 */}
-      <Container>
-        <Container.Title>멤버 관리</Container.Title>
-        <Container.Content>
-          <Tabs
-            value={activeTab}
-            onValueChange={(value) => setActiveTab(value as MemberTab)}
-            className="gap-0"
-          >
-            <TabsList className="border-b border-grey-300" size="medium">
-              <TabsTrigger value="PENDING" badge={pendingTotalCount} size="medium">
-                승인 대기
-              </TabsTrigger>
-              <TabsTrigger value="ACTIVE" badge={activeTotalCount} size="medium">
-                승인 완료
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="PENDING" className="pt-medium">
-              {pendingMembers.length === 0 ? (
-                <div className="flex h-35 items-center justify-center rounded-base border border-grey-300">
-                  <p className="text-center text-grey-600 typo-subtitle2">
-                    승인 대기 중인 멤버가 없어요.
-                  </p>
-                </div>
-              ) : (
-                <div className="flex flex-col gap-medium">
-                  <div className="grid grid-cols-1 gap-medium md:grid-cols-2 lg:grid-cols-3">
-                    {pendingMembers.map((member) => (
-                      <MemberCard
-                        key={member.gatheringMemberId}
-                        member={member}
-                        actions={['reject', 'approve']}
-                        onAction={handleMemberAction}
-                        disabled={joinRequestMutation.isPending}
-                      />
-                    ))}
-                  </div>
-                  {hasNextPending && (
-                    <Button
-                      variant="secondary"
-                      outline
-                      size="medium"
-                      onClick={() => fetchNextPending()}
-                      disabled={isFetchingNextPending}
-                    >
-                      {isFetchingNextPending ? '불러오는 중...' : '더보기'}
-                    </Button>
-                  )}
-                </div>
-              )}
-            </TabsContent>
-            <TabsContent value="ACTIVE" className="pt-medium">
-              {activeMembers.length === 0 ? (
-                <div className="flex h-35 items-center justify-center rounded-base border border-grey-300">
-                  <p className="text-center text-grey-600 typo-subtitle2">승인된 멤버가 없어요.</p>
-                </div>
-              ) : (
-                <div className="flex flex-col gap-medium">
-                  <div className="grid grid-cols-1 gap-medium md:grid-cols-2 lg:grid-cols-3">
-                    {activeMembers.map((member) => (
-                      <MemberCard
-                        key={member.gatheringMemberId}
-                        member={member}
-                        actions={['remove']}
-                        onAction={handleMemberAction}
-                        disabled={removeMemberMutation.isPending}
-                      />
-                    ))}
-                  </div>
-                  {hasNextActive && (
-                    <Button
-                      variant="secondary"
-                      outline
-                      size="medium"
-                      onClick={() => fetchNextActive()}
-                      disabled={isFetchingNextActive}
-                    >
-                      {isFetchingNextActive ? '불러오는 중...' : '더보기'}
-                    </Button>
-                  )}
-                </div>
-              )}
-            </TabsContent>
-          </Tabs>
-        </Container.Content>
-      </Container>
-    </div>
+      </div>
+    </>
   )
 }
diff --git a/src/pages/Meetings/MeetingCreatePage.tsx b/src/pages/Meetings/MeetingCreatePage.tsx
index 8b28f84..892ecea 100644
--- a/src/pages/Meetings/MeetingCreatePage.tsx
+++ b/src/pages/Meetings/MeetingCreatePage.tsx
@@ -1,4 +1,4 @@
-import { ChevronLeft, Search } from 'lucide-react'
+import { Search } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
@@ -14,6 +14,7 @@ import {
   useMeetingForm,
   useUpdateMeeting,
 } from '@/features/meetings'
+import FormPageHeader from '@/shared/components/FormPageHeader'
 import { ROUTES } from '@/shared/constants'
 import { Button, Card, Container, DatePicker, Input, Select } from '@/shared/ui'
 import { useGlobalModalStore } from '@/store'
@@ -233,232 +234,224 @@ export default function MeetingCreatePage() {
 
   return (
     <>
-      {/* 공통컴포넌트로 교체 예정 */}
-      <div className="sticky top-0 bg-white -mt-xlarge">
-        <p className="flex typo-body3 text-grey-600 gap-xtiny py-medium">
-          <ChevronLeft size={16} /> 뒤로가기
-        </p>
-        <div className="flex justify-between py-large">
-          <p className="text-black typo-heading3">{isEditMode ? '약속 수정하기' : '약속 만들기'}</p>
-          <Button
-            className="w-fit"
-            size="small"
-            onClick={handleSubmit}
-            disabled={isSubmitting || isLoading}
-          >
-            {isSubmitting ? '...' : isEditMode ? '수정하기' : '만들기'}
-          </Button>
-        </div>
-      </div>
-      {/* 공통컴포넌트로 교체 예정 */}
-      <div className="flex flex-col gap-base pb-xlarge">
-        {!isEditMode && (
-          <Card className="border-primary-200 bg-primary-100 text-primary-400 px-small py-[10px] rounded-small">
-            <p className="typo-caption1">작성한 내용은 모임장의 승인 후 약속으로 등록돼요.</p>
-          </Card>
-        )}
-
-        <Container>
-          <Container.Title className="typo-subtitle3">약속명</Container.Title>
-          <Container.Content>
-            <Input
-              maxLength={24}
-              placeholder="약속명을 입력해 주세요. 미입력 시 책 제목으로 자동 등록돼요."
-              value={meetingName ?? ''}
-              onChange={(e) => setMeetingName(e.target.value)}
-            />
-          </Container.Content>
-        </Container>
-
-        <Container>
-          <Container.Title
-            required
-            className="typo-subtitle3"
-            errorMessage={isEditMode ? '도서는 수정이 불가합니다.' : undefined}
-          >
-            도서
-          </Container.Title>
-          <Container.Content>
-            <div className="flex flex-col gap-medium">
-              {bookThumbnail && bookName && bookAuthors && (
-                <Card className="rounded-small py-base px-medium bg-gray-100 border-none flex gap-small items-center">
-                  <div className="w-[70px] h-[100px] overflow-hidden rounded">
-                    <img
-                      src={bookThumbnail}
-                      alt={bookName}
-                      className="object-cover w-full h-full"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-xtiny">
-                    <p className="typo-subtitle5 text-black">{bookName}</p>
-                    <p className="typo-body4 text-grey-800">{bookAuthors}</p>
-                  </div>
-                </Card>
-              )}
-              {!isEditMode && (
+      <FormPageHeader
+        title={isEditMode ? '약속 수정하기' : '약속 만들기'}
+        actionLabel={isSubmitting ? '...' : isEditMode ? '수정하기' : '만들기'}
+        onAction={handleSubmit}
+        isActionDisabled={isSubmitting || isLoading}
+      />
+      <div className="bg-grey-100">
+        <div className="mx-auto max-w-layout-max px-layout-padding">
+          <div className="flex flex-col gap-base py-xlarge">
+            {!isEditMode && (
+              <Card className="border-primary-200 bg-primary-100 text-primary-400 px-small py-[10px] rounded-small">
+                <p className="typo-caption1">작성한 내용은 모임장의 승인 후 약속으로 등록돼요.</p>
+              </Card>
+            )}
+
+            <Container>
+              <Container.Title className="typo-subtitle3">약속명</Container.Title>
+              <Container.Content>
+                <Input
+                  maxLength={24}
+                  placeholder="약속명을 입력해 주세요. 미입력 시 책 제목으로 자동 등록돼요."
+                  value={meetingName ?? ''}
+                  onChange={(e) => setMeetingName(e.target.value)}
+                />
+              </Container.Content>
+            </Container>
+
+            <Container>
+              <Container.Title
+                required
+                className="typo-subtitle3"
+                errorMessage={isEditMode ? '도서는 수정이 불가합니다.' : undefined}
+              >
+                도서
+              </Container.Title>
+              <Container.Content>
+                <div className="flex flex-col gap-medium">
+                  {bookThumbnail && bookName && bookAuthors && (
+                    <Card className="rounded-small py-base px-medium bg-gray-100 border-none flex gap-small items-center">
+                      <div className="w-[70px] h-[100px] overflow-hidden rounded">
+                        <img
+                          src={bookThumbnail}
+                          alt={bookName}
+                          className="object-cover w-full h-full"
+                        />
+                      </div>
+                      <div className="flex flex-col gap-xtiny">
+                        <p className="typo-subtitle5 text-black">{bookName}</p>
+                        <p className="typo-body4 text-grey-800">{bookAuthors}</p>
+                      </div>
+                    </Card>
+                  )}
+                  {!isEditMode && (
+                    <Button
+                      ref={bookButtonRef}
+                      outline
+                      variant="secondary"
+                      className="w-full text-black bg-white px-[14px] h-[44px] border-grey-300"
+                      onClick={() => setIsBookSearchOpen(true)}
+                    >
+                      <Search size={18} className="text-grey-600 mr-tiny" />
+                      <span className="typo-subtitle5">도서 검색</span>
+                    </Button>
+                  )}
+                </div>
+                {errors?.bookId && (
+                  <p className="mt-tiny text-accent-300 text-body3">{errors.bookId}</p>
+                )}
+              </Container.Content>
+            </Container>
+
+            <Container>
+              <Container.Title className="typo-subtitle3">장소</Container.Title>
+              <Container.Content>
+                {locationAddress && locationName && (
+                  <Card className="border-none p-base bg-grey-100 rounded-small text-grey-700 typo-body1 mb-xsmall">
+                    <p className="text-black typo-subtitle5 mb-xtiny">{locationName}</p>
+                    <p className="typo-body3 text-grey-600">{locationAddress}</p>
+                  </Card>
+                )}
                 <Button
-                  ref={bookButtonRef}
                   outline
                   variant="secondary"
                   className="w-full text-black bg-white px-[14px] h-[44px] border-grey-300"
-                  onClick={() => setIsBookSearchOpen(true)}
+                  onClick={() => setIsPlaceSearchOpen(true)}
                 >
                   <Search size={18} className="text-grey-600 mr-tiny" />
-                  <span className="typo-subtitle5">도서 검색</span>
+                  <span className="typo-subtitle5">장소 검색</span>
                 </Button>
-              )}
-            </div>
-            {errors?.bookId && (
-              <p className="mt-tiny text-accent-300 text-body3">{errors.bookId}</p>
-            )}
-          </Container.Content>
-        </Container>
-
-        <Container>
-          <Container.Title className="typo-subtitle3">장소</Container.Title>
-          <Container.Content>
-            {locationAddress && locationName && (
-              <Card className="border-none p-base bg-grey-100 rounded-small text-grey-700 typo-body1 mb-xsmall">
-                <p className="text-black typo-subtitle5 mb-xtiny">{locationName}</p>
-                <p className="typo-body3 text-grey-600">{locationAddress}</p>
-              </Card>
-            )}
-            <Button
-              outline
-              variant="secondary"
-              className="w-full text-black bg-white px-[14px] h-[44px] border-grey-300"
-              onClick={() => setIsPlaceSearchOpen(true)}
-            >
-              <Search size={18} className="text-grey-600 mr-tiny" />
-              <span className="typo-subtitle5">장소 검색</span>
-            </Button>
-
-            {errors?.location && (
-              <p className="text-accent-300 text-body3 mt-xtiny">{errors.location}</p>
-            )}
-          </Container.Content>
-        </Container>
-
-        <Container>
-          <Container.Title required className="typo-subtitle3">
-            날짜 및 시간
-          </Container.Title>
-          <Container.Content>
-            <div className="flex flex-col gap-xtiny">
-              <div className="flex flex-col md:flex-row md:items-center">
-                <div className="flex-1">
-                  <span className="text-grey-600 typo-body4">시작 일정</span>
-                </div>
-                <div className="hidden md:block md:w-[calc(1rem+2*var(--spacing-xsmall))] md:shrink-0" />
-                <div className="flex-1 hidden md:block">
-                  <span className="text-grey-600 typo-body4">종료 일정</span>
-                </div>
-              </div>
-              <div className="flex flex-col md:flex-row md:items-center gap-xsmall">
-                <div className="flex gap-xsmall md:flex-1">
-                  <DatePicker
-                    ref={startDateRef}
-                    value={startDate}
-                    onChange={setStartDate}
-                    placeholder="날짜 선택"
-                    className="md:max-w-none"
-                    disabled={getStartDateDisabled()}
-                  />
-                  <Select
-                    placeholder="시간 선택"
-                    className="md:max-w-none"
-                    value={startTime ?? ''}
-                    onValueChange={setStartTime}
-                  >
-                    {timeOptions.map((option) => (
-                      <Select.SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </Select.SelectItem>
-                    ))}
-                  </Select>
-                </div>
-                <span className="hidden md:block md:px-xsmall md:shrink-0">~</span>
-                <span className="md:hidden text-grey-600 typo-body4">종료 일정</span>
-                <div className="flex gap-xsmall md:flex-1">
-                  <DatePicker
-                    ref={endDateRef}
-                    value={endDate}
-                    onChange={setEndDate}
-                    placeholder="날짜 선택"
-                    className="md:max-w-none"
-                    disabled={getEndDateDisabled()}
-                    isDisabled={!startDate || !startTime}
-                  />
-                  <Select
-                    placeholder="시간 선택"
-                    className="md:max-w-none"
-                    value={endTime ?? ''}
-                    onValueChange={setEndTime}
-                    disabled={!endDate || !startDate || !startTime}
-                  >
-                    {getEndTimeOptions().map((option) => (
-                      <Select.SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </Select.SelectItem>
-                    ))}
-                  </Select>
+
+                {errors?.location && (
+                  <p className="text-accent-300 text-body3 mt-xtiny">{errors.location}</p>
+                )}
+              </Container.Content>
+            </Container>
+
+            <Container>
+              <Container.Title required className="typo-subtitle3">
+                날짜 및 시간
+              </Container.Title>
+              <Container.Content>
+                <div className="flex flex-col gap-xtiny">
+                  <div className="flex flex-col md:flex-row md:items-center">
+                    <div className="flex-1">
+                      <span className="text-grey-600 typo-body4">시작 일정</span>
+                    </div>
+                    <div className="hidden md:block md:w-[calc(1rem+2*var(--spacing-xsmall))] md:shrink-0" />
+                    <div className="flex-1 hidden md:block">
+                      <span className="text-grey-600 typo-body4">종료 일정</span>
+                    </div>
+                  </div>
+                  <div className="flex flex-col md:flex-row md:items-center gap-xsmall">
+                    <div className="flex gap-xsmall md:flex-1">
+                      <DatePicker
+                        ref={startDateRef}
+                        value={startDate}
+                        onChange={setStartDate}
+                        placeholder="날짜 선택"
+                        className="md:max-w-none"
+                        disabled={getStartDateDisabled()}
+                      />
+                      <Select
+                        placeholder="시간 선택"
+                        className="md:max-w-none"
+                        value={startTime ?? ''}
+                        onValueChange={setStartTime}
+                      >
+                        {timeOptions.map((option) => (
+                          <Select.SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </Select.SelectItem>
+                        ))}
+                      </Select>
+                    </div>
+                    <span className="hidden md:block md:px-xsmall md:shrink-0">~</span>
+                    <span className="md:hidden text-grey-600 typo-body4">종료 일정</span>
+                    <div className="flex gap-xsmall md:flex-1">
+                      <DatePicker
+                        ref={endDateRef}
+                        value={endDate}
+                        onChange={setEndDate}
+                        placeholder="날짜 선택"
+                        className="md:max-w-none"
+                        disabled={getEndDateDisabled()}
+                        isDisabled={!startDate || !startTime}
+                      />
+                      <Select
+                        placeholder="시간 선택"
+                        className="md:max-w-none"
+                        value={endTime ?? ''}
+                        onValueChange={setEndTime}
+                        disabled={!endDate || !startDate || !startTime}
+                      >
+                        {getEndTimeOptions().map((option) => (
+                          <Select.SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </Select.SelectItem>
+                        ))}
+                      </Select>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-            {/* 시작일정, 종료일정 선택 완료되면 노출*/}
-            {formattedSchedule && (
-              <Card className="flex border-none p-base bg-grey-100 rounded-small mt-medium gap-small">
-                <p className="text-grey-600 typo-body4">선택된 일정</p>
-                <p className="text-black typo-body4">{formattedSchedule}</p>
-              </Card>
+                {/* 시작일정, 종료일정 선택 완료되면 노출*/}
+                {formattedSchedule && (
+                  <Card className="flex border-none p-base bg-grey-100 rounded-small mt-medium gap-small">
+                    <p className="text-grey-600 typo-body4">선택된 일정</p>
+                    <p className="text-black typo-body4">{formattedSchedule}</p>
+                  </Card>
+                )}
+                {errors?.schedule && (
+                  <p className="text-accent-300 text-body3 mt-xtiny">{errors.schedule}</p>
+                )}
+              </Container.Content>
+            </Container>
+
+            <Container>
+              <Container.Title className="typo-subtitle3">참가 인원</Container.Title>
+              <Container.Content>
+                <Input
+                  ref={maxParticipantsRef}
+                  type="number"
+                  placeholder="참가 인원을 작성해주세요"
+                  helperText={
+                    errors?.maxParticipants
+                      ? undefined
+                      : `현재 모임의 전체 멤버 수는 ${gatheringMaxCount}명이에요. 최대 ${gatheringMaxCount}명까지 참가 가능해요.`
+                  }
+                  error={!!errors?.maxParticipants}
+                  errorMessage={errors?.maxParticipants ?? undefined}
+                  value={maxParticipants ?? ''}
+                  onChange={(e) => setMaxParticipants(e.target.value)}
+                  min={1}
+                  max={gatheringMaxCount}
+                />
+              </Container.Content>
+            </Container>
+
+            {isPlaceSearchOpen && (
+              <PlaceSearchModal
+                open={isPlaceSearchOpen}
+                onOpenChange={setIsPlaceSearchOpen}
+                onSelectPlace={(place) => {
+                  setLocationName(place.name)
+                  setLocationAddress(place.address)
+                  setLatitude(place.latitude)
+                  setLongitude(place.longitude)
+                }}
+              />
             )}
-            {errors?.schedule && (
-              <p className="text-accent-300 text-body3 mt-xtiny">{errors.schedule}</p>
+            {!isEditMode && isBookSearchOpen && (
+              <BookSearchModal
+                open={isBookSearchOpen}
+                onOpenChange={setIsBookSearchOpen}
+                onSelectBook={(book) => setBook(book)}
+              />
             )}
-          </Container.Content>
-        </Container>
-
-        <Container>
-          <Container.Title className="typo-subtitle3">참가 인원</Container.Title>
-          <Container.Content>
-            <Input
-              ref={maxParticipantsRef}
-              type="number"
-              placeholder="참가 인원을 작성해주세요"
-              helperText={
-                errors?.maxParticipants
-                  ? undefined
-                  : `현재 모임의 전체 멤버 수는 ${gatheringMaxCount}명이에요. 최대 ${gatheringMaxCount}명까지 참가 가능해요.`
-              }
-              error={!!errors?.maxParticipants}
-              errorMessage={errors?.maxParticipants ?? undefined}
-              value={maxParticipants ?? ''}
-              onChange={(e) => setMaxParticipants(e.target.value)}
-              min={1}
-              max={gatheringMaxCount}
-            />
-          </Container.Content>
-        </Container>
-
-        {isPlaceSearchOpen && (
-          <PlaceSearchModal
-            open={isPlaceSearchOpen}
-            onOpenChange={setIsPlaceSearchOpen}
-            onSelectPlace={(place) => {
-              setLocationName(place.name)
-              setLocationAddress(place.address)
-              setLatitude(place.latitude)
-              setLongitude(place.longitude)
-            }}
-          />
-        )}
-        {!isEditMode && isBookSearchOpen && (
-          <BookSearchModal
-            open={isBookSearchOpen}
-            onOpenChange={setIsBookSearchOpen}
-            onSelectBook={(book) => setBook(book)}
-          />
-        )}
+          </div>
+        </div>
       </div>
     </>
   )
diff --git a/src/pages/Meetings/MeetingDetailPage.tsx b/src/pages/Meetings/MeetingDetailPage.tsx
index 99ce3b3..85fe9a4 100644
--- a/src/pages/Meetings/MeetingDetailPage.tsx
+++ b/src/pages/Meetings/MeetingDetailPage.tsx
@@ -1,4 +1,3 @@
-import { ChevronLeft } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -23,8 +22,10 @@ import {
   useConfirmedTopics,
   useProposedTopics,
 } from '@/features/topics'
+import SubPageHeader from '@/shared/components/SubPageHeader'
+import { ROUTES } from '@/shared/constants'
 import { showErrorToast } from '@/shared/lib/toast'
-import { Spinner, Tabs, TabsContent, TabsList, TabsTrigger, TextButton } from '@/shared/ui'
+import { Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/ui'
 
 export default function MeetingDetailPage() {
   const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
@@ -80,137 +81,136 @@ export default function MeetingDetailPage() {
 
   return (
     <>
-      {/* 공통컴포넌트로 분리 예정 */}
-      <div className="sticky top-0 bg-white py-medium">
-        <TextButton iconPosition="left" icon={ChevronLeft} size="medium">
-          {meeting?.gathering.gatheringName ?? ''}
-        </TextButton>
-      </div>
-      {/* 공통컴포넌트로 분리 예정 */}
+      <SubPageHeader
+        label={meeting?.gathering.gatheringName ?? '뒤로가기'}
+        to={ROUTES.GATHERING_DETAIL(gatheringId!)}
+      />
+
+      <div className="mx-auto max-w-layout-max px-layout-padding">
+        <div className="flex justify-between gap-[36px]">
+          {/* 약속 로딩 적용 */}
+          <div className="w-[300px] flex-none flex flex-col gap-base">
+            {meetingLoading ? (
+              <div className="flex items-center justify-center h-[400px]">
+                <Spinner />
+              </div>
+            ) : meeting ? (
+              <>
+                <MeetingDetailHeader progressStatus={meeting.progressStatus}>
+                  {meeting.meetingName}
+                </MeetingDetailHeader>
 
-      <div className="flex justify-between gap-[36px]">
-        {/* 약속 로딩 적용 */}
-        <div className="w-[300px] flex-none flex flex-col gap-base">
-          {meetingLoading ? (
-            <div className="flex items-center justify-center h-[400px]">
-              <Spinner />
-            </div>
-          ) : meeting ? (
-            <>
-              <MeetingDetailHeader progressStatus={meeting.progressStatus}>
-                {meeting.meetingName}
-              </MeetingDetailHeader>
+                <MeetingDetailInfo meeting={meeting} />
 
-              <MeetingDetailInfo meeting={meeting} />
+                <MeetingDetailButton
+                  buttonLabel={meeting.actionState.buttonLabel}
+                  isEnabled={meeting.actionState.enabled}
+                  type={meeting.actionState.type}
+                  gatheringId={Number(gatheringId)}
+                  meetingId={meeting.meetingId}
+                />
+              </>
+            ) : null}
+          </div>
+          {/* 약속 로딩 적용 */}
 
-              <MeetingDetailButton
-                buttonLabel={meeting.actionState.buttonLabel}
-                isEnabled={meeting.actionState.enabled}
-                type={meeting.actionState.type}
+          <div className="flex flex-col flex-1 gap-base pb-base">
+            {meeting?.progressStatus === 'POST' && (
+              <RetrospectiveCardButtons
                 gatheringId={Number(gatheringId)}
-                meetingId={meeting.meetingId}
+                meetingId={Number(meetingId)}
               />
-            </>
-          ) : null}
-        </div>
-        {/* 약속 로딩 적용 */}
-
-        <div className="flex flex-col flex-1 gap-base pb-base">
-          {meeting?.progressStatus === 'POST' && (
-            <RetrospectiveCardButtons
-              gatheringId={Number(gatheringId)}
-              meetingId={Number(meetingId)}
-            />
-          )}
+            )}
 
-          <p className="text-black typo-heading3">주제</p>
+            <p className="text-black typo-heading3">주제</p>
 
-          <Tabs
-            value={activeTab}
-            onValueChange={(value) => setActiveTab(value as TopicStatus)}
-            className="gap-medium"
-          >
-            <TabsList className="border-b border-grey-300" size="medium">
-              <TabsTrigger
-                className="typo-subtitle2"
-                value="PROPOSED"
-                badge={(proposedTopicsInfiniteData?.pages[0]?.totalCount ?? 0).toString()}
-                size="medium"
-              >
-                제안
-              </TabsTrigger>
-              <TabsTrigger
-                className="typo-subtitle2"
-                value="CONFIRMED"
-                badge={(confirmedTopicsInfiniteData?.pages[0]?.totalCount ?? 0).toString()}
-                size="medium"
-              >
-                확정된 주제
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="PROPOSED">
-              {isProposedLoading || !proposedTopicsInfiniteData ? (
-                <TopicSkeleton />
-              ) : (
-                <div className="flex flex-col gap-base">
-                  <TopicHeader
-                    activeTab="PROPOSED"
-                    confirmedTopic={meeting?.confirmedTopic ?? false}
-                    actions={proposedTopicsInfiniteData.pages[0].actions}
-                    confirmedTopicDate={meeting?.confirmedTopicDate ?? null}
-                    proposedTopicsCount={proposedTopicsInfiniteData.pages[0].totalCount ?? 0}
-                    onOpenChange={setIsConfirmTopicOpen}
-                    gatheringId={Number(gatheringId)}
-                    meetingId={Number(meetingId)}
-                  />
-                  <ProposedTopicList
-                    topics={proposedTopicsInfiniteData.pages.flatMap(
-                      (page: GetProposedTopicsResponse) => page.items
-                    )}
-                    confirmedTopic={meeting?.confirmedTopic ?? false}
-                    hasNextPage={hasNextProposedPage}
-                    isFetchingNextPage={isFetchingNextProposedPage}
-                    onLoadMore={fetchNextProposedPage}
-                    gatheringId={Number(gatheringId)}
-                    meetingId={Number(meetingId)}
-                  />
-                </div>
-              )}
-            </TabsContent>
+            <Tabs
+              value={activeTab}
+              onValueChange={(value) => setActiveTab(value as TopicStatus)}
+              className="gap-medium"
+            >
+              <TabsList className="border-b border-grey-300" size="medium">
+                <TabsTrigger
+                  className="typo-subtitle2"
+                  value="PROPOSED"
+                  badge={(proposedTopicsInfiniteData?.pages[0]?.totalCount ?? 0).toString()}
+                  size="medium"
+                >
+                  제안
+                </TabsTrigger>
+                <TabsTrigger
+                  className="typo-subtitle2"
+                  value="CONFIRMED"
+                  badge={(confirmedTopicsInfiniteData?.pages[0]?.totalCount ?? 0).toString()}
+                  size="medium"
+                >
+                  확정된 주제
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="PROPOSED">
+                {isProposedLoading || !proposedTopicsInfiniteData ? (
+                  <TopicSkeleton />
+                ) : (
+                  <div className="flex flex-col gap-base">
+                    <TopicHeader
+                      activeTab="PROPOSED"
+                      confirmedTopic={meeting?.confirmedTopic ?? false}
+                      actions={proposedTopicsInfiniteData.pages[0].actions}
+                      confirmedTopicDate={meeting?.confirmedTopicDate ?? null}
+                      proposedTopicsCount={proposedTopicsInfiniteData.pages[0].totalCount ?? 0}
+                      onOpenChange={setIsConfirmTopicOpen}
+                      gatheringId={Number(gatheringId)}
+                      meetingId={Number(meetingId)}
+                    />
+                    <ProposedTopicList
+                      topics={proposedTopicsInfiniteData.pages.flatMap(
+                        (page: GetProposedTopicsResponse) => page.items
+                      )}
+                      confirmedTopic={meeting?.confirmedTopic ?? false}
+                      hasNextPage={hasNextProposedPage}
+                      isFetchingNextPage={isFetchingNextProposedPage}
+                      onLoadMore={fetchNextProposedPage}
+                      gatheringId={Number(gatheringId)}
+                      meetingId={Number(meetingId)}
+                    />
+                  </div>
+                )}
+              </TabsContent>
 
-            <TabsContent value="CONFIRMED">
-              {isConfirmedLoading || !confirmedTopicsInfiniteData ? (
-                <TopicSkeleton />
-              ) : (
-                <div className="flex flex-col gap-base">
-                  <TopicHeader
-                    activeTab="CONFIRMED"
-                    confirmedTopic={meeting?.confirmedTopic ?? false}
-                    actions={confirmedTopicsInfiniteData.pages[0].actions}
-                    confirmedTopicDate={meeting?.confirmedTopicDate ?? null}
-                  />
-                  <ConfirmedTopicList
-                    topics={confirmedTopicsInfiniteData.pages.flatMap(
-                      (page: GetConfirmedTopicsResponse) => page.items
-                    )}
-                    hasNextPage={hasNextConfirmedPage}
-                    isFetchingNextPage={isFetchingNextConfirmedPage}
-                    onLoadMore={fetchNextConfirmedPage}
-                  />
-                </div>
-              )}
-            </TabsContent>
-          </Tabs>
+              <TabsContent value="CONFIRMED">
+                {isConfirmedLoading || !confirmedTopicsInfiniteData ? (
+                  <TopicSkeleton />
+                ) : (
+                  <div className="flex flex-col gap-base">
+                    <TopicHeader
+                      activeTab="CONFIRMED"
+                      confirmedTopic={meeting?.confirmedTopic ?? false}
+                      actions={confirmedTopicsInfiniteData.pages[0].actions}
+                      confirmedTopicDate={meeting?.confirmedTopicDate ?? null}
+                    />
+                    <ConfirmedTopicList
+                      topics={confirmedTopicsInfiniteData.pages.flatMap(
+                        (page: GetConfirmedTopicsResponse) => page.items
+                      )}
+                      hasNextPage={hasNextConfirmedPage}
+                      isFetchingNextPage={isFetchingNextConfirmedPage}
+                      onLoadMore={fetchNextConfirmedPage}
+                    />
+                  </div>
+                )}
+              </TabsContent>
+            </Tabs>
+          </div>
         </div>
+        {isConfirmTopicOpen && (
+          <ConfirmTopicModal
+            open={isConfirmTopicOpen}
+            onOpenChange={setIsConfirmTopicOpen}
+            gatheringId={Number(gatheringId)}
+            meetingId={Number(meetingId)}
+          />
+        )}
       </div>
-      {isConfirmTopicOpen && (
-        <ConfirmTopicModal
-          open={isConfirmTopicOpen}
-          onOpenChange={setIsConfirmTopicOpen}
-          gatheringId={Number(gatheringId)}
-          meetingId={Number(meetingId)}
-        />
-      )}
     </>
   )
 }
diff --git a/src/pages/Meetings/MeetingSettingPage.tsx b/src/pages/Meetings/MeetingSettingPage.tsx
index fe6a3be..3d311bc 100644
--- a/src/pages/Meetings/MeetingSettingPage.tsx
+++ b/src/pages/Meetings/MeetingSettingPage.tsx
@@ -7,6 +7,7 @@ import {
   type MeetingStatus,
   useMeetingApprovals,
 } from '@/features/meetings'
+import SubPageHeader from '@/shared/components/SubPageHeader'
 import { PAGE_SIZES } from '@/shared/constants'
 import { Container } from '@/shared/ui/Container'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/ui/Tabs'
@@ -68,68 +69,69 @@ export default function MeetingSettingPage() {
   const confirmedCount = confirmedData?.totalCount
 
   return (
-    <div>
-      {/* 공통컴포넌트로 대체 예정 */}
-      {/* <p className="flex items-center typo-body3 text-grey-600 gap-xtiny">뒤로가기</p>
-      <h2 className="text-black typo-heading3">약속 설정</h2> */}
-
-      <Container>
-        <Container.Title>약속 관리</Container.Title>
-        <Container.Content>
-          <Tabs
-            value={activeTab}
-            onValueChange={(value) => setActiveTab(value as MeetingTab)}
-            className="gap-0"
-          >
-            <TabsList className="border-b border-grey-300" size="medium">
-              <TabsTrigger
-                className="typo-subtitle2"
-                value="PENDING"
-                badge={isPendingLoading || isPendingError ? '-' : pendingCount}
-                size="medium"
-              >
-                확정 대기
-              </TabsTrigger>
-              <TabsTrigger
-                className="typo-subtitle2"
-                value="CONFIRMED"
-                badge={isConfirmedLoading || isConfirmedError ? '-' : confirmedCount}
-                size="medium"
+    <>
+      <SubPageHeader label="약속 설정" />
+      <div className="bg-grey-100">
+        <div className="mx-auto max-w-layout-max px-layout-padding py-xlarge">
+          <Container>
+            <Container.Title>약속 관리</Container.Title>
+            <Container.Content>
+              <Tabs
+                value={activeTab}
+                onValueChange={(value) => setActiveTab(value as MeetingTab)}
+                className="gap-0"
               >
-                확정 완료
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="PENDING">
-              {isPendingLoading || isPendingError ? (
-                <MeetingApprovalListSkeleton />
-              ) : (
-                pendingData && (
-                  <MeetingApprovalList
-                    data={pendingData}
-                    gatheringId={gatheringId}
-                    currentPage={pendingPage}
-                    onPageChange={setPendingPage}
-                  />
-                )
-              )}
-            </TabsContent>
-            <TabsContent value="CONFIRMED">
-              {isConfirmedLoading || isConfirmedError ? (
-                <MeetingApprovalListSkeleton />
-              ) : (
-                confirmedData && (
-                  <MeetingApprovalList
-                    data={confirmedData}
-                    gatheringId={gatheringId}
-                    currentPage={confirmedPage}
-                    onPageChange={setConfirmedPage}
-                  />
-                )
-              )}
-            </TabsContent>
-          </Tabs>
-        </Container.Content>
-      </Container>
-    </div>
+                <TabsList className="border-b border-grey-300" size="medium">
+                  <TabsTrigger
+                    className="typo-subtitle2"
+                    value="PENDING"
+                    badge={isPendingLoading || isPendingError ? '-' : pendingCount}
+                    size="medium"
+                  >
+                    확정 대기
+                  </TabsTrigger>
+                  <TabsTrigger
+                    className="typo-subtitle2"
+                    value="CONFIRMED"
+                    badge={isConfirmedLoading || isConfirmedError ? '-' : confirmedCount}
+                    size="medium"
+                  >
+                    확정 완료
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="PENDING">
+                  {isPendingLoading || isPendingError ? (
+                    <MeetingApprovalListSkeleton />
+                  ) : (
+                    pendingData && (
+                      <MeetingApprovalList
+                        data={pendingData}
+                        gatheringId={gatheringId}
+                        currentPage={pendingPage}
+                        onPageChange={setPendingPage}
+                      />
+                    )
+                  )}
+                </TabsContent>
+                <TabsContent value="CONFIRMED">
+                  {isConfirmedLoading || isConfirmedError ? (
+                    <MeetingApprovalListSkeleton />
+                  ) : (
+                    confirmedData && (
+                      <MeetingApprovalList
+                        data={confirmedData}
+                        gatheringId={gatheringId}
+                        currentPage={confirmedPage}
+                        onPageChange={setConfirmedPage}
+                      />
+                    )
+                  )}
+                </TabsContent>
+              </Tabs>
+            </Container.Content>
+          </Container>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/src/pages/PreOpinions/PreOpinionListPage.tsx b/src/pages/PreOpinions/PreOpinionListPage.tsx
index 05c9be7..2e54739 100644
--- a/src/pages/PreOpinions/PreOpinionListPage.tsx
+++ b/src/pages/PreOpinions/PreOpinionListPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import {
@@ -14,8 +14,6 @@ export default function PreOpinionListPage() {
   const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
   const navigate = useNavigate()
   const openError = useGlobalModalStore((state) => state.openError)
-  const sentinelRef = useRef<HTMLDivElement>(null)
-  const [isStuck, setIsStuck] = useState(false)
   const [selectedMemberId, setSelectedMemberId] = useState<number | null>(null)
 
   const { data, isLoading, error } = usePreOpinionAnswers({
@@ -29,21 +27,6 @@ export default function PreOpinionListPage() {
     }
   }, [error, openError, navigate])
 
-  useEffect(() => {
-    const sentinel = sentinelRef.current
-    if (!sentinel) return
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsStuck(!entry.isIntersecting)
-      },
-      { threshold: 0 }
-    )
-
-    observer.observe(sentinel)
-    return () => observer.disconnect()
-  }, [isLoading])
-
   // 선택된 멤버 ID: 유저가 선택한 값이 있으면 사용, 없으면 첫 번째 제출한 멤버를 기본값으로
   const activeMemberId = useMemo(() => {
     if (selectedMemberId !== null) return selectedMemberId
@@ -57,32 +40,33 @@ export default function PreOpinionListPage() {
 
   return (
     <>
-      <div ref={sentinelRef} className="h-0" />
-      <SubPageHeader className={isStuck ? 'shadow-drop' : ''} />
-      <h3 className="typo-heading3 text-black mt-large mb-[27px]">사전 의견</h3>
-      <div className="flex gap-xlarge">
-        {/* 왼쪽: 멤버 리스트 */}
-        {data && (
-          <PreOpinionMemberList
-            members={data.members}
-            selectedMemberId={activeMemberId}
-            onSelectMember={setSelectedMemberId}
-          />
-        )}
+      <SubPageHeader />
+      <div className="mx-auto max-w-layout-max px-layout-padding">
+        <h3 className="typo-heading3 text-black mt-large mb-6.75">사전 의견</h3>
+        <div className="flex gap-xlarge">
+          {/* 왼쪽: 멤버 리스트 */}
+          {data && (
+            <PreOpinionMemberList
+              members={data.members}
+              selectedMemberId={activeMemberId}
+              onSelectMember={setSelectedMemberId}
+            />
+          )}
 
-        {/* 오른쪽: 선택된 멤버의 의견 상세 */}
-        {selectedMember && data ? (
-          <PreOpinionDetail
-            member={selectedMember}
-            topics={data.topics}
-            gatheringId={Number(gatheringId)}
-            meetingId={Number(meetingId)}
-          />
-        ) : (
-          <div className="flex-1 flex items-center justify-center">
-            <p className="typo-body2 text-grey-500">멤버를 선택해주세요</p>
-          </div>
-        )}
+          {/* 오른쪽: 선택된 멤버의 의견 상세 */}
+          {selectedMember && data ? (
+            <PreOpinionDetail
+              member={selectedMember}
+              topics={data.topics}
+              gatheringId={Number(gatheringId)}
+              meetingId={Number(meetingId)}
+            />
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <p className="typo-body2 text-grey-500">멤버를 선택해주세요</p>
+            </div>
+          )}
+        </div>
       </div>
     </>
   )
diff --git a/src/pages/Retrospectives/MeetingRetrospectiveCreatePage.tsx b/src/pages/Retrospectives/MeetingRetrospectiveCreatePage.tsx
index e87939d..2f1b4bf 100644
--- a/src/pages/Retrospectives/MeetingRetrospectiveCreatePage.tsx
+++ b/src/pages/Retrospectives/MeetingRetrospectiveCreatePage.tsx
@@ -18,28 +18,30 @@ export default function MeetingRetrospectiveCreatePage() {
       <SubPageHeader label="뒤로가기" to={ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId)} />
 
       {/* 헤더: 타이틀 + 설명 + AI 요약 시작하기 버튼 */}
-      <div className="sticky top-[calc(var(--gnb-height)+59px)] z-30 flex items-center justify-between bg-white pb-small">
-        <div className="flex flex-col gap-xtiny">
-          <h3 className="text-black typo-heading3">약속 회고</h3>
-          <p className="text-grey-600 typo-caption1">
-            사전 의견과 녹음 파일을 분석하여 약속 회고를 자동 생성해요
-          </p>
+      <div className="sticky top-[calc(var(--spacing-gnb-height)+59px)] z-30 bg-white shadow-drop-bottom">
+        <div className="mx-auto max-w-layout-max px-layout-padding flex items-center justify-between pb-small">
+          <div className="flex flex-col gap-xtiny">
+            <h3 className="text-black typo-heading3">약속 회고</h3>
+            <p className="text-grey-600 typo-caption1">
+              사전 의견과 녹음 파일을 분석하여 약속 회고를 자동 생성해요
+            </p>
+          </div>
+          <Button
+            variant="ai"
+            size="small"
+            onClick={() =>
+              navigate(ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId), {
+                state: { fromAiSummary: true },
+              })
+            }
+          >
+            AI 요약 시작하기
+          </Button>
         </div>
-        <Button
-          variant="ai"
-          size="small"
-          onClick={() =>
-            navigate(ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId), {
-              state: { fromAiSummary: true },
-            })
-          }
-        >
-          AI 요약 시작하기
-        </Button>
       </div>
 
       {/* 두 패널 영역 */}
-      <div className="flex gap-medium mt-base">
+      <div className="mx-auto max-w-layout-max px-layout-padding flex gap-medium mt-base">
         {/* 왼쪽: 수집된 사전 의견 */}
         <div className="flex flex-1 flex-col gap-medium rounded-base border border-grey-300 bg-white p-large shadow-drop">
           <div className="flex flex-col gap-xtiny">
diff --git a/src/pages/Retrospectives/MeetingRetrospectivePage.tsx b/src/pages/Retrospectives/MeetingRetrospectivePage.tsx
index c9aac62..1ed0b29 100644
--- a/src/pages/Retrospectives/MeetingRetrospectivePage.tsx
+++ b/src/pages/Retrospectives/MeetingRetrospectivePage.tsx
@@ -62,24 +62,26 @@ export default function MeetingRetrospectivePage() {
       <SubPageHeader label="뒤로가기" to={ROUTES.MEETING_DETAIL(gatheringId, meetingId)} />
 
       {/* 헤더: 약속 회고 타이틀 + 버튼 */}
-      <div className="sticky top-[calc(var(--gnb-height)+59px)] z-30 flex items-center justify-between bg-white pb-small">
-        <h3 className="text-black typo-heading3">약속 회고</h3>
-        <div className="flex items-center gap-xsmall">
-          <Button variant="secondary" outline size="small">
-            수정하기
-          </Button>
-          <Button
-            variant="primary"
-            size="small"
-            onClick={() => navigate(ROUTES.MEETING_RETROSPECTIVE_CREATE(gatheringId, meetingId))}
-          >
-            약속 회고 생성하기
-          </Button>
+      <div className="sticky top-[calc(var(--spacing-gnb-height)+59px)] z-30 bg-white shadow-drop-bottom">
+        <div className="mx-auto max-w-layout-max px-layout-padding flex items-center justify-between pb-small">
+          <h3 className="text-black typo-heading3">약속 회고</h3>
+          <div className="flex items-center gap-xsmall">
+            <Button variant="secondary" outline size="small">
+              수정하기
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              onClick={() => navigate(ROUTES.MEETING_RETROSPECTIVE_CREATE(gatheringId, meetingId))}
+            >
+              약속 회고 생성하기
+            </Button>
+          </div>
         </div>
       </div>
 
       {/* 회고 콘텐츠 영역 */}
-      <div className="mt-base">
+      <div className="mx-auto max-w-layout-max px-layout-padding mt-base">
         {isLoading ? (
           <RetrospectiveSummarySkeleton />
         ) : (
diff --git a/src/pages/Topics/TopicCreatePage.tsx b/src/pages/Topics/TopicCreatePage.tsx
index 24fac0e..6f89911 100644
--- a/src/pages/Topics/TopicCreatePage.tsx
+++ b/src/pages/Topics/TopicCreatePage.tsx
@@ -1,4 +1,4 @@
-import { ChevronLeft, Info } from 'lucide-react'
+import { Info } from 'lucide-react'
 import { useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
@@ -8,15 +8,9 @@ import {
   type TopicType,
   useCreateTopic,
 } from '@/features/topics'
+import FormPageHeader from '@/shared/components/FormPageHeader'
 import { showToast } from '@/shared/lib/toast'
-import {
-  Button,
-  Container,
-  Input,
-  Textarea,
-  TopicTypeSelectGroup,
-  TopicTypeSelectItem,
-} from '@/shared/ui'
+import { Container, Input, Textarea, TopicTypeSelectGroup, TopicTypeSelectItem } from '@/shared/ui'
 import { useGlobalModalStore } from '@/store'
 
 export default function TopicCreatePage() {
@@ -80,79 +74,71 @@ export default function TopicCreatePage() {
 
   return (
     <>
-      {/* 공통컴포넌트로 교체 예정 */}
-      <div className="sticky top-0 bg-white -mt-xlarge">
-        <p className="flex typo-body3 text-grey-600 gap-xtiny py-medium">
-          <ChevronLeft size={16} /> 뒤로가기
-        </p>
-        <div className="flex justify-between py-large">
-          <p className="text-black typo-heading3">주제 제안하기</p>
-          <Button
-            className="w-fit"
-            size="small"
-            onClick={handleSubmit}
-            disabled={createMutation.isPending}
-          >
-            {createMutation.isPending ? '...' : '제안하기'}
-          </Button>
-        </div>
-      </div>
-      {/* 공통컴포넌트로 교체 예정 */}
-      <div className="flex flex-col gap-base pb-xlarge">
-        <Container>
-          <Container.Title className="typo-subtitle3" required>
-            주제 타입선택
-          </Container.Title>
-          <Container.Content>
-            <div className="flex flex-col gap-base">
-              {/* TopicTypeSelectGroup이 제네릭 타입 지원해주면 캐스팅 제거 가능 */}
-              <TopicTypeSelectGroup
-                type="single"
-                value={topicType}
-                onChange={(value) => setTopicType(value as TopicType)}
-                className="grid grid-cols-3 gap-xsmall lg:grid-cols-4 xl:grid-cols-5"
-              >
-                {TOPIC_TYPE_OPTIONS.map(({ value, label }) => (
-                  <TopicTypeSelectItem key={value} value={value} className="typo-body3">
-                    {label}
-                  </TopicTypeSelectItem>
-                ))}
-              </TopicTypeSelectGroup>
-              <p className="typo-body3 text-purple-200 flex gap-tiny items-center">
-                <Info size="16" /> {topicTypeHint}
-              </p>
-            </div>
-          </Container.Content>
-        </Container>
+      <FormPageHeader
+        title="주제 제안하기"
+        actionLabel={createMutation.isPending ? '...' : '제안하기'}
+        onAction={handleSubmit}
+        isActionDisabled={createMutation.isPending}
+      />
+      <div className="bg-grey-100">
+        <div className="mx-auto max-w-layout-max px-layout-padding">
+          <div className="flex flex-col gap-base py-xlarge">
+            <Container>
+              <Container.Title className="typo-subtitle3" required>
+                주제 타입선택
+              </Container.Title>
+              <Container.Content>
+                <div className="flex flex-col gap-base">
+                  {/* TopicTypeSelectGroup이 제네릭 타입 지원해주면 캐스팅 제거 가능 */}
+                  <TopicTypeSelectGroup
+                    type="single"
+                    value={topicType}
+                    onChange={(value) => setTopicType(value as TopicType)}
+                    className="grid grid-cols-3 gap-xsmall lg:grid-cols-4 xl:grid-cols-5"
+                  >
+                    {TOPIC_TYPE_OPTIONS.map(({ value, label }) => (
+                      <TopicTypeSelectItem key={value} value={value} className="typo-body3">
+                        {label}
+                      </TopicTypeSelectItem>
+                    ))}
+                  </TopicTypeSelectGroup>
+                  <p className="typo-body3 text-purple-200 flex gap-tiny items-center">
+                    <Info size="16" /> {topicTypeHint}
+                  </p>
+                </div>
+              </Container.Content>
+            </Container>
 
-        <Container>
-          <Container.Title className="typo-subtitle3" required>
-            주제 제목
-          </Container.Title>
-          <Container.Content>
-            <Input
-              maxLength={24}
-              placeholder="예: 주인공의 선택은 옳았을까요?"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              error={!!errors.title}
-              errorMessage={errors.title}
-            />
-          </Container.Content>
-        </Container>
+            <Container>
+              <Container.Title className="typo-subtitle3" required>
+                주제 제목
+              </Container.Title>
+              <Container.Content>
+                <Input
+                  maxLength={24}
+                  placeholder="예: 주인공의 선택은 옳았을까요?"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  error={!!errors.title}
+                  errorMessage={errors.title}
+                />
+              </Container.Content>
+            </Container>
 
-        <Container>
-          <Container.Title className="typo-subtitle3">주제 설명</Container.Title>
-          <Container.Content>
-            <Textarea
-              maxLength={150}
-              placeholder="어떤 내용을 이야기 나누고 싶은지 자세히 설명해주세요"
-              height={150}
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            />
-          </Container.Content>
-        </Container>
+            <Container>
+              <Container.Title className="typo-subtitle3">주제 설명</Container.Title>
+              <Container.Content>
+                <Textarea
+                  maxLength={150}
+                  placeholder="어떤 내용을 이야기 나누고 싶은지 자세히 설명해주세요"
+                  height={150}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+              </Container.Content>
+            </Container>
+          </div>
+        </div>
       </div>
     </>
   )
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 72a6d9d..085ddb0 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -36,31 +36,22 @@ export const router = createBrowserRouter([
   },
   {
     element: <LandingLayout />,
-    children: [
-      {
-        path: ROUTES.LANDING,
-        element: <LandingPage />,
-      },
-    ],
+    children: [{ path: ROUTES.LANDING, element: <LandingPage /> }],
   },
   {
     element: <RootLayout />,
     children: [
-      // 비로그인 사용자만 접근 가능한 페이지
+      // 비로그인 사용자만 접근 가능
       {
         element: <PublicRoute />,
         children: [
           {
             element: <AuthLayout />,
-            children: [
-              {
-                path: ROUTES.LOGIN,
-                element: <LoginPage />,
-              },
-            ],
+            children: [{ path: ROUTES.LOGIN, element: <LoginPage /> }],
           },
         ],
       },
+
       // 인증 필요한 페이지
       {
         element: <PrivateRoute />,
@@ -68,65 +59,33 @@ export const router = createBrowserRouter([
           // 온보딩 (GNB 없음)
           {
             element: <AuthLayout />,
-            children: [
-              {
-                path: ROUTES.ONBOARDING,
-                element: <OnboardingPage />,
-              },
-            ],
+            children: [{ path: ROUTES.ONBOARDING, element: <OnboardingPage /> }],
           },
-          // 메인 페이지들 (GNB 있음)
+
+          // GNB + 콘텐츠 패딩
           {
             element: <MainLayout />,
             children: [
-              {
-                path: ROUTES.HOME,
-                element: <HomePage />,
-              },
-              {
-                path: ROUTES.HOME_ALIAS,
-                element: <Navigate to={ROUTES.HOME} replace />,
-              },
-              {
-                path: ROUTES.BOOKS,
-                element: <BookListPage />,
-              },
-              {
-                path: `${ROUTES.BOOKS}/:id`,
-                element: <BookDetailPage />,
-              },
-              {
-                path: `${ROUTES.BOOKS}/:id/reviews`,
-                element: <BookReviewHistoryPage />,
-              },
-              {
-                path: ROUTES.GATHERINGS,
-                element: <GatheringListPage />,
-              },
-              {
-                path: ROUTES.GATHERING_CREATE,
-                element: <CreateGatheringPage />,
-              },
+              { path: ROUTES.HOME, element: <HomePage /> },
+              { path: ROUTES.HOME_ALIAS, element: <Navigate to={ROUTES.HOME} replace /> },
+              { path: ROUTES.BOOKS, element: <BookListPage /> },
+              { path: ROUTES.GATHERINGS, element: <GatheringListPage /> },
+              { path: ROUTES.GATHERING_CREATE, element: <CreateGatheringPage /> },
+              { path: ROUTES.RECORDS, element: <RecordListPage /> },
             ],
           },
-          // 전체 너비 레이아웃 페이지 (GNB 있음, 컨텐츠 패딩 없음)
+
+          // GNB + 콘텐츠 패딩 없음, 페이지에서 자체 래퍼 관리
           {
             element: <FullWidthLayout />,
             children: [
-              {
-                path: `${ROUTES.GATHERINGS}/:id`,
-                element: <GatheringDetailPage />,
-              },
-            ],
-          },
-          // 메인 페이지들 계속 (GNB 있음)
-          {
-            element: <MainLayout />,
-            children: [
-              {
-                path: `${ROUTES.GATHERINGS}/:id/settings`,
-                element: <GatheringSettingPage />,
-              },
+              // 도서
+              { path: `${ROUTES.BOOKS}/:id`, element: <BookDetailPage /> },
+              { path: `${ROUTES.BOOKS}/:id/reviews`, element: <BookReviewHistoryPage /> },
+              // 모임
+              { path: `${ROUTES.GATHERINGS}/:id`, element: <GatheringDetailPage /> },
+              { path: `${ROUTES.GATHERINGS}/:id/settings`, element: <GatheringSettingPage /> },
+              // 약속
               {
                 path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId`,
                 element: <MeetingDetailPage />,
@@ -159,23 +118,15 @@ export const router = createBrowserRouter([
                 path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/update`,
                 element: <MeetingCreatePage />,
               },
-              {
-                path: ROUTES.RECORDS,
-                element: <RecordListPage />,
-              },
             ],
           },
         ],
       },
-      // 로그인/비로그인 모두 접근 가능한 페이지 (GNB 있음)
+
+      // 로그인/비로그인 모두 접근 가능 (GNB + 콘텐츠 패딩)
       {
         element: <MainLayout />,
-        children: [
-          {
-            path: `${ROUTES.INVITE_BASE}/:invitationCode`,
-            element: <InvitePage />,
-          },
-        ],
+        children: [{ path: `${ROUTES.INVITE_BASE}/:invitationCode`, element: <InvitePage /> }],
       },
     ],
   },
diff --git a/src/shared/components/FormPageHeader.tsx b/src/shared/components/FormPageHeader.tsx
new file mode 100644
index 0000000..5f633ae
--- /dev/null
+++ b/src/shared/components/FormPageHeader.tsx
@@ -0,0 +1,84 @@
+import { ChevronLeft } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+
+import { useScrollShadow } from '@/shared/hooks'
+import { cn } from '@/shared/lib/utils'
+import { Button } from '@/shared/ui/Button'
+import { TextButton } from '@/shared/ui/TextButton'
+
+export interface FormPageHeaderProps {
+  /** 페이지 제목 */
+  title: string
+  /** 액션 버튼 텍스트 */
+  actionLabel: string
+  /** 액션 버튼 클릭 핸들러 */
+  onAction: () => void
+  /** 액션 버튼 비활성화 여부 */
+  isActionDisabled?: boolean
+  /** 이동할 경로. 지정하지 않으면 navigate(-1)로 뒤로가기 */
+  to?: string
+  /** 외부에서 전달하는 추가 클래스 */
+  className?: string
+}
+
+/**
+ * 폼 페이지 상단 헤더 (뒤로가기 + 제목 + 액션 버튼)
+ *
+ * @description
+ * GNB 아래에 sticky로 고정되는 폼 페이지 헤더입니다.
+ * 뒤로가기, 페이지 제목, 제출/저장 버튼으로 구성됩니다.
+ * 스크롤 시 하단에 shadow가 자동으로 표시됩니다.
+ *
+ * FullWidthLayout에서 사용하며, 전체 너비를 자연스럽게 차지합니다.
+ *
+ * @example
+ * ```tsx
+ * <FormPageHeader
+ *   title="약속 만들기"
+ *   actionLabel="만들기"
+ *   onAction={handleSubmit}
+ *   isActionDisabled={isSubmitting}
+ * />
+ * ```
+ */
+export default function FormPageHeader({
+  title,
+  actionLabel,
+  onAction,
+  isActionDisabled = false,
+  to,
+  className,
+}: FormPageHeaderProps) {
+  const navigate = useNavigate()
+  const isScrolled = useScrollShadow()
+
+  const handleBack = () => {
+    if (to) {
+      navigate(to)
+    } else {
+      navigate(-1)
+    }
+  }
+
+  return (
+    <header
+      className={cn(
+        'sticky top-gnb-height z-40 bg-white transition-shadow',
+        isScrolled && 'shadow-drop-bottom',
+        className
+      )}
+    >
+      <div className="mx-auto max-w-layout-max px-layout-padding">
+        <TextButton size="medium" icon={ChevronLeft} onClick={handleBack} className="py-small">
+          뒤로가기
+        </TextButton>
+        <div className="flex items-center justify-between py-large">
+          <h2 className="text-black typo-heading3">{title}</h2>
+          <Button className="w-fit" size="small" onClick={onAction} disabled={isActionDisabled}>
+            {actionLabel}
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/src/shared/components/SubPageHeader.tsx b/src/shared/components/SubPageHeader.tsx
index 3f292b2..0589514 100644
--- a/src/shared/components/SubPageHeader.tsx
+++ b/src/shared/components/SubPageHeader.tsx
@@ -1,6 +1,7 @@
 import { ChevronLeft } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 
+import { useScrollShadow } from '@/shared/hooks'
 import { cn } from '@/shared/lib/utils'
 import { TextButton } from '@/shared/ui/TextButton'
 
@@ -20,6 +21,9 @@ export interface SubPageHeaderProps {
  * GNB 아래에 sticky로 고정되는 뒤로가기 헤더입니다.
  * 기본 동작은 브라우저 히스토리 뒤로가기이며,
  * `to` prop으로 특정 경로를 지정할 수 있습니다.
+ * 스크롤 시 하단에 shadow가 자동으로 표시됩니다.
+ *
+ * FullWidthLayout에서 사용하며, 전체 너비를 자연스럽게 차지합니다.
  *
  * @example
  * ```tsx
@@ -29,6 +33,7 @@ export interface SubPageHeaderProps {
  */
 export default function SubPageHeader({ label = '뒤로가기', to, className }: SubPageHeaderProps) {
   const navigate = useNavigate()
+  const isScrolled = useScrollShadow()
 
   const handleClick = () => {
     if (to) {
@@ -41,7 +46,11 @@ export default function SubPageHeader({ label = '뒤로가기', to, className }:
   return (
     <nav
       aria-label={`${label} 페이지로 이동`}
-      className={cn('sticky top-gnb-height z-40 bg-white w-screen ml-[calc(-50vw+50%)]', className)}
+      className={cn(
+        'sticky top-gnb-height z-40 bg-white transition-shadow',
+        isScrolled && 'shadow-drop-bottom',
+        className
+      )}
     >
       <div className="mx-auto max-w-layout-max px-layout-padding py-small">
         <TextButton size="medium" icon={ChevronLeft} onClick={handleClick}>
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
index 16f1cb1..31b3203 100644
--- a/src/shared/hooks/index.ts
+++ b/src/shared/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useDebounce'
 export * from './useDeferredLoading'
 export * from './useInfiniteScroll'
 export * from './useScrollCollapse'
+export * from './useScrollShadow'
diff --git a/src/shared/hooks/useScrollShadow.ts b/src/shared/hooks/useScrollShadow.ts
new file mode 100644
index 0000000..011d2da
--- /dev/null
+++ b/src/shared/hooks/useScrollShadow.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+export function useScrollShadow() {
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => setIsScrolled(window.scrollY > 0)
+    handleScroll()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return isScrolled
+}
diff --git a/src/shared/layout/LandingLayout.tsx b/src/shared/layout/LandingLayout.tsx
index c6df0b4..632f6fb 100644
--- a/src/shared/layout/LandingLayout.tsx
+++ b/src/shared/layout/LandingLayout.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { Outlet, useNavigate } from 'react-router-dom'
 
 import { useAuth } from '@/features/auth'
@@ -6,27 +5,22 @@ import LandingBg from '@/shared/assets/images/landing-bg.png'
 import LogoIcon from '@/shared/assets/images/logo-icon.png'
 import LogoText from '@/shared/assets/images/logo-text.png'
 import { ROUTES } from '@/shared/constants'
+import { useScrollShadow } from '@/shared/hooks'
 import { Button } from '@/shared/ui'
 
 export default function LandingLayout() {
   const navigate = useNavigate()
-  const [isScrolled, setIsScrolled] = useState(false)
+  const isScrolled = useScrollShadow()
   const { data: user, isPending } = useAuth()
   const isLoggedIn = !!user
 
-  useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 0)
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
-
   return (
     <div
       className="w-full min-w-landing-max bg-repeat-x"
       style={{ backgroundImage: `url(${LandingBg})` }}
     >
       <header
-        className={`sticky top-0 z-20 h-gnb-height bg-white transition-shadow ${isScrolled ? 'shadow-drop' : ''}`}
+        className={`sticky top-0 z-20 h-gnb-height bg-white transition-shadow ${isScrolled ? 'shadow-drop-bottom' : ''}`}
       >
         <nav className="mx-auto h-full max-w-layout-max px-layout-padding flex items-center justify-between">
           <h1 className="flex items-center gap-xsmall">

From 5389ed601f041123a16b9293eec744896166117b Mon Sep 17 00:00:00 2001
From: mgYang53 <mg960503@gmail.com>
Date: Thu, 19 Feb 2026 23:31:48 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20pr=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81=20-=20=ED=95=98=EB=93=9C=EC=BD=94=EB=94=A9=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=95=88=EC=A0=84=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/book/components/BookLogList.tsx | 6 +++---
 src/pages/Meetings/MeetingDetailPage.tsx     | 9 +++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/features/book/components/BookLogList.tsx b/src/features/book/components/BookLogList.tsx
index 5990759..904f0bc 100644
--- a/src/features/book/components/BookLogList.tsx
+++ b/src/features/book/components/BookLogList.tsx
@@ -111,7 +111,7 @@ const BookLogList = ({ bookId, isRecording }: BookLogListProps) => {
   return (
     <section>
       {/* 감상 기록 헤더 - sticky */}
-      <div className="sticky top-[108px] z-30 bg-white shadow-drop-bottom">
+      <div className="sticky top-[calc(var(--spacing-gnb-height)+44px)] z-30 bg-white shadow-drop-bottom">
         <div className="mx-auto max-w-layout-max px-layout-padding py-base">
           <div className="flex justify-between mb-base">
             <h2 className="typo-heading2 text-grey-800">감상 기록</h2>
@@ -175,7 +175,7 @@ const BookLogList = ({ bookId, isRecording }: BookLogListProps) => {
 
       {/* 기록 목록 - full-bleed 배경 */}
       <div className="bg-grey-100">
-        <section className="mx-auto max-w-layout-max px-layout-padding py-xlarge">
+        <div className="mx-auto max-w-layout-max px-layout-padding py-xlarge">
           {allRecords.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-base text-center">
               <p className="typo-subtitle2 text-grey-600">
@@ -236,7 +236,7 @@ const BookLogList = ({ bookId, isRecording }: BookLogListProps) => {
               })}
             </div>
           )}
-        </section>
+        </div>
       </div>
       <BookLogModal
         open={isModalOpen}
diff --git a/src/pages/Meetings/MeetingDetailPage.tsx b/src/pages/Meetings/MeetingDetailPage.tsx
index 85fe9a4..c9c96b1 100644
--- a/src/pages/Meetings/MeetingDetailPage.tsx
+++ b/src/pages/Meetings/MeetingDetailPage.tsx
@@ -28,7 +28,10 @@ import { showErrorToast } from '@/shared/lib/toast'
 import { Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/ui'
 
 export default function MeetingDetailPage() {
-  const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
+  const { gatheringId, meetingId } = useParams<{
+    gatheringId: string
+    meetingId: string
+  }>()
 
   const [activeTab, setActiveTab] = useState<TopicStatus>('PROPOSED')
   const [isConfirmTopicOpen, setIsConfirmTopicOpen] = useState(false)
@@ -79,11 +82,13 @@ export default function MeetingDetailPage() {
     // navigate(ROUTES.GATHERING_DETAIL(gatheringId), { replace: true })
   }, [proposedError, confirmedError, meetingError])
 
+  if (!gatheringId || !meetingId) return null
+
   return (
     <>
       <SubPageHeader
         label={meeting?.gathering.gatheringName ?? '뒤로가기'}
-        to={ROUTES.GATHERING_DETAIL(gatheringId!)}
+        to={ROUTES.GATHERING_DETAIL(gatheringId)}
       />
 
       <div className="mx-auto max-w-layout-max px-layout-padding">