From a4b23f6469cb2cb355cd65ac073abf79fb6eadcd Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Sat, 7 Feb 2026 21:22:32 +0900
Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=EC=B1=85=20=ED=8F=89=EA=B0=80=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EA=B5=AC=ED=98=84=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../book/components/BookReviewForm.tsx        | 296 ++++++++++++++++++
 .../book/components/BookReviewModal.tsx       | 283 +----------------
 .../components/BookReviewSection.tsx          |  58 ++++
 .../components/PreOpinionQuestionSection.tsx  |   7 +
 .../components/PreOpinionWriteHeader.tsx      |  56 ++++
 src/pages/PreOpinions/PreOpinionWritePage.tsx |  43 +++
 src/routes/index.tsx                          |   5 +
 src/shared/assets/icon/FilledInfo.tsx         |  27 ++
 src/shared/ui/Container.tsx                   |  49 +--
 9 files changed, 537 insertions(+), 287 deletions(-)
 create mode 100644 src/features/book/components/BookReviewForm.tsx
 create mode 100644 src/features/pre-opinion/components/BookReviewSection.tsx
 create mode 100644 src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
 create mode 100644 src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
 create mode 100644 src/pages/PreOpinions/PreOpinionWritePage.tsx
 create mode 100644 src/shared/assets/icon/FilledInfo.tsx

