[FEAT-3] 입력 form 미리보기 구현

src/components/common/skeleton.tsx

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react'
+
+type SkeletonProps = {
+  height?: number
+  width?: string | number
+}
+
+export function Skeleton({ height = 14, width = '100%' }: SkeletonProps) {
+  return (
+    <span
+      css={(t) => css`
+        display: inline-block;
+        width: ${width};
+        height: ${height}px;
+        border-radius: ${t.radius.sm}px;
+        background: ${t.color.border};
+      `}
+    />
+  )
+}

src/components/stepper/step-footer.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/common/button'
-import { footerBar } from '@/styles/form-styles'
+import { footerStyle } from '@/styles/step-styles'
 
 import type { StepActions, StepState } from '@/features/book-form/hooks/use-multi-step-form'
 
@@ -19,7 +19,7 @@ export function StepFooter({
   submitLabel = '제출',
 }: StepFooterProps) {
   return (
-    <footer css={(t) => footerBar(t)}>
+    <footer css={(t) => footerStyle(t)}>
       {!state.isFirst && (
         <Button
           type="button"

src/components/stepper/step-navigator.tsx

@@ -5,9 +5,9 @@ import { StepProgress } from '@/components/stepper/step-progress'
 import { StepFooter } from '@/components/stepper/step-footer'
 import { SwitchCases } from '@/components/common/switch-cases'
 
-import { stepFormLayout, stepMainArea } from '@/styles/form-styles'
-
 import { FormStep, useStepController } from '@/features/book-form/hooks/use-multi-step-form'
+import { stepFormLayout } from '@/styles/form-styles'
+import { stepMainArea } from '@/styles/step-styles'
 
 type StepNavigatorProps<TValues extends FieldValues, TComponentId extends string> = {
   title: string

src/features/book-form/components/book-review-step.tsx

@@ -2,11 +2,7 @@ import { RHFSegmented } from '@/components/rhf-inputs/rhf-segmented'
 import { FormValues, RecommendationValue } from '@/lib/schema'
 import { sectionStyle, titleStyle } from '@/styles/form-styles'
 import { RHFRatingStars } from '@/components/rhf-inputs/rhf-rating-stars'
-
-const recommendationOptions: { label: string; value: RecommendationValue }[] = [
-  { label: '추천해요', value: 'RECOMMEND' },
-  { label: '추천하지 않아요', value: 'NOT_RECOMMEND' },
-]
+import { recommendationOptions } from '../constant/constant'
 
 function getRatingDescription(value: number) {
   if (value >= 4.5) return '최고예요'

src/features/book-form/components/visibility-settings-step.tsx

@@ -1,11 +1,7 @@
 import { RHFSegmented } from '@/components/rhf-inputs/rhf-segmented'
 import { FormValues, VisibilityValue } from '@/lib/schema'
 import { sectionStyle, titleStyle } from '@/styles/form-styles'
-
-const visibilityOptions: { label: string; value: VisibilityValue }[] = [
-  { label: '공개', value: 'PUBLIC' },
-  { label: '비공개', value: 'PRIVATE' },
-]
+import { visibilityOptions } from '../constant/constant'
 
 export default function VisibilitySettingsStep() {
   return (

src/features/book-form/constant/constant.ts

@@ -1,8 +1,34 @@
+import type { RecommendationValue, VisibilityValue } from '@/lib/schema'
 import { ReadingStatus } from '@/types/type'
 
-export const statusOptions = [
+type Option<T extends string> = { label: string; value: T }
+
+function toLabelMap<T extends string>(options: Option<T>[]) {
+  return options.reduce<Record<T, string>>((acc, option) => {
+    acc[option.value] = option.label
+    return acc
+  }, {} as Record<T, string>)
+}
+
+export const statusOptions: Option<ReadingStatus>[] = [
   { label: '읽고 싶은 책', value: ReadingStatus.WANT },
   { label: '읽는 중', value: ReadingStatus.READING },
   { label: '읽음', value: ReadingStatus.DONE },
   { label: '보류 중', value: ReadingStatus.HOLD },
 ]
+
+export const statusLabelMap = toLabelMap(statusOptions)
+
+export const recommendationOptions: Option<RecommendationValue>[] = [
+  { label: '추천해요', value: 'RECOMMEND' },
+  { label: '추천하지 않아요', value: 'NOT_RECOMMEND' },
+]
+
+export const recommendationLabelMap = toLabelMap(recommendationOptions)
+
+export const visibilityOptions: Option<VisibilityValue>[] = [
+  { label: '전체 공개', value: 'PUBLIC' },
+  { label: '비공개', value: 'PRIVATE' },
+]
+
+export const visibilityLabelMap = toLabelMap(visibilityOptions)

src/features/book-form/multi-step-form.tsx

@@ -4,13 +4,15 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { ReadingStatus } from '@/types/type'
 import { formSchema, FormValues, step1Schema, step2Schema, step3Schema, step4Schema, step5Schema } from '@/lib/schema'
 import { StepNavigator } from '@/components/stepper/step-navigator'
+import { formScreenLayout } from '@/styles/form-styles'
 
 import BookDetailsStep from './components/book-details-step'
 import BookReviewStep from './components/book-review-step'
 import ReadingReflectionStep from './components/reading-reflection-step'
 import QuoteSelectionStep from './components/quote-selection-step'
 import VisibilitySettingsStep from './components/visibility-settings-step'
 import type { FormStep } from './hooks/use-multi-step-form'
+import { FormPreviewPanel } from '../preview-form/component/form-preview-panel'
 
 const stepCases = {
   bookDetails: <BookDetailsStep />,
@@ -79,7 +81,10 @@ export default function MultiStepForm() {
 
   return (
     <FormProvider {...methods}>
-      <StepNavigator title="도서 정보 입력" steps={steps} cases={stepCases} methods={methods} onSubmit={onSubmit} />
+      <div css={formScreenLayout}>
+        <StepNavigator title="도서 정보 입력" steps={steps} cases={stepCases} methods={methods} onSubmit={onSubmit} />
+        <FormPreviewPanel />
+      </div>
     </FormProvider>
   )
 }

src/features/preview-form/component/form-preview-panel.tsx

@@ -0,0 +1,51 @@
+import { DeepPartial, useFormContext, useWatch } from 'react-hook-form'
+
+import type { FormValues } from '@/lib/schema'
+import { ReadingStatus } from '@/types/type'
+import { useDelayedPreview } from '../hooks/use-delayed-preview'
+import {
+  formatNumberWithLocale,
+  formatRating,
+  getReadablePeriod,
+  toPreviewQuotes,
+} from '@/features/preview-form/utils/preview-utils'
+import { recommendationLabelMap, statusLabelMap, visibilityLabelMap } from '@/features/book-form/constant/constant'
+import { BookMetaSection, PreviewField, QuotesSection, ReflectionSection } from './form-preview-sections'
+import { previewWrapper, previewCard, bookStatus } from './form-preview-sections.styles'
+
+export function FormPreviewPanel() {
+  const { control } = useFormContext<FormValues>()
+  const watchedValues = useWatch<FormValues>({ control }) as DeepPartial<FormValues>
+  const previewValues = useDelayedPreview<DeepPartial<FormValues>>(watchedValues, 500)
+
+  const quotes = toPreviewQuotes(previewValues?.quotes)
+  const rating = formatRating(previewValues?.rating)
+  const periodText = getReadablePeriod(previewValues)
+  const shouldShowPeriod = Boolean(previewValues?.status && previewValues.status !== ReadingStatus.WANT)
+  const totalPages = formatNumberWithLocale(previewValues?.totalPages)
+
+  return (
+    <aside css={previewWrapper}>
+      <section css={previewCard}>
+        <BookMetaSection values={previewValues} />
+        <dl css={bookStatus}>
+          <PreviewField label="출판일" value={previewValues?.publishedAt} />
+          <PreviewField label="전체 페이지 수" value={totalPages} />
+          <PreviewField label="상태" value={previewValues?.status ? statusLabelMap[previewValues.status] : undefined} />
+          <PreviewField label="기간" value={periodText} isVisible={shouldShowPeriod} />
+          <PreviewField label="별점" value={rating} />
+          <PreviewField
+            label="추천"
+            value={previewValues?.isRecommended ? recommendationLabelMap[previewValues.isRecommended] : undefined}
+          />
+          <PreviewField
+            label="공개"
+            value={previewValues?.visibility ? visibilityLabelMap[previewValues.visibility] : undefined}
+          />
+          <ReflectionSection reflection={previewValues?.reflection} />
+          <QuotesSection quotes={quotes} />
+        </dl>
+      </section>
+    </aside>
+  )
+}

src/features/preview-form/component/form-preview-sections.styles.ts

@@ -0,0 +1,127 @@
+import { css, Theme } from '@emotion/react'
+
+export const bookMeta = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(1)};
+  border-radius: ${theme.radius.md}px;
+  background: ${theme.color.surface};
+
+  h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: ${theme.color.text};
+    margin: 0;
+  }
+
+  span {
+    font-size: 13px;
+    color: ${theme.color.muted};
+  }
+`
+
+export const reflectionBox = (theme: Theme) => css`
+  border-radius: ${theme.radius.md}px;
+  background: ${theme.color.surface};
+  font-size: 14px;
+  line-height: 1.6;
+  color: ${theme.color.text};
+  white-space: pre-wrap;
+  display: grid;
+  gap: ${theme.spacing(1)};
+`
+
+export const sectionTitle = (theme: Theme) => css`
+  font-size: 13px;
+  font-weight: 700;
+  color: ${theme.color.muted};
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: ${theme.spacing(1)};
+`
+
+export const quotesList = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(2)};
+  padding: 0;
+
+  li {
+    list-style: none;
+    border-left: 2px solid ${theme.color.border};
+    padding-left: ${theme.spacing(2)};
+    display: grid;
+    gap: ${theme.spacing(1)};
+  }
+
+  blockquote {
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${theme.color.text};
+    margin: 0;
+  }
+
+  cite {
+    font-size: 12px;
+    color: ${theme.color.muted};
+  }
+`
+
+export const placeholderList = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(2)};
+`
+
+export const previewWrapper = (theme: Theme) => css`
+  display: none;
+
+  @media (min-width: 1024px) {
+    position: sticky;
+    top: ${theme.spacing(4)};
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.spacing(3)};
+    width: min(360px, 100%);
+    height: calc(100vh - ${theme.spacing(8)});
+  }
+`
+
+export const previewCard = (theme: Theme) => css`
+  flex: 1 1 auto;
+  border-radius: ${theme.radius.xl}px;
+  background: ${theme.color.surface};
+  border: 1px solid ${theme.color.border};
+  padding: ${theme.spacing(5)} ${theme.spacing(4)};
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(4)};
+  min-height: 520px;
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+export const bookStatus = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(4)};
+
+  dt {
+    font-size: 12px;
+    font-weight: 600;
+    color: ${theme.color.muted};
+    text-transform: uppercase;
+  }
+
+  dd {
+    font-size: 14px;
+    color: ${theme.color.text};
+    margin: 0;
+  }
+`