diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index 4988b80..e545287 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -11,6 +11,7 @@ export const API_PATHS = {
   AUTH: `${API_BASE}/auth`,
   USERS: `${API_BASE}/users`,
   BOOK: `${API_BASE}/book`,
+  KEYWORDS: `${API_BASE}/keywords`,
   GATHERINGS: `${API_BASE}/gatherings`,
   MEETINGS: `${API_BASE}/meetings`,
 } as const
diff --git a/src/features/book/book.api.ts b/src/features/book/book.api.ts
index a3c2eba..b6074c1 100644
--- a/src/features/book/book.api.ts
+++ b/src/features/book/book.api.ts
@@ -83,8 +83,8 @@ const mockBookReview: BookReview = {
   userId: 1,
   rating: 3.5,
   keywords: [
-    { id: 3, name: '감동', type: 'BOOK' },
-    { id: 7, name: '몰입', type: 'IMPRESSION' },
+    { id: 43, name: '관계', type: 'BOOK' },
+    { id: 18, name: '흥미로운', type: 'IMPRESSION' },
   ],
   createdAt: '2026-01-11T10:00:00',
 }
@@ -462,20 +462,20 @@ const mockBookReviewHistoryResponse: GetBookReviewHistoryResponse = {
       createdAt: '2025-12-15T10:30:00',
       rating: 3.5,
       bookKeywords: [
-        { id: 1, name: '관계', type: 'BOOK' },
-        { id: 2, name: '성장', type: 'BOOK' },
+        { id: 43, name: '관계', type: 'BOOK' },
+        { id: 47, name: '성장', type: 'BOOK' },
       ],
       impressionKeywords: [
-        { id: 10, name: '즐거운', type: 'IMPRESSION' },
-        { id: 11, name: '여운이 남는', type: 'IMPRESSION' },
+        { id: 9, name: '즐거운', type: 'IMPRESSION' },
+        { id: 20, name: '여운이 남는', type: 'IMPRESSION' },
       ],
     },
     {
       bookReviewHistoryId: 1,
       createdAt: '2025-12-08T14:20:00',
       rating: 4,
-      bookKeywords: [{ id: 3, name: '감동', type: 'BOOK' }],
-      impressionKeywords: [{ id: 12, name: '몰입되는', type: 'IMPRESSION' }],
+      bookKeywords: [{ id: 52, name: '삶', type: 'BOOK' }],
+      impressionKeywords: [{ id: 12, name: '뭉클한', type: 'IMPRESSION' }],
     },
   ],
   pageSize: 5,