diff --git a/src/features/book/components/BookReviewForm.tsx b/src/features/book/components/BookReviewForm.tsx
new file mode 100644
index 0000000..cdfb9b7
--- /dev/null
+++ b/src/features/book/components/BookReviewForm.tsx
@@ -0,0 +1,296 @@
+import { X } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { useKeywords } from '@/features/keywords'
+import { StarRate } from '@/shared/components/StarRate'
+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: newRating > 0 && 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: rating > 0 && 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="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>
+    </>
+  )
+}
diff --git a/src/features/book/components/BookReviewModal.tsx b/src/features/book/components/BookReviewModal.tsx
index 4a9f182..b796ebf 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'
 
 /**
  * 책 평가하기 모달
@@ -39,117 +35,25 @@ export interface BookReviewModalProps {
 }
 
 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 {
-    data: keywordsData,
-    isLoading: isLoadingKeywords,
-    isError: isKeywordsError,
-  } = useKeywords()
+  const [formValues, setFormValues] = useState<BookReviewFormValues>({
+    rating: 0,
+    keywordIds: [],
+    isValid: false,
+  })
   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
-    }
-
-    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]
-    )
-  }
-
   const handleSubmit = () => {
-    if (rating === 0) {
+    if (formValues.rating === 0) {
       openError('별점 필요', '별점을 선택해주세요.')
       return
     }
 
     submitReview(
-      { rating, keywordIds: selectedKeywordIds },
+      { rating: formValues.rating, keywordIds: formValues.keywordIds },
       {
         onSuccess: () => {
           onOpenChange(false)
-          // 상태 초기화
-          setRating(0)
-          setSelectedKeywordIds([])
-          setSelectedBookCategoryId(null)
-          setSelectedImpressionCategoryId(null)
         },
         onError: (error) => {
           openError('평가 저장 실패', error.message)
@@ -158,42 +62,6 @@ 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}>
       <ModalContent variant="wide">
@@ -201,135 +69,14 @@ export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalP
           <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 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/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
new file mode 100644
index 0000000..a27f103
--- /dev/null
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -0,0 +1,58 @@
+import {
+  BookReviewForm,
+  type BookReviewFormValues,
+} from '@/features/book/components/BookReviewForm'
+import { useBookReview } from '@/features/book/hooks'
+import { Container } from '@/shared/ui'
+
+/**
+ * 사전 의견 작성 페이지의 책 평가 섹션
+ *
+ * @description 기존 평가가 있으면 해당 데이터를 채워서 보여주고,
+ * 없으면 빈 폼을 보여줘서 사용자가 평가를 남길 수 있게 합니다.
+ * 제출은 상위 페이지에서 일괄 처리합니다.
+ *
+ * @example
+ * ```tsx
+ * <BookReviewSection bookId={1} onChange={(values) => setReviewValues(values)} />
+ * ```
+ */
+interface BookReviewSectionProps {
+  bookId: number
+  onChange?: (values: BookReviewFormValues) => void
+}
+
+const BookReviewSection = ({ bookId, onChange }: BookReviewSectionProps) => {
+  const { data: review, isLoading } = useBookReview(bookId)
+
+  if (isLoading) {
+    return (
+      <section className="bg-white rounded-lg p-large">
+        <h3 className="typo-subtitle1 mb-medium">책 평가</h3>
+        <div className="flex items-center justify-center py-xlarge">
+          <p className="typo-body2 text-grey-600">로딩 중...</p>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <Container>
+      <Container.Title
+        infoMessage="내 책장의 기록을 자동으로 불러왔어요. 여기서 수정하는 내용은 내 책장에도 똑같이 반영돼요!"
+        className="typo-subtitle3"
+      >
+        이 책은 어떠셨나요?
+      </Container.Title>
+      <Container.Content>
+        <BookReviewForm
+          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/PreOpinionQuestionSection.tsx b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
new file mode 100644
index 0000000..69e79df
--- /dev/null
+++ b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const PreOpinionQuestionSection = () => {
+  return <div>PreOpinionQuestionSection</div>
+}
+
+export default PreOpinionQuestionSection
diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
new file mode 100644
index 0000000..1ecdcdb
--- /dev/null
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { cn } from '@/shared/lib/utils'
+import { Button } from '@/shared/ui'
+
+const PreOpinionWriteHeader = () => {
+  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-[108px] 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">
+                {'데미안'} · {'헤르만 헤세'}
+              </p>
+            </div>
+            <div className="flex items-center">
+              <p className="typo-body6 text-grey-600">{'2025. 12.31 18:36 마지막 저장'}</p>
+              <Button className="ml-large mr-xsmall" variant={'secondary'} outline>
+                저장하기
+              </Button>
+              <Button>공유하기</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default PreOpinionWriteHeader
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
new file mode 100644
index 0000000..77698f6
--- /dev/null
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -0,0 +1,43 @@
+import { useParams } from 'react-router-dom'
+
+import { useMeetingDetail } from '@/features/meetings'
+import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
+import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
+import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionWriteHeader'
+import SubPageHeader from '@/shared/components/SubPageHeader'
+import { Card } from '@/shared/ui'
+
+export default function PreOpinionWritePage() {
+  const { meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
+  const { data: meeting, isLoading } = useMeetingDetail(Number(meetingId))
+
+  if (isLoading || !meeting) {
+    return (
+      <>
+        <SubPageHeader />
+        <div className="flex items-center justify-center py-xlarge">
+          <p className="typo-body2 text-grey-600">로딩 중...</p>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <SubPageHeader />
+      <PreOpinionWriteHeader />
+
+      <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 bookId={meeting.book.bookId} />
+          <PreOpinionQuestionSection />
+        </section>
+      </div>
+    </>
+  )
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 8d08899..b8d98a4 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -17,6 +17,7 @@ import {
   OnboardingPage,
   RecordListPage,
 } from '@/pages'
+import PreOpinionWritePage from '@/pages/PreOpinions/PreOpinionWritePage'
 import { ROUTES } from '@/shared/constants'
 import { AuthLayout, MainLayout, RootLayout } from '@/shared/layout'
 
@@ -100,6 +101,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/setting`,
                 element: <MeetingSettingPage />,
diff --git a/src/shared/assets/icon/FilledInfo.tsx b/src/shared/assets/icon/FilledInfo.tsx
new file mode 100644
index 0000000..937f821
--- /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"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="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/ui/Container.tsx b/src/shared/ui/Container.tsx
index 056a941..f7bf987 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,7 @@ type TitleProps = {
   children: string
   required?: boolean
   errorMessage?: string
+  infoMessage?: string
 }
 
 type ContentProps = {
@@ -37,27 +40,35 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps>(function Cont
   )
 })
 
-function Title({ className, children, required, errorMessage }: TitleProps) {
+function Title({ className, children, required, errorMessage, infoMessage }: 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>
+        </div>
+        {errorMessage && (
+          <span className="flex items-center typo-body3 text-accent-300 gap-tiny">
+            <Info size="16" /> {errorMessage}
+          </span>
+        )}
+      </div>
     </div>
   )
 }

From 5b47ee258eb41f2f71fa98a2898df6b6d115ada4 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Sat, 7 Feb 2026 23:19:24 +0900
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=EC=82=AC=EC=A0=84=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=EC=A3=BC=EC=A0=9C=20=EB=82=B4=EC=97=AD=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=EA=B5=AC=ED=98=84=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BookReviewSection.tsx          |  4 +-
 .../components/PreOpinionQuestionSection.tsx  | 45 +++++++++++-
 .../components/PreOpinionWriteHeader.tsx      | 33 +++++++--
 src/features/pre-opinion/hooks/index.ts       |  2 +
 .../pre-opinion/hooks/preOpinionQueryKeys.ts  | 11 +++
 .../pre-opinion/hooks/usePreOpinion.ts        | 38 ++++++++++
 src/features/pre-opinion/lib/date.tsx         |  9 +++
 src/features/pre-opinion/preOpinion.api.ts    | 32 +++++++++
 .../pre-opinion/preOpinion.endpoints.ts       |  7 ++
 src/features/pre-opinion/preOpinion.mock.ts   | 50 +++++++++++++
 src/features/pre-opinion/preOpinion.types.ts  | 71 +++++++++++++++++++
 src/pages/PreOpinions/PreOpinionWritePage.tsx | 13 ++--
 src/shared/ui/Container.tsx                   |  4 +-
 13 files changed, 305 insertions(+), 14 deletions(-)
 create mode 100644 src/features/pre-opinion/hooks/index.ts
 create mode 100644 src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
 create mode 100644 src/features/pre-opinion/hooks/usePreOpinion.ts
 create mode 100644 src/features/pre-opinion/lib/date.tsx
 create mode 100644 src/features/pre-opinion/preOpinion.api.ts
 create mode 100644 src/features/pre-opinion/preOpinion.endpoints.ts
 create mode 100644 src/features/pre-opinion/preOpinion.mock.ts
 create mode 100644 src/features/pre-opinion/preOpinion.types.ts

diff --git a/src/features/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
index a27f103..58724db 100644
--- a/src/features/pre-opinion/components/BookReviewSection.tsx
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -37,10 +37,10 @@ const BookReviewSection = ({ bookId, onChange }: BookReviewSectionProps) => {
   }
 
   return (
-    <Container>
+    <Container className="gap-small">
       <Container.Title
         infoMessage="내 책장의 기록을 자동으로 불러왔어요. 여기서 수정하는 내용은 내 책장에도 똑같이 반영돼요!"
-        className="typo-subtitle3"
+        className="typo-subtitle3 pl-xxtiny"
       >
         이 책은 어떠셨나요?
       </Container.Title>
diff --git a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
index 69e79df..ae00d9a 100644
--- a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
+++ b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
@@ -1,7 +1,46 @@
-import React from 'react'
+import type { PreOpinionTopic } from '@/features/pre-opinion/preOpinion.types'
+import { Badge, Container, Textarea } from '@/shared/ui'
 
-const PreOpinionQuestionSection = () => {
-  return <div>PreOpinionQuestionSection</div>
+interface PreOpinionQuestionSectionProps {
+  topics: PreOpinionTopic[]
+}
+
+/**
+ * 사전 의견 주제별 질문 섹션
+ *
+ * @description
+ * 확정된 주제 목록을 confirmOrder 순서대로 렌더링합니다.
+ * 각 주제는 Container 컴포넌트로 감싸며,
+ * 주제 설명과 텍스트 입력 영역을 포함합니다.
+ *
+ * @example
+ * ```tsx
+ * <PreOpinionQuestionSection topics={preOpinion.topics} />
+ * ```
+ */
+const PreOpinionQuestionSection = ({ topics }: PreOpinionQuestionSectionProps) => {
+  const sortedTopics = [...topics].sort((a, b) => a.confirmOrder - b.confirmOrder)
+
+  return (
+    <>
+      {sortedTopics.map((topic) => (
+        <Container key={topic.topicId} 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="자유롭게 작성해주세요" defaultValue={topic.content ?? ''} />
+            </div>
+          </Container.Content>
+        </Container>
+      ))}
+    </>
+  )
 }
 
 export default PreOpinionQuestionSection
diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
index 1ecdcdb..2c7bd12 100644
--- a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -1,9 +1,32 @@
 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'
 
-const PreOpinionWriteHeader = () => {
+import { formatUpdatedAt } from '../lib/date'
+
+interface PreOpinionWriteHeaderProps {
+  book: PreOpinionBook
+  updatedAt: string | null
+}
+
+/**
+ * 사전 의견 작성 페이지 헤더
+ *
+ * @description
+ * 책 제목, 저자, 마지막 저장 시각을 표시하고
+ * 스크롤 시 sticky로 고정되며 하단 그림자가 생깁니다.
+ *
+ * @example
+ * ```tsx
+ * <PreOpinionWriteHeader
+ *   book={{ bookId: 1, title: '데미안', author: '헤르만 헤세' }}
+ *   updatedAt="2026-02-06T09:12:30"
+ * />
+ * ```
+ */
+const PreOpinionWriteHeader = ({ book, updatedAt }: PreOpinionWriteHeaderProps) => {
   const sentinelRef = useRef<HTMLDivElement>(null)
   const [isStuck, setIsStuck] = useState(false)
 
@@ -36,12 +59,14 @@ const PreOpinionWriteHeader = () => {
             <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">
-              <p className="typo-body6 text-grey-600">{'2025. 12.31 18:36 마지막 저장'}</p>
-              <Button className="ml-large mr-xsmall" variant={'secondary'} outline>
+              {updatedAt && (
+                <p className="typo-body6 text-grey-600 mr-large">{formatUpdatedAt(updatedAt)}</p>
+              )}
+              <Button className="mr-xsmall" variant={'secondary'} outline>
                 저장하기
               </Button>
               <Button>공유하기</Button>
diff --git a/src/features/pre-opinion/hooks/index.ts b/src/features/pre-opinion/hooks/index.ts
new file mode 100644
index 0000000..2670074
--- /dev/null
+++ b/src/features/pre-opinion/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './preOpinionQueryKeys'
+export * from './usePreOpinion'
diff --git a/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts b/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
new file mode 100644
index 0000000..833b8f2
--- /dev/null
+++ b/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
@@ -0,0 +1,11 @@
+/**
+ * @file preOpinionQueryKeys.ts
+ * @description 사전 의견 관련 Query Key Factory
+ */
+
+export const preOpinionQueryKeys = {
+  all: ['preOpinions'] as const,
+
+  details: () => [...preOpinionQueryKeys.all, 'detail'] as const,
+  detail: (meetingId: number) => [...preOpinionQueryKeys.details(), meetingId] 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..d6bcf09
--- /dev/null
+++ b/src/features/pre-opinion/hooks/usePreOpinion.ts
@@ -0,0 +1,38 @@
+/**
+ * @file usePreOpinion.ts
+ * @description 사전 의견 조회 훅
+ */
+
+import { useQuery } from '@tanstack/react-query'
+
+import { getPreOpinion } from '@/features/pre-opinion/preOpinion.api'
+import type { GetPreOpinionResponse } from '@/features/pre-opinion/preOpinion.types'
+
+import { preOpinionQueryKeys } from './preOpinionQueryKeys'
+
+/**
+ * 사전 의견 조회 훅
+ *
+ * @description
+ * TanStack Query를 사용하여 사전 의견 정보를 조회합니다.
+ * 책 정보와 주제별 사전 의견 내용을 포함합니다.
+ *
+ * @param meetingId - 약속 ID
+ *
+ * @returns TanStack Query 결과 객체
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = usePreOpinion(1)
+ * ```
+ */
+export const usePreOpinion = (meetingId: number) => {
+  const isValidMeetingId = !Number.isNaN(meetingId) && meetingId > 0
+
+  return useQuery<GetPreOpinionResponse>({
+    queryKey: preOpinionQueryKeys.detail(meetingId),
+    queryFn: () => getPreOpinion(meetingId),
+    enabled: isValidMeetingId,
+    gcTime: 10 * 60 * 1000,
+  })
+}
diff --git a/src/features/pre-opinion/lib/date.tsx b/src/features/pre-opinion/lib/date.tsx
new file mode 100644
index 0000000..5daabbe
--- /dev/null
+++ b/src/features/pre-opinion/lib/date.tsx
@@ -0,0 +1,9 @@
+export const formatUpdatedAt = (dateStr: string) => {
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hours = date.getHours()
+  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..845e308
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.api.ts
@@ -0,0 +1,32 @@
+/**
+ * @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 { GetPreOpinionResponse } from '@/features/pre-opinion/preOpinion.types'
+
+/** 목데이터 사용 여부 플래그 */
+const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
+
+/**
+ * 사전 의견 조회
+ *
+ * @description
+ * 약속에 대한 사전 의견 정보를 조회합니다.
+ * 책 정보와 주제별 사전 의견 내용을 포함합니다.
+ *
+ * @param meetingId - 약속 ID
+ *
+ * @returns 사전 의견 응답 데이터
+ */
+export const getPreOpinion = async (meetingId: number): Promise<GetPreOpinionResponse> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return getMockPreOpinionDetail()
+  }
+
+  return api.get<GetPreOpinionResponse>(PRE_OPINION_ENDPOINTS.DETAIL(meetingId))
+}
diff --git a/src/features/pre-opinion/preOpinion.endpoints.ts b/src/features/pre-opinion/preOpinion.endpoints.ts
new file mode 100644
index 0000000..1314d29
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.endpoints.ts
@@ -0,0 +1,7 @@
+import { API_PATHS } from '@/api'
+
+export const PRE_OPINION_ENDPOINTS = {
+  // TODO: 백엔드 사전의견 조회 API 응답 구조 확정 후 반영 예정
+  // 사전 의견 조회 (GET /api/meetings/{meetingId}/pre-opinions/me)
+  DETAIL: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/pre-opinions/me`,
+} 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..ff6f3aa
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.mock.ts
@@ -0,0 +1,50 @@
+/**
+ * @file preOpinion.mock.ts
+ * @description 사전 의견 API 목데이터
+ */
+
+import type { GetPreOpinionResponse } from '@/features/pre-opinion/preOpinion.types'
+
+/**
+ * 사전 의견 조회 목데이터
+ */
+const mockPreOpinionDetail: GetPreOpinionResponse = {
+  book: {
+    bookId: 10,
+    title: '아주 작은 습관의 힘',
+    author: '제임스 클리어',
+  },
+  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..f6de39a
--- /dev/null
+++ b/src/features/pre-opinion/preOpinion.types.ts
@@ -0,0 +1,71 @@
+/**
+ * @file preOpinion.types.ts
+ * @description 사전 의견 API 관련 타입 정의
+ */
+
+/**
+ * 주제 유형
+ */
+export type TopicType =
+  | 'FREE'
+  | 'DISCUSSION'
+  | 'EMOTION'
+  | 'EXPERIENCE'
+  | 'CHARACTER_ANALYSIS'
+  | 'COMPARISON'
+  | 'STRUCTURE'
+  | 'IN_DEPTH'
+  | 'CREATIVE'
+  | 'CUSTOM'
+
+/**
+ * 사전 의견 주제 항목
+ */
+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 GetPreOpinionResponse = {
+  /** 책 정보 */
+  book: PreOpinionBook
+  /** 사전 의견 데이터 */
+  preOpinion: PreOpinionData
+}
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index 77698f6..66c7590 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -4,14 +4,16 @@ import { useMeetingDetail } from '@/features/meetings'
 import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
 import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
 import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionWriteHeader'
+import { usePreOpinion } from '@/features/pre-opinion/hooks'
 import SubPageHeader from '@/shared/components/SubPageHeader'
 import { Card } from '@/shared/ui'
 
 export default function PreOpinionWritePage() {
   const { meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
-  const { data: meeting, isLoading } = useMeetingDetail(Number(meetingId))
+  const { data: meeting, isLoading: isMeetingLoading } = useMeetingDetail(Number(meetingId))
+  const { data: preOpinion, isLoading: isPreOpinionLoading } = usePreOpinion(Number(meetingId))
 
-  if (isLoading || !meeting) {
+  if (isMeetingLoading || isPreOpinionLoading || !meeting || !preOpinion) {
     return (
       <>
         <SubPageHeader />
@@ -25,7 +27,10 @@ export default function PreOpinionWritePage() {
   return (
     <>
       <SubPageHeader />
-      <PreOpinionWriteHeader />
+      <PreOpinionWriteHeader
+        book={preOpinion.book}
+        updatedAt={preOpinion.preOpinion.updatedAt}
+      />
 
       <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">
@@ -35,7 +40,7 @@ export default function PreOpinionWritePage() {
             </p>
           </Card>
           <BookReviewSection bookId={meeting.book.bookId} />
-          <PreOpinionQuestionSection />
+          <PreOpinionQuestionSection topics={preOpinion.preOpinion.topics} />
         </section>
       </div>
     </>
diff --git a/src/shared/ui/Container.tsx b/src/shared/ui/Container.tsx
index f7bf987..71c4929 100644
--- a/src/shared/ui/Container.tsx
+++ b/src/shared/ui/Container.tsx
@@ -16,6 +16,7 @@ type TitleProps = {
   required?: boolean
   errorMessage?: string
   infoMessage?: string
+  badge?: React.ReactNode
 }
 
 type ContentProps = {
@@ -40,7 +41,7 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps>(function Cont
   )
 })
 
-function Title({ className, children, required, errorMessage, infoMessage }: TitleProps) {
+function Title({ className, children, required, errorMessage, infoMessage, badge }: TitleProps) {
   return (
     <div className="flex flex-col gap-medium">
       {infoMessage && (
@@ -62,6 +63,7 @@ function Title({ className, children, required, errorMessage, infoMessage }: Tit
               </span>
             )}
           </h3>
+          {badge}
         </div>
         {errorMessage && (
           <span className="flex items-center typo-body3 text-accent-300 gap-tiny">

From 3acc06728d18ab3cd72b4579a2fb60dcce14eec7 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Sat, 7 Feb 2026 23:45:05 +0900
Subject: [PATCH 03/13] =?UTF-8?q?fix:=20=EC=82=AC=EC=A0=84=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B0=8F=20=EC=95=88?=
 =?UTF-8?q?=EB=82=B4=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/pre-opinion/components/BookReviewSection.tsx   | 6 +++++-
 .../pre-opinion/components/PreOpinionWriteHeader.tsx        | 2 +-
 src/shared/components/SubPageHeader.tsx                     | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/features/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
index 58724db..2dd1ba5 100644
--- a/src/features/pre-opinion/components/BookReviewSection.tsx
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -39,7 +39,11 @@ const BookReviewSection = ({ bookId, onChange }: BookReviewSectionProps) => {
   return (
     <Container className="gap-small">
       <Container.Title
-        infoMessage="내 책장의 기록을 자동으로 불러왔어요. 여기서 수정하는 내용은 내 책장에도 똑같이 반영돼요!"
+        infoMessage={
+          review
+            ? '내 책장의 기록을 자동으로 불러왔어요. 여기서 수정하는 내용은 내 책장에도 똑같이 반영돼요!'
+            : ''
+        }
         className="typo-subtitle3 pl-xxtiny"
       >
         이 책은 어떠셨나요?
diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
index 2c7bd12..02b220a 100644
--- a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -50,7 +50,7 @@ const PreOpinionWriteHeader = ({ book, updatedAt }: PreOpinionWriteHeaderProps)
       <div ref={sentinelRef} className="h-0" aria-hidden />
       <div
         className={cn(
-          'sticky top-[108px] z-30 bg-white w-screen ml-[calc(-50vw+50%)] transition-shadow duration-200',
+          '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)]'
         )}
       >
diff --git a/src/shared/components/SubPageHeader.tsx b/src/shared/components/SubPageHeader.tsx
index 369a015..c0537c0 100644
--- a/src/shared/components/SubPageHeader.tsx
+++ b/src/shared/components/SubPageHeader.tsx
@@ -40,7 +40,7 @@ export default function SubPageHeader({ label = '뒤로가기', to }: SubPageHea
       aria-label={`${label} 페이지로 이동`}
       className="sticky top-gnb-height z-40 bg-white w-screen ml-[calc(-50vw+50%)]"
     >
-      <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>

From 9f99b35eae2e596bcd83202588850e849d468d7d Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Sun, 8 Feb 2026 16:41:55 +0900
Subject: [PATCH 04/13] =?UTF-8?q?refactor:=20=EC=82=AC=EC=A0=84=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=EC=9E=91=EC=84=B1=20=EA=B2=BD=EB=A1=9C=EB=A5=BC=20?=
 =?UTF-8?q?ROUTES=20=EC=83=81=EC=88=98=EB=A1=9C=20=ED=86=B5=ED=95=A9=20(#6?=
 =?UTF-8?q?2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/index.tsx           | 2 +-
 src/shared/constants/routes.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index b8d98a4..8b421eb 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -102,7 +102,7 @@ export const router = createBrowserRouter([
                 element: <MeetingDetailPage />,
               },
               {
-                path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/pre-opinions/new`,
+                path: ROUTES.PRE_OPINION_WRITE(':gatheringId', ':meetingId'),
                 element: <PreOpinionWritePage />,
               },
               {
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index f5e7b67..1a1f416 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -21,6 +21,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}`,

From 4a1d29cf1d394c8ed44075d3ac0e12547ab6d583 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 12 Feb 2026 22:00:43 +0900
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=A0=84=20=EC=9D=98=EA=B2=AC=20=EC=A1=B0=ED=9A=8C=20?=
 =?UTF-8?q?API=20=EB=B0=98=EC=98=81=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/endpoints.ts                          |   1 +
 src/features/book/book.api.ts                 |  16 +-
 src/features/keywords/index.ts                |   2 +
 src/features/keywords/keywords.api.ts         | 730 +-----------------
 src/features/keywords/keywords.endpoints.ts   |   6 +
 src/features/keywords/keywords.mock.ts        | 129 ++++
 .../components/BookReviewSection.tsx          |  27 +-
 .../pre-opinion/hooks/preOpinionQueryKeys.ts  |   4 +-
 .../pre-opinion/hooks/usePreOpinion.ts        |  26 +-
 src/features/pre-opinion/preOpinion.api.ts    |  18 +-
 .../pre-opinion/preOpinion.endpoints.ts       |   6 +-
 src/features/pre-opinion/preOpinion.mock.ts   |  10 +
 src/features/pre-opinion/preOpinion.types.ts  |  30 +
 src/pages/PreOpinions/PreOpinionWritePage.tsx |  22 +-
 14 files changed, 247 insertions(+), 780 deletions(-)
 create mode 100644 src/features/keywords/keywords.endpoints.ts
 create mode 100644 src/features/keywords/keywords.mock.ts

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/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..bcbc531
--- /dev/null
+++ b/src/features/keywords/keywords.mock.ts
@@ -0,0 +1,129 @@
+/**
+ * @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
index 2dd1ba5..b235a04 100644
--- a/src/features/pre-opinion/components/BookReviewSection.tsx
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -2,7 +2,7 @@ import {
   BookReviewForm,
   type BookReviewFormValues,
 } from '@/features/book/components/BookReviewForm'
-import { useBookReview } from '@/features/book/hooks'
+import type { PreOpinionReview } from '@/features/pre-opinion/preOpinion.types'
 import { Container } from '@/shared/ui'
 
 /**
@@ -14,33 +14,22 @@ import { Container } from '@/shared/ui'
  *
  * @example
  * ```tsx
- * <BookReviewSection bookId={1} onChange={(values) => setReviewValues(values)} />
+ * <BookReviewSection review={preOpinion.review} onChange={(values) => setReviewValues(values)} />
  * ```
  */
 interface BookReviewSectionProps {
-  bookId: number
+  review: PreOpinionReview
   onChange?: (values: BookReviewFormValues) => void
 }
 
-const BookReviewSection = ({ bookId, onChange }: BookReviewSectionProps) => {
-  const { data: review, isLoading } = useBookReview(bookId)
-
-  if (isLoading) {
-    return (
-      <section className="bg-white rounded-lg p-large">
-        <h3 className="typo-subtitle1 mb-medium">책 평가</h3>
-        <div className="flex items-center justify-center py-xlarge">
-          <p className="typo-body2 text-grey-600">로딩 중...</p>
-        </div>
-      </section>
-    )
-  }
+const BookReviewSection = ({ review, onChange }: BookReviewSectionProps) => {
+  const hasReview = review.rating > 0 || review.keywords.length > 0
 
   return (
     <Container className="gap-small">
       <Container.Title
         infoMessage={
-          review
+          hasReview
             ? '내 책장의 기록을 자동으로 불러왔어요. 여기서 수정하는 내용은 내 책장에도 똑같이 반영돼요!'
             : ''
         }
@@ -50,8 +39,8 @@ const BookReviewSection = ({ bookId, onChange }: BookReviewSectionProps) => {
       </Container.Title>
       <Container.Content>
         <BookReviewForm
-          initialRating={review?.rating ?? 0}
-          initialKeywordIds={review?.keywords.map((k) => k.id) ?? []}
+          initialRating={review.rating ?? 0}
+          initialKeywordIds={review.keywords.map((k) => k.id) ?? []}
           onChange={onChange}
         />
       </Container.Content>
diff --git a/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts b/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
index 833b8f2..5d5057f 100644
--- a/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
+++ b/src/features/pre-opinion/hooks/preOpinionQueryKeys.ts
@@ -3,9 +3,11 @@
  * @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: (meetingId: number) => [...preOpinionQueryKeys.details(), meetingId] 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
index d6bcf09..5f4d1b2 100644
--- a/src/features/pre-opinion/hooks/usePreOpinion.ts
+++ b/src/features/pre-opinion/hooks/usePreOpinion.ts
@@ -6,7 +6,10 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { getPreOpinion } from '@/features/pre-opinion/preOpinion.api'
-import type { GetPreOpinionResponse } from '@/features/pre-opinion/preOpinion.types'
+import type {
+  GetPreOpinionParams,
+  GetPreOpinionResponse,
+} from '@/features/pre-opinion/preOpinion.types'
 
 import { preOpinionQueryKeys } from './preOpinionQueryKeys'
 
@@ -15,24 +18,29 @@ import { preOpinionQueryKeys } from './preOpinionQueryKeys'
  *
  * @description
  * TanStack Query를 사용하여 사전 의견 정보를 조회합니다.
- * 책 정보와 주제별 사전 의견 내용을 포함합니다.
+ * 책 정보, 리뷰(평가), 주제별 사전 의견 내용을 포함합니다.
  *
- * @param meetingId - 약속 ID
+ * @param params - 모임 ID와 약속 ID
  *
  * @returns TanStack Query 결과 객체
  *
  * @example
  * ```tsx
- * const { data, isLoading } = usePreOpinion(1)
+ * const { data, isLoading } = usePreOpinion({ gatheringId: 1, meetingId: 2 })
  * ```
  */
-export const usePreOpinion = (meetingId: number) => {
-  const isValidMeetingId = !Number.isNaN(meetingId) && meetingId > 0
+export const usePreOpinion = (params: GetPreOpinionParams) => {
+  const { gatheringId, meetingId } = params
+  const isValidParams =
+    !Number.isNaN(gatheringId) &&
+    gatheringId > 0 &&
+    !Number.isNaN(meetingId) &&
+    meetingId > 0
 
   return useQuery<GetPreOpinionResponse>({
-    queryKey: preOpinionQueryKeys.detail(meetingId),
-    queryFn: () => getPreOpinion(meetingId),
-    enabled: isValidMeetingId,
+    queryKey: preOpinionQueryKeys.detail(params),
+    queryFn: () => getPreOpinion(params),
+    enabled: isValidParams,
     gcTime: 10 * 60 * 1000,
   })
 }
diff --git a/src/features/pre-opinion/preOpinion.api.ts b/src/features/pre-opinion/preOpinion.api.ts
index 845e308..8c9216d 100644
--- a/src/features/pre-opinion/preOpinion.api.ts
+++ b/src/features/pre-opinion/preOpinion.api.ts
@@ -6,7 +6,10 @@
 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 { GetPreOpinionResponse } from '@/features/pre-opinion/preOpinion.types'
+import type {
+  GetPreOpinionParams,
+  GetPreOpinionResponse,
+} from '@/features/pre-opinion/preOpinion.types'
 
 /** 목데이터 사용 여부 플래그 */
 const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
@@ -16,17 +19,22 @@ const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
  *
  * @description
  * 약속에 대한 사전 의견 정보를 조회합니다.
- * 책 정보와 주제별 사전 의견 내용을 포함합니다.
+ * 책 정보, 리뷰(평가), 주제별 사전 의견 내용을 포함합니다.
  *
- * @param meetingId - 약속 ID
+ * @param params - 모임 ID와 약속 ID
  *
  * @returns 사전 의견 응답 데이터
  */
-export const getPreOpinion = async (meetingId: number): Promise<GetPreOpinionResponse> => {
+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(meetingId))
+  return api.get<GetPreOpinionResponse>(
+    PRE_OPINION_ENDPOINTS.DETAIL(gatheringId, meetingId)
+  )
 }
diff --git a/src/features/pre-opinion/preOpinion.endpoints.ts b/src/features/pre-opinion/preOpinion.endpoints.ts
index 1314d29..a2b1953 100644
--- a/src/features/pre-opinion/preOpinion.endpoints.ts
+++ b/src/features/pre-opinion/preOpinion.endpoints.ts
@@ -1,7 +1,7 @@
 import { API_PATHS } from '@/api'
 
 export const PRE_OPINION_ENDPOINTS = {
-  // TODO: 백엔드 사전의견 조회 API 응답 구조 확정 후 반영 예정
-  // 사전 의견 조회 (GET /api/meetings/{meetingId}/pre-opinions/me)
-  DETAIL: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/pre-opinions/me`,
+  // 사전 의견 조회 (GET /api/gatherings/{gatheringId}/meetings/{meetingId}/answers/me)
+  DETAIL: (gatheringId: number, meetingId: number) =>
+    `${API_PATHS.GATHERINGS}/${gatheringId}/meetings/${meetingId}/answers/me`,
 } as const
diff --git a/src/features/pre-opinion/preOpinion.mock.ts b/src/features/pre-opinion/preOpinion.mock.ts
index ff6f3aa..7be34e6 100644
--- a/src/features/pre-opinion/preOpinion.mock.ts
+++ b/src/features/pre-opinion/preOpinion.mock.ts
@@ -14,6 +14,16 @@ const mockPreOpinionDetail: GetPreOpinionResponse = {
     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: [
diff --git a/src/features/pre-opinion/preOpinion.types.ts b/src/features/pre-opinion/preOpinion.types.ts
index f6de39a..c2383b5 100644
--- a/src/features/pre-opinion/preOpinion.types.ts
+++ b/src/features/pre-opinion/preOpinion.types.ts
@@ -3,6 +3,8 @@
  * @description 사전 의견 API 관련 타입 정의
  */
 
+import type { ReviewKeyword } from '@/features/book/book.types'
+
 /**
  * 주제 유형
  */
@@ -60,12 +62,40 @@ export type PreOpinionData = {
   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
+  /** 리뷰(평가) 정보 */
+  review: PreOpinionReview
   /** 사전 의견 데이터 */
   preOpinion: PreOpinionData
 }
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index 66c7590..f67b5e7 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -1,24 +1,25 @@
 import { useParams } from 'react-router-dom'
 
-import { useMeetingDetail } from '@/features/meetings'
 import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
 import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
 import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionWriteHeader'
 import { usePreOpinion } from '@/features/pre-opinion/hooks'
 import SubPageHeader from '@/shared/components/SubPageHeader'
-import { Card } from '@/shared/ui'
+import { Card, Spinner } from '@/shared/ui'
 
 export default function PreOpinionWritePage() {
-  const { meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
-  const { data: meeting, isLoading: isMeetingLoading } = useMeetingDetail(Number(meetingId))
-  const { data: preOpinion, isLoading: isPreOpinionLoading } = usePreOpinion(Number(meetingId))
+  const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
+  const { data: preOpinion, isLoading } = usePreOpinion({
+    gatheringId: Number(gatheringId),
+    meetingId: Number(meetingId),
+  })
 
-  if (isMeetingLoading || isPreOpinionLoading || !meeting || !preOpinion) {
+  if (isLoading || !preOpinion) {
     return (
       <>
         <SubPageHeader />
         <div className="flex items-center justify-center py-xlarge">
-          <p className="typo-body2 text-grey-600">로딩 중...</p>
+          <Spinner />
         </div>
       </>
     )
@@ -27,10 +28,7 @@ export default function PreOpinionWritePage() {
   return (
     <>
       <SubPageHeader />
-      <PreOpinionWriteHeader
-        book={preOpinion.book}
-        updatedAt={preOpinion.preOpinion.updatedAt}
-      />
+      <PreOpinionWriteHeader book={preOpinion.book} updatedAt={preOpinion.preOpinion.updatedAt} />
 
       <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">
@@ -39,7 +37,7 @@ export default function PreOpinionWritePage() {
               작성하신 사전 의견은 약속 당일이 되면 멤버들에게 자동으로 공개돼요.
             </p>
           </Card>
-          <BookReviewSection bookId={meeting.book.bookId} />
+          <BookReviewSection review={preOpinion.review} />
           <PreOpinionQuestionSection topics={preOpinion.preOpinion.topics} />
         </section>
       </div>

From 7ad214b35688ee6534a3d4df43c11158ab441677 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 12 Feb 2026 22:37:40 +0900
Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=EC=B1=85=20=ED=8F=89=EA=B0=80=20?=
 =?UTF-8?q?=EB=B3=84=EC=A0=90=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../book/components/BookReviewForm.tsx        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/features/book/components/BookReviewForm.tsx b/src/features/book/components/BookReviewForm.tsx
index cdfb9b7..0cdfb59 100644
--- a/src/features/book/components/BookReviewForm.tsx
+++ b/src/features/book/components/BookReviewForm.tsx
@@ -3,6 +3,7 @@ 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'
 
@@ -123,7 +124,7 @@ export function BookReviewForm({
     onChange?.({
       rating: newRating,
       keywordIds: selectedKeywordIds,
-      isValid: newRating > 0 && selectedBookKeywords.length > 0 && selectedImpressionKeywords.length > 0,
+      isValid: selectedBookKeywords.length > 0 && selectedImpressionKeywords.length > 0,
     })
   }
 
@@ -133,17 +134,16 @@ export function BookReviewForm({
       : [...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
+    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: rating > 0 && nextBookCount > 0 && nextImpressionCount > 0,
+      isValid: nextBookCount > 0 && nextImpressionCount > 0,
     })
   }
 
@@ -172,6 +172,9 @@ export function BookReviewForm({
           <div className="flex items-center gap-xsmall">
             <StarRate rating={rating} size={36} interactive onRatingChange={handleRatingChange} />
             <p className="subtitle5 text-black">{rating.toFixed(1)}</p>
+            {rating >= 0.5 && (
+              <TextButton onClick={() => handleRatingChange(0)}>별점 초기화</TextButton>
+            )}
           </div>
         </section>
 

From a4ba6e4bd4c731e0955cdda1363628bb91787e5a Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Tue, 17 Feb 2026 23:37:58 +0900
Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=EC=82=AC=EC=A0=84=20=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=EC=A0=80=EC=9E=A5=20=EB=B0=8F=20=EA=B3=B5=EC=9C=A0?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BookReviewSection.tsx          |   8 +-
 .../components/PreOpinionQuestionSection.tsx  |  14 ++-
 .../components/PreOpinionWriteHeader.tsx      |  27 +++-
 src/features/pre-opinion/hooks/index.ts       |   2 +
 .../pre-opinion/hooks/useSavePreOpinion.ts    |  41 ++++++
 .../pre-opinion/hooks/useSubmitPreOpinion.ts  |  37 ++++++
 src/features/pre-opinion/preOpinion.api.ts    |  44 ++++++-
 .../pre-opinion/preOpinion.endpoints.ts       |   9 ++
 src/features/pre-opinion/preOpinion.types.ts  |  45 ++++++-
 src/pages/PreOpinions/PreOpinionWritePage.tsx | 118 +++++++++++++++++-
 10 files changed, 323 insertions(+), 22 deletions(-)
 create mode 100644 src/features/pre-opinion/hooks/useSavePreOpinion.ts
 create mode 100644 src/features/pre-opinion/hooks/useSubmitPreOpinion.ts

diff --git a/src/features/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
index b235a04..7296742 100644
--- a/src/features/pre-opinion/components/BookReviewSection.tsx
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -18,12 +18,12 @@ import { Container } from '@/shared/ui'
  * ```
  */
 interface BookReviewSectionProps {
-  review: PreOpinionReview
+  review: PreOpinionReview | null
   onChange?: (values: BookReviewFormValues) => void
 }
 
 const BookReviewSection = ({ review, onChange }: BookReviewSectionProps) => {
-  const hasReview = review.rating > 0 || review.keywords.length > 0
+  const hasReview = review !== null
 
   return (
     <Container className="gap-small">
@@ -39,8 +39,8 @@ const BookReviewSection = ({ review, onChange }: BookReviewSectionProps) => {
       </Container.Title>
       <Container.Content>
         <BookReviewForm
-          initialRating={review.rating ?? 0}
-          initialKeywordIds={review.keywords.map((k) => k.id) ?? []}
+          initialRating={review?.rating ?? 0}
+          initialKeywordIds={review?.keywords.map((k) => k.id) ?? []}
           onChange={onChange}
         />
       </Container.Content>
diff --git a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
index ae00d9a..6c9a16e 100644
--- a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
+++ b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
@@ -3,6 +3,7 @@ import { Badge, Container, Textarea } from '@/shared/ui'
 
 interface PreOpinionQuestionSectionProps {
   topics: PreOpinionTopic[]
+  onChange?: (topicId: number, content: string) => void
 }
 
 /**
@@ -15,10 +16,13 @@ interface PreOpinionQuestionSectionProps {
  *
  * @example
  * ```tsx
- * <PreOpinionQuestionSection topics={preOpinion.topics} />
+ * <PreOpinionQuestionSection
+ *   topics={preOpinion.topics}
+ *   onChange={(topicId, content) => handleTopicChange(topicId, content)}
+ * />
  * ```
  */
-const PreOpinionQuestionSection = ({ topics }: PreOpinionQuestionSectionProps) => {
+const PreOpinionQuestionSection = ({ topics, onChange }: PreOpinionQuestionSectionProps) => {
   const sortedTopics = [...topics].sort((a, b) => a.confirmOrder - b.confirmOrder)
 
   return (
@@ -34,7 +38,11 @@ const PreOpinionQuestionSection = ({ topics }: PreOpinionQuestionSectionProps) =
           <Container.Content>
             <div className="flex flex-col gap-small">
               <p className="typo-body4 text-grey-600">{topic.topicDescription}</p>
-              <Textarea placeholder="자유롭게 작성해주세요" defaultValue={topic.content ?? ''} />
+              <Textarea
+                placeholder="자유롭게 작성해주세요"
+                defaultValue={topic.content ?? ''}
+                onChange={(e) => onChange?.(topic.topicId, e.target.value)}
+              />
             </div>
           </Container.Content>
         </Container>
diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
index 02b220a..97d83be 100644
--- a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -9,6 +9,10 @@ import { formatUpdatedAt } from '../lib/date'
 interface PreOpinionWriteHeaderProps {
   book: PreOpinionBook
   updatedAt: string | null
+  onSave?: () => void
+  onSubmit?: () => void
+  isSaving?: boolean
+  isSubmitting?: boolean
 }
 
 /**
@@ -26,7 +30,14 @@ interface PreOpinionWriteHeaderProps {
  * />
  * ```
  */
-const PreOpinionWriteHeader = ({ book, updatedAt }: PreOpinionWriteHeaderProps) => {
+const PreOpinionWriteHeader = ({
+  book,
+  updatedAt,
+  onSave,
+  onSubmit,
+  isSaving,
+  isSubmitting,
+}: PreOpinionWriteHeaderProps) => {
   const sentinelRef = useRef<HTMLDivElement>(null)
   const [isStuck, setIsStuck] = useState(false)
 
@@ -66,10 +77,18 @@ const PreOpinionWriteHeader = ({ book, updatedAt }: PreOpinionWriteHeaderProps)
               {updatedAt && (
                 <p className="typo-body6 text-grey-600 mr-large">{formatUpdatedAt(updatedAt)}</p>
               )}
-              <Button className="mr-xsmall" variant={'secondary'} outline>
-                저장하기
+              <Button
+                className="mr-xsmall"
+                variant={'secondary'}
+                outline
+                onClick={onSave}
+                disabled={isSaving}
+              >
+                {isSaving ? '저장 중...' : '저장하기'}
+              </Button>
+              <Button onClick={onSubmit} disabled={isSubmitting || isSaving}>
+                {isSubmitting ? '공유 중...' : '공유하기'}
               </Button>
-              <Button>공유하기</Button>
             </div>
           </div>
         </div>
diff --git a/src/features/pre-opinion/hooks/index.ts b/src/features/pre-opinion/hooks/index.ts
index 2670074..46f7dec 100644
--- a/src/features/pre-opinion/hooks/index.ts
+++ b/src/features/pre-opinion/hooks/index.ts
@@ -1,2 +1,4 @@
 export * from './preOpinionQueryKeys'
 export * from './usePreOpinion'
+export * from './useSavePreOpinion'
+export * from './useSubmitPreOpinion'
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..d92c406
--- /dev/null
+++ b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
@@ -0,0 +1,37 @@
+/**
+ * @file useSubmitPreOpinion.ts
+ * @description 사전 의견 공유(제출) 뮤테이션 훅
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+
+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: () => {
+      queryClient.invalidateQueries({ queryKey: preOpinionQueryKeys.all })
+    },
+  })
+}
diff --git a/src/features/pre-opinion/preOpinion.api.ts b/src/features/pre-opinion/preOpinion.api.ts
index 8c9216d..f141310 100644
--- a/src/features/pre-opinion/preOpinion.api.ts
+++ b/src/features/pre-opinion/preOpinion.api.ts
@@ -9,6 +9,9 @@ import { getMockPreOpinionDetail } from '@/features/pre-opinion/preOpinion.mock'
 import type {
   GetPreOpinionParams,
   GetPreOpinionResponse,
+  SavePreOpinionBody,
+  SavePreOpinionParams,
+  SubmitPreOpinionBody,
 } from '@/features/pre-opinion/preOpinion.types'
 
 /** 목데이터 사용 여부 플래그 */
@@ -34,7 +37,42 @@ export const getPreOpinion = async ({
     return getMockPreOpinionDetail()
   }
 
-  return api.get<GetPreOpinionResponse>(
-    PRE_OPINION_ENDPOINTS.DETAIL(gatheringId, meetingId)
-  )
+  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
index a2b1953..7f6b5af 100644
--- a/src/features/pre-opinion/preOpinion.endpoints.ts
+++ b/src/features/pre-opinion/preOpinion.endpoints.ts
@@ -4,4 +4,13 @@ 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.types.ts b/src/features/pre-opinion/preOpinion.types.ts
index c2383b5..4301843 100644
--- a/src/features/pre-opinion/preOpinion.types.ts
+++ b/src/features/pre-opinion/preOpinion.types.ts
@@ -94,8 +94,49 @@ export type GetPreOpinionParams = {
 export type GetPreOpinionResponse = {
   /** 책 정보 */
   book: PreOpinionBook
-  /** 리뷰(평가) 정보 */
-  review: PreOpinionReview
+  /** 리뷰(평가) 정보 (평가 전적이 없으면 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
index f67b5e7..cf114a5 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -1,19 +1,115 @@
+import { useCallback, useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 
+import type { BookReviewFormValues } from '@/features/book/components/BookReviewForm'
 import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
 import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
 import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionWriteHeader'
-import { usePreOpinion } from '@/features/pre-opinion/hooks'
+import {
+  usePreOpinion,
+  useSavePreOpinion,
+  useSubmitPreOpinion,
+} from '@/features/pre-opinion/hooks'
 import SubPageHeader from '@/shared/components/SubPageHeader'
 import { Card, Spinner } from '@/shared/ui'
 
 export default function PreOpinionWritePage() {
   const { gatheringId, meetingId } = useParams<{ gatheringId: string; meetingId: string }>()
+  const numGatheringId = Number(gatheringId)
+  const numMeetingId = Number(meetingId)
+
   const { data: preOpinion, isLoading } = usePreOpinion({
-    gatheringId: Number(gatheringId),
-    meetingId: Number(meetingId),
+    gatheringId: numGatheringId,
+    meetingId: numMeetingId,
+  })
+
+  const reviewRef = useRef<BookReviewFormValues>({ rating: 0, keywordIds: [], isValid: false })
+  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])
+
+  const isFirstSave = preOpinion?.preOpinion.updatedAt === null
+
+  const { mutate: save, mutateAsync: saveAsync, isPending: isSaving } = useSavePreOpinion({
+    gatheringId: numGatheringId,
+    meetingId: numMeetingId,
+    isFirstSave: isFirstSave ?? true,
+  })
+
+  const { mutate: submit, isPending: isSubmitting } = useSubmitPreOpinion({
+    gatheringId: numGatheringId,
+    meetingId: numMeetingId,
   })
 
+  const handleReviewChange = useCallback((values: BookReviewFormValues) => {
+    reviewRef.current = values
+  }, [])
+
+  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)
+  }, [buildSaveBody, save])
+
+  const handleSubmit = useCallback(async () => {
+    const submitBody = buildSubmitBody()
+    if (!submitBody) return
+
+    if (isFirstSave) {
+      const saveBody = buildSaveBody()
+      if (!saveBody) return
+      await saveAsync(saveBody)
+    }
+
+    submit(submitBody)
+  }, [isFirstSave, buildSaveBody, buildSubmitBody, saveAsync, submit])
+
   if (isLoading || !preOpinion) {
     return (
       <>
@@ -28,7 +124,14 @@ export default function PreOpinionWritePage() {
   return (
     <>
       <SubPageHeader />
-      <PreOpinionWriteHeader book={preOpinion.book} updatedAt={preOpinion.preOpinion.updatedAt} />
+      <PreOpinionWriteHeader
+        book={preOpinion.book}
+        updatedAt={preOpinion.preOpinion.updatedAt}
+        onSave={handleSave}
+        onSubmit={handleSubmit}
+        isSaving={isSaving}
+        isSubmitting={isSubmitting}
+      />
 
       <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">
@@ -37,8 +140,11 @@ export default function PreOpinionWritePage() {
               작성하신 사전 의견은 약속 당일이 되면 멤버들에게 자동으로 공개돼요.
             </p>
           </Card>
-          <BookReviewSection review={preOpinion.review} />
-          <PreOpinionQuestionSection topics={preOpinion.preOpinion.topics} />
+          <BookReviewSection review={preOpinion.review} onChange={handleReviewChange} />
+          <PreOpinionQuestionSection
+            topics={preOpinion.preOpinion.topics}
+            onChange={handleTopicChange}
+          />
         </section>
       </div>
     </>

From 32e572ca42dc3d18894bf41f2e79e596a66143ce Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Tue, 17 Feb 2026 23:59:18 +0900
Subject: [PATCH 08/13] =?UTF-8?q?refactor:=20format=20=EB=A7=9E=EC=B6=A4?=
 =?UTF-8?q?=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/keywords/keywords.mock.ts        | 726 ++++++++++++++++--
 .../pre-opinion/hooks/usePreOpinion.ts        |   5 +-
 src/pages/PreOpinions/PreOpinionWritePage.tsx |  12 +-
 3 files changed, 667 insertions(+), 76 deletions(-)

diff --git a/src/features/keywords/keywords.mock.ts b/src/features/keywords/keywords.mock.ts
index bcbc531..e6d0d5f 100644
--- a/src/features/keywords/keywords.mock.ts
+++ b/src/features/keywords/keywords.mock.ts
@@ -13,108 +13,702 @@ const mockKeywordsResponse: GetKeywordsResponse = {
     // ============================================================
     // 책 키워드 카테고리 (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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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 },
+    {
+      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,
+    },
   ],
 }
 
diff --git a/src/features/pre-opinion/hooks/usePreOpinion.ts b/src/features/pre-opinion/hooks/usePreOpinion.ts
index 5f4d1b2..c7d5888 100644
--- a/src/features/pre-opinion/hooks/usePreOpinion.ts
+++ b/src/features/pre-opinion/hooks/usePreOpinion.ts
@@ -32,10 +32,7 @@ import { preOpinionQueryKeys } from './preOpinionQueryKeys'
 export const usePreOpinion = (params: GetPreOpinionParams) => {
   const { gatheringId, meetingId } = params
   const isValidParams =
-    !Number.isNaN(gatheringId) &&
-    gatheringId > 0 &&
-    !Number.isNaN(meetingId) &&
-    meetingId > 0
+    !Number.isNaN(gatheringId) && gatheringId > 0 && !Number.isNaN(meetingId) && meetingId > 0
 
   return useQuery<GetPreOpinionResponse>({
     queryKey: preOpinionQueryKeys.detail(params),
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index cf114a5..63e4841 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -5,11 +5,7 @@ import type { BookReviewFormValues } from '@/features/book/components/BookReview
 import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
 import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
 import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionWriteHeader'
-import {
-  usePreOpinion,
-  useSavePreOpinion,
-  useSubmitPreOpinion,
-} from '@/features/pre-opinion/hooks'
+import { usePreOpinion, useSavePreOpinion, useSubmitPreOpinion } from '@/features/pre-opinion/hooks'
 import SubPageHeader from '@/shared/components/SubPageHeader'
 import { Card, Spinner } from '@/shared/ui'
 
@@ -37,7 +33,11 @@ export default function PreOpinionWritePage() {
 
   const isFirstSave = preOpinion?.preOpinion.updatedAt === null
 
-  const { mutate: save, mutateAsync: saveAsync, isPending: isSaving } = useSavePreOpinion({
+  const {
+    mutate: save,
+    mutateAsync: saveAsync,
+    isPending: isSaving,
+  } = useSavePreOpinion({
     gatheringId: numGatheringId,
     meetingId: numMeetingId,
     isFirstSave: isFirstSave ?? true,

From 322ea6efb98745702374caaf1293c072533e3352 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 19 Feb 2026 01:48:40 +0900
Subject: [PATCH 09/13] =?UTF-8?q?fix:=20=EC=82=AC=EC=A0=84=20=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=EB=B0=8F=20=EC=B1=85=20=ED=8F=89=EA=B0=80=20?=
 =?UTF-8?q?=ED=8F=BC=20=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../book/components/BookReviewForm.tsx        | 14 ++++-
 .../book/components/BookReviewModal.tsx       | 23 ++++---
 .../components/PreOpinionQuestionSection.tsx  | 61 +++++++++++++------
 .../pre-opinion/lib/{date.tsx => date.ts}     |  4 +-
 src/pages/PreOpinions/PreOpinionWritePage.tsx | 24 +++++---
 src/shared/assets/icon/FilledInfo.tsx         |  6 +-
 6 files changed, 91 insertions(+), 41 deletions(-)
 rename src/features/pre-opinion/lib/{date.tsx => date.ts} (76%)

diff --git a/src/features/book/components/BookReviewForm.tsx b/src/features/book/components/BookReviewForm.tsx
index 0cdfb59..f6be9fd 100644
--- a/src/features/book/components/BookReviewForm.tsx
+++ b/src/features/book/components/BookReviewForm.tsx
@@ -1,5 +1,5 @@
 import { X } from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { useKeywords } from '@/features/keywords'
 import { StarRate } from '@/shared/components/StarRate'
@@ -54,6 +54,16 @@ export function BookReviewForm({
     null
   )
 
+  useEffect(() => {
+    setRating(initialRating)
+  }, [initialRating])
+
+  const initialKeywordKey = initialKeywordIds.slice().sort().join(',')
+  useEffect(() => {
+    const ids = initialKeywordKey ? initialKeywordKey.split(',').map(Number) : []
+    setSelectedKeywordIds(ids)
+  }, [initialKeywordKey])
+
   const {
     data: keywordsData,
     isLoading: isLoadingKeywords,
@@ -171,7 +181,7 @@ export function BookReviewForm({
           <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="subtitle5 text-black">{rating.toFixed(1)}</p>
+            <p className="typo-subtitle5 text-black">{rating.toFixed(1)}</p>
             {rating >= 0.5 && (
               <TextButton onClick={() => handleRatingChange(0)}>별점 초기화</TextButton>
             )}
diff --git a/src/features/book/components/BookReviewModal.tsx b/src/features/book/components/BookReviewModal.tsx
index 38b7e45..9776d1a 100644
--- a/src/features/book/components/BookReviewModal.tsx
+++ b/src/features/book/components/BookReviewModal.tsx
@@ -34,15 +34,24 @@ export interface BookReviewModalProps {
   onOpenChange: (open: boolean) => void
 }
 
+const INITIAL_FORM_VALUES: BookReviewFormValues = {
+  rating: 0,
+  keywordIds: [],
+  isValid: false,
+}
+
 export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalProps) {
-  const [formValues, setFormValues] = useState<BookReviewFormValues>({
-    rating: 0,
-    keywordIds: [],
-    isValid: false,
-  })
+  const [formValues, setFormValues] = useState<BookReviewFormValues>(INITIAL_FORM_VALUES)
   const { mutate: submitReview, isPending } = useCreateBookReview(bookId)
   const { openError } = useGlobalModalStore()
 
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setFormValues(INITIAL_FORM_VALUES)
+    }
+    onOpenChange(newOpen)
+  }
+
   const handleSubmit = () => {
     if (formValues.rating === 0) {
       openError('별점 필요', '별점을 선택해주세요.')
@@ -63,13 +72,13 @@ export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalP
   }
 
   return (
-    <Modal open={open} onOpenChange={onOpenChange}>
+    <Modal open={open} onOpenChange={handleOpenChange}>
       <ModalContent variant="wide">
         <ModalHeader>
           <ModalTitle>책 평가하기</ModalTitle>
         </ModalHeader>
         <ModalBody>
-          <BookReviewForm onChange={setFormValues} />
+          <BookReviewForm key={open ? 'open' : 'closed'} onChange={setFormValues} />
         </ModalBody>
         <ModalFooter variant="full">
           <Button
diff --git a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
index 6c9a16e..c4750f4 100644
--- a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
+++ b/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import type { PreOpinionTopic } from '@/features/pre-opinion/preOpinion.types'
 import { Badge, Container, Textarea } from '@/shared/ui'
 
@@ -22,30 +24,53 @@ interface PreOpinionQuestionSectionProps {
  * />
  * ```
  */
+function TopicItem({
+  topic,
+  onChange,
+}: {
+  topic: PreOpinionTopic
+  onChange?: (topicId: number, content: string) => void
+}) {
+  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>
+  )
+}
+
 const PreOpinionQuestionSection = ({ topics, onChange }: PreOpinionQuestionSectionProps) => {
   const sortedTopics = [...topics].sort((a, b) => a.confirmOrder - b.confirmOrder)
 
   return (
     <>
       {sortedTopics.map((topic) => (
-        <Container key={topic.topicId} 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="자유롭게 작성해주세요"
-                defaultValue={topic.content ?? ''}
-                onChange={(e) => onChange?.(topic.topicId, e.target.value)}
-              />
-            </div>
-          </Container.Content>
-        </Container>
+        <TopicItem key={topic.topicId} topic={topic} onChange={onChange} />
       ))}
     </>
   )
diff --git a/src/features/pre-opinion/lib/date.tsx b/src/features/pre-opinion/lib/date.ts
similarity index 76%
rename from src/features/pre-opinion/lib/date.tsx
rename to src/features/pre-opinion/lib/date.ts
index 5daabbe..d64d628 100644
--- a/src/features/pre-opinion/lib/date.tsx
+++ b/src/features/pre-opinion/lib/date.ts
@@ -1,9 +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 = date.getHours()
+  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/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index 63e4841..ee36a02 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -31,7 +31,7 @@ export default function PreOpinionWritePage() {
     }
   }, [preOpinion?.review])
 
-  const isFirstSave = preOpinion?.preOpinion.updatedAt === null
+  const isFirstSave = preOpinion ? preOpinion.preOpinion.updatedAt === null : true
 
   const {
     mutate: save,
@@ -40,10 +40,10 @@ export default function PreOpinionWritePage() {
   } = useSavePreOpinion({
     gatheringId: numGatheringId,
     meetingId: numMeetingId,
-    isFirstSave: isFirstSave ?? true,
+    isFirstSave,
   })
 
-  const { mutate: submit, isPending: isSubmitting } = useSubmitPreOpinion({
+  const { mutateAsync: submitAsync, isPending: isSubmitting } = useSubmitPreOpinion({
     gatheringId: numGatheringId,
     meetingId: numMeetingId,
   })
@@ -101,14 +101,18 @@ export default function PreOpinionWritePage() {
     const submitBody = buildSubmitBody()
     if (!submitBody) return
 
-    if (isFirstSave) {
-      const saveBody = buildSaveBody()
-      if (!saveBody) return
-      await saveAsync(saveBody)
-    }
+    try {
+      if (isFirstSave) {
+        const saveBody = buildSaveBody()
+        if (!saveBody) return
+        await saveAsync(saveBody)
+      }
 
-    submit(submitBody)
-  }, [isFirstSave, buildSaveBody, buildSubmitBody, saveAsync, submit])
+      await submitAsync(submitBody)
+    } catch {
+      // 에러는 useSubmitPreOpinion/useSavePreOpinion의 onError에서 처리
+    }
+  }, [isFirstSave, buildSaveBody, buildSubmitBody, saveAsync, submitAsync])
 
   if (isLoading || !preOpinion) {
     return (
diff --git a/src/shared/assets/icon/FilledInfo.tsx b/src/shared/assets/icon/FilledInfo.tsx
index 937f821..9162eef 100644
--- a/src/shared/assets/icon/FilledInfo.tsx
+++ b/src/shared/assets/icon/FilledInfo.tsx
@@ -14,9 +14,9 @@ export function FilledInfoIcon({ size = 24, className }: Props) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={cn('lucide lucide-info-icon lucide-info', className)}
     >
       <circle cx="12" cy="12" r="10" fill="currentColor" />

From a9151a1ccfe60d2c7b6a1da258a09b496368a072 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 19 Feb 2026 02:19:18 +0900
Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=EC=B1=85=20=ED=8F=89=EA=B0=80=20?=
 =?UTF-8?q?=ED=8F=BC=20=EC=83=81=ED=83=9C=20=EC=B4=88=EA=B8=B0=ED=99=94=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../book/components/BookReviewForm.tsx        | 12 +------
 .../book/components/BookReviewModal.tsx       |  7 +----
 .../components/BookReviewSection.tsx          |  8 +++++
 src/pages/PreOpinions/PreOpinionWritePage.tsx | 31 ++++++++++++++++---
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/features/book/components/BookReviewForm.tsx b/src/features/book/components/BookReviewForm.tsx
index f6be9fd..9dc80be 100644
--- a/src/features/book/components/BookReviewForm.tsx
+++ b/src/features/book/components/BookReviewForm.tsx
@@ -1,5 +1,5 @@
 import { X } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useKeywords } from '@/features/keywords'
 import { StarRate } from '@/shared/components/StarRate'
@@ -54,16 +54,6 @@ export function BookReviewForm({
     null
   )
 
-  useEffect(() => {
-    setRating(initialRating)
-  }, [initialRating])
-
-  const initialKeywordKey = initialKeywordIds.slice().sort().join(',')
-  useEffect(() => {
-    const ids = initialKeywordKey ? initialKeywordKey.split(',').map(Number) : []
-    setSelectedKeywordIds(ids)
-  }, [initialKeywordKey])
-
   const {
     data: keywordsData,
     isLoading: isLoadingKeywords,
diff --git a/src/features/book/components/BookReviewModal.tsx b/src/features/book/components/BookReviewModal.tsx
index 9776d1a..c807159 100644
--- a/src/features/book/components/BookReviewModal.tsx
+++ b/src/features/book/components/BookReviewModal.tsx
@@ -53,16 +53,11 @@ export function BookReviewModal({ bookId, open, onOpenChange }: BookReviewModalP
   }
 
   const handleSubmit = () => {
-    if (formValues.rating === 0) {
-      openError('별점 필요', '별점을 선택해주세요.')
-      return
-    }
-
     submitReview(
       { rating: formValues.rating, keywordIds: formValues.keywordIds },
       {
         onSuccess: () => {
-          onOpenChange(false)
+          handleOpenChange(false)
         },
         onError: (error) => {
           openError('평가 저장 실패', error.message)
diff --git a/src/features/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
index 7296742..8be7ef3 100644
--- a/src/features/pre-opinion/components/BookReviewSection.tsx
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -39,6 +39,14 @@ const BookReviewSection = ({ review, onChange }: BookReviewSectionProps) => {
       </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}
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index ee36a02..b5ec088 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
+import { ApiError } from '@/api'
 import type { BookReviewFormValues } from '@/features/book/components/BookReviewForm'
 import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
 import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
@@ -8,13 +9,23 @@ import PreOpinionWriteHeader from '@/features/pre-opinion/components/PreOpinionW
 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 { data: preOpinion, isLoading } = usePreOpinion({
+  const { openError } = useGlobalModalStore()
+
+  const navigate = useNavigate()
+
+  const {
+    data: preOpinion,
+    isLoading,
+    isError,
+    error,
+  } = usePreOpinion({
     gatheringId: numGatheringId,
     meetingId: numMeetingId,
   })
@@ -31,6 +42,18 @@ export default function PreOpinionWritePage() {
     }
   }, [preOpinion?.review])
 
+  useEffect(() => {
+    if (isError) {
+      const message =
+        error instanceof ApiError
+          ? error.userMessage
+          : '사전 의견을 불러오는 중 오류가 발생했습니다.'
+      openError('에러', message, () => {
+        navigate(-1)
+      })
+    }
+  }, [isError, error, openError, navigate])
+
   const isFirstSave = preOpinion ? preOpinion.preOpinion.updatedAt === null : true
 
   const {
@@ -110,9 +133,9 @@ export default function PreOpinionWritePage() {
 
       await submitAsync(submitBody)
     } catch {
-      // 에러는 useSubmitPreOpinion/useSavePreOpinion의 onError에서 처리
+      openError('오류', '사전 의견 제출 중 오류가 발생했습니다.')
     }
-  }, [isFirstSave, buildSaveBody, buildSubmitBody, saveAsync, submitAsync])
+  }, [isFirstSave, buildSaveBody, buildSubmitBody, saveAsync, submitAsync, openError])
 
   if (isLoading || !preOpinion) {
     return (

From 2a32023a3879e15fece7c44043c977e5cd56e564 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 19 Feb 2026 02:56:00 +0900
Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=EC=82=AC=EC=A0=84=20=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=ED=8F=BC=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?=
 =?UTF-8?q?=EC=A6=9D=20=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PreOpinionWriteHeader.tsx      |  6 ++--
 src/pages/PreOpinions/PreOpinionListPage.tsx  |  7 ++++-
 src/pages/PreOpinions/PreOpinionWritePage.tsx | 29 +++++++++++++------
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
index 97d83be..47b76f1 100644
--- a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -13,6 +13,7 @@ interface PreOpinionWriteHeaderProps {
   onSubmit?: () => void
   isSaving?: boolean
   isSubmitting?: boolean
+  isReviewValid?: boolean
 }
 
 /**
@@ -37,6 +38,7 @@ const PreOpinionWriteHeader = ({
   onSubmit,
   isSaving,
   isSubmitting,
+  isReviewValid,
 }: PreOpinionWriteHeaderProps) => {
   const sentinelRef = useRef<HTMLDivElement>(null)
   const [isStuck, setIsStuck] = useState(false)
@@ -82,11 +84,11 @@ const PreOpinionWriteHeader = ({
                 variant={'secondary'}
                 outline
                 onClick={onSave}
-                disabled={isSaving}
+                disabled={isSaving || !isReviewValid}
               >
                 {isSaving ? '저장 중...' : '저장하기'}
               </Button>
-              <Button onClick={onSubmit} disabled={isSubmitting || isSaving}>
+              <Button onClick={onSubmit} disabled={isSubmitting || isSaving || !isReviewValid}>
                 {isSubmitting ? '공유 중...' : '공유하기'}
               </Button>
             </div>
diff --git a/src/pages/PreOpinions/PreOpinionListPage.tsx b/src/pages/PreOpinions/PreOpinionListPage.tsx
index 05c9be7..f0ca2c5 100644
--- a/src/pages/PreOpinions/PreOpinionListPage.tsx
+++ b/src/pages/PreOpinions/PreOpinionListPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
+import { ApiError } from '@/api'
 import {
   PreOpinionDetail,
   PreOpinionMemberList,
@@ -25,7 +26,11 @@ export default function PreOpinionListPage() {
 
   useEffect(() => {
     if (error) {
-      openError('조회 불가', error.userMessage, () => navigate(-1))
+      const message =
+        error instanceof ApiError
+          ? error.userMessage
+          : '사전 의견을 불러오는 중 오류가 발생했습니다.'
+      openError('조회 불가', message, () => navigate(-1))
     }
   }, [error, openError, navigate])
 
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index b5ec088..5a201f9 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import { ApiError } from '@/api'
@@ -31,6 +31,8 @@ export default function PreOpinionWritePage() {
   })
 
   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(() => {
@@ -73,6 +75,7 @@ export default function PreOpinionWritePage() {
 
   const handleReviewChange = useCallback((values: BookReviewFormValues) => {
     reviewRef.current = values
+    setFormReviewValid(values.isValid)
   }, [])
 
   const handleTopicChange = useCallback((topicId: number, content: string) => {
@@ -117,25 +120,32 @@ export default function PreOpinionWritePage() {
   const handleSave = useCallback(() => {
     const body = buildSaveBody()
     if (!body) return
-    save(body)
-  }, [buildSaveBody, save])
+    save(body, {
+      onError: () => {
+        openError('오류', '사전 의견 저장 중 오류가 발생했습니다.')
+      },
+    })
+  }, [buildSaveBody, save, openError])
 
   const handleSubmit = useCallback(async () => {
+    const saveBody = buildSaveBody()
+    if (!saveBody) return
     const submitBody = buildSubmitBody()
     if (!submitBody) return
 
     try {
-      if (isFirstSave) {
-        const saveBody = buildSaveBody()
-        if (!saveBody) return
-        await saveAsync(saveBody)
-      }
+      await saveAsync(saveBody)
+    } catch {
+      openError('오류', '사전 의견 저장 중 오류가 발생했습니다.')
+      return
+    }
 
+    try {
       await submitAsync(submitBody)
     } catch {
       openError('오류', '사전 의견 제출 중 오류가 발생했습니다.')
     }
-  }, [isFirstSave, buildSaveBody, buildSubmitBody, saveAsync, submitAsync, openError])
+  }, [buildSaveBody, buildSubmitBody, saveAsync, submitAsync, openError])
 
   if (isLoading || !preOpinion) {
     return (
@@ -158,6 +168,7 @@ export default function PreOpinionWritePage() {
         onSubmit={handleSubmit}
         isSaving={isSaving}
         isSubmitting={isSubmitting}
+        isReviewValid={isReviewValid}
       />
 
       <div className="w-screen relative left-1/2 -translate-x-1/2 bg-grey-100">

From 33b9f6691e2964162b32c1542627cead90946261 Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 19 Feb 2026 23:25:36 +0900
Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EC=82=AC=EC=A0=84=20?=
 =?UTF-8?q?=EC=9D=98=EA=B2=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=ED=83=80=EC=9E=85=20=EC=9D=98?=
 =?UTF-8?q?=EC=A1=B4=EC=84=B1=20=EC=A0=95=EB=A6=AC=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...inionQuestionSection.tsx => TopicItem.tsx} | 42 ++-----------------
 .../pre-opinion/hooks/usePreOpinion.ts        |  3 +-
 .../pre-opinion/hooks/useSubmitPreOpinion.ts  |  2 +
 src/features/pre-opinion/preOpinion.types.ts  | 15 +------
 src/pages/PreOpinions/PreOpinionListPage.tsx  |  7 +---
 src/pages/PreOpinions/PreOpinionWritePage.tsx | 16 +++----
 6 files changed, 15 insertions(+), 70 deletions(-)
 rename src/features/pre-opinion/components/{PreOpinionQuestionSection.tsx => TopicItem.tsx} (55%)

diff --git a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx b/src/features/pre-opinion/components/TopicItem.tsx
similarity index 55%
rename from src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
rename to src/features/pre-opinion/components/TopicItem.tsx
index c4750f4..f3bfee5 100644
--- a/src/features/pre-opinion/components/PreOpinionQuestionSection.tsx
+++ b/src/features/pre-opinion/components/TopicItem.tsx
@@ -3,34 +3,12 @@ import { useState } from 'react'
 import type { PreOpinionTopic } from '@/features/pre-opinion/preOpinion.types'
 import { Badge, Container, Textarea } from '@/shared/ui'
 
-interface PreOpinionQuestionSectionProps {
-  topics: PreOpinionTopic[]
+interface TopicItemProps {
+  topic: PreOpinionTopic
   onChange?: (topicId: number, content: string) => void
 }
 
-/**
- * 사전 의견 주제별 질문 섹션
- *
- * @description
- * 확정된 주제 목록을 confirmOrder 순서대로 렌더링합니다.
- * 각 주제는 Container 컴포넌트로 감싸며,
- * 주제 설명과 텍스트 입력 영역을 포함합니다.
- *
- * @example
- * ```tsx
- * <PreOpinionQuestionSection
- *   topics={preOpinion.topics}
- *   onChange={(topicId, content) => handleTopicChange(topicId, content)}
- * />
- * ```
- */
-function TopicItem({
-  topic,
-  onChange,
-}: {
-  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)
 
@@ -64,16 +42,4 @@ function TopicItem({
   )
 }
 
-const PreOpinionQuestionSection = ({ topics, onChange }: PreOpinionQuestionSectionProps) => {
-  const sortedTopics = [...topics].sort((a, b) => a.confirmOrder - b.confirmOrder)
-
-  return (
-    <>
-      {sortedTopics.map((topic) => (
-        <TopicItem key={topic.topicId} topic={topic} onChange={onChange} />
-      ))}
-    </>
-  )
-}
-
-export default PreOpinionQuestionSection
+export default TopicItem
diff --git a/src/features/pre-opinion/hooks/usePreOpinion.ts b/src/features/pre-opinion/hooks/usePreOpinion.ts
index c7d5888..85301ac 100644
--- a/src/features/pre-opinion/hooks/usePreOpinion.ts
+++ b/src/features/pre-opinion/hooks/usePreOpinion.ts
@@ -5,6 +5,7 @@
 
 import { useQuery } from '@tanstack/react-query'
 
+import type { ApiError } from '@/api'
 import { getPreOpinion } from '@/features/pre-opinion/preOpinion.api'
 import type {
   GetPreOpinionParams,
@@ -34,7 +35,7 @@ export const usePreOpinion = (params: GetPreOpinionParams) => {
   const isValidParams =
     !Number.isNaN(gatheringId) && gatheringId > 0 && !Number.isNaN(meetingId) && meetingId > 0
 
-  return useQuery<GetPreOpinionResponse>({
+  return useQuery<GetPreOpinionResponse, ApiError>({
     queryKey: preOpinionQueryKeys.detail(params),
     queryFn: () => getPreOpinion(params),
     enabled: isValidParams,
diff --git a/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
index d92c406..023c92e 100644
--- a/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
+++ b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
@@ -6,6 +6,7 @@
 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'
@@ -32,6 +33,7 @@ export function useSubmitPreOpinion({ gatheringId, meetingId }: GetPreOpinionPar
     mutationFn: (body) => submitPreOpinion(gatheringId, meetingId, body),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: preOpinionQueryKeys.all })
+      queryClient.invalidateQueries({ queryKey: topicQueryKeys.confirmed() })
     },
   })
 }
diff --git a/src/features/pre-opinion/preOpinion.types.ts b/src/features/pre-opinion/preOpinion.types.ts
index 4301843..598737c 100644
--- a/src/features/pre-opinion/preOpinion.types.ts
+++ b/src/features/pre-opinion/preOpinion.types.ts
@@ -5,20 +5,7 @@
 
 import type { ReviewKeyword } from '@/features/book/book.types'
 
-/**
- * 주제 유형
- */
-export type TopicType =
-  | 'FREE'
-  | 'DISCUSSION'
-  | 'EMOTION'
-  | 'EXPERIENCE'
-  | 'CHARACTER_ANALYSIS'
-  | 'COMPARISON'
-  | 'STRUCTURE'
-  | 'IN_DEPTH'
-  | 'CREATIVE'
-  | 'CUSTOM'
+import type { TopicType } from '../topics'
 
 /**
  * 사전 의견 주제 항목
diff --git a/src/pages/PreOpinions/PreOpinionListPage.tsx b/src/pages/PreOpinions/PreOpinionListPage.tsx
index f0ca2c5..05c9be7 100644
--- a/src/pages/PreOpinions/PreOpinionListPage.tsx
+++ b/src/pages/PreOpinions/PreOpinionListPage.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
-import { ApiError } from '@/api'
 import {
   PreOpinionDetail,
   PreOpinionMemberList,
@@ -26,11 +25,7 @@ export default function PreOpinionListPage() {
 
   useEffect(() => {
     if (error) {
-      const message =
-        error instanceof ApiError
-          ? error.userMessage
-          : '사전 의견을 불러오는 중 오류가 발생했습니다.'
-      openError('조회 불가', message, () => navigate(-1))
+      openError('조회 불가', error.userMessage, () => navigate(-1))
     }
   }, [error, openError, navigate])
 
diff --git a/src/pages/PreOpinions/PreOpinionWritePage.tsx b/src/pages/PreOpinions/PreOpinionWritePage.tsx
index 5a201f9..d59d000 100644
--- a/src/pages/PreOpinions/PreOpinionWritePage.tsx
+++ b/src/pages/PreOpinions/PreOpinionWritePage.tsx
@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
-import { ApiError } from '@/api'
 import type { BookReviewFormValues } from '@/features/book/components/BookReviewForm'
 import BookReviewSection from '@/features/pre-opinion/components/BookReviewSection'
-import PreOpinionQuestionSection from '@/features/pre-opinion/components/PreOpinionQuestionSection'
 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'
@@ -46,11 +45,7 @@ export default function PreOpinionWritePage() {
 
   useEffect(() => {
     if (isError) {
-      const message =
-        error instanceof ApiError
-          ? error.userMessage
-          : '사전 의견을 불러오는 중 오류가 발생했습니다.'
-      openError('에러', message, () => {
+      openError('에러', error.userMessage, () => {
         navigate(-1)
       })
     }
@@ -179,10 +174,9 @@ export default function PreOpinionWritePage() {
             </p>
           </Card>
           <BookReviewSection review={preOpinion.review} onChange={handleReviewChange} />
-          <PreOpinionQuestionSection
-            topics={preOpinion.preOpinion.topics}
-            onChange={handleTopicChange}
-          />
+          {preOpinion.preOpinion.topics.map((topic) => (
+            <TopicItem key={topic.topicId} topic={topic} onChange={handleTopicChange} />
+          ))}
         </section>
       </div>
     </>

From 18ebfe0797cc256b7653a35d45e456479faf8e7b Mon Sep 17 00:00:00 2001
From: Choi Youngae <choiaeyoung1001@gmail.com>
Date: Thu, 19 Feb 2026 23:41:24 +0900
Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20=EC=82=AC=EC=A0=84=20?=
 =?UTF-8?q?=EC=9D=98=EA=B2=AC=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=A0=95=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=9C=EC=B6=9C=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pre-opinion/components/PreOpinionWriteHeader.tsx   |  8 +++++---
 src/features/pre-opinion/hooks/useSubmitPreOpinion.ts  | 10 +++++++---
 src/pages/PreOpinions/index.ts                         |  1 +
 src/routes/index.tsx                                   |  4 ++--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
index 47b76f1..9975621 100644
--- a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -9,8 +9,8 @@ import { formatUpdatedAt } from '../lib/date'
 interface PreOpinionWriteHeaderProps {
   book: PreOpinionBook
   updatedAt: string | null
-  onSave?: () => void
-  onSubmit?: () => void
+  onSave: () => void
+  onSubmit: () => void
   isSaving?: boolean
   isSubmitting?: boolean
   isReviewValid?: boolean
@@ -28,6 +28,8 @@ interface PreOpinionWriteHeaderProps {
  * <PreOpinionWriteHeader
  *   book={{ bookId: 1, title: '데미안', author: '헤르만 헤세' }}
  *   updatedAt="2026-02-06T09:12:30"
+ *   onSave={handleSave}
+ *   onSubmit={handleSubmit}
  * />
  * ```
  */
@@ -38,7 +40,7 @@ const PreOpinionWriteHeader = ({
   onSubmit,
   isSaving,
   isSubmitting,
-  isReviewValid,
+  isReviewValid = false,
 }: PreOpinionWriteHeaderProps) => {
   const sentinelRef = useRef<HTMLDivElement>(null)
   const [isStuck, setIsStuck] = useState(false)
diff --git a/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
index 023c92e..a589b26 100644
--- a/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
+++ b/src/features/pre-opinion/hooks/useSubmitPreOpinion.ts
@@ -31,9 +31,13 @@ export function useSubmitPreOpinion({ gatheringId, meetingId }: GetPreOpinionPar
 
   return useMutation<void, ApiError, SubmitPreOpinionBody>({
     mutationFn: (body) => submitPreOpinion(gatheringId, meetingId, body),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: preOpinionQueryKeys.all })
-      queryClient.invalidateQueries({ queryKey: topicQueryKeys.confirmed() })
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: preOpinionQueryKeys.all }),
+        // confirmed 전체 무효화: 제출 후 어떤 gatheringId/meetingId 조합이 영향 받는지
+        // 특정할 수 없으므로 confirmed 범위 전체를 무효화합니다.
+        queryClient.invalidateQueries({ queryKey: topicQueryKeys.confirmed() }),
+      ])
     },
   })
 }
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 302663f..0f0b471 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -20,10 +20,10 @@ import {
   MeetingSettingPage,
   OnboardingPage,
   PreOpinionListPage,
+  PreOpinionWritePage,
   RecordListPage,
   TopicCreatePage,
 } from '@/pages'
-import PreOpinionWritePage from '@/pages/PreOpinions/PreOpinionWritePage'
 import { ROUTES } from '@/shared/constants'
 import { AuthLayout, FullWidthLayout, LandingLayout, MainLayout, RootLayout } from '@/shared/layout'
 
@@ -133,7 +133,7 @@ export const router = createBrowserRouter([
                 element: <MeetingDetailPage />,
               },
               {
-                path: ROUTES.PRE_OPINION_WRITE(':gatheringId', ':meetingId'),
+                path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/pre-opinions/new`,
                 element: <PreOpinionWritePage />,
               },
               {