diff --git a/src/features/retrospectives/components/RetrospectiveCardButtons.tsx b/src/features/retrospectives/components/RetrospectiveCardButtons.tsx
index 62abc8d..5409ad6 100644
--- a/src/features/retrospectives/components/RetrospectiveCardButtons.tsx
+++ b/src/features/retrospectives/components/RetrospectiveCardButtons.tsx
@@ -34,15 +34,12 @@ export default function RetrospectiveCardButtons({
     }
   }
 
-  // 개인 회고 라우트 결정 (추후 라우트 반영 예정)
+  // 개인 회고 라우트 결정
   const getPersonalRetrospectiveRoute = () => {
-    // TODO: ROUTES.PERSONAL_RETROSPECTIVE, ROUTES.PERSONAL_RETROSPECTIVE_VIEW 추가 후 활성화
     if (personalRetrospectiveWritten) {
-      // return ROUTES.PERSONAL_RETROSPECTIVE_VIEW(gatheringId, meetingId)
-      return '#'
+      return ROUTES.PERSONAL_RETROSPECTIVE_VIEW(gatheringId, meetingId)
     }
-    // return ROUTES.PERSONAL_RETROSPECTIVE(gatheringId, meetingId)
-    return '#'
+    return ROUTES.PERSONAL_RETROSPECTIVE(gatheringId, meetingId)
   }
 
   return (
@@ -70,12 +67,7 @@ export default function RetrospectiveCardButtons({
       <button
         type="button"
         className="flex flex-1 items-center gap-base rounded-base bg-white p-large shadow-drop cursor-pointer"
-        onClick={() => {
-          // TODO: ROUTES.PERSONAL_RETROSPECTIVE, ROUTES.PERSONAL_RETROSPECTIVE_VIEW 추가 후 실제 navigate 활성화
-          const route = getPersonalRetrospectiveRoute()
-          console.log('개인 회고 라우트:', route)
-          // navigate(route)
-        }}
+        onClick={() => navigate(getPersonalRetrospectiveRoute())}
       >
         <div className="flex gap-base">
           <img src={personalRetroIcon} alt="개인 회고" className="shrink-0" />
diff --git a/src/features/retrospectives/index.ts b/src/features/retrospectives/index.ts
index 820983e..78f85c2 100644
--- a/src/features/retrospectives/index.ts
+++ b/src/features/retrospectives/index.ts
@@ -5,6 +5,9 @@ export * from './components'
 export * from './hooks'
 export * from './retrospectives.endpoints'
 
+// Personal
+export * from './personal'
+
 // API
 export { createSttJob, getSummary, publishSummary, updateSummary } from './retrospectives.api'
 
diff --git a/src/features/retrospectives/personal/components/ChangedThoughtsSection.tsx b/src/features/retrospectives/personal/components/ChangedThoughtsSection.tsx
new file mode 100644
index 0000000..857d668
--- /dev/null
+++ b/src/features/retrospectives/personal/components/ChangedThoughtsSection.tsx
@@ -0,0 +1,104 @@
+import { X } from 'lucide-react'
+
+import { Container, Input, Textarea } from '@/shared/ui'
+
+import type { UseChangedThoughtsReturn } from '../hooks/useChangedThoughts'
+import type { PersonalRetrospectiveTopic } from '../personalRetrospective.types'
+
+export interface ChangedThoughtsSectionProps {
+  topics: PersonalRetrospectiveTopic[]
+  form: UseChangedThoughtsReturn
+  onClose: () => void
+}
+
+/**
+ * 바뀐 나의 생각 섹션
+ *
+ * @description
+ * 각 토픽별로 핵심 쟁점 요약, 모임 전/후 내 의견을 입력하는 폼 섹션입니다.
+ * 모임 전 의견은 읽기 전용으로 표시되고, 모임 후 의견은 직접 작성합니다.
+ * 에러 표시 및 스크롤 처리는 상위 컴포넌트에서 담당합니다.
+ *
+ * @example
+ * ```tsx
+ * <ChangedThoughtsSection topics={topics} form={changedThoughtsForm} onClose={handleClose} />
+ * ```
+ */
+export default function ChangedThoughtsSection({
+  topics,
+  form,
+  onClose,
+}: ChangedThoughtsSectionProps) {
+  const { formValues, updateField, getPreOpinion } = form
+
+  return (
+    <section>
+      <div className="flex flex-col">
+        <Container className="gap-0">
+          <div className="flex justify-between items-center mb-large">
+            <h3 className="text-black typo-heading3">바뀐 나의 생각</h3>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-grey-400 hover:text-black transition-colors"
+              aria-label="바뀐 나의 생각 섹션 닫기"
+            >
+              <X className="size-6 text-grey-600 cursor-pointer" />
+            </button>
+          </div>
+          <div className="flex flex-col gap-xlarge">
+            {formValues.map((item) => {
+              return (
+                <div key={item.topicId}>
+                  <p className="text-black typo-subtitle3 mb-small">
+                    {topics.find((t) => t.topicId === item.topicId)?.topicName}
+                  </p>
+
+                  <Input
+                    placeholder="핵심 쟁점을 요약해주세요"
+                    value={item.coreSummary}
+                    onChange={(e) => updateField(item.topicId, 'coreSummary', e.target.value)}
+                    className="mb-medium"
+                  />
+
+                  {getPreOpinion(item.topicId) ? (
+                    <div className="grid grid-cols-2 gap-base">
+                      <div className="flex flex-col gap-tiny">
+                        <span className="text-grey-600 typo-body4">모임 전 내 의견</span>
+                        <Textarea
+                          value={getPreOpinion(item.topicId)}
+                          disabled
+                          height={160}
+                          className="bg-grey-200 text-black"
+                        />
+                      </div>
+                      <div className="flex flex-col gap-tiny">
+                        <span className="text-grey-600 typo-body4">모임 후 내 의견</span>
+                        <Textarea
+                          placeholder="감상문을 입력해주세요"
+                          value={item.postOpinion}
+                          onChange={(e) => updateField(item.topicId, 'postOpinion', e.target.value)}
+                          height={160}
+                        />
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col gap-xsmall">
+                      <span className="text-grey-600 typo-body4">변화된 나의 생각</span>
+                      <Textarea
+                        placeholder="감상문을 입력해주세요"
+                        value={item.postOpinion}
+                        onChange={(e) => updateField(item.topicId, 'postOpinion', e.target.value)}
+                        height={104}
+                      />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Container>
+      </div>
+    </section>
+  )
+}
diff --git a/src/features/retrospectives/personal/components/FreeRecordSection.tsx b/src/features/retrospectives/personal/components/FreeRecordSection.tsx
new file mode 100644
index 0000000..9d32197
--- /dev/null
+++ b/src/features/retrospectives/personal/components/FreeRecordSection.tsx
@@ -0,0 +1,97 @@
+import { Trash2, X } from 'lucide-react'
+
+import { Button, Container, Input, Textarea } from '@/shared/ui'
+
+import type { UseFreeRecordReturn } from '../hooks/useFreeRecord'
+
+export interface FreeRecordSectionProps {
+  form: UseFreeRecordReturn
+  showErrors: boolean
+  onClose: () => void
+}
+
+/**
+ * 자유 기록 섹션
+ *
+ * @description
+ * 자유롭게 기록을 남기는 동적 폼 섹션입니다.
+ * 제목+상세내용 항목을 동적으로 추가/삭제할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <FreeRecordSection form={freeRecordForm} showErrors={showErrors} />
+ * ```
+ */
+export default function FreeRecordSection({ form, showErrors, onClose }: FreeRecordSectionProps) {
+  const { entries, addEntry, removeEntry, updateEntry } = form
+
+  return (
+    <section>
+      <Container className="gap-[19px]">
+        <div className="flex justify-between items-center">
+          <h3 className="text-black typo-heading3">자유 기록</h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-grey-400 hover:text-black transition-colors"
+            aria-label="자유 기록 섹션 닫기"
+          >
+            <X className="size-6 text-grey-600 cursor-pointer" />
+          </button>
+        </div>
+        {entries.map((entry) => {
+          const isPartial = form.isEntryPartial(entry.id)
+          const titleError = showErrors && isPartial && entry.title.trim() === ''
+          const contentError = showErrors && isPartial && entry.content.trim() === ''
+
+          return (
+            <div
+              key={entry.id}
+              className="flex flex-col gap-small rounded-small bg-grey-100 border border-grey-300 p-medium"
+              {...(showErrors && isPartial ? { 'data-field-error': '' } : {})}
+            >
+              <div className="flex flex-col gap-tiny">
+                <span className="text-grey-600 typo-body4">제목</span>
+                <Input
+                  placeholder="제목을 작성해주세요"
+                  value={entry.title}
+                  onChange={(e) => updateEntry(entry.id, 'title', e.target.value)}
+                  error={titleError}
+                  errorMessage={titleError ? '내용을 입력해주세요' : undefined}
+                />
+              </div>
+              <div className="flex flex-col gap-tiny">
+                <span className="text-grey-600 typo-body4">상세 내용</span>
+                <Textarea
+                  placeholder="내용을 작성해주세요"
+                  value={entry.content}
+                  onChange={(e) => updateEntry(entry.id, 'content', e.target.value)}
+                  height={104}
+                  error={contentError}
+                  errorMessage={contentError ? '내용을 입력해주세요' : undefined}
+                />
+              </div>
+
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  className="text-grey-400 hover:text-accent-300 transition-colors"
+                  onClick={() => {
+                    removeEntry(entry.id)
+                    if (entries.length === 1) onClose()
+                  }}
+                  aria-label="항목 삭제"
+                >
+                  <Trash2 className="size-5" />
+                </button>
+              </div>
+            </div>
+          )
+        })}
+        <Button variant="secondary" outline onClick={addEntry}>
+          + 항목 추가하기
+        </Button>
+      </Container>
+    </section>
+  )
+}
diff --git a/src/features/retrospectives/personal/components/OthersPerspectiveSection.tsx b/src/features/retrospectives/personal/components/OthersPerspectiveSection.tsx
new file mode 100644
index 0000000..f3669f6
--- /dev/null
+++ b/src/features/retrospectives/personal/components/OthersPerspectiveSection.tsx
@@ -0,0 +1,173 @@
+import { Trash2, X } from 'lucide-react'
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Container,
+  Input,
+  Select,
+  Textarea,
+} from '@/shared/ui'
+
+import type { UseOthersPerspectiveReturn } from '../hooks/useOthersPerspective'
+import type {
+  PersonalRetrospectiveMember,
+  PersonalRetrospectiveTopic,
+} from '../personalRetrospective.types'
+
+export interface OthersPerspectiveSectionProps {
+  topics: PersonalRetrospectiveTopic[]
+  members: PersonalRetrospectiveMember[]
+  form: UseOthersPerspectiveReturn
+  showErrors: boolean
+  onClose: () => void
+}
+
+/**
+ * 타인의 관점 섹션
+ *
+ * @description
+ * 모임에서 들은 타인의 의견을 기록하는 동적 폼 섹션입니다.
+ * 관점 항목을 추가/삭제할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <OthersPerspectiveSection topics={topics} members={members} form={othersPerspectiveForm} showErrors={showErrors} />
+ * ```
+ */
+export default function OthersPerspectiveSection({
+  topics,
+  members,
+  form,
+  showErrors,
+  onClose,
+}: OthersPerspectiveSectionProps) {
+  const { items, addItem, removeItem, updateItem } = form
+
+  return (
+    <section>
+      <Container className="gap-large">
+        <div className="flex justify-between items-center">
+          <h3 className="text-black typo-heading3">타인의 관점</h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-grey-400 hover:text-black transition-colors"
+            aria-label="타인의 관점 섹션 닫기"
+          >
+            <X className="size-6 text-grey-600 cursor-pointer" />
+          </button>
+        </div>
+        {items.map((item) => {
+          const isPartial = form.isItemPartial(item.id)
+          const speakerError = showErrors && isPartial && item.speakerMemberId === null
+          const topicError = showErrors && isPartial && item.topicId === null
+          const opinionError = showErrors && isPartial && item.opinion.trim() === ''
+          const impactError = showErrors && isPartial && item.impact.trim() === ''
+
+          return (
+            <div
+              key={item.id}
+              className="flex flex-col gap-base rounded-small bg-grey-100 border border-grey-300 p-medium"
+              {...(showErrors && isPartial ? { 'data-field-error': '' } : {})}
+            >
+              <div className="flex flex-col gap-small">
+                <span className="text-grey-600 typo-body4">누가 말했나요?</span>
+                <Select
+                  placeholder="멤버를 선택하세요"
+                  className={`w-full md:max-w-full bg-white ${speakerError ? 'border-accent-300' : 'border-grey-300'}`}
+                  value={item.speakerMemberId?.toString() ?? ''}
+                  onValueChange={(v) => updateItem(item.id, 'speakerMemberId', Number(v))}
+                >
+                  {members.map((member) => (
+                    <Select.SelectItem
+                      key={member.meetingMemberId}
+                      value={member.meetingMemberId.toString()}
+                    >
+                      <span className="flex gap-small items-center">
+                        <Avatar className="size-8">
+                          <AvatarImage
+                            src={member.profileImage ?? undefined}
+                            alt={member.nickname}
+                          />
+                          <AvatarFallback>{member.nickname.slice(0, 1)}</AvatarFallback>
+                        </Avatar>
+                        {member.nickname}
+                      </span>
+                    </Select.SelectItem>
+                  ))}
+                </Select>
+                {speakerError && (
+                  <span className="typo-body6 text-accent-300">내용을 입력해주세요</span>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-small">
+                <span className="text-grey-600 typo-body4">어떤 주제에서 나온 의견인가요?</span>
+                <Select
+                  placeholder="주제를 선택하세요"
+                  className={`w-full md:max-w-full bg-white ${topicError ? 'border-accent-300' : 'border-grey-300'}`}
+                  value={item.topicId?.toString() ?? ''}
+                  onValueChange={(v) => updateItem(item.id, 'topicId', Number(v))}
+                >
+                  {topics.map((topic) => (
+                    <Select.SelectItem key={topic.topicId} value={topic.topicId.toString()}>
+                      {topic.topicName}
+                    </Select.SelectItem>
+                  ))}
+                </Select>
+                {topicError && (
+                  <span className="typo-body6 text-accent-300">내용을 입력해주세요</span>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-small">
+                <span className="text-grey-600 typo-body4">어떤 의견이었나요?</span>
+                <Input
+                  placeholder="의견의 내용을 작성해주세요"
+                  value={item.opinion}
+                  onChange={(e) => updateItem(item.id, 'opinion', e.target.value)}
+                  error={opinionError}
+                  errorMessage={opinionError ? '내용을 입력해주세요' : undefined}
+                />
+              </div>
+
+              <div className="flex flex-col gap-small">
+                <span className="text-grey-600 typo-body4">
+                  이 의견이 나에게 어떤 영향을 주었나요?
+                </span>
+                <Textarea
+                  placeholder="주제에 대해 구별되는 관점을 적어주세요"
+                  value={item.impact}
+                  onChange={(e) => updateItem(item.id, 'impact', e.target.value)}
+                  height={104}
+                  error={impactError}
+                  errorMessage={impactError ? '내용을 입력해주세요' : undefined}
+                />
+              </div>
+
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  className="text-grey-400 hover:text-accent-300 transition-colors"
+                  onClick={() => {
+                    removeItem(item.id)
+                    if (items.length === 1) onClose()
+                  }}
+                  aria-label="관점 삭제"
+                >
+                  <Trash2 className="size-5" />
+                </button>
+              </div>
+            </div>
+          )
+        })}
+        <Button type="button" variant="secondary" outline onClick={addItem}>
+          + 관점 추가하기
+        </Button>
+      </Container>
+    </section>
+  )
+}
diff --git a/src/features/retrospectives/personal/components/PersonalRetrospectiveContent.tsx b/src/features/retrospectives/personal/components/PersonalRetrospectiveContent.tsx
new file mode 100644
index 0000000..360cc55
--- /dev/null
+++ b/src/features/retrospectives/personal/components/PersonalRetrospectiveContent.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { Button, TextButton } from '@/shared/ui'
+
+import type { SectionKey } from '../hooks/usePersonalRetrospectiveForm'
+import type { UsePersonalRetrospectiveFormReturn } from '../hooks/usePersonalRetrospectiveForm'
+import type {
+  PersonalRetrospectiveMember,
+  PersonalRetrospectiveTopic,
+} from '../personalRetrospective.types'
+import ChangedThoughtsSection from './ChangedThoughtsSection'
+import FreeRecordSection from './FreeRecordSection'
+import OthersPerspectiveSection from './OthersPerspectiveSection'
+
+export interface PersonalRetrospectiveContentProps {
+  topics: PersonalRetrospectiveTopic[]
+  meetingMembers: PersonalRetrospectiveMember[]
+  form: UsePersonalRetrospectiveFormReturn
+}
+
+const SECTION_OPTIONS: { type: SectionKey; label: string }[] = [
+  { type: 'changedThoughts', label: '바뀐 나의 생각' },
+  { type: 'othersPerspective', label: '타인의 관점' },
+  { type: 'freeRecord', label: '자유 기록' },
+]
+
+/**
+ * 개인 회고 콘텐츠
+ *
+ * @description
+ * 개인 회고 페이지의 전체 콘텐츠를 렌더링합니다.
+ * 각 섹션은 X 버튼으로 닫을 수 있으며, '문항 추가하기' 드롭다운으로 다시 열 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <PersonalRetrospectiveContent topics={topics} meetingMembers={meetingMembers} form={form} />
+ * ```
+ */
+export default function PersonalRetrospectiveContent({
+  topics,
+  meetingMembers,
+  form,
+}: PersonalRetrospectiveContentProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const { sectionVisibility, showSection, hideSection } = form
+
+  const availableOptions = SECTION_OPTIONS.filter(({ type }) => !sectionVisibility[type])
+
+  const handleAddSection = (type: SectionKey) => {
+    showSection(type)
+    setIsDropdownOpen(false)
+  }
+
+  useEffect(() => {
+    if (form.scrollTrigger === 0) return
+    const firstError = containerRef.current?.querySelector('[data-field-error]')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, [form.scrollTrigger])
+
+  return (
+    <div className="flex flex-col gap-large pt-large pb-25" ref={containerRef}>
+      {/* 바뀐 나의 생각 */}
+      {sectionVisibility.changedThoughts && (
+        <ChangedThoughtsSection
+          topics={topics}
+          form={form.changedThoughts}
+          onClose={() => hideSection('changedThoughts')}
+        />
+      )}
+
+      {/* 타인의 관점 */}
+      {sectionVisibility.othersPerspective && (
+        <OthersPerspectiveSection
+          topics={topics}
+          members={meetingMembers}
+          form={form.othersPerspective}
+          showErrors={form.showErrors}
+          onClose={() => hideSection('othersPerspective')}
+        />
+      )}
+
+      {/* 자유 기록 */}
+      {sectionVisibility.freeRecord && (
+        <FreeRecordSection
+          form={form.freeRecord}
+          showErrors={form.showErrors}
+          onClose={() => hideSection('freeRecord')}
+        />
+      )}
+
+      {/* 문항 추가하기 */}
+      {availableOptions.length > 0 && (
+        <div className="relative">
+          <Button
+            variant="secondary"
+            outline
+            onClick={() => setIsDropdownOpen((prev) => !prev)}
+            className="w-full"
+          >
+            + 문항 추가하기
+          </Button>
+
+          {isDropdownOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setIsDropdownOpen(false)} />
+              <div className="flex flex-col py-tiny absolute top-full left-0 right-0 mt-base z-20 overflow-hidden rounded-base border border-grey-300 bg-white shadow-drop">
+                {availableOptions.map(({ type, label }) => (
+                  <TextButton
+                    key={type}
+                    onClick={() => handleAddSection(type)}
+                    className="px-base py-xsmall text-black"
+                  >
+                    {label}
+                  </TextButton>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/features/retrospectives/personal/components/PersonalRetrospectiveViewContent.tsx b/src/features/retrospectives/personal/components/PersonalRetrospectiveViewContent.tsx
new file mode 100644
index 0000000..efb1b5e
--- /dev/null
+++ b/src/features/retrospectives/personal/components/PersonalRetrospectiveViewContent.tsx
@@ -0,0 +1,245 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { ExcerptBlock } from '@/features/book'
+import { Division } from '@/shared/components/Division'
+import { cn } from '@/shared/lib/utils'
+
+import {
+  PERSONAL_RETRO_SECTION_IDS,
+  PERSONAL_RETRO_STICKY_OFFSET,
+} from '../personalRetrospective.constants'
+import type { GetPersonalRetrospectiveViewResponse } from '../personalRetrospective.types'
+
+export interface PersonalRetrospectiveViewContentProps {
+  data: GetPersonalRetrospectiveViewResponse
+}
+
+/**
+ * 개인 회고 뷰 콘텐츠
+ *
+ * @description
+ * 작성 완료된 개인 회고를 읽기 전용으로 표시합니다.
+ * 좌측 앵커 네비게이션을 통해 각 섹션으로 이동할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <PersonalRetrospectiveViewContent data={viewData} />
+ * ```
+ */
+export default function PersonalRetrospectiveViewContent({
+  data,
+}: PersonalRetrospectiveViewContentProps) {
+  const { changedThoughts, othersPerspectives, freeTexts } = data.retrospective
+  const [activeSection, setActiveSection] = useState<string | null>(null)
+
+  const anchors = useMemo(
+    () =>
+      [
+        changedThoughts.length > 0 && {
+          id: PERSONAL_RETRO_SECTION_IDS.changedThoughts,
+          label: '바뀐 나의 생각',
+        },
+        othersPerspectives.length > 0 && {
+          id: PERSONAL_RETRO_SECTION_IDS.othersPerspective,
+          label: '타인의 관점',
+        },
+        freeTexts.length > 0 && { id: PERSONAL_RETRO_SECTION_IDS.freeRecord, label: '자유 기록' },
+      ].filter(Boolean) as { id: string; label: string }[],
+    [changedThoughts.length, othersPerspectives.length, freeTexts.length]
+  )
+
+  useEffect(() => {
+    let timerId: ReturnType<typeof setTimeout> | null = null
+
+    const computeSection = () => {
+      let current: string | null = null
+      for (const { id } of anchors) {
+        const el = document.getElementById(id)
+        if (!el) continue
+        if (el.getBoundingClientRect().top <= PERSONAL_RETRO_STICKY_OFFSET) {
+          current = id
+        }
+      }
+      setActiveSection(current)
+    }
+
+    const handleScroll = () => {
+      if (timerId !== null) return
+      timerId = setTimeout(() => {
+        timerId = null
+        computeSection()
+      }, 100)
+    }
+
+    computeSection()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      if (timerId !== null) clearTimeout(timerId)
+    }
+  }, [anchors])
+
+  const scrollToSection = (id: string) => {
+    const el = document.getElementById(id)
+    if (!el) return
+    const top = el.getBoundingClientRect().top + window.scrollY - PERSONAL_RETRO_STICKY_OFFSET + 1
+    window.scrollTo({ top, behavior: 'smooth' })
+  }
+
+  return (
+    <div className="flex gap-[187.5px] pt-[22.5px] pb-25">
+      {/* 좌측 앵커 네비게이션 */}
+      {anchors.length > 0 && (
+        <nav className="hidden md:block w-[129px] shrink-0">
+          <div className="sticky sticky-retro-view-nav flex flex-col gap-large">
+            {anchors.map(({ id, label }) => {
+              const isActive = activeSection === id
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => scrollToSection(id)}
+                  className={cn(
+                    'pl-medium py-small text-left border-l-2 transition-colors cursor-pointer',
+                    isActive ? 'border-black' : 'border-transparent'
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'transition-colors typo-subtitle2',
+                      isActive ? 'text-black' : 'text-grey-700'
+                    )}
+                  >
+                    {label}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        </nav>
+      )}
+
+      {/* 우측 섹션 콘텐츠 */}
+      <div className="flex-1 flex flex-col gap-large min-w-0">
+        {/* 바뀐 나의 생각 */}
+        {changedThoughts.length > 0 && (
+          <section
+            id={PERSONAL_RETRO_SECTION_IDS.changedThoughts}
+            className="flex flex-col gap-medium"
+          >
+            <h3 className="text-black typo-heading3">바뀐 나의 생각</h3>
+            <div className="flex flex-col gap-xlarge">
+              {changedThoughts.map((item) => (
+                <div key={item.topicId} className="flex flex-col gap-medium">
+                  <div className="flex flex-col gap-base">
+                    <p className="text-black typo-subtitle2">{item.topicTitle}</p>
+                    {item.keyIssue && <p className="text-black typo-body1">{item.keyIssue}</p>}
+                  </div>
+
+                  {item.preOpinion && item.postOpinion ? (
+                    <div className="grid grid-cols-2 gap-base">
+                      <div className="flex flex-col gap-[14px]">
+                        <span className="text-grey-700 typo-body4">모임 전 내 의견</span>
+                        <div className="rounded-small bg-grey-200 px-medium py-base">
+                          <p className="text-grey-800 typo-body1 whitespace-pre-wrap">
+                            {item.preOpinion}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex flex-col gap-tiny">
+                        <span className="text-grey-600 typo-body4">모임 후 나의 생각</span>
+                        <div className="rounded-small px-medium py-base">
+                          <p className="text-black typo-body1 whitespace-pre-wrap">
+                            {item.postOpinion}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  ) : item.preOpinion ? (
+                    <div className="flex flex-col gap-tiny">
+                      <span className="text-grey-600 typo-body4">모임 전 내 의견</span>
+                      <div className="rounded-small bg-grey-200 border border-grey-300 p-medium">
+                        <p className="text-black typo-body3 whitespace-pre-wrap">
+                          {item.preOpinion}
+                        </p>
+                      </div>
+                    </div>
+                  ) : item.postOpinion ? (
+                    <div className="flex flex-col gap-xsmall">
+                      <span className="text-grey-600 typo-body4">모임 후 내 의견</span>
+                      <p className="text-black typo-body1 whitespace-pre-wrap">
+                        {item.postOpinion}
+                      </p>
+                    </div>
+                  ) : !item.keyIssue ? (
+                    <p className="text-grey-500 typo-body3">해당 기록이 없어요</p>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* 바뀐 나의 생각 → 타인의 관점/자유 기록 사이 구분선 */}
+        {changedThoughts.length > 0 && (othersPerspectives.length > 0 || freeTexts.length > 0) && (
+          <Division className="my-base" />
+        )}
+
+        {/* 타인의 관점 */}
+        {othersPerspectives.length > 0 && (
+          <section
+            id={PERSONAL_RETRO_SECTION_IDS.othersPerspective}
+            className="flex flex-col gap-medium"
+          >
+            <h3 className="text-black typo-heading3">타인의 관점</h3>
+            <div className="flex flex-col gap-xlarge">
+              {othersPerspectives.map((item) => (
+                <div
+                  key={`${item.topicId}-${item.meetingMemberId}`}
+                  className="flex flex-col gap-medium"
+                >
+                  <span className="text-black typo-subtitle2">{item.topicTitle}</span>
+                  <ExcerptBlock>
+                    <p className="text-grey-700 typo-body3 whitespace-pre-wrap">
+                      {item.opinionContent}
+                    </p>
+                    <span className="text-grey-600 typo-body5">{item.nickname}</span>
+                  </ExcerptBlock>
+
+                  {item.impressiveReason && (
+                    <p className="text-grey-700 typo-body3 whitespace-pre-wrap">
+                      {item.impressiveReason}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* 타인의 관점 → 자유 기록 사이 구분선 */}
+        {othersPerspectives.length > 0 && freeTexts.length > 0 && <Division className="my-base" />}
+
+        {/* 자유 기록 */}
+        {freeTexts.length > 0 && (
+          <section id={PERSONAL_RETRO_SECTION_IDS.freeRecord} className="flex flex-col gap-medium">
+            <h3 className="text-black typo-heading3">자유 기록</h3>
+            <div className="flex flex-col gap-medium">
+              {freeTexts.map((item) => (
+                <div
+                  key={`${item.title ?? ''}-${item.content ?? ''}`}
+                  className="flex flex-col gap-xsmall"
+                >
+                  {item.title && <p className="text-black typo-subtitle2">{item.title}</p>}
+                  {item.content && (
+                    <p className="text-black typo-body1 whitespace-pre-wrap">{item.content}</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/retrospectives/personal/components/index.ts b/src/features/retrospectives/personal/components/index.ts
new file mode 100644
index 0000000..d9dab87
--- /dev/null
+++ b/src/features/retrospectives/personal/components/index.ts
@@ -0,0 +1,5 @@
+export { default as ChangedThoughtsSection } from './ChangedThoughtsSection'
+export { default as FreeRecordSection } from './FreeRecordSection'
+export { default as OthersPerspectiveSection } from './OthersPerspectiveSection'
+export { default as PersonalRetrospectiveContent } from './PersonalRetrospectiveContent'
+export { default as PersonalRetrospectiveViewContent } from './PersonalRetrospectiveViewContent'
diff --git a/src/features/retrospectives/personal/hooks/index.ts b/src/features/retrospectives/personal/hooks/index.ts
new file mode 100644
index 0000000..bceccab
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/index.ts
@@ -0,0 +1,11 @@
+export * from './personalRetrospectiveQueryKeys'
+export * from './useChangedThoughts'
+export * from './useDeletePersonalRetrospective'
+export * from './useFreeRecord'
+export * from './useOthersPerspective'
+export * from './usePersonalRetrospective'
+export * from './usePersonalRetrospectiveEditForm'
+export * from './usePersonalRetrospectiveForm'
+export * from './usePersonalRetrospectiveView'
+export * from './useSavePersonalRetrospective'
+export * from './useUpdatePersonalRetrospective'
diff --git a/src/features/retrospectives/personal/hooks/personalRetrospectiveQueryKeys.ts b/src/features/retrospectives/personal/hooks/personalRetrospectiveQueryKeys.ts
new file mode 100644
index 0000000..ed14546
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/personalRetrospectiveQueryKeys.ts
@@ -0,0 +1,21 @@
+/**
+ * @file personalRetrospectiveQueryKeys.ts
+ * @description 개인 회고 관련 Query Key Factory
+ */
+
+import type { GetPersonalRetrospectiveParams } from '../personalRetrospective.types'
+
+export const personalRetrospectiveQueryKeys = {
+  all: ['personalRetrospectives'] as const,
+
+  details: () => [...personalRetrospectiveQueryKeys.all, 'detail'] as const,
+  detail: (params: GetPersonalRetrospectiveParams) =>
+    [...personalRetrospectiveQueryKeys.details(), params] as const,
+
+  views: () => [...personalRetrospectiveQueryKeys.all, 'view'] as const,
+  view: (meetingId: number) => [...personalRetrospectiveQueryKeys.views(), meetingId] as const,
+
+  editForms: () => [...personalRetrospectiveQueryKeys.all, 'editForm'] as const,
+  editForm: (meetingId: number) =>
+    [...personalRetrospectiveQueryKeys.editForms(), meetingId] as const,
+}
diff --git a/src/features/retrospectives/personal/hooks/useChangedThoughts.ts b/src/features/retrospectives/personal/hooks/useChangedThoughts.ts
new file mode 100644
index 0000000..ef40784
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/useChangedThoughts.ts
@@ -0,0 +1,75 @@
+/**
+ * @file useChangedThoughts.ts
+ * @description 바뀐 나의 생각 섹션 폼 상태 관리 훅
+ */
+
+import { useCallback, useState } from 'react'
+
+import type {
+  ChangedThoughtFormItem,
+  PersonalRetrospectivePreOpinion,
+  PersonalRetrospectiveTopic,
+} from '../personalRetrospective.types'
+
+type ChangedThoughtOverrides = Record<string, { coreSummary?: string; postOpinion?: string }>
+
+/**
+ * 바뀐 나의 생각 섹션 폼 상태 훅
+ *
+ * @description
+ * 토픽별로 핵심 쟁점 요약(coreSummary)과 모임 후 내 의견(postOpinion)을 관리합니다.
+ * 사용자가 변경한 값만 저장하고, 나머지는 빈 문자열을 기본값으로 사용합니다.
+ * 수정 모드에서는 initialOverrides를 통해 기존 저장값으로 초기화할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * const form = useChangedThoughts(topics, preOpinions)
+ * form.updateField(topicId, 'coreSummary', '핵심은...')
+ * ```
+ */
+export function useChangedThoughts(
+  topics: PersonalRetrospectiveTopic[],
+  preOpinions: PersonalRetrospectivePreOpinion[],
+  initialOverrides?: ChangedThoughtOverrides
+) {
+  const [overrides, setOverrides] = useState<ChangedThoughtOverrides>(initialOverrides ?? {})
+
+  const updateField = useCallback(
+    (topicId: number, field: 'coreSummary' | 'postOpinion', value: string) => {
+      setOverrides((prev) => ({
+        ...prev,
+        [topicId]: { ...prev[topicId], [field]: value },
+      }))
+    },
+    []
+  )
+
+  const getPreOpinion = useCallback(
+    (topicId: number) => preOpinions.find((p) => p.topicId === topicId)?.content ?? '',
+    [preOpinions]
+  )
+
+  const formValues: ChangedThoughtFormItem[] = topics.map((t) => ({
+    topicId: t.topicId,
+    coreSummary: overrides[t.topicId]?.coreSummary ?? '',
+    postOpinion: overrides[t.topicId]?.postOpinion ?? '',
+  }))
+
+  // coreSummary와 postOpinion은 각각 독립적인 선택 입력 항목입니다.
+  // 둘 중 하나만 입력하거나, 둘 다 비워도 유효한 상태이므로
+  // "부분 입력(partial input)" 개념이 존재하지 않아 항상 false로 고정합니다.
+  // (제출 시 두 필드가 모두 비어 있는 항목만 필터링됩니다.)
+  const hasPartialInput = false
+
+  const reset = useCallback(() => {
+    setOverrides({})
+  }, [])
+
+  const reinit = useCallback((overrides: ChangedThoughtOverrides) => {
+    setOverrides(overrides)
+  }, [])
+
+  return { formValues, updateField, getPreOpinion, hasPartialInput, reset, reinit }
+}
+
+export type UseChangedThoughtsReturn = ReturnType<typeof useChangedThoughts>
diff --git a/src/features/retrospectives/personal/hooks/useDeletePersonalRetrospective.ts b/src/features/retrospectives/personal/hooks/useDeletePersonalRetrospective.ts
new file mode 100644
index 0000000..809d94f
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/useDeletePersonalRetrospective.ts
@@ -0,0 +1,37 @@
+/**
+ * @file useDeletePersonalRetrospective.ts
+ * @description 개인 회고 삭제 mutation 훅
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { ApiError } from '@/api/errors'
+
+import { deletePersonalRetrospective } from '../personalRetrospective.api'
+import { personalRetrospectiveQueryKeys } from './personalRetrospectiveQueryKeys'
+
+/**
+ * 개인 회고 삭제 mutation 훅
+ *
+ * @description
+ * 작성된 개인 회고를 삭제합니다.
+ * 성공 시 해당 약속의 개인 회고 관련 캐시를 모두 무효화합니다.
+ *
+ * @example
+ * ```tsx
+ * const { mutate, isPending } = useDeletePersonalRetrospective()
+ * mutate(meetingId)
+ * ```
+ */
+export function useDeletePersonalRetrospective() {
+  const queryClient = useQueryClient()
+
+  return useMutation<void, ApiError, number>({
+    mutationFn: (meetingId) => deletePersonalRetrospective(meetingId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: personalRetrospectiveQueryKeys.all,
+      })
+    },
+  })
+}
diff --git a/src/features/retrospectives/personal/hooks/useFreeRecord.ts b/src/features/retrospectives/personal/hooks/useFreeRecord.ts
new file mode 100644
index 0000000..c40cc08
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/useFreeRecord.ts
@@ -0,0 +1,76 @@
+/**
+ * @file useFreeRecord.ts
+ * @description 자유 기록 섹션 폼 상태 관리 훅
+ */
+
+import { useCallback, useState } from 'react'
+
+import type { FreeRecordEntryFormItem } from '../personalRetrospective.types'
+
+function createEntry(): FreeRecordEntryFormItem {
+  return { id: crypto.randomUUID(), title: '', content: '' }
+}
+
+/**
+ * 자유 기록 섹션 폼 상태 훅
+ *
+ * @description
+ * 제목+상세내용 항목의 동적 추가/삭제/수정을 관리합니다.
+ * 수정 모드에서는 initialEntries를 통해 기존 저장값으로 초기화할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * const { entries, addEntry, removeEntry, updateEntry } = useFreeRecord()
+ * ```
+ */
+export function useFreeRecord(initialEntries?: FreeRecordEntryFormItem[]) {
+  const [entries, setEntries] = useState<FreeRecordEntryFormItem[]>(
+    initialEntries ?? [createEntry()]
+  )
+
+  const addEntry = useCallback(() => {
+    setEntries((prev) => [...prev, createEntry()])
+  }, [])
+
+  const removeEntry = useCallback((id: string) => {
+    setEntries((prev) => prev.filter((e) => e.id !== id))
+  }, [])
+
+  const updateEntry = useCallback((id: string, field: 'title' | 'content', value: string) => {
+    setEntries((prev) => prev.map((e) => (e.id === id ? { ...e, [field]: value } : e)))
+  }, [])
+
+  const isEntryPartial = useCallback(
+    (id: string) => {
+      const entry = entries.find((e) => e.id === id)
+      if (!entry) return false
+      const hasTitle = entry.title.trim() !== ''
+      const hasContent = entry.content.trim() !== ''
+      return hasTitle !== hasContent
+    },
+    [entries]
+  )
+
+  const hasPartialInput = entries.some((e) => (e.title.trim() !== '') !== (e.content.trim() !== ''))
+
+  const reset = useCallback(() => {
+    setEntries([createEntry()])
+  }, [])
+
+  const reinit = useCallback((entries: FreeRecordEntryFormItem[]) => {
+    setEntries(entries)
+  }, [])
+
+  return {
+    entries,
+    addEntry,
+    removeEntry,
+    updateEntry,
+    isEntryPartial,
+    hasPartialInput,
+    reset,
+    reinit,
+  }
+}
+
+export type UseFreeRecordReturn = ReturnType<typeof useFreeRecord>
diff --git a/src/features/retrospectives/personal/hooks/useOthersPerspective.ts b/src/features/retrospectives/personal/hooks/useOthersPerspective.ts
new file mode 100644
index 0000000..146c1e7
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/useOthersPerspective.ts
@@ -0,0 +1,90 @@
+/**
+ * @file useOthersPerspective.ts
+ * @description 타인의 관점 섹션 폼 상태 관리 훅
+ */
+
+import { useCallback, useState } from 'react'
+
+import type { OthersPerspectiveFormItem } from '../personalRetrospective.types'
+
+function createItem(): OthersPerspectiveFormItem {
+  return {
+    id: crypto.randomUUID(),
+    speakerMemberId: null,
+    topicId: null,
+    opinion: '',
+    impact: '',
+  }
+}
+
+function isPartialItem(item: OthersPerspectiveFormItem): boolean {
+  const hasAny =
+    item.speakerMemberId !== null ||
+    item.topicId !== null ||
+    item.opinion.trim() !== '' ||
+    item.impact.trim() !== ''
+  const hasAll =
+    item.speakerMemberId !== null &&
+    item.topicId !== null &&
+    item.opinion.trim() !== '' &&
+    item.impact.trim() !== ''
+  return hasAny && !hasAll
+}
+
+/**
+ * 타인의 관점 섹션 폼 상태 훅
+ *
+ * @description
+ * 관점 항목 동적 추가/삭제/수정을 관리합니다.
+ * 수정 모드에서는 initialItems를 통해 기존 저장값으로 초기화할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * const { items, addItem, removeItem, updateItem } = useOthersPerspective()
+ * ```
+ */
+export function useOthersPerspective(initialItems?: OthersPerspectiveFormItem[]) {
+  const [items, setItems] = useState<OthersPerspectiveFormItem[]>(initialItems ?? [])
+
+  const addItem = useCallback(() => {
+    setItems((prev) => [...prev, createItem()])
+  }, [])
+
+  const removeItem = useCallback((id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id))
+  }, [])
+
+  const updateItem = useCallback(
+    (
+      id: string,
+      field: keyof Omit<OthersPerspectiveFormItem, 'id'>,
+      value: string | number | null
+    ) => {
+      setItems((prev) => prev.map((item) => (item.id === id ? { ...item, [field]: value } : item)))
+    },
+    []
+  )
+
+  const isItemPartial = useCallback(
+    (id: string) => {
+      const item = items.find((i) => i.id === id)
+      if (!item) return false
+      return isPartialItem(item)
+    },
+    [items]
+  )
+
+  const hasPartialInput = items.some(isPartialItem)
+
+  const reset = useCallback(() => {
+    setItems([])
+  }, [])
+
+  const reinit = useCallback((items: OthersPerspectiveFormItem[]) => {
+    setItems(items)
+  }, [])
+
+  return { items, addItem, removeItem, updateItem, isItemPartial, hasPartialInput, reset, reinit }
+}
+
+export type UseOthersPerspectiveReturn = ReturnType<typeof useOthersPerspective>
diff --git a/src/features/retrospectives/personal/hooks/usePersonalRetrospective.ts b/src/features/retrospectives/personal/hooks/usePersonalRetrospective.ts
new file mode 100644
index 0000000..9e38d24
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/usePersonalRetrospective.ts
@@ -0,0 +1,48 @@
+/**
+ * @file usePersonalRetrospective.ts
+ * @description 개인 회고 조회 훅
+ */
+
+import { useQuery } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+
+import { getPersonalRetrospective } from '../personalRetrospective.api'
+import type {
+  GetPersonalRetrospectiveParams,
+  GetPersonalRetrospectiveResponse,
+} from '../personalRetrospective.types'
+import { personalRetrospectiveQueryKeys } from './personalRetrospectiveQueryKeys'
+
+/**
+ * 개인 회고 조회 훅
+ *
+ * @description
+ * TanStack Query를 사용하여 개인 회고 정보를 조회합니다.
+ * 모임명, 책 정보, 내 사전 의견, 확정된 토픽, 참여 멤버 목록을 포함합니다.
+ *
+ * @param params - 모임 ID와 약속 ID
+ *
+ * @returns TanStack Query 결과 객체
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = usePersonalRetrospective({ gatheringId: 1, meetingId: 2 })
+ * ```
+ */
+export const usePersonalRetrospective = (
+  params: GetPersonalRetrospectiveParams,
+  enabled = true
+) => {
+  const { gatheringId, meetingId } = params
+  const isValidParams =
+    !Number.isNaN(gatheringId) && gatheringId > 0 && !Number.isNaN(meetingId) && meetingId > 0
+
+  return useQuery<GetPersonalRetrospectiveResponse, ApiError>({
+    queryKey: personalRetrospectiveQueryKeys.detail(params),
+    queryFn: () => getPersonalRetrospective(params),
+    enabled: isValidParams && enabled,
+    staleTime: 10 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  })
+}
diff --git a/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveEditForm.ts b/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveEditForm.ts
new file mode 100644
index 0000000..eaf9bff
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveEditForm.ts
@@ -0,0 +1,38 @@
+/**
+ * @file usePersonalRetrospectiveEditForm.ts
+ * @description 개인 회고 수정 폼 조회 훅
+ */
+
+import { useQuery } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+
+import { getPersonalRetrospectiveEditForm } from '../personalRetrospective.api'
+import type { GetPersonalRetrospectiveEditFormResponse } from '../personalRetrospective.types'
+import { personalRetrospectiveQueryKeys } from './personalRetrospectiveQueryKeys'
+
+/**
+ * 개인 회고 수정 폼 조회 훅
+ *
+ * @description
+ * 수정 화면에 채워 넣을 기존 저장값을 조회합니다.
+ *
+ * @param meetingId - 약속 ID
+ * @param enabled - 쿼리 활성화 여부 (수정 모드일 때만 true)
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = usePersonalRetrospectiveEditForm(meetingId, isEditMode)
+ * ```
+ */
+export const usePersonalRetrospectiveEditForm = (meetingId: number, enabled: boolean) => {
+  const isValid = Number.isFinite(meetingId) && meetingId > 0
+
+  return useQuery<GetPersonalRetrospectiveEditFormResponse, ApiError>({
+    queryKey: personalRetrospectiveQueryKeys.editForm(meetingId),
+    queryFn: () => getPersonalRetrospectiveEditForm(meetingId),
+    enabled: isValid && enabled,
+    gcTime: 0,
+    staleTime: 0,
+  })
+}
diff --git a/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveForm.ts b/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveForm.ts
new file mode 100644
index 0000000..355229d
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveForm.ts
@@ -0,0 +1,236 @@
+/**
+ * @file usePersonalRetrospectiveForm.ts
+ * @description 개인 회고 작성/수정 폼 전체 상태를 관리하는 최상위 훅
+ */
+
+import { useEffect, useState } from 'react'
+
+import { ApiError } from '@/api/errors'
+
+import type {
+  GetPersonalRetrospectiveEditFormResponse,
+  PersonalRetrospectivePreOpinion,
+  PersonalRetrospectiveTopic,
+} from '../personalRetrospective.types'
+import { useChangedThoughts } from './useChangedThoughts'
+import { useFreeRecord } from './useFreeRecord'
+import { useOthersPerspective } from './useOthersPerspective'
+import { useSavePersonalRetrospective } from './useSavePersonalRetrospective'
+import { useUpdatePersonalRetrospective } from './useUpdatePersonalRetrospective'
+
+export type SectionKey = 'changedThoughts' | 'othersPerspective' | 'freeRecord'
+
+type UsePersonalRetrospectiveFormParams = {
+  meetingId: number
+  topics: PersonalRetrospectiveTopic[]
+  preOpinions: PersonalRetrospectivePreOpinion[]
+  mode?: 'create' | 'edit'
+  editFormData?: GetPersonalRetrospectiveEditFormResponse
+  onSuccess?: () => void
+  onError?: (error: ApiError) => void
+}
+
+/**
+ * 개인 회고 작성/수정 폼 전체 상태 훅
+ *
+ * @description
+ * 바뀐 나의 생각, 타인의 관점, 자유 기록 섹션의 폼 상태를 통합 관리합니다.
+ * 섹션별 가시성 제어(showSection/hideSection), 저장 핸들러를 제공합니다.
+ * 닫힌 섹션은 제출 시 빈 배열로 전송됩니다.
+ * mode가 'edit'이면 PUT API를 사용하고, editFormData로 기존값을 초기화합니다.
+ *
+ * @example
+ * ```tsx
+ * const form = usePersonalRetrospectiveForm({ meetingId, topics, preOpinions })
+ * <Button onClick={form.submit} disabled={form.isSubmitting}>작성 완료</Button>
+ * <PersonalRetrospectiveContent form={form} />
+ * ```
+ */
+export function usePersonalRetrospectiveForm({
+  meetingId,
+  topics,
+  preOpinions,
+  mode = 'create',
+  editFormData,
+  onSuccess,
+  onError,
+}: UsePersonalRetrospectiveFormParams) {
+  const isEditMode = mode === 'edit'
+
+  const initialChangedThoughtOverrides = editFormData
+    ? Object.fromEntries(
+        editFormData.retrospective.changedThoughts.map(({ topicId, keyIssue, postOpinion }) => [
+          topicId,
+          { coreSummary: keyIssue ?? '', postOpinion: postOpinion ?? '' },
+        ])
+      )
+    : undefined
+
+  const initialOthersPerspectiveItems = editFormData?.retrospective.othersPerspectives.map(
+    (item) => ({
+      id: crypto.randomUUID(),
+      speakerMemberId: item.meetingMemberId,
+      topicId: item.topicId,
+      opinion: item.opinionContent,
+      impact: item.impressiveReason,
+    })
+  )
+
+  const initialFreeRecordEntries = editFormData?.retrospective.freeTexts.map((entry) => ({
+    id: crypto.randomUUID(),
+    title: entry.title ?? '',
+    content: entry.content ?? '',
+  }))
+
+  const changedThoughts = useChangedThoughts(topics, preOpinions, initialChangedThoughtOverrides)
+  const othersPerspective = useOthersPerspective(initialOthersPerspectiveItems)
+  const freeRecord = useFreeRecord(initialFreeRecordEntries)
+  const { mutate: save, isPending: isSavePending } = useSavePersonalRetrospective()
+  const { mutate: update, isPending: isUpdatePending } = useUpdatePersonalRetrospective()
+  const [showErrors, setShowErrors] = useState(false)
+  const [scrollTrigger, setScrollTrigger] = useState(0)
+  // 사용자가 직접 토글한 섹션만 오버라이드로 관리, 나머지는 editFormData에서 파생
+  const [visibilityOverrides, setVisibilityOverrides] = useState<
+    Partial<Record<SectionKey, boolean>>
+  >({})
+
+  const sectionVisibility = {
+    changedThoughts: visibilityOverrides.changedThoughts ?? true,
+    othersPerspective:
+      visibilityOverrides.othersPerspective ??
+      (isEditMode ? (editFormData?.retrospective.othersPerspectives.length ?? 0) > 0 : false),
+    freeRecord:
+      visibilityOverrides.freeRecord ??
+      (isEditMode ? (editFormData?.retrospective.freeTexts.length ?? 0) > 0 : false),
+  }
+
+  // editFormData는 비동기로 로드되므로, 도착 시점에 폼 상태를 재초기화
+  useEffect(() => {
+    if (!editFormData) return
+
+    const {
+      changedThoughts: cts,
+      othersPerspectives: ops,
+      freeTexts: fts,
+    } = editFormData.retrospective
+
+    changedThoughts.reinit(
+      Object.fromEntries(
+        cts.map(({ topicId, keyIssue, postOpinion }) => [
+          topicId,
+          { coreSummary: keyIssue ?? '', postOpinion: postOpinion ?? '' },
+        ])
+      )
+    )
+    othersPerspective.reinit(
+      ops.map((item) => ({
+        id: crypto.randomUUID(),
+        speakerMemberId: item.meetingMemberId,
+        topicId: item.topicId,
+        opinion: item.opinionContent,
+        impact: item.impressiveReason,
+      }))
+    )
+    freeRecord.reinit(
+      fts.map((entry) => ({
+        id: crypto.randomUUID(),
+        title: entry.title ?? '',
+        content: entry.content ?? '',
+      }))
+    )
+  }, [editFormData]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const showSection = (section: SectionKey) => {
+    setVisibilityOverrides((prev) => ({ ...prev, [section]: true }))
+    if (section === 'othersPerspective' && othersPerspective.items.length === 0) {
+      othersPerspective.addItem()
+    }
+    if (section === 'freeRecord' && freeRecord.entries.length === 0) {
+      freeRecord.addEntry()
+    }
+  }
+
+  const hideSection = (section: SectionKey) => {
+    setVisibilityOverrides((prev) => ({ ...prev, [section]: false }))
+    if (section === 'changedThoughts') changedThoughts.reset()
+    if (section === 'othersPerspective') othersPerspective.reset()
+    if (section === 'freeRecord') freeRecord.reset()
+  }
+
+  const submit = () => {
+    if (isSavePending || isUpdatePending) return
+
+    const hasPartial =
+      (sectionVisibility.changedThoughts && changedThoughts.hasPartialInput) ||
+      (sectionVisibility.othersPerspective && othersPerspective.hasPartialInput) ||
+      (sectionVisibility.freeRecord && freeRecord.hasPartialInput)
+
+    if (hasPartial) {
+      setShowErrors(true)
+      setScrollTrigger((prev) => prev + 1)
+      return
+    }
+
+    const toNullable = (value: string) => value.trim() || null
+
+    const requestBody = {
+      changedThoughts: sectionVisibility.changedThoughts
+        ? changedThoughts.formValues
+            .filter(
+              ({ coreSummary, postOpinion }) =>
+                coreSummary.trim() !== '' || postOpinion.trim() !== ''
+            )
+            .map(({ topicId, coreSummary, postOpinion }) => ({
+              topicId,
+              keyIssue: toNullable(coreSummary),
+              postOpinion: toNullable(postOpinion),
+            }))
+        : [],
+      othersPerspectives: sectionVisibility.othersPerspective
+        ? othersPerspective.items
+            .filter(
+              (item) =>
+                item.speakerMemberId !== null &&
+                item.topicId !== null &&
+                item.opinion.trim() !== '' &&
+                item.impact.trim() !== ''
+            )
+            .map((item) => ({
+              topicId: item.topicId!,
+              meetingMemberId: item.speakerMemberId!,
+              opinionContent: item.opinion.trim(),
+              impressiveReason: item.impact.trim(),
+            }))
+        : [],
+      freeTexts: sectionVisibility.freeRecord
+        ? freeRecord.entries
+            .filter((entry) => entry.title.trim() !== '' || entry.content.trim() !== '')
+            .map(({ title, content }) => ({
+              title: toNullable(title),
+              content: toNullable(content),
+            }))
+        : [],
+    }
+
+    if (isEditMode) {
+      update({ meetingId, body: requestBody }, { onSuccess, onError })
+    } else {
+      save({ meetingId, body: requestBody }, { onSuccess, onError })
+    }
+  }
+
+  return {
+    changedThoughts,
+    othersPerspective,
+    freeRecord,
+    submit,
+    isSubmitting: isSavePending || isUpdatePending,
+    showErrors,
+    scrollTrigger,
+    sectionVisibility,
+    showSection,
+    hideSection,
+  }
+}
+
+export type UsePersonalRetrospectiveFormReturn = ReturnType<typeof usePersonalRetrospectiveForm>
diff --git a/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveView.ts b/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveView.ts
new file mode 100644
index 0000000..815121c
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/usePersonalRetrospectiveView.ts
@@ -0,0 +1,37 @@
+/**
+ * @file usePersonalRetrospectiveView.ts
+ * @description 개인 회고 뷰 조회 훅
+ */
+
+import { useQuery } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+
+import { getPersonalRetrospectiveView } from '../personalRetrospective.api'
+import type { GetPersonalRetrospectiveViewResponse } from '../personalRetrospective.types'
+import { personalRetrospectiveQueryKeys } from './personalRetrospectiveQueryKeys'
+
+/**
+ * 개인 회고 뷰 조회 훅
+ *
+ * @description
+ * 작성 완료된 개인 회고를 조회합니다. (바뀐 나의 생각, 타인의 관점, 자유 기록)
+ *
+ * @param meetingId - 약속 ID
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = usePersonalRetrospectiveView(meetingId)
+ * ```
+ */
+export const usePersonalRetrospectiveView = (meetingId: number) => {
+  const isValid = !Number.isNaN(meetingId) && meetingId > 0
+
+  return useQuery<GetPersonalRetrospectiveViewResponse, ApiError>({
+    queryKey: personalRetrospectiveQueryKeys.view(meetingId),
+    queryFn: () => getPersonalRetrospectiveView(meetingId),
+    enabled: isValid,
+    staleTime: 10 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  })
+}
diff --git a/src/features/retrospectives/personal/hooks/useSavePersonalRetrospective.ts b/src/features/retrospectives/personal/hooks/useSavePersonalRetrospective.ts
new file mode 100644
index 0000000..7ab4d7b
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/useSavePersonalRetrospective.ts
@@ -0,0 +1,29 @@
+/**
+ * @file useSavePersonalRetrospective.ts
+ * @description 개인 회고 저장 mutation 훅
+ */
+
+import { useMutation } from '@tanstack/react-query'
+
+import { ApiError } from '@/api/errors'
+
+import { savePersonalRetrospective } from '../personalRetrospective.api'
+import type { SavePersonalRetrospectiveParams } from '../personalRetrospective.types'
+
+/**
+ * 개인 회고 저장 mutation 훅
+ *
+ * @description
+ * 작성한 개인 회고를 서버에 저장합니다.
+ *
+ * @example
+ * ```tsx
+ * const { mutate, isPending } = useSavePersonalRetrospective()
+ * mutate({ meetingId, body })
+ * ```
+ */
+export function useSavePersonalRetrospective() {
+  return useMutation<void, ApiError, SavePersonalRetrospectiveParams>({
+    mutationFn: (params) => savePersonalRetrospective(params),
+  })
+}
diff --git a/src/features/retrospectives/personal/hooks/useUpdatePersonalRetrospective.ts b/src/features/retrospectives/personal/hooks/useUpdatePersonalRetrospective.ts
new file mode 100644
index 0000000..f4f7db8
--- /dev/null
+++ b/src/features/retrospectives/personal/hooks/useUpdatePersonalRetrospective.ts
@@ -0,0 +1,38 @@
+/**
+ * @file useUpdatePersonalRetrospective.ts
+ * @description 개인 회고 수정 mutation 훅
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { ApiError } from '@/api/errors'
+
+import { updatePersonalRetrospective } from '../personalRetrospective.api'
+import type { UpdatePersonalRetrospectiveParams } from '../personalRetrospective.types'
+import { personalRetrospectiveQueryKeys } from './personalRetrospectiveQueryKeys'
+
+/**
+ * 개인 회고 수정 mutation 훅
+ *
+ * @description
+ * 작성한 개인 회고를 서버에 수정(PUT)합니다.
+ * 성공 시 view 쿼리 캐시를 무효화하여 최신 데이터를 반영합니다.
+ *
+ * @example
+ * ```tsx
+ * const { mutate, isPending } = useUpdatePersonalRetrospective()
+ * mutate({ meetingId, body })
+ * ```
+ */
+export function useUpdatePersonalRetrospective() {
+  const queryClient = useQueryClient()
+
+  return useMutation<void, ApiError, UpdatePersonalRetrospectiveParams>({
+    mutationFn: (params) => updatePersonalRetrospective(params),
+    onSuccess: (_, { meetingId }) => {
+      queryClient.invalidateQueries({
+        queryKey: personalRetrospectiveQueryKeys.view(meetingId),
+      })
+    },
+  })
+}
diff --git a/src/features/retrospectives/personal/index.ts b/src/features/retrospectives/personal/index.ts
new file mode 100644
index 0000000..e43aa6d
--- /dev/null
+++ b/src/features/retrospectives/personal/index.ts
@@ -0,0 +1,29 @@
+// Components
+export * from './components'
+
+// Hooks
+export * from './hooks'
+
+// Types
+export type {
+  ChangedThoughtFormItem,
+  FreeRecordEntryFormItem,
+  GetPersonalRetrospectiveEditFormResponse,
+  GetPersonalRetrospectiveParams,
+  GetPersonalRetrospectiveResponse,
+  GetPersonalRetrospectiveViewResponse,
+  MeetingHeaderInfo,
+  OthersPerspectiveFormItem,
+  PersonalRetrospectiveMember,
+  PersonalRetrospectivePreOpinion,
+  PersonalRetrospectiveTopic,
+  PersonalRetrospectiveViewChangedThought,
+  PersonalRetrospectiveViewFreeText,
+  PersonalRetrospectiveViewOthersPerspective,
+  SaveChangedThoughtItem,
+  SaveFreeTextItem,
+  SaveOthersPerspectiveItem,
+  SavePersonalRetrospectiveParams,
+  SavePersonalRetrospectiveRequest,
+  UpdatePersonalRetrospectiveParams,
+} from './personalRetrospective.types'
diff --git a/src/features/retrospectives/personal/personalRetrospective.api.ts b/src/features/retrospectives/personal/personalRetrospective.api.ts
new file mode 100644
index 0000000..79f29d4
--- /dev/null
+++ b/src/features/retrospectives/personal/personalRetrospective.api.ts
@@ -0,0 +1,155 @@
+/**
+ * @file personalRetrospective.api.ts
+ * @description 개인 회고 API 요청 함수
+ */
+
+import { api } from '@/api/client'
+
+import { PERSONAL_RETROSPECTIVE_ENDPOINTS } from './personalRetrospective.endpoints'
+import {
+  getMockPersonalRetrospectiveDetail,
+  getMockPersonalRetrospectiveEditForm,
+  getMockPersonalRetrospectiveView,
+} from './personalRetrospective.mock'
+import type {
+  GetPersonalRetrospectiveEditFormResponse,
+  GetPersonalRetrospectiveParams,
+  GetPersonalRetrospectiveResponse,
+  GetPersonalRetrospectiveViewResponse,
+  SavePersonalRetrospectiveParams,
+  UpdatePersonalRetrospectiveParams,
+} from './personalRetrospective.types'
+
+/** 목데이터 사용 여부 플래그 */
+const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
+
+/**
+ * 개인 회고 조회
+ *
+ * @description
+ * 약속에 대한 개인 회고 정보를 조회합니다.
+ * 모임명, 책 정보, 내 사전 의견, 확정된 토픽, 참여 멤버 목록을 포함합니다.
+ *
+ * @param params - 모임 ID와 약속 ID
+ *
+ * @returns 개인 회고 응답 데이터
+ */
+export const getPersonalRetrospective = async ({
+  gatheringId,
+  meetingId,
+}: GetPersonalRetrospectiveParams): Promise<GetPersonalRetrospectiveResponse> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return getMockPersonalRetrospectiveDetail()
+  }
+
+  const data = await api.get<GetPersonalRetrospectiveResponse>(
+    PERSONAL_RETROSPECTIVE_ENDPOINTS.DETAIL(gatheringId, meetingId)
+  )
+
+  return {
+    ...data,
+    preOpinions: data.preOpinions ?? [],
+    topics: data.topics ?? [],
+    meetingMembers: data.meetingMembers ?? [],
+  }
+}
+
+/**
+ * 개인 회고 저장
+ *
+ * @description
+ * 작성한 개인 회고(바뀐 나의 생각, 타인의 관점, 자유 기록)를 저장합니다.
+ *
+ * @param params - 약속 ID와 요청 바디
+ */
+export const savePersonalRetrospective = async ({
+  meetingId,
+  body,
+}: SavePersonalRetrospectiveParams): Promise<void> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return
+  }
+
+  await api.post<void>(PERSONAL_RETROSPECTIVE_ENDPOINTS.SAVE(meetingId), body)
+}
+
+/**
+ * 개인 회고 뷰 조회
+ *
+ * @description
+ * 작성된 개인 회고를 조회합니다. (바뀐 나의 생각, 타인의 관점, 자유 기록)
+ *
+ * @param meetingId - 약속 ID
+ */
+export const getPersonalRetrospectiveView = async (
+  meetingId: number
+): Promise<GetPersonalRetrospectiveViewResponse> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return getMockPersonalRetrospectiveView()
+  }
+
+  return api.get<GetPersonalRetrospectiveViewResponse>(
+    PERSONAL_RETROSPECTIVE_ENDPOINTS.VIEW(meetingId)
+  )
+}
+
+/**
+ * 개인 회고 수정 폼 조회
+ *
+ * @description
+ * 수정 화면에 채워 넣을 기존 저장값을 조회합니다.
+ *
+ * @param meetingId - 약속 ID
+ */
+export const getPersonalRetrospectiveEditForm = async (
+  meetingId: number
+): Promise<GetPersonalRetrospectiveEditFormResponse> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return getMockPersonalRetrospectiveEditForm()
+  }
+
+  return api.get<GetPersonalRetrospectiveEditFormResponse>(
+    PERSONAL_RETROSPECTIVE_ENDPOINTS.EDIT_FORM(meetingId)
+  )
+}
+
+/**
+ * 개인 회고 수정
+ *
+ * @description
+ * 작성한 개인 회고(바뀐 나의 생각, 타인의 관점, 자유 기록)를 수정합니다.
+ *
+ * @param params - 약속 ID와 요청 바디
+ */
+export const updatePersonalRetrospective = async ({
+  meetingId,
+  body,
+}: UpdatePersonalRetrospectiveParams): Promise<void> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return
+  }
+
+  await api.put<void>(PERSONAL_RETROSPECTIVE_ENDPOINTS.UPDATE(meetingId), body)
+}
+
+/**
+ * 개인 회고 삭제
+ *
+ * @description
+ * 작성된 개인 회고를 삭제합니다.
+ *
+ * @param meetingId - 약속 ID
+ */
+export const deletePersonalRetrospective = async (meetingId: number): Promise<void> => {
+  if (USE_MOCK) {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    return
+  }
+
+  await api.delete<void>(PERSONAL_RETROSPECTIVE_ENDPOINTS.DELETE(meetingId))
+}
diff --git a/src/features/retrospectives/personal/personalRetrospective.constants.ts b/src/features/retrospectives/personal/personalRetrospective.constants.ts
new file mode 100644
index 0000000..08b5d9d
--- /dev/null
+++ b/src/features/retrospectives/personal/personalRetrospective.constants.ts
@@ -0,0 +1,8 @@
+export const PERSONAL_RETRO_SECTION_IDS = {
+  changedThoughts: 'changed-thoughts',
+  othersPerspective: 'others-perspective',
+  freeRecord: 'free-record',
+} as const
+
+/** sticky 헤더 높이: GNB(64) + SubPageHeader(59) + 페이지 헤더 바(65) + 패딩(24) */
+export const PERSONAL_RETRO_STICKY_OFFSET = 212
diff --git a/src/features/retrospectives/personal/personalRetrospective.endpoints.ts b/src/features/retrospectives/personal/personalRetrospective.endpoints.ts
new file mode 100644
index 0000000..88f500d
--- /dev/null
+++ b/src/features/retrospectives/personal/personalRetrospective.endpoints.ts
@@ -0,0 +1,18 @@
+import { API_PATHS } from '@/api'
+
+export const PERSONAL_RETROSPECTIVE_ENDPOINTS = {
+  // 개인 회고 조회 (GET /api/gatherings/{gatheringId}/meetings/{meetingId}/retrospective/personal)
+  DETAIL: (gatheringId: number, meetingId: number) =>
+    `${API_PATHS.GATHERINGS}/${gatheringId}/meetings/${meetingId}/retrospective/personal`,
+  // 개인 회고 저장 (POST /api/meetings/{meetingId}/retrospectives/personal)
+  SAVE: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/retrospectives/personal`,
+  // 개인 회고 뷰 조회 (GET /api/meetings/{meetingId}/retrospectives/personal)
+  VIEW: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/retrospectives/personal`,
+  // 개인 회고 수정 폼 조회 (GET /api/meetings/{meetingId}/retrospectives/personal/form/edit)
+  EDIT_FORM: (meetingId: number) =>
+    `${API_PATHS.MEETINGS}/${meetingId}/retrospectives/personal/form/edit`,
+  // 개인 회고 수정 (PUT /api/meetings/{meetingId}/retrospectives/personal)
+  UPDATE: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/retrospectives/personal`,
+  // 개인 회고 삭제 (DELETE /api/meetings/{meetingId}/retrospectives/personal)
+  DELETE: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/retrospectives/personal`,
+} as const
diff --git a/src/features/retrospectives/personal/personalRetrospective.mock.ts b/src/features/retrospectives/personal/personalRetrospective.mock.ts
new file mode 100644
index 0000000..d9f0c7c
--- /dev/null
+++ b/src/features/retrospectives/personal/personalRetrospective.mock.ts
@@ -0,0 +1,231 @@
+/**
+ * @file personalRetrospective.mock.ts
+ * @description 개인 회고 API 목데이터
+ */
+
+import type {
+  GetPersonalRetrospectiveEditFormResponse,
+  GetPersonalRetrospectiveResponse,
+  GetPersonalRetrospectiveViewResponse,
+} from './personalRetrospective.types'
+
+/**
+ * 개인 회고 조회 목데이터
+ */
+const mockPersonalRetrospectiveDetail: GetPersonalRetrospectiveResponse = {
+  meetingHeaderInfo: {
+    gatheringName: '책을 읽자',
+    bookTitle: '데미안',
+    bookAuthor: '헤르만 헤세',
+  },
+  meetingId: 1,
+  preOpinions: [
+    {
+      topicId: 1,
+      topicName: '가짜 욕망, 유사 욕망',
+      content: '사전 의견 내용입니다.',
+    },
+  ],
+  topics: [
+    {
+      topicId: 1,
+      topicName: '가짜 욕망, 유사 욕망',
+      confirmOrder: 1,
+    },
+    {
+      topicId: 2,
+      topicName: '선과 악',
+      confirmOrder: 2,
+    },
+  ],
+  meetingMembers: [
+    {
+      meetingMemberId: 10,
+      nickname: '독서왕',
+      profileImage: 'https://placehold.co/100x100/9ee2d1/FFFFFF?text=D',
+    },
+    {
+      meetingMemberId: 15,
+      nickname: '애옹',
+      profileImage: 'https://placehold.co/100x100/ffd9d9/FFFFFF?text=MEOW',
+    },
+  ],
+}
+
+/**
+ * 개인 회고 조회 목데이터 반환 함수
+ *
+ * @description
+ * 실제 API 호출을 시뮬레이션하여 개인 회고 목데이터를 반환합니다.
+ */
+export const getMockPersonalRetrospectiveDetail = (): GetPersonalRetrospectiveResponse => {
+  return mockPersonalRetrospectiveDetail
+}
+
+/**
+ * 개인 회고 뷰 조회 목데이터
+ *
+ * changedThoughts 는 바뀐 내 의견의 5가지 경우를 모두 포함합니다:
+ * 1. 모든 답변이 없는 경우 (keyIssue, preOpinion, postOpinion 모두 null)
+ * 2. 쟁점만 있는 경우 (keyIssue만 존재)
+ * 3. 모임 전 의견만 있는 경우 (preOpinion만 존재)
+ * 4. 모임 후 의견만 있는 경우 (postOpinion만 존재)
+ * 5. 모임 전·후 의견이 모두 있는 경우 (preOpinion + postOpinion)
+ */
+const mockPersonalRetrospectiveView: GetPersonalRetrospectiveViewResponse = {
+  retrospectiveId: 1,
+  meetingHeaderInfo: {
+    gatheringName: '책을 읽자',
+    bookTitle: '데미안',
+    bookAuthor: '헤르만 헤세',
+  },
+  retrospective: {
+    changedThoughts: [
+      {
+        // 케이스 1: 모든 답변이 없는 경우
+        topicId: 1,
+        topicTitle: '가짜 욕망, 유사 욕망',
+        keyIssue: null,
+        preOpinion: null,
+        postOpinion: null,
+      },
+      {
+        // 케이스 2: 쟁점만 있는 경우
+        topicId: 2,
+        topicTitle: '선과 악',
+        keyIssue: '선과 악은 고정된 개념이 아니라 시각에 따라 달라질 수 있다.',
+        preOpinion: null,
+        postOpinion: null,
+      },
+      {
+        // 케이스 3: 모임 전 의견만 있는 경우
+        topicId: 3,
+        topicTitle: '자아의 각성',
+        keyIssue: null,
+        preOpinion: '싱클레어가 자신의 내면을 발견하는 과정이 성장의 본질이라고 생각한다.',
+        postOpinion: null,
+      },
+      {
+        // 케이스 4: 모임 후 의견만 있는 경우
+        topicId: 4,
+        topicTitle: '아브락사스',
+        keyIssue: null,
+        preOpinion: null,
+        postOpinion: '선과 악을 초월한 존재라는 개념이 인간의 내면 갈등을 잘 표현한다고 느꼈다.',
+      },
+      {
+        // 케이스 5: 모임 전·후 의견이 모두 있는 경우
+        topicId: 5,
+        topicTitle: '새는 알을 깨고 나온다',
+        keyIssue: '성장은 안락함을 포기하는 용기에서 시작된다.',
+        preOpinion: '사람들은 대개 사회가 원하는 것을 자신이 원한다고 착각한다.',
+        postOpinion: '토론 후 욕망의 진정성에 대해 더 깊이 생각하게 되었다.',
+      },
+    ],
+    othersPerspectives: [
+      {
+        topicId: 2,
+        topicTitle: '선과 악',
+        meetingMemberId: 10,
+        profileImage: null,
+        nickname: '독서왕',
+        opinionContent:
+          '선과 악을 나눌 수 있느냐는 질문보다, 우리는 왜 그렇게 나누어 마음이 편해지는지를 더 봐야 하는 것 같아요.',
+        impressiveReason:
+          '기존에 선악을 당연히 구분할 수 있다고 생각했는데, 이 관점 덕분에 구분 자체를 의심하게 되었습니다.',
+      },
+      {
+        topicId: 4,
+        topicTitle: '아브락사스',
+        meetingMemberId: 120,
+        profileImage: null,
+        nickname: '애옹',
+        opinionContent:
+          '선과 악을 나눌 수 있느냐는 질문보다, 우리는 왜 그렇게 나누어 마음이 편해지는지를 더 봐야 하는 것 같아요.',
+        impressiveReason:
+          '기존에 선악을 당연히 구분할 수 있다고 생각했는데, 이 관점 덕분에 구분 자체를 의심하게 되었습니다.',
+      },
+    ],
+    freeTexts: [
+      {
+        title: '오늘의 한 줄',
+        content: '내가 진정으로 원하는 것이 무엇인지 다시 한번 생각해보는 계기가 되었다.',
+      },
+    ],
+  },
+}
+
+/**
+ * 개인 회고 뷰 조회 목데이터 반환 함수
+ */
+export const getMockPersonalRetrospectiveView = (): GetPersonalRetrospectiveViewResponse => {
+  return mockPersonalRetrospectiveView
+}
+
+/**
+ * 개인 회고 수정 폼 목데이터
+ */
+const mockPersonalRetrospectiveEditForm: GetPersonalRetrospectiveEditFormResponse = {
+  retrospectiveId: 1,
+  meetingHeaderInfo: {
+    gatheringName: '책을 읽자',
+    bookTitle: '데미안',
+    bookAuthor: '헤르만 헤세',
+  },
+  topics: [
+    {
+      topicId: 1,
+      topicName: '가짜 욕망, 유사 욕망',
+      confirmOrder: 1,
+    },
+    {
+      topicId: 2,
+      topicName: '선과 악',
+      confirmOrder: 2,
+    },
+  ],
+  meetingMembers: [
+    {
+      meetingMemberId: 10,
+      nickname: '독서왕',
+      profileImage: 'https://placehold.co/100x100/9ee2d1/FFFFFF?text=D',
+    },
+    {
+      meetingMemberId: 15,
+      nickname: '애옹',
+      profileImage: ' https://placehold.co/100x100/ffd9d9/FFFFFF?text=MEOW',
+    },
+  ],
+  retrospective: {
+    changedThoughts: [
+      {
+        topicId: 1,
+        keyIssue: '기존에 작성한 핵심 쟁점입니다.',
+        preOpinion: '기존에 작성한 사전 의견입니다.',
+        postOpinion: '기존에 작성한 모임 후 의견입니다.',
+      },
+    ],
+    othersPerspectives: [
+      {
+        topicId: 2,
+        meetingMemberId: 10,
+        opinionContent: '기존에 작성한 상대 의견입니다.',
+        impressiveReason: '기존에 작성한 인상적이었던 이유입니다.',
+      },
+    ],
+    freeTexts: [
+      {
+        title: '오늘의 한 줄',
+        content: '기존에 작성한 자유 기록 내용입니다.',
+      },
+    ],
+  },
+}
+
+/**
+ * 개인 회고 수정 폼 목데이터 반환 함수
+ */
+export const getMockPersonalRetrospectiveEditForm =
+  (): GetPersonalRetrospectiveEditFormResponse => {
+    return mockPersonalRetrospectiveEditForm
+  }
diff --git a/src/features/retrospectives/personal/personalRetrospective.types.ts b/src/features/retrospectives/personal/personalRetrospective.types.ts
new file mode 100644
index 0000000..4d4c8da
--- /dev/null
+++ b/src/features/retrospectives/personal/personalRetrospective.types.ts
@@ -0,0 +1,259 @@
+/**
+ * @file personalRetrospective.types.ts
+ * @description 개인 회고 API 관련 타입 정의
+ */
+
+/**
+ * 개인 회고 - 사전 의견 항목
+ */
+export type PersonalRetrospectivePreOpinion = {
+  /** 주제 ID */
+  topicId: number
+  /** 주제 이름 */
+  topicName: string
+  /** 작성한 사전 의견 내용 */
+  content: string
+}
+
+/**
+ * 개인 회고 - 확정된 토픽 항목
+ */
+export type PersonalRetrospectiveTopic = {
+  /** 주제 ID */
+  topicId: number
+  /** 주제 이름 */
+  topicName: string
+  /** 확정 순서 */
+  confirmOrder: number
+}
+
+/**
+ * 개인 회고 - 모임 멤버 항목
+ */
+export type PersonalRetrospectiveMember = {
+  /** 모임 멤버 ID */
+  meetingMemberId: number
+  /** 닉네임 */
+  nickname: string
+  /** 프로필 이미지 URL */
+  profileImage: string | null
+}
+
+/**
+ * 개인 회고 조회 요청 파라미터
+ */
+export type GetPersonalRetrospectiveParams = {
+  /** 모임 ID */
+  gatheringId: number
+  /** 약속 ID */
+  meetingId: number
+}
+
+// ─── 개인 회고 작성 폼 타입 ───────────────────────────────────────────────────
+
+/**
+ * 바뀐 나의 생각 - 토픽별 폼 항목
+ */
+export type ChangedThoughtFormItem = {
+  topicId: number
+  /** 핵심 쟁점 요약 */
+  coreSummary: string
+  /** 모임 후 내 의견 */
+  postOpinion: string
+}
+
+/**
+ * 타인의 관점 - 동적 목록 항목
+ */
+export type OthersPerspectiveFormItem = {
+  /** 로컬 식별 ID */
+  id: string
+  /** 발언자 멤버 ID */
+  speakerMemberId: number | null
+  /** 관련 토픽 ID */
+  topicId: number | null
+  /** 어떤 의견이었나요 */
+  opinion: string
+  /** 나에게 어떤 영향을 주었나요 */
+  impact: string
+}
+
+/**
+ * 자유 기록 - 항목 (title + content 쌍)
+ */
+export type FreeRecordEntryFormItem = {
+  /** 로컬 식별 ID */
+  id: string
+  title: string
+  content: string
+}
+
+// ─── 개인 회고 저장 API 타입 ──────────────────────────────────────────────────
+
+/**
+ * 개인 회고 저장 요청 - 바뀐 나의 생각 항목
+ */
+export type SaveChangedThoughtItem = {
+  topicId: number
+  /** 핵심 쟁점 요약 (미입력 시 null) */
+  keyIssue: string | null
+  /** 모임 후 내 의견 (미입력 시 null) */
+  postOpinion: string | null
+}
+
+/**
+ * 개인 회고 저장 요청 - 타인의 관점 항목
+ */
+export type SaveOthersPerspectiveItem = {
+  topicId: number
+  meetingMemberId: number
+  /** 상대 의견 내용 */
+  opinionContent: string
+  /** 인상적이었던 이유 */
+  impressiveReason: string
+}
+
+/**
+ * 개인 회고 저장 요청 - 자유 기록 항목
+ */
+export type SaveFreeTextItem = {
+  /** 제목 (미입력 시 null) */
+  title: string | null
+  /** 내용 (미입력 시 null) */
+  content: string | null
+}
+
+/**
+ * 개인 회고 저장 요청 바디
+ */
+export type SavePersonalRetrospectiveRequest = {
+  changedThoughts: SaveChangedThoughtItem[]
+  othersPerspectives: SaveOthersPerspectiveItem[]
+  freeTexts: SaveFreeTextItem[]
+}
+
+/**
+ * 개인 회고 저장 요청 파라미터
+ */
+export type SavePersonalRetrospectiveParams = {
+  meetingId: number
+  body: SavePersonalRetrospectiveRequest
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * 개인 회고 조회 응답 - 모임 헤더 정보
+ */
+export type MeetingHeaderInfo = {
+  /** 모임 이름 */
+  gatheringName: string
+  /** 책 제목 */
+  bookTitle: string
+  /** 저자 */
+  bookAuthor: string
+}
+
+/**
+ * 개인 회고 조회 응답 타입
+ */
+export type GetPersonalRetrospectiveResponse = {
+  /** 모임 헤더 정보 */
+  meetingHeaderInfo: MeetingHeaderInfo
+  /** 약속 ID */
+  meetingId: number
+  /** 내 사전 의견 목록 */
+  preOpinions: PersonalRetrospectivePreOpinion[]
+  /** 확정된 토픽 목록 */
+  topics: PersonalRetrospectiveTopic[]
+  /** 약속 참여 멤버 목록 */
+  meetingMembers: PersonalRetrospectiveMember[]
+}
+
+// ─── 개인 회고 뷰(조회) API 타입 ─────────────────────────────────────────────
+
+/**
+ * 개인 회고 뷰 - 바뀐 나의 생각 항목
+ */
+export type PersonalRetrospectiveViewChangedThought = {
+  topicId: number
+  topicTitle: string
+  keyIssue: string | null
+  preOpinion: string | null
+  postOpinion: string | null
+}
+
+/**
+ * 개인 회고 뷰 - 타인의 관점 항목
+ */
+export type PersonalRetrospectiveViewOthersPerspective = {
+  topicId: number
+  topicTitle: string
+  meetingMemberId: number
+  profileImage: string | null
+  nickname: string
+  opinionContent: string
+  impressiveReason: string
+}
+
+/**
+ * 개인 회고 뷰 - 자유 기록 항목
+ */
+export type PersonalRetrospectiveViewFreeText = {
+  title: string | null
+  content: string | null
+}
+
+/**
+ * 개인 회고 뷰 조회 응답 타입
+ */
+export type GetPersonalRetrospectiveViewResponse = {
+  retrospectiveId: number
+  meetingHeaderInfo: MeetingHeaderInfo
+  retrospective: {
+    changedThoughts: PersonalRetrospectiveViewChangedThought[]
+    othersPerspectives: PersonalRetrospectiveViewOthersPerspective[]
+    freeTexts: PersonalRetrospectiveViewFreeText[]
+  }
+}
+
+// ─── 개인 회고 수정 API 타입 ──────────────────────────────────────────────────
+
+/**
+ * 개인 회고 수정 폼 조회 응답 타입
+ *
+ * @description
+ * 수정 화면에 기존 저장값을 채워 넣기 위해 사용됩니다.
+ */
+export type GetPersonalRetrospectiveEditFormResponse = {
+  retrospectiveId: number
+  meetingHeaderInfo: MeetingHeaderInfo
+  topics: PersonalRetrospectiveTopic[]
+  meetingMembers: PersonalRetrospectiveMember[]
+  retrospective: {
+    changedThoughts: {
+      topicId: number
+      keyIssue: string | null
+      preOpinion: string | null
+      postOpinion: string | null
+    }[]
+    othersPerspectives: {
+      topicId: number
+      meetingMemberId: number
+      opinionContent: string
+      impressiveReason: string
+    }[]
+    freeTexts: {
+      title: string | null
+      content: string | null
+    }[]
+  }
+}
+
+/**
+ * 개인 회고 수정 요청 파라미터
+ */
+export type UpdatePersonalRetrospectiveParams = {
+  meetingId: number
+  body: SavePersonalRetrospectiveRequest
+}
diff --git a/src/pages/Retrospectives/index.ts b/src/pages/Retrospectives/index.ts
index 1fa9ac1..e1feb65 100644
--- a/src/pages/Retrospectives/index.ts
+++ b/src/pages/Retrospectives/index.ts
@@ -1,3 +1,4 @@
 export { default as MeetingRetrospectiveCreatePage } from './MeetingRetrospectiveCreatePage'
 export { default as MeetingRetrospectiveDetailPage } from './MeetingRetrospectiveDetailPage'
 export { default as MeetingRetrospectivePage } from './MeetingRetrospectivePage'
+export * from './personal'
diff --git a/src/pages/Retrospectives/personal/PersonalRetrospectivePage.tsx b/src/pages/Retrospectives/personal/PersonalRetrospectivePage.tsx
new file mode 100644
index 0000000..a31f6dc
--- /dev/null
+++ b/src/pages/Retrospectives/personal/PersonalRetrospectivePage.tsx
@@ -0,0 +1,138 @@
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+
+import {
+  PersonalRetrospectiveContent,
+  usePersonalRetrospective,
+  usePersonalRetrospectiveEditForm,
+  usePersonalRetrospectiveForm,
+} from '@/features/retrospectives'
+import SubPageHeader from '@/shared/components/SubPageHeader'
+import { ROUTES } from '@/shared/constants'
+import { useScrollShadow } from '@/shared/hooks'
+import { showToast } from '@/shared/lib/toast'
+import { cn } from '@/shared/lib/utils'
+import { Button, Spinner } from '@/shared/ui'
+import { useGlobalModalStore } from '@/store'
+
+export default function PersonalRetrospectivePage() {
+  const isScrolled = useScrollShadow()
+  const { gatheringId: gatheringIdParam, meetingId: meetingIdParam } = useParams<{
+    gatheringId: string
+    meetingId: string
+  }>()
+  const [searchParams] = useSearchParams()
+  const isEditMode = searchParams.get('mode') === 'edit'
+
+  const gatheringId = Number(gatheringIdParam)
+  const meetingId = Number(meetingIdParam)
+
+  const navigate = useNavigate()
+  const { openError } = useGlobalModalStore()
+
+  // 작성 모드: 작성 폼 API만 호출
+  const { data, isLoading, isError } = usePersonalRetrospective(
+    { gatheringId, meetingId },
+    !isEditMode
+  )
+
+  // 수정 모드: 수정 폼 API만 호출
+  const {
+    data: editFormData,
+    isLoading: isEditFormLoading,
+    isError: isEditFormError,
+  } = usePersonalRetrospectiveEditForm(meetingId, isEditMode)
+
+  const activeData = isEditMode ? editFormData : data
+  const isDataReady = !!activeData
+  const isAnyLoading = isEditMode ? isEditFormLoading : isLoading
+  const isAnyError = isEditMode ? isEditFormError : isError
+
+  // 수정 모드에서는 edit form의 retrospective.changedThoughts에 저장된 preOpinion을 사용
+  const preOpinions = isEditMode
+    ? (editFormData?.retrospective.changedThoughts ?? [])
+        .filter((ct) => ct.preOpinion !== null)
+        .map((ct) => ({
+          topicId: ct.topicId,
+          topicName: editFormData?.topics.find((t) => t.topicId === ct.topicId)?.topicName ?? '',
+          content: ct.preOpinion!,
+        }))
+    : (data?.preOpinions ?? [])
+
+  const form = usePersonalRetrospectiveForm({
+    meetingId,
+    topics: activeData?.topics ?? [],
+    preOpinions,
+    mode: isEditMode ? 'edit' : 'create',
+    editFormData: isEditMode ? editFormData : undefined,
+    onSuccess: () => {
+      showToast(isEditMode ? '개인 회고가 수정되었습니다.' : '개인 회고가 저장되었습니다.')
+      navigate(ROUTES.PERSONAL_RETROSPECTIVE_VIEW(gatheringId, meetingId), { replace: true })
+    },
+    onError: (error) => {
+      openError(isEditMode ? '수정 실패' : '저장 실패', error.userMessage)
+    },
+  })
+
+  if (!gatheringIdParam || !meetingIdParam) return null
+
+  return (
+    <div className="flex flex-col min-h-[calc(100vh-var(--spacing-gnb-height))]">
+      <SubPageHeader
+        label={activeData?.meetingHeaderInfo.gatheringName ?? ''}
+        to={ROUTES.GATHERING_DETAIL(gatheringIdParam)}
+        disableShadow
+      />
+
+      <div
+        className={cn(
+          'sticky sticky-below-subheader z-30 bg-white transition-shadow',
+          isScrolled && 'shadow-drop-bottom'
+        )}
+      >
+        <div className="mx-auto max-w-layout-max px-layout-padding w-full">
+          <div className="flex justify-between items-center h-16.25">
+            <div className="flex flex-col gap-xtiny">
+              <h3 className="text-black typo-heading3">개인 회고</h3>
+              <p className="typo-caption1 text-grey-600">
+                {activeData?.meetingHeaderInfo.bookTitle} ·{' '}
+                {activeData?.meetingHeaderInfo.bookAuthor}
+              </p>
+            </div>
+            <Button
+              onClick={(e) => {
+                e.currentTarget.blur()
+                if (!isDataReady || isAnyLoading || isAnyError) return
+                form.submit()
+              }}
+              disabled={form.isSubmitting || isAnyLoading || isAnyError || !isDataReady}
+            >
+              작성 완료
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 bg-grey-100 pb-large">
+        <div className="mx-auto max-w-layout-max px-layout-padding">
+          {isAnyLoading && (
+            <div className="flex justify-center py-xlarge">
+              <Spinner />
+            </div>
+          )}
+
+          {isAnyError && (
+            <p className="text-grey-400 typo-body3">개인 회고 정보를 불러오지 못했습니다.</p>
+          )}
+
+          {isDataReady && (
+            <PersonalRetrospectiveContent
+              topics={activeData?.topics ?? []}
+              meetingMembers={activeData?.meetingMembers ?? []}
+              form={form}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/Retrospectives/personal/PersonalRetrospectiveViewPage.tsx b/src/pages/Retrospectives/personal/PersonalRetrospectiveViewPage.tsx
new file mode 100644
index 0000000..a01bae5
--- /dev/null
+++ b/src/pages/Retrospectives/personal/PersonalRetrospectiveViewPage.tsx
@@ -0,0 +1,111 @@
+import { useNavigate, useParams } from 'react-router-dom'
+
+import {
+  PersonalRetrospectiveViewContent,
+  useDeletePersonalRetrospective,
+  usePersonalRetrospectiveView,
+} from '@/features/retrospectives'
+import SubPageHeader from '@/shared/components/SubPageHeader'
+import { ROUTES } from '@/shared/constants'
+import { useScrollShadow } from '@/shared/hooks'
+import { cn } from '@/shared/lib/utils'
+import { Button, Spinner, TextButton } from '@/shared/ui'
+import { useGlobalModalStore } from '@/store'
+
+export default function PersonalRetrospectiveViewPage() {
+  const isScrolled = useScrollShadow()
+  const { gatheringId: gatheringIdParam, meetingId: meetingIdParam } = useParams<{
+    gatheringId: string
+    meetingId: string
+  }>()
+
+  const gatheringId = Number(gatheringIdParam)
+  const meetingId = Number(meetingIdParam)
+
+  const isValidIds =
+    Number.isFinite(gatheringId) && gatheringId > 0 && Number.isFinite(meetingId) && meetingId > 0
+
+  const navigate = useNavigate()
+  const { openConfirm, openError } = useGlobalModalStore()
+  const { data, isLoading, isError } = usePersonalRetrospectiveView(isValidIds ? meetingId : -1)
+  const { mutate: deleteRetrospective, isPending: isDeleting } = useDeletePersonalRetrospective()
+
+  if (!isValidIds) return null
+
+  const handleDelete = async () => {
+    const confirmed = await openConfirm('개인 회고 삭제', '작성한 개인 회고를 삭제하시겠습니까?', {
+      confirmText: '삭제',
+      variant: 'danger',
+    })
+    if (!confirmed) return
+
+    deleteRetrospective(meetingId, {
+      onSuccess: () => {
+        navigate(ROUTES.GATHERING_DETAIL(gatheringId), { replace: true })
+      },
+      onError: (error) => {
+        openError('삭제 실패', error.userMessage)
+      },
+    })
+  }
+
+  const handleEdit = () => {
+    navigate(`${ROUTES.PERSONAL_RETROSPECTIVE(gatheringId, meetingId)}?mode=edit`)
+  }
+
+  return (
+    <div className="flex flex-col min-h-[calc(100vh-var(--spacing-gnb-height))]">
+      <SubPageHeader
+        label={data?.meetingHeaderInfo.gatheringName ?? ''}
+        to={ROUTES.GATHERING_DETAIL(gatheringId)}
+        disableShadow
+      />
+
+      <div
+        className={cn(
+          'sticky sticky-below-subheader z-30 bg-white transition-shadow',
+          isScrolled && 'shadow-drop-bottom'
+        )}
+      >
+        <div className="mx-auto max-w-layout-max px-layout-padding w-full">
+          <div className="flex justify-between items-center h-16.25">
+            <div className="flex flex-col gap-xtiny">
+              <h3 className="text-black typo-heading3">개인 회고</h3>
+              {data && (
+                <p className="typo-caption1 text-grey-600">
+                  {data?.meetingHeaderInfo.bookTitle} · {data?.meetingHeaderInfo.bookAuthor}
+                </p>
+              )}
+            </div>
+            <div className="flex items-center gap-medium">
+              <TextButton onClick={handleDelete} disabled={isDeleting}>
+                삭제하기
+              </TextButton>
+              <Button variant="secondary" outline onClick={handleEdit}>
+                수정하기
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 pb-large">
+        <div className="mx-auto max-w-layout-max px-layout-padding">
+          {isLoading && (
+            <div className="flex justify-center py-xlarge">
+              <Spinner />
+            </div>
+          )}
+
+          {isError && (
+            <p className="text-grey-400 typo-body3 pt-large">
+              개인 회고 정보를 불러오지 못했습니다.
+            </p>
+          )}
+
+          {data && <PersonalRetrospectiveViewContent data={data} />}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/Retrospectives/personal/index.ts b/src/pages/Retrospectives/personal/index.ts
new file mode 100644
index 0000000..577dd40
--- /dev/null
+++ b/src/pages/Retrospectives/personal/index.ts
@@ -0,0 +1,2 @@
+export { default as PersonalRetrospectivePage } from './PersonalRetrospectivePage'
+export { default as PersonalRetrospectiveViewPage } from './PersonalRetrospectiveViewPage'
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index d3f9997..c65985f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -20,6 +20,8 @@ import {
   MeetingRetrospectivePage,
   MeetingSettingPage,
   OnboardingPage,
+  PersonalRetrospectivePage,
+  PersonalRetrospectiveViewPage,
   PreOpinionListPage,
   PreOpinionWritePage,
   RecordListPage,
@@ -112,6 +114,14 @@ export const router = createBrowserRouter([
                 path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/retrospective/create`,
                 element: <MeetingRetrospectiveCreatePage />,
               },
+              {
+                path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/retrospective/personal`,
+                element: <PersonalRetrospectivePage />,
+              },
+              {
+                path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/retrospective/personal/view`,
+                element: <PersonalRetrospectiveViewPage />,
+              },
               {
                 path: `${ROUTES.GATHERINGS}/:gatheringId/meetings/:meetingId/retrospective/detail`,
                 element: <MeetingRetrospectiveDetailPage />,
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index 477291c..49aa2fd 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -50,6 +50,12 @@ export const ROUTES = {
   MEETING_RETROSPECTIVE_DETAIL: (gatheringId: number | string, meetingId: number | string) =>
     `/gatherings/${gatheringId}/meetings/${meetingId}/retrospective/detail`,
 
+  // Retrospectives (개인 회고)
+  PERSONAL_RETROSPECTIVE: (gatheringId: number | string, meetingId: number | string) =>
+    `/gatherings/${gatheringId}/meetings/${meetingId}/retrospective/personal`,
+  PERSONAL_RETROSPECTIVE_VIEW: (gatheringId: number | string, meetingId: number | string) =>
+    `/gatherings/${gatheringId}/meetings/${meetingId}/retrospective/personal/view`,
+
   // Records
   RECORDS: '/records',
   RECORD_DETAIL: (id: number | string) => `/records/${id}`,
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index bd2958f..83224d7 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -115,6 +115,7 @@
   --spacing-landing-max: 1340px;
   --spacing-layout-padding: 120px;
   --spacing-gnb-height: 64px;
+  --spacing-sub-page-header-height: 59px;
 
   /* font-size tokens */
   --text-heading1: 36px;
@@ -243,3 +244,13 @@
   /* 아래쪽에만 그림자 (sticky 헤더용) */
   box-shadow: 0 4px 8px -4px rgba(17, 17, 17, 0.08);
 }
+
+@utility sticky-below-subheader {
+  /* GNB + SubPageHeader */
+  top: calc(var(--spacing-gnb-height) + var(--spacing-sub-page-header-height));
+}
+
+@utility sticky-retro-view-nav {
+  /* GNB + SubPageHeader + 페이지 헤더 바(65px) + 패딩(24px) */
+  top: calc(var(--spacing-gnb-height) + var(--spacing-sub-page-header-height) + 65px + 24px);
+}