diff --git a/src/features/book/components/BookReviewForm.tsx b/src/features/book/components/BookReviewForm.tsx
new file mode 100644
index 0000000..9dc80be
--- /dev/null
+++ b/src/features/book/components/BookReviewForm.tsx
@@ -0,0 +1,299 @@
+import { X } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { useKeywords } from '@/features/keywords'
+import { StarRate } from '@/shared/components/StarRate'
+import { TextButton } from '@/shared/ui'
+import { Chip } from '@/shared/ui/Chip'
+import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/Tabs'
+
+/** BookReviewForm의 현재 폼 상태 */
+export interface BookReviewFormValues {
+  rating: number
+  keywordIds: number[]
+  isValid: boolean
+}
+
+/**
+ * 책 평가 폼 컴포넌트
+ *
+ * @description 별점과 키워드를 선택하는 입력 UI만 담당합니다.
+ * 제출 버튼은 포함하지 않으며, onChange 콜백으로 현재 폼 상태를 전달합니다.
+ *
+ * @example
+ * ```tsx
+ * // 빈 폼
+ * <BookReviewForm onChange={(values) => setFormValues(values)} />
+ *
+ * // 기존 데이터가 있는 경우
+ * <BookReviewForm
+ *   initialRating={3.5}
+ *   initialKeywordIds={[3, 7]}
+ *   onChange={(values) => setFormValues(values)}
+ * />
+ * ```
+ */
+export interface BookReviewFormProps {
+  /** 초기 별점 값 */
+  initialRating?: number
+  /** 초기 선택된 키워드 ID 목록 */
+  initialKeywordIds?: number[]
+  /** 폼 상태 변경 콜백 */
+  onChange?: (values: BookReviewFormValues) => void
+}
+
+export function BookReviewForm({
+  initialRating = 0,
+  initialKeywordIds = [],
+  onChange,
+}: BookReviewFormProps) {
+  const [rating, setRating] = useState(initialRating)
+  const [selectedKeywordIds, setSelectedKeywordIds] = useState<number[]>(initialKeywordIds)
+  const [selectedBookCategoryId, setSelectedBookCategoryId] = useState<number | null>(null)
+  const [selectedImpressionCategoryId, setSelectedImpressionCategoryId] = useState<number | null>(
+    null
+  )
+
+  const {
+    data: keywordsData,
+    isLoading: isLoadingKeywords,
+    isError: isKeywordsError,
+  } = useKeywords()
+
+  // 책 키워드 카테고리 (level 1)
+  const bookCategories = useMemo(
+    () =>
+      keywordsData?.keywords.filter((k) => k.type === 'BOOK' && k.level === 1 && !k.isSelectable) ||
+      [],
+    [keywordsData]
+  )
+
+  // 감정 키워드 카테고리 (level 1)
+  const impressionCategories = useMemo(
+    () =>
+      keywordsData?.keywords.filter(
+        (k) => k.type === 'IMPRESSION' && k.level === 1 && !k.isSelectable
+      ) || [],
+    [keywordsData]
+  )
+
+  // 선택 가능한 책 키워드 (level 2)
+  const bookKeywords = useMemo(() => {
+    const allKeywords =
+      keywordsData?.keywords.filter((k) => k.type === 'BOOK' && k.isSelectable) || []
+
+    if (selectedBookCategoryId === null) {
+      return allKeywords
+    }
+
+    return allKeywords.filter((k) => k.parentId === selectedBookCategoryId)
+  }, [keywordsData, selectedBookCategoryId])
+
+  // 선택 가능한 감정 키워드 (level 2)
+  const impressionKeywords = useMemo(() => {
+    const allKeywords =
+      keywordsData?.keywords.filter((k) => k.type === 'IMPRESSION' && k.isSelectable) || []
+
+    if (selectedImpressionCategoryId === null) {
+      return allKeywords
+    }
+
+    return allKeywords.filter((k) => k.parentId === selectedImpressionCategoryId)
+  }, [keywordsData, selectedImpressionCategoryId])
+
+  // 선택된 책 키워드
+  const selectedBookKeywords = useMemo(() => {
+    return (
+      keywordsData?.keywords.filter(
+        (k) => k.type === 'BOOK' && selectedKeywordIds.includes(k.id)
+      ) || []
+    )
+  }, [keywordsData, selectedKeywordIds])
+
+  // 선택된 감정 키워드
+  const selectedImpressionKeywords = useMemo(() => {
+    return (
+      keywordsData?.keywords.filter(
+        (k) => k.type === 'IMPRESSION' && selectedKeywordIds.includes(k.id)
+      ) || []
+    )
+  }, [keywordsData, selectedKeywordIds])
+
+  const handleRatingChange = (newRating: number) => {
+    setRating(newRating)
+    onChange?.({
+      rating: newRating,
+      keywordIds: selectedKeywordIds,
+      isValid: selectedBookKeywords.length > 0 && selectedImpressionKeywords.length > 0,
+    })
+  }
+
+  const handleKeywordToggle = (keywordId: number) => {
+    const nextIds = selectedKeywordIds.includes(keywordId)
+      ? selectedKeywordIds.filter((id) => id !== keywordId)
+      : [...selectedKeywordIds, keywordId]
+    setSelectedKeywordIds(nextIds)
+
+    const nextBookCount =
+      keywordsData?.keywords.filter((k) => k.type === 'BOOK' && nextIds.includes(k.id)).length ?? 0
+    const nextImpressionCount =
+      keywordsData?.keywords.filter((k) => k.type === 'IMPRESSION' && nextIds.includes(k.id))
+        .length ?? 0
+
+    onChange?.({
+      rating,
+      keywordIds: nextIds,
+      isValid: nextBookCount > 0 && nextImpressionCount > 0,
+    })
+  }
+
+  if (isKeywordsError) {
+    return (
+      <div className="flex items-center justify-center py-xlarge">
+        <p className="typo-body2 text-grey-600">키워드를 불러오지 못했습니다. 다시 시도해주세요.</p>
+      </div>
+    )
+  }
+
+  if (isLoadingKeywords) {
+    return (
+      <div className="flex items-center justify-center py-xlarge">
+        <p className="typo-body2 text-grey-600">키워드를 불러오는 중...</p>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-large">
+        {/* 별점 */}
+        <section>
+          <h4 className="typo-body4 text-grey-600 mb-tiny ml-xxtiny">별점</h4>
+          <div className="flex items-center gap-xsmall">
+            <StarRate rating={rating} size={36} interactive onRatingChange={handleRatingChange} />
+            <p className="typo-subtitle5 text-black">{rating.toFixed(1)}</p>
+            {rating >= 0.5 && (
+              <TextButton onClick={() => handleRatingChange(0)}>별점 초기화</TextButton>
+            )}
+          </div>
+        </section>
+
+        {/* 책 키워드 */}
+        <section>
+          <h4 className="typo-body4 text-grey-600 mb-tiny ml-xxtiny">책 키워드</h4>
+
+          {/* 카테고리 탭 */}
+          <Tabs
+            value={selectedBookCategoryId?.toString() ?? 'all'}
+            onValueChange={(value) =>
+              setSelectedBookCategoryId(value === 'all' ? null : Number(value))
+            }
+            className="mb-tiny ml-xtiny"
+          >
+            <TabsList size="small">
+              <TabsTrigger value="all">전체</TabsTrigger>
+              {bookCategories.map((category) => (
+                <TabsTrigger key={category.id} value={category.id.toString()}>
+                  {category.name}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {/* 키워드 목록 */}
+          <div className="flex gap-xsmall flex-wrap">
+            {bookKeywords.map((keyword) => {
+              const isSelected = selectedKeywordIds.includes(keyword.id)
+              return (
+                <Chip
+                  key={keyword.id}
+                  variant={isSelected ? 'selected' : 'default'}
+                  onClick={() => handleKeywordToggle(keyword.id)}
+                  className="cursor-pointer"
+                >
+                  {keyword.name}
+                </Chip>
+              )
+            })}
+          </div>
+
+          {/* 선택한 키워드 */}
+          {selectedBookKeywords.length > 0 && (
+            <div className="flex flex-col gap-tiny flex-wrap bg-grey-100 py-2.5 px-small mt-small">
+              <p className="typo-body4 text-grey-600">선택한 키워드</p>
+              <div className="flex gap-tiny flex-wrap">
+                {selectedBookKeywords.map((keyword) => (
+                  <Chip
+                    key={keyword.id}
+                    onClick={() => handleKeywordToggle(keyword.id)}
+                    className="cursor-pointer bg-white text-black"
+                  >
+                    {keyword.name} <X className="ml-tiny" size={12} />
+                  </Chip>
+                ))}
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* 감정 키워드 */}
+        <section>
+          <h4 className="typo-body4 text-grey-600 mb-tiny">감상 키워드</h4>
+
+          {/* 카테고리 탭 */}
+          <Tabs
+            value={selectedImpressionCategoryId?.toString() ?? 'all'}
+            onValueChange={(value) =>
+              setSelectedImpressionCategoryId(value === 'all' ? null : Number(value))
+            }
+            className="mb-tiny ml-xtiny"
+          >
+            <TabsList size="small">
+              <TabsTrigger value="all">전체</TabsTrigger>
+              {impressionCategories.map((category) => (
+                <TabsTrigger key={category.id} value={category.id.toString()}>
+                  {category.name}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {/* 키워드 목록 */}
+          <div className="flex gap-xsmall flex-wrap">
+            {impressionKeywords.map((keyword) => {
+              const isSelected = selectedKeywordIds.includes(keyword.id)
+              return (
+                <Chip
+                  key={keyword.id}
+                  variant={isSelected ? 'selected' : 'default'}
+                  onClick={() => handleKeywordToggle(keyword.id)}
+                  className="cursor-pointer"
+                >
+                  {keyword.name}
+                </Chip>
+              )
+            })}
+          </div>
+
+          {/* 선택한 키워드 */}
+          {selectedImpressionKeywords.length > 0 && (
+            <div className="flex flex-col gap-tiny flex-wrap bg-grey-100 py-2.5 px-small mt-small">
+              <p className="typo-body4 text-grey-600">선택한 키워드</p>
+              <div className="flex gap-tiny flex-wrap">
+                {selectedImpressionKeywords.map((keyword) => (
+                  <Chip
+                    key={keyword.id}
+                    onClick={() => handleKeywordToggle(keyword.id)}
+                    className="cursor-pointer bg-white text-black"
+                  >
+                    {keyword.name} <X className="ml-tiny" size={12} />
+                  </Chip>
+                ))}
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
+    </>
+  )
+}
diff --git a/src/features/book/components/BookReviewModal.tsx b/src/features/book/components/BookReviewModal.tsx
index 3d3f662..c807159 100644
--- a/src/features/book/components/BookReviewModal.tsx
+++ b/src/features/book/components/BookReviewModal.tsx
@@ -1,10 +1,6 @@
-import { X } from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 
-import { useKeywords } from '@/features/keywords'
-import { StarRate } from '@/shared/components/StarRate'
 import { Button } from '@/shared/ui/Button'
-import { Chip } from '@/shared/ui/Chip'
 import {
   Modal,
   ModalBody,
@@ -13,10 +9,10 @@ import {
   ModalHeader,
   ModalTitle,
 } from '@/shared/ui/Modal'
-import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/Tabs'
 import { useGlobalModalStore } from '@/store'
 
 import { useCreateBookReview } from '../hooks'
+import { BookReviewForm, type BookReviewFormValues } from './BookReviewForm'
 
 /**
  * 책 평가하기 모달
@@ -38,118 +34,30 @@ export interface BookReviewModalProps {
   onOpenChange: (open: boolean) => void
 }
 
-export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalProps) {
-  const [rating, setRating] = useState(0)
-  const [selectedKeywordIds, setSelectedKeywordIds] = useState<number[]>([])
-  const [selectedBookCategoryId, setSelectedBookCategoryId] = useState<number | null>(null)
-  const [selectedImpressionCategoryId, setSelectedImpressionCategoryId] = useState<number | null>(
-    null
-  )
+const INITIAL_FORM_VALUES: BookReviewFormValues = {
+  rating: 0,
+  keywordIds: [],
+  isValid: false,
+}
 
-  const {
-    data: keywordsData,
-    isLoading: isLoadingKeywords,
-    isError: isKeywordsError,
-  } = useKeywords()
+export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalProps) {
+  const [formValues, setFormValues] = useState<BookReviewFormValues>(INITIAL_FORM_VALUES)
   const { mutate: submitReview, isPending } = useCreateBookReview(bookId)
   const { openError } = useGlobalModalStore()
 
-  const handleOpenChange = (nextOpen: boolean) => {
-    if (!nextOpen) {
-      setRating(0)
-      setSelectedKeywordIds([])
-      setSelectedBookCategoryId(null)
-      setSelectedImpressionCategoryId(null)
-    }
-    onOpenChange(nextOpen)
-  }
-
-  // 책 키워드 카테고리 (level 1)
-  const bookCategories = useMemo(
-    () =>
-      keywordsData?.keywords.filter((k) => k.type === 'BOOK' && k.level === 1 && !k.isSelectable) ||
-      [],
-    [keywordsData]
-  )
-
-  // 감정 키워드 카테고리 (level 1)
-  const impressionCategories = useMemo(
-    () =>
-      keywordsData?.keywords.filter(
-        (k) => k.type === 'IMPRESSION' && k.level === 1 && !k.isSelectable
-      ) || [],
-    [keywordsData]
-  )
-
-  // 선택 가능한 책 키워드 (level 2)
-  const bookKeywords = useMemo(() => {
-    const allKeywords =
-      keywordsData?.keywords.filter((k) => k.type === 'BOOK' && k.isSelectable) || []
-
-    if (selectedBookCategoryId === null) {
-      return allKeywords
-    }
-
-    return allKeywords.filter((k) => k.parentId === selectedBookCategoryId)
-  }, [keywordsData, selectedBookCategoryId])
-
-  // 선택 가능한 감정 키워드 (level 2)
-  const impressionKeywords = useMemo(() => {
-    const allKeywords =
-      keywordsData?.keywords.filter((k) => k.type === 'IMPRESSION' && k.isSelectable) || []
-
-    if (selectedImpressionCategoryId === null) {
-      return allKeywords
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setFormValues(INITIAL_FORM_VALUES)
     }
-
-    return allKeywords.filter((k) => k.parentId === selectedImpressionCategoryId)
-  }, [keywordsData, selectedImpressionCategoryId])
-
-  // 선택된 책 키워드
-  const selectedBookKeywords = useMemo(() => {
-    return (
-      keywordsData?.keywords.filter(
-        (k) => k.type === 'BOOK' && selectedKeywordIds.includes(k.id)
-      ) || []
-    )
-  }, [keywordsData, selectedKeywordIds])
-
-  // 선택된 감정 키워드
-  const selectedImpressionKeywords = useMemo(() => {
-    return (
-      keywordsData?.keywords.filter(
-        (k) => k.type === 'IMPRESSION' && selectedKeywordIds.includes(k.id)
-      ) || []
-    )
-  }, [keywordsData, selectedKeywordIds])
-
-  // 저장 버튼 활성화 조건
-  const isFormValid = useMemo(() => {
-    return rating > 0 && selectedBookKeywords.length > 0 && selectedImpressionKeywords.length > 0
-  }, [rating, selectedBookKeywords.length, selectedImpressionKeywords.length])
-
-  const handleKeywordToggle = (keywordId: number) => {
-    setSelectedKeywordIds((prev) =>
-      prev.includes(keywordId) ? prev.filter((id) => id !== keywordId) : [...prev, keywordId]
-    )
+    onOpenChange(newOpen)
   }
 
   const handleSubmit = () => {
-    if (rating === 0) {
-      openError('별점 필요', '별점을 선택해주세요.')
-      return
-    }
-
     submitReview(
-      { rating, keywordIds: selectedKeywordIds },
+      { rating: formValues.rating, keywordIds: formValues.keywordIds },
       {
         onSuccess: () => {
-          onOpenChange(false)
-          // 상태 초기화
-          setRating(0)
-          setSelectedKeywordIds([])
-          setSelectedBookCategoryId(null)
-          setSelectedImpressionCategoryId(null)
+          handleOpenChange(false)
         },
         onError: (error) => {
           openError('평가 저장 실패', error.message)
@@ -158,178 +66,21 @@ export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalP
     )
   }
 
-  if (isKeywordsError) {
-    return (
-      <Modal open={open} onOpenChange={handleOpenChange}>
-        <ModalContent variant="normal">
-          <ModalHeader>
-            <ModalTitle>책 평가하기</ModalTitle>
-          </ModalHeader>
-          <ModalBody>
-            <div className="flex items-center justify-center py-xlarge">
-              <p className="typo-body2 text-grey-600">
-                키워드를 불러오지 못했습니다. 다시 시도해주세요.
-              </p>
-            </div>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    )
-  }
-
-  if (isLoadingKeywords) {
-    return (
-      <Modal open={open} onOpenChange={onOpenChange}>
-        <ModalContent variant="normal">
-          <ModalHeader>
-            <ModalTitle>책 평가하기</ModalTitle>
-          </ModalHeader>
-          <ModalBody>
-            <div className="flex items-center justify-center py-xlarge">
-              <p className="typo-body2 text-grey-600">키워드를 불러오는 중...</p>
-            </div>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    )
-  }
-
   return (
-    <Modal open={open} onOpenChange={onOpenChange}>
+    <Modal open={open} onOpenChange={handleOpenChange}>
       <ModalContent variant="wide">
         <ModalHeader>
           <ModalTitle>책 평가하기</ModalTitle>
         </ModalHeader>
         <ModalBody>
-          <div className="flex flex-col gap-large">
-            {/* 별점 */}
-            <section>
-              <h4 className="typo-body4 text-grey-600 mb-tiny ml-xxtiny">별점</h4>
-              <div className="flex items-center gap-xsmall">
-                <StarRate rating={rating} size={36} interactive onRatingChange={setRating} />
-                <p className="subtitle5 text-black">{rating.toFixed(1)}</p>
-              </div>
-            </section>
-
-            {/* 책 키워드 */}
-            <section>
-              <h4 className="typo-body4 text-grey-600 mb-tiny ml-xxtiny">책 키워드</h4>
-
-              {/* 카테고리 탭 */}
-              <Tabs
-                value={selectedBookCategoryId?.toString() ?? 'all'}
-                onValueChange={(value) =>
-                  setSelectedBookCategoryId(value === 'all' ? null : Number(value))
-                }
-                className="mb-tiny ml-xtiny"
-              >
-                <TabsList size="small">
-                  <TabsTrigger value="all">전체</TabsTrigger>
-                  {bookCategories.map((category) => (
-                    <TabsTrigger key={category.id} value={category.id.toString()}>
-                      {category.name}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
-              </Tabs>
-
-              {/* 키워드 목록 */}
-              <div className="flex gap-xsmall flex-wrap">
-                {bookKeywords.map((keyword) => {
-                  const isSelected = selectedKeywordIds.includes(keyword.id)
-                  return (
-                    <Chip
-                      key={keyword.id}
-                      variant={isSelected ? 'selected' : 'default'}
-                      onClick={() => handleKeywordToggle(keyword.id)}
-                      className="cursor-pointer"
-                    >
-                      {keyword.name}
-                    </Chip>
-                  )
-                })}
-              </div>
-
-              {/* 선택한 키워드 */}
-              {selectedBookKeywords.length > 0 && (
-                <div className="flex flex-col gap-tiny flex-wrap bg-grey-100 py-2.5 px-small mt-small">
-                  <p className="typo-body4 text-grey-600">선택한 키워드</p>
-                  <div className="flex gap-tiny flex-wrap">
-                    {selectedBookKeywords.map((keyword) => (
-                      <Chip
-                        key={keyword.id}
-                        onClick={() => handleKeywordToggle(keyword.id)}
-                        className="cursor-pointer bg-white text-black"
-                      >
-                        {keyword.name} <X className="ml-tiny" size={12} />
-                      </Chip>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </section>
-
-            {/* 감정 키워드 */}
-            <section>
-              <h4 className="typo-body4 text-grey-600 mb-tiny">감상 키워드</h4>
-
-              {/* 카테고리 탭 */}
-              <Tabs
-                value={selectedImpressionCategoryId?.toString() ?? 'all'}
-                onValueChange={(value) =>
-                  setSelectedImpressionCategoryId(value === 'all' ? null : Number(value))
-                }
-                className="mb-tiny ml-xtiny"
-              >
-                <TabsList size="small">
-                  <TabsTrigger value="all">전체</TabsTrigger>
-                  {impressionCategories.map((category) => (
-                    <TabsTrigger key={category.id} value={category.id.toString()}>
-                      {category.name}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
-              </Tabs>
-
-              {/* 키워드 목록 */}
-              <div className="flex gap-xsmall flex-wrap">
-                {impressionKeywords.map((keyword) => {
-                  const isSelected = selectedKeywordIds.includes(keyword.id)
-                  return (
-                    <Chip
-                      key={keyword.id}
-                      variant={isSelected ? 'selected' : 'default'}
-                      onClick={() => handleKeywordToggle(keyword.id)}
-                      className="cursor-pointer"
-                    >
-                      {keyword.name}
-                    </Chip>
-                  )
-                })}
-              </div>
-
-              {/* 선택한 키워드 */}
-              {selectedImpressionKeywords.length > 0 && (
-                <div className="flex flex-col gap-tiny flex-wrap bg-grey-100 py-2.5 px-small mt-small">
-                  <p className="typo-body4 text-grey-600">선택한 키워드</p>
-                  <div className="flex gap-tiny flex-wrap">
-                    {selectedImpressionKeywords.map((keyword) => (
-                      <Chip
-                        key={keyword.id}
-                        onClick={() => handleKeywordToggle(keyword.id)}
-                        className="cursor-pointer bg-white text-black"
-                      >
-                        {keyword.name} <X className="ml-tiny" size={12} />
-                      </Chip>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </section>
-          </div>
+          <BookReviewForm key={open ? 'open' : 'closed'} onChange={setFormValues} />
         </ModalBody>
         <ModalFooter variant="full">
-          <Button className="w-full" onClick={handleSubmit} disabled={!isFormValid || isPending}>
+          <Button
+            className="w-full"
+            onClick={handleSubmit}
+            disabled={!formValues.isValid || isPending}
+          >
             {isPending ? '저장 중...' : '저장하기'}
           </Button>
         </ModalFooter>
diff --git a/src/features/keywords/index.ts b/src/features/keywords/index.ts
index 3d8b699..f1985d8 100644
--- a/src/features/keywords/index.ts
+++ b/src/features/keywords/index.ts
@@ -1,3 +1,5 @@
 export * from './hooks'
 export * from './keywords.api'
+export * from './keywords.endpoints'
+export * from './keywords.mock'
 export * from './keywords.types'
diff --git a/src/features/keywords/keywords.api.ts b/src/features/keywords/keywords.api.ts
index f9405ae..eb5e48b 100644
--- a/src/features/keywords/keywords.api.ts
+++ b/src/features/keywords/keywords.api.ts
@@ -1,732 +1,16 @@
 /**
  * @file keywords.api.ts
- * @description 키워드 API 함수
+ * @description 키워드 API 요청 함수
  */
 
 import { api } from '@/api'
-
-import type { GetKeywordsResponse } from './keywords.types'
-
-// ============================================================
-// Mock Data
-// ============================================================
+import { KEYWORDS_ENDPOINTS } from '@/features/keywords/keywords.endpoints'
+import { getMockKeywords } from '@/features/keywords/keywords.mock'
+import type { GetKeywordsResponse } from '@/features/keywords/keywords.types'
 
 /** 목데이터 사용 여부 플래그 */
 const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
 
-const mockKeywordsResponse: GetKeywordsResponse = {
-  keywords: [
-    // ============================================================
-    // 책 키워드 카테고리 (BOOK, level 1)
-    // ============================================================
-    {
-      id: 1,
-      name: '인간관계',
-      type: 'BOOK',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 1,
-      isSelectable: false,
-    },
-    {
-      id: 2,
-      name: '개인',
-      type: 'BOOK',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 2,
-      isSelectable: false,
-    },
-    {
-      id: 3,
-      name: '삶과 죽음',
-      type: 'BOOK',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 3,
-      isSelectable: false,
-    },
-    {
-      id: 4,
-      name: '사회',
-      type: 'BOOK',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 4,
-      isSelectable: false,
-    },
-    {
-      id: 5,
-      name: '기타',
-      type: 'BOOK',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 5,
-      isSelectable: false,
-    },
-
-    // ============================================================
-    // 인간관계 키워드 (level 2, parentId: 1)
-    // ============================================================
-    {
-      id: 11,
-      name: '사랑',
-      type: 'BOOK',
-      parentId: 1,
-      parentName: '인간관계',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 12,
-      name: '관계',
-      type: 'BOOK',
-      parentId: 1,
-      parentName: '인간관계',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 13,
-      name: '가족',
-      type: 'BOOK',
-      parentId: 1,
-      parentName: '인간관계',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 14,
-      name: '우정',
-      type: 'BOOK',
-      parentId: 1,
-      parentName: '인간관계',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 15,
-      name: '이별',
-      type: 'BOOK',
-      parentId: 1,
-      parentName: '인간관계',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 개인 키워드 (level 2, parentId: 2)
-    // ============================================================
-    {
-      id: 21,
-      name: '성장',
-      type: 'BOOK',
-      parentId: 2,
-      parentName: '개인',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 22,
-      name: '자아',
-      type: 'BOOK',
-      parentId: 2,
-      parentName: '개인',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 23,
-      name: '고독',
-      type: 'BOOK',
-      parentId: 2,
-      parentName: '개인',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 24,
-      name: '선택',
-      type: 'BOOK',
-      parentId: 2,
-      parentName: '개인',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 25,
-      name: '자유',
-      type: 'BOOK',
-      parentId: 2,
-      parentName: '개인',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 삶과 죽음 키워드 (level 2, parentId: 3)
-    // ============================================================
-    {
-      id: 31,
-      name: '삶',
-      type: 'BOOK',
-      parentId: 3,
-      parentName: '삶과 죽음',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 32,
-      name: '죽음',
-      type: 'BOOK',
-      parentId: 3,
-      parentName: '삶과 죽음',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 33,
-      name: '상실',
-      type: 'BOOK',
-      parentId: 3,
-      parentName: '삶과 죽음',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 34,
-      name: '치유',
-      type: 'BOOK',
-      parentId: 3,
-      parentName: '삶과 죽음',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 35,
-      name: '기억',
-      type: 'BOOK',
-      parentId: 3,
-      parentName: '삶과 죽음',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 사회 키워드 (level 2, parentId: 4)
-    // ============================================================
-    {
-      id: 41,
-      name: '사회',
-      type: 'BOOK',
-      parentId: 4,
-      parentName: '사회',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 42,
-      name: '현실',
-      type: 'BOOK',
-      parentId: 4,
-      parentName: '사회',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 43,
-      name: '역사',
-      type: 'BOOK',
-      parentId: 4,
-      parentName: '사회',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 44,
-      name: '노동',
-      type: 'BOOK',
-      parentId: 4,
-      parentName: '사회',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 45,
-      name: '여성',
-      type: 'BOOK',
-      parentId: 4,
-      parentName: '사회',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-    {
-      id: 46,
-      name: '윤리',
-      type: 'BOOK',
-      parentId: 4,
-      parentName: '사회',
-      level: 2,
-      sortOrder: 6,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 기타 키워드 (level 2, parentId: 5)
-    // ============================================================
-    {
-      id: 51,
-      name: '청춘',
-      type: 'BOOK',
-      parentId: 5,
-      parentName: '기타',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 52,
-      name: '모험',
-      type: 'BOOK',
-      parentId: 5,
-      parentName: '기타',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 53,
-      name: '판타지',
-      type: 'BOOK',
-      parentId: 5,
-      parentName: '기타',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 54,
-      name: '추리',
-      type: 'BOOK',
-      parentId: 5,
-      parentName: '기타',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 감상 키워드 카테고리 (IMPRESSION, level 1)
-    // ============================================================
-    {
-      id: 101,
-      name: '긍정',
-      type: 'IMPRESSION',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 1,
-      isSelectable: false,
-    },
-    {
-      id: 102,
-      name: '감상',
-      type: 'IMPRESSION',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 2,
-      isSelectable: false,
-    },
-    {
-      id: 103,
-      name: '부정',
-      type: 'IMPRESSION',
-      parentId: null,
-      parentName: null,
-      level: 1,
-      sortOrder: 3,
-      isSelectable: false,
-    },
-
-    // ============================================================
-    // 긍정 키워드 (level 2, parentId: 101)
-    // ============================================================
-    {
-      id: 111,
-      name: '즐거운',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 112,
-      name: '감동적인',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 113,
-      name: '위로받은',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 114,
-      name: '뭉클한',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 115,
-      name: '후련한',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-    {
-      id: 116,
-      name: '벅찬',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 6,
-      isSelectable: true,
-    },
-    {
-      id: 117,
-      name: '안도한',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 7,
-      isSelectable: true,
-    },
-    {
-      id: 118,
-      name: '희망이 생긴',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 8,
-      isSelectable: true,
-    },
-    {
-      id: 119,
-      name: '설레는',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 9,
-      isSelectable: true,
-    },
-    {
-      id: 120,
-      name: '흥미로운',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 10,
-      isSelectable: true,
-    },
-    {
-      id: 121,
-      name: '빠져든',
-      type: 'IMPRESSION',
-      parentId: 101,
-      parentName: '긍정',
-      level: 2,
-      sortOrder: 11,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 감상 키워드 (level 2, parentId: 102)
-    // ============================================================
-    {
-      id: 122,
-      name: '여운이 남는',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 123,
-      name: '먹먹한',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 124,
-      name: '울컥한',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 125,
-      name: '찡한',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 126,
-      name: '그리운',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-    {
-      id: 127,
-      name: '익숙한',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 6,
-      isSelectable: true,
-    },
-    {
-      id: 128,
-      name: '이해가 되는',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 7,
-      isSelectable: true,
-    },
-    {
-      id: 129,
-      name: '의문이 남는',
-      type: 'IMPRESSION',
-      parentId: 102,
-      parentName: '감상',
-      level: 2,
-      sortOrder: 8,
-      isSelectable: true,
-    },
-
-    // ============================================================
-    // 부정 키워드 (level 2, parentId: 103)
-    // ============================================================
-    {
-      id: 131,
-      name: '지루한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 1,
-      isSelectable: true,
-    },
-    {
-      id: 132,
-      name: '씁쓸한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 2,
-      isSelectable: true,
-    },
-    {
-      id: 133,
-      name: '허무한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 3,
-      isSelectable: true,
-    },
-    {
-      id: 134,
-      name: '찝찝한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 4,
-      isSelectable: true,
-    },
-    {
-      id: 135,
-      name: '공허한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 5,
-      isSelectable: true,
-    },
-    {
-      id: 136,
-      name: '서글픈',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 6,
-      isSelectable: true,
-    },
-    {
-      id: 137,
-      name: '분노가 이는',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 7,
-      isSelectable: true,
-    },
-    {
-      id: 138,
-      name: '복잡한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 8,
-      isSelectable: true,
-    },
-    {
-      id: 139,
-      name: '허탈한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 9,
-      isSelectable: true,
-    },
-    {
-      id: 140,
-      name: '불안한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 10,
-      isSelectable: true,
-    },
-    {
-      id: 141,
-      name: '괴로운',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 11,
-      isSelectable: true,
-    },
-    {
-      id: 142,
-      name: '안타까운',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 12,
-      isSelectable: true,
-    },
-    {
-      id: 143,
-      name: '답답한',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 13,
-      isSelectable: true,
-    },
-    {
-      id: 144,
-      name: '슬픈',
-      type: 'IMPRESSION',
-      parentId: 103,
-      parentName: '부정',
-      level: 2,
-      sortOrder: 14,
-      isSelectable: true,
-    },
-  ],
-}
-
-/** 목데이터 응답 지연 시뮬레이션 (ms) */
-const MOCK_DELAY = 500
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
-// ============================================================
-// API Functions
-// ============================================================
-
 /**
  * 키워드 목록 조회
  *
@@ -741,9 +25,9 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
  */
 export async function getKeywords(): Promise<GetKeywordsResponse> {
   if (USE_MOCK) {
-    await delay(MOCK_DELAY)
-    return mockKeywordsResponse
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return getMockKeywords()
   }
 
-  return api.get<GetKeywordsResponse>('/api/keywords')
+  return api.get<GetKeywordsResponse>(KEYWORDS_ENDPOINTS.LIST)
 }
diff --git a/src/features/keywords/keywords.endpoints.ts b/src/features/keywords/keywords.endpoints.ts
new file mode 100644
index 0000000..8235aa4
--- /dev/null
+++ b/src/features/keywords/keywords.endpoints.ts
@@ -0,0 +1,6 @@
+import { API_PATHS } from '@/api'
+
+export const KEYWORDS_ENDPOINTS = {
+  // 키워드 목록 조회 (GET /api/keywords)
+  LIST: API_PATHS.KEYWORDS,
+} as const
diff --git a/src/features/keywords/keywords.mock.ts b/src/features/keywords/keywords.mock.ts
new file mode 100644
index 0000000..e6d0d5f
--- /dev/null
+++ b/src/features/keywords/keywords.mock.ts
@@ -0,0 +1,723 @@
+/**
+ * @file keywords.mock.ts
+ * @description 키워드 API 목데이터
+ */
+
+import type { GetKeywordsResponse } from '@/features/keywords/keywords.types'
+
+/**
+ * 키워드 목록 조회 목데이터
+ */
+const mockKeywordsResponse: GetKeywordsResponse = {
+  keywords: [
+    // ============================================================
+    // 책 키워드 카테고리 (BOOK, level 1)
+    // ============================================================
+    {
+      id: 1,
+      name: '인간관계',
+      type: 'BOOK',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 1,
+      isSelectable: false,
+    },
+    {
+      id: 2,
+      name: '개인',
+      type: 'BOOK',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 2,
+      isSelectable: false,
+    },
+    {
+      id: 3,
+      name: '삶과 죽음',
+      type: 'BOOK',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 3,
+      isSelectable: false,
+    },
+    {
+      id: 4,
+      name: '사회',
+      type: 'BOOK',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 4,
+      isSelectable: false,
+    },
+    {
+      id: 5,
+      name: '기타',
+      type: 'BOOK',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 5,
+      isSelectable: false,
+    },
+
+    // ============================================================
+    // 인간관계 키워드 (level 2, parentId: 1)
+    // ============================================================
+    {
+      id: 42,
+      name: '사랑',
+      type: 'BOOK',
+      parentId: 1,
+      parentName: '인간관계',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 43,
+      name: '관계',
+      type: 'BOOK',
+      parentId: 1,
+      parentName: '인간관계',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 44,
+      name: '가족',
+      type: 'BOOK',
+      parentId: 1,
+      parentName: '인간관계',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 45,
+      name: '우정',
+      type: 'BOOK',
+      parentId: 1,
+      parentName: '인간관계',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 46,
+      name: '이별',
+      type: 'BOOK',
+      parentId: 1,
+      parentName: '인간관계',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 개인 키워드 (level 2, parentId: 2)
+    // ============================================================
+    {
+      id: 47,
+      name: '성장',
+      type: 'BOOK',
+      parentId: 2,
+      parentName: '개인',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 48,
+      name: '자아',
+      type: 'BOOK',
+      parentId: 2,
+      parentName: '개인',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 49,
+      name: '고독',
+      type: 'BOOK',
+      parentId: 2,
+      parentName: '개인',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 50,
+      name: '선택',
+      type: 'BOOK',
+      parentId: 2,
+      parentName: '개인',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 51,
+      name: '자유',
+      type: 'BOOK',
+      parentId: 2,
+      parentName: '개인',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 삶과 죽음 키워드 (level 2, parentId: 3)
+    // ============================================================
+    {
+      id: 52,
+      name: '삶',
+      type: 'BOOK',
+      parentId: 3,
+      parentName: '삶과 죽음',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 53,
+      name: '죽음',
+      type: 'BOOK',
+      parentId: 3,
+      parentName: '삶과 죽음',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 54,
+      name: '상실',
+      type: 'BOOK',
+      parentId: 3,
+      parentName: '삶과 죽음',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 55,
+      name: '치유',
+      type: 'BOOK',
+      parentId: 3,
+      parentName: '삶과 죽음',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 56,
+      name: '기억',
+      type: 'BOOK',
+      parentId: 3,
+      parentName: '삶과 죽음',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 사회 키워드 (level 2, parentId: 4)
+    // ============================================================
+    {
+      id: 57,
+      name: '사회',
+      type: 'BOOK',
+      parentId: 4,
+      parentName: '사회',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 58,
+      name: '현실',
+      type: 'BOOK',
+      parentId: 4,
+      parentName: '사회',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 59,
+      name: '역사',
+      type: 'BOOK',
+      parentId: 4,
+      parentName: '사회',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 60,
+      name: '노동',
+      type: 'BOOK',
+      parentId: 4,
+      parentName: '사회',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 61,
+      name: '여성',
+      type: 'BOOK',
+      parentId: 4,
+      parentName: '사회',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+    {
+      id: 62,
+      name: '윤리',
+      type: 'BOOK',
+      parentId: 4,
+      parentName: '사회',
+      level: 2,
+      sortOrder: 6,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 기타 키워드 (level 2, parentId: 5)
+    // ============================================================
+    {
+      id: 63,
+      name: '청춘',
+      type: 'BOOK',
+      parentId: 5,
+      parentName: '기타',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 64,
+      name: '모험',
+      type: 'BOOK',
+      parentId: 5,
+      parentName: '기타',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 65,
+      name: '판타지',
+      type: 'BOOK',
+      parentId: 5,
+      parentName: '기타',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 66,
+      name: '추리',
+      type: 'BOOK',
+      parentId: 5,
+      parentName: '기타',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 감상 키워드 카테고리 (IMPRESSION, level 1)
+    // ============================================================
+    {
+      id: 6,
+      name: '긍정',
+      type: 'IMPRESSION',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 1,
+      isSelectable: false,
+    },
+    {
+      id: 7,
+      name: '감상',
+      type: 'IMPRESSION',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 2,
+      isSelectable: false,
+    },
+    {
+      id: 8,
+      name: '부정',
+      type: 'IMPRESSION',
+      parentId: null,
+      parentName: null,
+      level: 1,
+      sortOrder: 3,
+      isSelectable: false,
+    },
+
+    // ============================================================
+    // 긍정 키워드 (level 2, parentId: 6)
+    // ============================================================
+    {
+      id: 9,
+      name: '즐거운',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 10,
+      name: '감동적인',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 11,
+      name: '위로받은',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 12,
+      name: '뭉클한',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 13,
+      name: '후련한',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+    {
+      id: 14,
+      name: '벅찬',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 6,
+      isSelectable: true,
+    },
+    {
+      id: 15,
+      name: '안도한',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 7,
+      isSelectable: true,
+    },
+    {
+      id: 16,
+      name: '희망이 생긴',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 8,
+      isSelectable: true,
+    },
+    {
+      id: 17,
+      name: '설레는',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 9,
+      isSelectable: true,
+    },
+    {
+      id: 18,
+      name: '흥미로운',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 10,
+      isSelectable: true,
+    },
+    {
+      id: 19,
+      name: '빠져든',
+      type: 'IMPRESSION',
+      parentId: 6,
+      parentName: '긍정',
+      level: 2,
+      sortOrder: 11,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 감상 키워드 (level 2, parentId: 7)
+    // ============================================================
+    {
+      id: 20,
+      name: '여운이 남는',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 21,
+      name: '먹먹한',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 22,
+      name: '울컥한',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 23,
+      name: '찡한',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 24,
+      name: '그리운',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+    {
+      id: 25,
+      name: '익숙한',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 6,
+      isSelectable: true,
+    },
+    {
+      id: 26,
+      name: '이해가 되는',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 7,
+      isSelectable: true,
+    },
+    {
+      id: 27,
+      name: '의문이 남는',
+      type: 'IMPRESSION',
+      parentId: 7,
+      parentName: '감상',
+      level: 2,
+      sortOrder: 8,
+      isSelectable: true,
+    },
+
+    // ============================================================
+    // 부정 키워드 (level 2, parentId: 8)
+    // ============================================================
+    {
+      id: 28,
+      name: '지루한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 1,
+      isSelectable: true,
+    },
+    {
+      id: 29,
+      name: '씁쓸한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 2,
+      isSelectable: true,
+    },
+    {
+      id: 30,
+      name: '허무한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 3,
+      isSelectable: true,
+    },
+    {
+      id: 31,
+      name: '찝찝한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 4,
+      isSelectable: true,
+    },
+    {
+      id: 32,
+      name: '공허한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 5,
+      isSelectable: true,
+    },
+    {
+      id: 33,
+      name: '서글픈',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 6,
+      isSelectable: true,
+    },
+    {
+      id: 34,
+      name: '분노가 이는',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 7,
+      isSelectable: true,
+    },
+    {
+      id: 35,
+      name: '복잡한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 8,
+      isSelectable: true,
+    },
+    {
+      id: 36,
+      name: '허탈한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 9,
+      isSelectable: true,
+    },
+    {
+      id: 37,
+      name: '불안한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 10,
+      isSelectable: true,
+    },
+    {
+      id: 38,
+      name: '괴로운',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 11,
+      isSelectable: true,
+    },
+    {
+      id: 39,
+      name: '안타까운',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 12,
+      isSelectable: true,
+    },
+    {
+      id: 40,
+      name: '답답한',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 13,
+      isSelectable: true,
+    },
+    {
+      id: 41,
+      name: '슬픈',
+      type: 'IMPRESSION',
+      parentId: 8,
+      parentName: '부정',
+      level: 2,
+      sortOrder: 14,
+      isSelectable: true,
+    },
+  ],
+}
+
+/**
+ * 키워드 목록 조회 목데이터 반환 함수
+ *
+ * @description
+ * 실제 API 호출을 시뮬레이션하여 키워드 목데이터를 반환합니다.
+ */
+export const getMockKeywords = (): GetKeywordsResponse => {
+  return mockKeywordsResponse
+}
diff --git a/src/features/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
new file mode 100644
index 0000000..8be7ef3
--- /dev/null
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -0,0 +1,59 @@
+import {
+  BookReviewForm,
+  type BookReviewFormValues,
+} from '@/features/book/components/BookReviewForm'
+import type { PreOpinionReview } from '@/features/pre-opinion/preOpinion.types'
+import { Container } from '@/shared/ui'
+
+/**
+ * 사전 의견 작성 페이지의 책 평가 섹션
+ *
+ * @description 기존 평가가 있으면 해당 데이터를 채워서 보여주고,
+ * 없으면 빈 폼을 보여줘서 사용자가 평가를 남길 수 있게 합니다.
+ * 제출은 상위 페이지에서 일괄 처리합니다.
+ *
+ * @example
+ * ```tsx
+ * <BookReviewSection review={preOpinion.review} onChange={(values) => setReviewValues(values)} />
+ * ```
+ */
+interface BookReviewSectionProps {
+  review: PreOpinionReview | null
+  onChange?: (values: BookReviewFormValues) => void
+}
+
+const BookReviewSection = ({ review, onChange }: BookReviewSectionProps) => {
+  const hasReview = review !== null
+
+  return (
+    <Container className="gap-small">
+      <Container.Title
+        infoMessage={
+          hasReview
+            ? '내 책장의 기록을 자동으로 불러왔어요. 여기서 수정하는 내용은 내 책장에도 똑같이 반영돼요!'
+            : ''
+        }
+        className="typo-subtitle3 pl-xxtiny"
+      >
+        이 책은 어떠셨나요?
+      </Container.Title>
+      <Container.Content>
+        <BookReviewForm
+          key={
+            review
+              ? `${review.rating}-${review.keywords
+                  .map((k) => k.id)
+                  .sort()
+                  .join(',')}`
+              : 'empty'
+          }
+          initialRating={review?.rating ?? 0}
+          initialKeywordIds={review?.keywords.map((k) => k.id) ?? []}
+          onChange={onChange}
+        />
+      </Container.Content>
+    </Container>
+  )
+}
+
+export default BookReviewSection
diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
new file mode 100644
index 0000000..9975621
--- /dev/null
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react'
+
+import type { PreOpinionBook } from '@/features/pre-opinion/preOpinion.types'
+import { cn } from '@/shared/lib/utils'
+import { Button } from '@/shared/ui'
+
+import { formatUpdatedAt } from '../lib/date'
+
+interface PreOpinionWriteHeaderProps {
+  book: PreOpinionBook
+  updatedAt: string | null
+  onSave: () => void
+  onSubmit: () => void
+  isSaving?: boolean
+  isSubmitting?: boolean
+  isReviewValid?: boolean
+}
+
+/**
+ * 사전 의견 작성 페이지 헤더
+ *
+ * @description
+ * 책 제목, 저자, 마지막 저장 시각을 표시하고
+ * 스크롤 시 sticky로 고정되며 하단 그림자가 생깁니다.
+ *
+ * @example
+ * ```tsx
+ * <PreOpinionWriteHeader
+ *   book={{ bookId: 1, title: '데미안', author: '헤르만 헤세' }}
+ *   updatedAt="2026-02-06T09:12:30"
+ *   onSave={handleSave}
+ *   onSubmit={handleSubmit}
+ * />
+ * ```
+ */
+const PreOpinionWriteHeader = ({
+  book,
+  updatedAt,
+  onSave,
+  onSubmit,
+  isSaving,
+  isSubmitting,
+  isReviewValid = false,
+}: PreOpinionWriteHeaderProps) => {
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  const [isStuck, setIsStuck] = useState(false)
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsStuck(!entry.isIntersecting)
+      },
+      { threshold: 0 }
+    )
+
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <>
+      <div ref={sentinelRef} className="h-0" aria-hidden />
+      <div
+        className={cn(
+          'sticky top-[123px] z-30 bg-white w-screen ml-[calc(-50vw+50%)] transition-shadow duration-200',
+          isStuck && '[box-shadow:0_6px_6px_-4px_rgba(17,17,17,0.08)]'
+        )}
+      >
+        <div className="mx-auto max-w-layout-max px-layout-padding h-[65px] pb-tiny">
+          <div className="flex justify-between items-center">
+            <div className="flex flex-col gap-xtiny">
+              <h3 className="typo-heading3 text-black">사전 의견 작성하기</h3>
+              <p className="text-grey-600">
+                {book.title} · {book.author}
+              </p>
+            </div>
+            <div className="flex items-center">
+              {updatedAt && (
+                <p className="typo-body6 text-grey-600 mr-large">{formatUpdatedAt(updatedAt)}</p>
+              )}
+              <Button
+                className="mr-xsmall"
+                variant={'secondary'}
+                outline
+                onClick={onSave}
+                disabled={isSaving || !isReviewValid}
+              >
+                {isSaving ? '저장 중...' : '저장하기'}
+              </Button>
+              <Button onClick={onSubmit} disabled={isSubmitting || isSaving || !isReviewValid}>
+                {isSubmitting ? '공유 중...' : '공유하기'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default PreOpinionWriteHeader
diff --git a/src/features/pre-opinion/components/TopicItem.tsx b/src/features/pre-opinion/components/TopicItem.tsx
new file mode 100644
index 0000000..f3bfee5
--- /dev/null
+++ b/src/features/pre-opinion/components/TopicItem.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+import type { PreOpinionTopic } from '@/features/pre-opinion/preOpinion.types'
+import { Badge, Container, Textarea } from '@/shared/ui'
+
+interface TopicItemProps {
+  topic: PreOpinionTopic
+  onChange?: (topicId: number, content: string) => void
+}
+
+function TopicItem({ topic, onChange }: TopicItemProps) {
+  const [value, setValue] = useState(topic.content ?? '')
+  const [prevContent, setPrevContent] = useState(topic.content)
+
+  if (topic.content !== prevContent) {
+    setPrevContent(topic.content)
+    setValue(topic.content ?? '')
+  }
+
+  return (
+    <Container className="gap-small">
+      <Container.Title
+        className="typo-subtitle3 pl-xxtiny"
+        badge={<Badge>{topic.topicTypeLabel}</Badge>}
+      >
+        {`주제 ${topic.confirmOrder}. ${topic.topicTitle}`}
+      </Container.Title>
+      <Container.Content>
+        <div className="flex flex-col gap-small">
+          <p className="typo-body4 text-grey-600">{topic.topicDescription}</p>
+          <Textarea
+            placeholder="자유롭게 작성해주세요"
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value)
+              onChange?.(topic.topicId, e.target.value)
+            }}
+          />
+        </div>
+      </Container.Content>
+    </Container>
+  )
+}
+
+export default TopicItem
diff --git a/src/features/pre-opinion/hooks/index.ts b/src/features/pre-opinion/hooks/index.ts
new file mode 100644
index 0000000..46f7dec
--- /dev/null
+++ b/src/features/pre-opinion/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from './preOpinionQueryKeys'
+export * from './usePreOpinion'
+export * from './useSavePreOpinion'
+export * from './useSubmitPreOpinion'
diff --git a/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts b/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
new file mode 100644
index 0000000..5d5057f
--- /dev/null
+++ b/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
@@ -0,0 +1,13 @@
+/**
+ * @file preOpinionQueryKeys.ts
+ * @description 사전 의견 관련 Query Key Factory
+ */
+
+import type { GetPreOpinionParams } from '@/features/pre-opinion/preOpinion.types'
+
+export const preOpinionQueryKeys = {
+  all: ['preOpinions'] as const,
+
+  details: () => [...preOpinionQueryKeys.all, 'detail'] as const,
+  detail: (params: GetPreOpinionParams) => [...preOpinionQueryKeys.details(), params] as const,
+}
diff --git a/src/features/pre-opinion/hooks/usePreOpinion.ts b/src/features/pre-opinion/hooks/usePreOpinion.ts
new file mode 100644
index 0000000..85301ac
--- /dev/null
+++ b/src/features/pre-opinion/hooks/usePreOpinion.ts
@@ -0,0 +1,44 @@
+/**
+ * @file usePreOpinion.ts
+ * @description 사전 의견 조회 훅
+ */
+
+import { useQuery } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+import { getPreOpinion } from '@/features/pre-opinion/preOpinion.api'
+import type {
+  GetPreOpinionParams,
+  GetPreOpinionResponse,
+} from '@/features/pre-opinion/preOpinion.types'
+
+import { preOpinionQueryKeys } from './preOpinionQueryKeys'
+
+/**
+ * 사전 의견 조회 훅
+ *
+ * @description
+ * TanStack Query를 사용하여 사전 의견 정보를 조회합니다.
+ * 책 정보, 리뷰(평가), 주제별 사전 의견 내용을 포함합니다.
+ *
+ * @param params - 모임 ID와 약속 ID
+ *
+ * @returns TanStack Query 결과 객체
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = usePreOpinion({ gatheringId: 1, meetingId: 2 })
+ * ```
+ */
+export const usePreOpinion = (params: GetPreOpinionParams) => {
+  const { gatheringId, meetingId } = params
+  const isValidParams =
+    !Number.isNaN(gatheringId) && gatheringId > 0 && !Number.isNaN(meetingId) && meetingId > 0
+
+  return useQuery<GetPreOpinionResponse, ApiError>({
+    queryKey: preOpinionQueryKeys.detail(params),
+    queryFn: () => getPreOpinion(params),
+    enabled: isValidParams,
+    gcTime: 10 * 60 * 1000,
+  })
+}
diff --git a/src/features/pre-opinion/hooks/useSavePreOpinion.ts b/src/features/pre-opinion/hooks/useSavePreOpinion.ts
new file mode 100644
index 0000000..06da2db
--- /dev/null
+++ b/src/features/pre-opinion/hooks/useSavePreOpinion.ts
@@ -0,0 +1,41 @@
+/**
+ * @file useSavePreOpinion.ts
+ * @description 사전 의견 저장 뮤테이션 훅
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+
+import { savePreOpinion } from '../preOpinion.api'
+import type { SavePreOpinionBody, SavePreOpinionParams } from '../preOpinion.types'
+import { preOpinionQueryKeys } from './preOpinionQueryKeys'
+
+/**
+ * 사전 의견을 저장하는 뮤테이션 훅
+ *
+ * @description
+ * updatedAt이 null이면 최초 저장(POST), 값이 있으면 수정(PATCH)으로 요청합니다.
+ * 성공 시 사전 의견 조회 쿼리를 무효화합니다.
+ *
+ * @example
+ * ```tsx
+ * const { mutate: save, isPending } = useSavePreOpinion({
+ *   gatheringId,
+ *   meetingId,
+ *   isFirstSave: preOpinion.preOpinion.updatedAt === null,
+ * })
+ *
+ * save({ review: { rating: 4.5, keywordIds: [3, 7] }, answers: [{ topicId: 1, content: '...' }] })
+ * ```
+ */
+export function useSavePreOpinion(params: SavePreOpinionParams) {
+  const queryClient = useQueryClient()
+
+  return useMutation<void, ApiError, SavePreOpinionBody>({
+    mutationFn: (body) => savePreOpinion(params, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: preOpinionQueryKeys.all })
+    },
+  })
+}
diff --git a/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
new file mode 100644
index 0000000..a589b26
--- /dev/null
+++ b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
@@ -0,0 +1,43 @@
+/**
+ * @file useSubmitPreOpinion.ts
+ * @description 사전 의견 공유(제출) 뮤테이션 훅
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+import { topicQueryKeys } from '@/features/topics/hooks/topicQueryKeys'
+
+import { submitPreOpinion } from '../preOpinion.api'
+import type { GetPreOpinionParams, SubmitPreOpinionBody } from '../preOpinion.types'
+import { preOpinionQueryKeys } from './preOpinionQueryKeys'
+
+/**
+ * 사전 의견을 공유(제출)하는 뮤테이션 훅
+ *
+ * @description
+ * 작성한 사전 의견을 멤버들에게 공유합니다.
+ * 성공 시 사전 의견 조회 쿼리를 무효화합니다.
+ *
+ * @example
+ * ```tsx
+ * const { mutate: submit, isPending } = useSubmitPreOpinion({ gatheringId, meetingId })
+ *
+ * submit({ review: { rating: 4.5, keywordIds: [3, 7] }, topicIds: [1, 2, 3] })
+ * ```
+ */
+export function useSubmitPreOpinion({ gatheringId, meetingId }: GetPreOpinionParams) {
+  const queryClient = useQueryClient()
+
+  return useMutation<void, ApiError, SubmitPreOpinionBody>({
+    mutationFn: (body) => submitPreOpinion(gatheringId, meetingId, body),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: preOpinionQueryKeys.all }),
+        // confirmed 전체 무효화: 제출 후 어떤 gatheringId/meetingId 조합이 영향 받는지
+        // 특정할 수 없으므로 confirmed 범위 전체를 무효화합니다.
+        queryClient.invalidateQueries({ queryKey: topicQueryKeys.confirmed() }),
+      ])
+    },
+  })
+}
diff --git a/src/features/pre-opinion/lib/date.ts b/src/features/pre-opinion/lib/date.ts
new file mode 100644
index 0000000..d64d628
--- /dev/null
+++ b/src/features/pre-opinion/lib/date.ts
@@ -0,0 +1,11 @@
+export const formatUpdatedAt = (dateStr: string) => {
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return ''
+
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}. ${month}.${day} ${hours}:${minutes} 마지막 저장`
+}
diff --git a/src/features/pre-opinion/preOpinion.api.ts b/src/features/pre-opinion/preOpinion.api.ts
new file mode 100644
index 0000000..f141310
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.api.ts
@@ -0,0 +1,78 @@
+/**
+ * @file preOpinion.api.ts
+ * @description 사전 의견 API 요청 함수
+ */
+
+import { api } from '@/api/client'
+import { PRE_OPINION_ENDPOINTS } from '@/features/pre-opinion/preOpinion.endpoints'
+import { getMockPreOpinionDetail } from '@/features/pre-opinion/preOpinion.mock'
+import type {
+  GetPreOpinionParams,
+  GetPreOpinionResponse,
+  SavePreOpinionBody,
+  SavePreOpinionParams,
+  SubmitPreOpinionBody,
+} from '@/features/pre-opinion/preOpinion.types'
+
+/** 목데이터 사용 여부 플래그 */
+const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
+
+/**
+ * 사전 의견 조회
+ *
+ * @description
+ * 약속에 대한 사전 의견 정보를 조회합니다.
+ * 책 정보, 리뷰(평가), 주제별 사전 의견 내용을 포함합니다.
+ *
+ * @param params - 모임 ID와 약속 ID
+ *
+ * @returns 사전 의견 응답 데이터
+ */
+export const getPreOpinion = async ({
+  gatheringId,
+  meetingId,
+}: GetPreOpinionParams): Promise<GetPreOpinionResponse> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return getMockPreOpinionDetail()
+  }
+
+  return api.get<GetPreOpinionResponse>(PRE_OPINION_ENDPOINTS.DETAIL(gatheringId, meetingId))
+}
+
+/**
+ * 사전 의견 저장
+ *
+ * @description
+ * updatedAt이 null이면 최초 저장(POST), 값이 있으면 수정(PATCH)으로 요청합니다.
+ *
+ * @param params - 모임 ID, 약속 ID, 최초 저장 여부
+ * @param body - 리뷰 평가 및 주제별 답변
+ */
+export const savePreOpinion = async (
+  { gatheringId, meetingId, isFirstSave }: SavePreOpinionParams,
+  body: SavePreOpinionBody
+): Promise<void> => {
+  if (isFirstSave) {
+    return api.post(PRE_OPINION_ENDPOINTS.CREATE(gatheringId, meetingId), body)
+  }
+  return api.patch(PRE_OPINION_ENDPOINTS.UPDATE(gatheringId, meetingId), body)
+}
+
+/**
+ * 사전 의견 공유(제출)
+ *
+ * @description
+ * 작성한 사전 의견을 멤버들에게 공유합니다.
+ *
+ * @param gatheringId - 모임 ID
+ * @param meetingId - 약속 ID
+ * @param body - 리뷰 평가 및 제출할 주제 ID 목록
+ */
+export const submitPreOpinion = async (
+  gatheringId: number,
+  meetingId: number,
+  body: SubmitPreOpinionBody
+): Promise<void> => {
+  return api.patch(PRE_OPINION_ENDPOINTS.SUBMIT(gatheringId, meetingId), body)
+}
diff --git a/src/features/pre-opinion/preOpinion.endpoints.ts b/src/features/pre-opinion/preOpinion.endpoints.ts
new file mode 100644
index 0000000..7f6b5af
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.endpoints.ts
@@ -0,0 +1,16 @@
+import { API_PATHS } from '@/api'
+
+export const PRE_OPINION_ENDPOINTS = {
+  // 사전 의견 조회 (GET /api/gatherings/{gatheringId}/meetings/{meetingId}/answers/me)
+  DETAIL: (gatheringId: number, meetingId: number) =>
+    `${API_PATHS.GATHERINGS}/${gatheringId}/meetings/${meetingId}/answers/me`,
+  // 사전 의견 최초 저장 (POST /api/gatherings/{gatheringId}/meetings/{meetingId}/answers)
+  CREATE: (gatheringId: number, meetingId: number) =>
+    `${API_PATHS.GATHERINGS}/${gatheringId}/meetings/${meetingId}/answers`,
+  // 사전 의견 수정 (PATCH /api/gatherings/{gatheringId}/meetings/{meetingId}/answers/me)
+  UPDATE: (gatheringId: number, meetingId: number) =>
+    `${API_PATHS.GATHERINGS}/${gatheringId}/meetings/${meetingId}/answers/me`,
+  // 사전 의견 공유(제출) (PATCH /api/gatherings/{gatheringId}/meetings/{meetingId}/answers/submit)
+  SUBMIT: (gatheringId: number, meetingId: number) =>
+    `${API_PATHS.GATHERINGS}/${gatheringId}/meetings/${meetingId}/answers/submit`,
+} as const
diff --git a/src/features/pre-opinion/preOpinion.mock.ts b/src/features/pre-opinion/preOpinion.mock.ts
new file mode 100644
index 0000000..7be34e6
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.mock.ts
@@ -0,0 +1,60 @@
+/**
+ * @file preOpinion.mock.ts
+ * @description 사전 의견 API 목데이터
+ */
+
+import type { GetPreOpinionResponse } from '@/features/pre-opinion/preOpinion.types'
+
+/**
+ * 사전 의견 조회 목데이터
+ */
+const mockPreOpinionDetail: GetPreOpinionResponse = {
+  book: {
+    bookId: 10,
+    title: '아주 작은 습관의 힘',
+    author: '제임스 클리어',
+  },
+  review: {
+    reviewId: 1,
+    bookId: 10,
+    userId: 1,
+    rating: 4.5,
+    keywords: [
+      { id: 47, name: '성장', type: 'BOOK' },
+      { id: 10, name: '감동적인', type: 'IMPRESSION' },
+    ],
+  },
+  preOpinion: {
+    updatedAt: '2026-02-06T09:12:30',
+    topics: [
+      {
+        topicId: 1,
+        topicTitle: '책의 주요 메시지',
+        topicDescription: '이 책에서 전달하고자 하는 핵심 메시지는 무엇인가요?',
+        topicType: 'DISCUSSION',
+        topicTypeLabel: '토론형',
+        confirmOrder: 1,
+        content: '이 책은 작은 행동의 반복이 인생을 바꾼다고 생각합니다.',
+      },
+      {
+        topicId: 2,
+        topicTitle: '인상 깊은 구절',
+        topicDescription: '가장 인상 깊었던 문장을 공유해주세요.',
+        topicType: 'EMOTION',
+        topicTypeLabel: '감정 공유형',
+        confirmOrder: 2,
+        content: null,
+      },
+    ],
+  },
+}
+
+/**
+ * 사전 의견 조회 목데이터 반환 함수
+ *
+ * @description
+ * 실제 API 호출을 시뮬레이션하여 사전 의견 목데이터를 반환합니다.
+ */
+export const getMockPreOpinionDetail = (): GetPreOpinionResponse => {
+  return mockPreOpinionDetail
+}
diff --git a/src/features/pre-opinion/preOpinion.types.ts b/src/features/pre-opinion/preOpinion.types.ts
new file mode 100644
index 0000000..598737c
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.types.ts
@@ -0,0 +1,129 @@
+/**
+ * @file preOpinion.types.ts
+ * @description 사전 의견 API 관련 타입 정의
+ */
+
+import type { ReviewKeyword } from '@/features/book/book.types'
+
+import type { TopicType } from '../topics'
+
+/**
+ * 사전 의견 주제 항목
+ */
+export type PreOpinionTopic = {
+  /** 주제 ID */
+  topicId: number
+  /** 주제 이름 */
+  topicTitle: string
+  /** 주제 설명 */
+  topicDescription: string
+  /** 주제 유형 */
+  topicType: TopicType
+  /** 주제 유형 라벨 */
+  topicTypeLabel: string
+  /** 확정 순서 */
+  confirmOrder: number
+  /** 작성한 내용 (미작성 시 null) */
+  content: string | null
+}
+
+/**
+ * 사전 의견 응답 내 책 정보
+ */
+export type PreOpinionBook = {
+  /** 책 ID */
+  bookId: number
+  /** 책 제목 */
+  title: string
+  /** 저자 */
+  author: string
+}
+
+/**
+ * 사전 의견 데이터
+ */
+export type PreOpinionData = {
+  /** 마지막 수정 일시 */
+  updatedAt: string | null
+  /** 주제 목록 */
+  topics: PreOpinionTopic[]
+}
+
+/**
+ * 사전 의견 응답 내 리뷰(평가) 정보
+ */
+export type PreOpinionReview = {
+  /** 리뷰 ID */
+  reviewId: number
+  /** 책 ID */
+  bookId: number
+  /** 사용자 ID */
+  userId: number
+  /** 평점 */
+  rating: number
+  /** 키워드 목록 */
+  keywords: ReviewKeyword[]
+}
+
+/**
+ * 사전 의견 조회 요청 파라미터
+ */
+export type GetPreOpinionParams = {
+  /** 모임 ID */
+  gatheringId: number
+  /** 약속 ID */
+  meetingId: number
+}
+
+/**
+ * 사전 의견 조회 응답 타입
+ */
+export type GetPreOpinionResponse = {
+  /** 책 정보 */
+  book: PreOpinionBook
+  /** 리뷰(평가) 정보 (평가 전적이 없으면 null) */
+  review: PreOpinionReview | null
+  /** 사전 의견 데이터 */
+  preOpinion: PreOpinionData
+}
+
+/**
+ * 사전 의견 저장 요청 바디
+ */
+export type SavePreOpinionBody = {
+  /** 리뷰(평가) 정보 */
+  review: {
+    rating: number
+    keywordIds: number[]
+  }
+  /** 주제별 답변 목록 */
+  answers: {
+    topicId: number
+    content: string | null
+  }[]
+}
+
+/**
+ * 사전 의견 저장 요청 파라미터
+ */
+export type SavePreOpinionParams = {
+  /** 모임 ID */
+  gatheringId: number
+  /** 약속 ID */
+  meetingId: number
+  /** 최초 저장 여부 (updatedAt이 null이면 true) */
+  isFirstSave: boolean
+}
+
+/**
+ * 사전 의견 공유(제출) 요청 바디
+ */
+export type SubmitPreOpinionBody = {
+  /** 리뷰(평가) 정보 */
+  review: {
+    rating: number
+    keywordIds: number[]
+  }
+  /** 제출할 주제 ID 목록 */
+  topicIds: number[]
+}
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
new file mode 100644
index 0000000..d59d000
--- /dev/null
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import type { BookReviewFormValues } from '@/features/book/components/BookReviewForm'
+import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
+import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionWriteHeader'
+import TopicItem from '@/features/pre-opinion/components/TopicItem'
+import { usePreOpinion, useSavePreOpinion, useSubmitPreOpinion } from '@/features/pre-opinion/hooks'
+import SubPageHeader from '@/shared/components/SubPageHeader'
+import { Card, Spinner } from '@/shared/ui'
+import { useGlobalModalStore } from '@/store'
+
+export default function PreOpinionWritePage() {
+  const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
+  const numGatheringId = Number(gatheringId)
+  const numMeetingId = Number(meetingId)
+
+  const { openError } = useGlobalModalStore()
+
+  const navigate = useNavigate()
+
+  const {
+    data: preOpinion,
+    isLoading,
+    isError,
+    error,
+  } = usePreOpinion({
+    gatheringId: numGatheringId,
+    meetingId: numMeetingId,
+  })
+
+  const reviewRef = useRef<BookReviewFormValues>({ rating: 0, keywordIds: [], isValid: false })
+  const [formReviewValid, setFormReviewValid] = useState<boolean | null>(null)
+  const isReviewValid = formReviewValid ?? !!preOpinion?.review
+  const answersRef = useRef<Map<number, string>>(new Map())
+
+  useEffect(() => {
+    if (!preOpinion?.review) return
+    reviewRef.current = {
+      rating: preOpinion.review.rating,
+      keywordIds: preOpinion.review.keywords.map((k) => k.id),
+      isValid: true,
+    }
+  }, [preOpinion?.review])
+
+  useEffect(() => {
+    if (isError) {
+      openError('에러', error.userMessage, () => {
+        navigate(-1)
+      })
+    }
+  }, [isError, error, openError, navigate])
+
+  const isFirstSave = preOpinion ? preOpinion.preOpinion.updatedAt === null : true
+
+  const {
+    mutate: save,
+    mutateAsync: saveAsync,
+    isPending: isSaving,
+  } = useSavePreOpinion({
+    gatheringId: numGatheringId,
+    meetingId: numMeetingId,
+    isFirstSave,
+  })
+
+  const { mutateAsync: submitAsync, isPending: isSubmitting } = useSubmitPreOpinion({
+    gatheringId: numGatheringId,
+    meetingId: numMeetingId,
+  })
+
+  const handleReviewChange = useCallback((values: BookReviewFormValues) => {
+    reviewRef.current = values
+    setFormReviewValid(values.isValid)
+  }, [])
+
+  const handleTopicChange = useCallback((topicId: number, content: string) => {
+    answersRef.current.set(topicId, content)
+  }, [])
+
+  const buildSaveBody = useCallback(() => {
+    if (!preOpinion) return null
+
+    const answers = preOpinion.preOpinion.topics.map((topic) => {
+      const raw = answersRef.current.has(topic.topicId)
+        ? answersRef.current.get(topic.topicId)!
+        : (topic.content ?? '')
+      const trimmed = raw.trim()
+      return {
+        topicId: topic.topicId,
+        content: trimmed || null,
+      }
+    })
+
+    return {
+      review: {
+        rating: reviewRef.current.rating,
+        keywordIds: reviewRef.current.keywordIds,
+      },
+      answers,
+    }
+  }, [preOpinion])
+
+  const buildSubmitBody = useCallback(() => {
+    if (!preOpinion) return null
+
+    return {
+      review: {
+        rating: reviewRef.current.rating,
+        keywordIds: reviewRef.current.keywordIds,
+      },
+      topicIds: preOpinion.preOpinion.topics.map((t) => t.topicId),
+    }
+  }, [preOpinion])
+
+  const handleSave = useCallback(() => {
+    const body = buildSaveBody()
+    if (!body) return
+    save(body, {
+      onError: () => {
+        openError('오류', '사전 의견 저장 중 오류가 발생했습니다.')
+      },
+    })
+  }, [buildSaveBody, save, openError])
+
+  const handleSubmit = useCallback(async () => {
+    const saveBody = buildSaveBody()
+    if (!saveBody) return
+    const submitBody = buildSubmitBody()
+    if (!submitBody) return
+
+    try {
+      await saveAsync(saveBody)
+    } catch {
+      openError('오류', '사전 의견 저장 중 오류가 발생했습니다.')
+      return
+    }
+
+    try {
+      await submitAsync(submitBody)
+    } catch {
+      openError('오류', '사전 의견 제출 중 오류가 발생했습니다.')
+    }
+  }, [buildSaveBody, buildSubmitBody, saveAsync, submitAsync, openError])
+
+  if (isLoading || !preOpinion) {
+    return (
+      <>
+        <SubPageHeader />
+        <div className="flex items-center justify-center py-xlarge">
+          <Spinner />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <SubPageHeader />
+      <PreOpinionWriteHeader
+        book={preOpinion.book}
+        updatedAt={preOpinion.preOpinion.updatedAt}
+        onSave={handleSave}
+        onSubmit={handleSubmit}
+        isSaving={isSaving}
+        isSubmitting={isSubmitting}
+        isReviewValid={isReviewValid}
+      />
+
+      <div className="w-screen relative left-1/2 -translate-x-1/2 bg-grey-100">
+        <section className="max-w-[1200px] mx-auto py-large flex flex-col gap-base">
+          <Card className="border-primary-200 bg-primary-100 text-primary-400 px-small py-[10px] rounded-small">
+            <p className="typo-caption1">
+              작성하신 사전 의견은 약속 당일이 되면 멤버들에게 자동으로 공개돼요.
+            </p>
+          </Card>
+          <BookReviewSection review={preOpinion.review} onChange={handleReviewChange} />
+          {preOpinion.preOpinion.topics.map((topic) => (
+            <TopicItem key={topic.topicId} topic={topic} onChange={handleTopicChange} />
+          ))}
+        </section>
+      </div>
+    </>
+  )
+}
diff --git a/src/pages/PreOpinions/index.ts b/src/pages/PreOpinions/index.ts
index 53bc8ef..ccdd865 100644
--- a/src/pages/PreOpinions/index.ts
+++ b/src/pages/PreOpinions/index.ts
@@ -1 +1,2 @@
 export { default as PreOpinionListPage } from './PreOpinionListPage'
+export { default as PreOpinionWritePage } from './PreOpinionWritePage'
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 72a6d9d..0f0b471 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -20,6 +20,7 @@ import {
   MeetingSettingPage,
   OnboardingPage,
   PreOpinionListPage,
+  PreOpinionWritePage,
   RecordListPage,
   TopicCreatePage,
 } from '@/pages'
@@ -131,6 +132,10 @@ export const router = createBrowserRouter([
                 path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId`,
                 element: <MeetingDetailPage />,
               },
+              {
+                path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/pre-opinions/new`,
+                element: <PreOpinionWritePage />,
+              },
               {
                 path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/topic-create`,
                 element: <TopicCreatePage />,
diff --git a/src/shared/assets/icon/FilledInfo.tsx b/src/shared/assets/icon/FilledInfo.tsx
new file mode 100644
index 0000000..9162eef
--- /dev/null
+++ b/src/shared/assets/icon/FilledInfo.tsx
@@ -0,0 +1,27 @@
+import { cn } from '@/shared/lib/utils'
+
+type Props = {
+  size?: number
+  className?: string
+}
+
+export function FilledInfoIcon({ size = 24, className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('lucide lucide-info-icon lucide-info', className)}
+    >
+      <circle cx="12" cy="12" r="10" fill="currentColor" />
+      <path d="M12 16v-4" stroke="white" strokeWidth="2" />
+      <path d="M12 8h.01" stroke="white" strokeWidth="2" />
+    </svg>
+  )
+}
diff --git a/src/shared/components/SubPageHeader.tsx b/src/shared/components/SubPageHeader.tsx
index 3f292b2..68b6e78 100644
--- a/src/shared/components/SubPageHeader.tsx
+++ b/src/shared/components/SubPageHeader.tsx
@@ -43,7 +43,7 @@ export default function SubPageHeader({ label = '뒤로가기', to, className }:
       aria-label={`${label} 페이지로 이동`}
       className={cn('sticky top-gnb-height z-40 bg-white w-screen ml-[calc(-50vw+50%)]', className)}
     >
-      <div className="mx-auto max-w-layout-max px-layout-padding py-small">
+      <div className="mx-auto max-w-layout-max px-layout-padding py-small h-[59px]">
         <TextButton size="medium" icon={ChevronLeft} onClick={handleClick}>
           {label}
         </TextButton>
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index aad78dd..c9335d0 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -24,6 +24,10 @@ export const ROUTES = {
   INVITE_BASE: '/invite',
   INVITE: (invitationCode: string) => `/invite/${invitationCode}`,
 
+  // Pre-opinions
+  PRE_OPINION_WRITE: (gatheringId: number | string, meetingId: number | string) =>
+    `/gatherings/${gatheringId}/meetings/${meetingId}/pre-opinions/new`,
+
   // Meetings
   MEETING_DETAIL: (gatheringId: number | string, meetingId: number | string) =>
     `/gatherings/${gatheringId}/meetings/${meetingId}`,
diff --git a/src/shared/ui/Container.tsx b/src/shared/ui/Container.tsx
index 056a941..71c4929 100644
--- a/src/shared/ui/Container.tsx
+++ b/src/shared/ui/Container.tsx
@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import { cn } from '@/shared/lib/utils'
 
+import { FilledInfoIcon } from '../assets/icon/FilledInfo'
+
 type ContainerProps = {
   className?: string
   children?: React.ReactNode
@@ -13,6 +15,8 @@ type TitleProps = {
   children: string
   required?: boolean
   errorMessage?: string
+  infoMessage?: string
+  badge?: React.ReactNode
 }
 
 type ContentProps = {
@@ -37,27 +41,36 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps>(function Cont
   )
 })
 
-function Title({ className, children, required, errorMessage }: TitleProps) {
+function Title({ className, children, required, errorMessage, infoMessage, badge }: TitleProps) {
   return (
-    <div className="flex justify-between">
-      <div className="flex items-center gap-xsmall">
-        <h3 className={cn('typo-heading3', className)}>
-          {children}
-          {required && (
-            <span
-              className="leading-none align-top ml-xtiny text-primary-300 text-caption2"
-              aria-hidden="true"
-            >
-              *
-            </span>
-          )}
-        </h3>
-      </div>
-      {errorMessage && (
-        <span className="flex items-center typo-body3 text-accent-300 gap-tiny">
-          <Info size="16" /> {errorMessage}
-        </span>
+    <div className="flex flex-col gap-medium">
+      {infoMessage && (
+        <div className="flex gap-tiny text-purple-200">
+          <FilledInfoIcon size={18} />
+          {infoMessage}
+        </div>
       )}
+      <div className="flex justify-between">
+        <div className="flex items-center gap-xsmall">
+          <h3 className={cn('typo-heading3', className)}>
+            {children}
+            {required && (
+              <span
+                className="leading-none align-top ml-xtiny text-primary-300 text-caption2"
+                aria-hidden="true"
+              >
+                *
+              </span>
+            )}
+          </h3>
+          {badge}
+        </div>
+        {errorMessage && (
+          <span className="flex items-center typo-body3 text-accent-300 gap-tiny">
+            <Info size="16" /> {errorMessage}
+          </span>
+        )}
+      </div>
     </div>
   )
 }