fix: dev → main 프로덕션 배포 동기화

src/app/(page)/calendar/page.module.scss

@@ -50,7 +50,7 @@
   height: fn.r(48);
   margin-left: auto;
   margin-right: fn.r(20);
-  margin-bottom: fn.r(24);
+  margin-bottom: fn.r(80);
   padding: fn.r(12) fn.r(15);
   background-color: v.$color-black-700;
   color: v.$color-white;

src/app/(page)/calendar/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import dayjs from 'dayjs';
+import Header from '@/components/layout/Header';
 import CalendarView from '@/components/calendar/CalendarView';
 import styles from '@/app/(page)/calendar/page.module.scss';
 import EmotionDiaryList from '@/components/diary/EmotionDiaryList';
@@ -32,6 +33,7 @@ export default function Calendar() {
 
   return (
     <div>
+      <Header variant="logo" />
       <div className={styles.calendarWrapper}>
         <CalendarView
           onDateChange={setSelectedDate}

src/app/(page)/diary/[id]/DiaryActions.module.scss

@@ -0,0 +1,22 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/functions' as fn;
+@use '@/styles/abstracts/mixins' as typo;
+
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(20);
+}
+
+.modalTitle {
+  @include typo.text-title-s
+}
+
+.modalButtons {
+  display: flex;
+  gap: fn.r(8);
+
+  > * {
+    flex: 1;
+  }
+}

src/app/(page)/diary/[id]/DiaryActions.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import ActionPrompt from '@/components/ui/ActionPrompt';
+import Button from '@/components/ui/Button';
+import Modal from '@/components/ui/Modal';
+import { useDeleteDiary } from '@/domains/diary/diary.hooks';
+import styles from './DiaryActions.module.scss';
+
+interface DiaryActionsProps {
+  diaryId: string;
+  diaryDate: string;
+  className?: string;
+}
+
+export default function DiaryActions({ diaryId, diaryDate, className }: DiaryActionsProps) {
+  const router = useRouter();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const deleteMutation = useDeleteDiary(diaryDate);
+
+  const handleEdit = () => {
+    router.push(`/diary/${diaryId}/edit`);
+  };
+
+  const handleDelete = () => {
+    setShowDeleteModal(true);
+  };
+
+  const handleConfirmDelete = () => {
+    deleteMutation.mutate(diaryId, {
+      onError: () => setShowDeleteModal(false),
+    });
+  };
+
+  return (
+    <>
+      <ActionPrompt
+        secondaryLabel="삭제"
+        onSecondary={handleDelete}
+        primaryLabel="수정"
+        onPrimary={handleEdit}
+        secondaryVariant="outline"
+        className={className}
+      />
+
+      <Modal open={showDeleteModal} onClose={() => !deleteMutation.isPending && setShowDeleteModal(false)}>
+        <div className={styles.modalContent}>
+          <p className={styles.modalTitle}>일기를 삭제하시겠습니까?</p>
+          <div className={styles.modalButtons}>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteModal(false)}
+              disabled={deleteMutation.isPending}
+            >
+              취소
+            </Button>
+            <Button onClick={handleConfirmDelete} disabled={deleteMutation.isPending}>
+              {deleteMutation.isPending ? '삭제 중...' : '삭제'}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}

src/app/(page)/diary/[id]/DiaryDetailHeader.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Header from '@/components/layout/Header';
+
+export default function DiaryDetailHeader() {
+  const router = useRouter();
+  return <Header variant="title" title="일기 조회" onBack={() => router.push('/calendar')} />;
+}

src/app/(page)/diary/[id]/edit/page.tsx

@@ -0,0 +1,22 @@
+import { notFound, redirect } from 'next/navigation';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { getSessionUserId } from '@/lib/auth/session';
+import { getDiaryById } from '@/domains/diary/diary.service';
+import DiaryCreate from '@/app/(page)/diary/create/page';
+
+export default async function DiaryEditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const session = await getServerSession(authOptions);
+  const userId = getSessionUserId(session);
+  if (!userId) redirect('/login');
+
+  const { id } = await params;
+  const diary = await getDiaryById(id, userId);
+  if (!diary) notFound();
+
+  return <DiaryCreate mode="edit" diary={diary} />;
+}

src/app/(page)/diary/[id]/page.module.scss

@@ -22,7 +22,7 @@
   &__character {
     position: absolute;
     bottom: fn.r(13);
-    right: fn.r(-100);
+    right: fn.r(-50);
     opacity: 50%;
   }
 
@@ -46,6 +46,7 @@
     display: flex;
     gap: fn.r(8);
     margin-top: fn.r(121);
+    padding-bottom: fn.r(80);
   }
 }
 

src/app/(page)/diary/[id]/page.tsx

@@ -1,60 +1,48 @@
-'use client';
-
+import { notFound, redirect } from 'next/navigation';
+import { getServerSession } from 'next-auth';
 import Image from 'next/image';
-import styles from '@/app/(page)/diary/[id]/page.module.scss';
-import ActionPrompt from '@/components/ui/ActionPrompt';
+import { authOptions } from '@/lib/auth';
+import { getSessionUserId } from '@/lib/auth/session';
+import { getDiaryById } from '@/domains/diary/diary.service';
+import styles from './page.module.scss';
+import DiaryActions from './DiaryActions';
+import DiaryDetailHeader from './DiaryDetailHeader';
+
+export default async function DiaryDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const session = await getServerSession(authOptions);
+  const userId = getSessionUserId(session);
+  if (!userId) redirect('/login');
 
-export default function Diary() {
-  const handleEdit = () => {
-    console.log('수정 클릭');
-  };
+  const { id } = await params;
+  const diary = await getDiaryById(id, userId);
+  if (!diary) notFound();
 
-  const handleDelete = () => {
-    console.log('삭제 클릭');
-  };
   return (
-    <div className={styles.diary}>
+    <>
+      <DiaryDetailHeader />
+      <div className={styles.diary}>
       <div className={styles['diary__body']}>
         <Image
           className={styles['diary__character']}
           src="/images/characters/character-closed.png"
           alt=""
-          width={350}
+          width={355}
           height={194}
         />
 
-        <div className={styles['diary__title']}>지금 이건 테스트인가</div>
-
-        <div className={styles['diary__content']}>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas veritatis distinctio
-          voluptas, dolor nulla nam, corporis sunt adipisci veniam perspiciatis odit. Natus veniam
-          delectus exercitationem. Rerum doloribus pariatur hic facere! Lorem ipsum dolor sit amet,
-          consectetur adipisicing elit. Quas veritatis distinctio voluptas, dolor nulla nam,
-          corporis sunt adipisci veniam perspiciatis odit. Natus veniam delectus exercitationem.
-          Rerum doloribus pariatur hic facere! Lorem ipsum dolor sit amet, consectetur adipisicing
-          elit. Quas veritatis distinctio voluptas, dolor nulla nam, corporis sunt adipisci veniam
-          perspiciatis odit. Natus veniam delectus exercitationem. Rerum doloribus pariatur hic
-          facere! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas veritatis
-          distinctio voluptas, dolor nulla nam, corporis sunt adipisci veniam perspiciatis odit.
-          Natus veniam delectus exercitationem. Rerum doloribus pariatur hic facere! Lorem ipsum
-          dolor sit amet, consectetur adipisicing elit. Quas veritatis distinctio voluptas, dolor
-          nulla nam, corporis sunt adipisci veniam perspiciatis odit. Natus veniam delectus
-          exercitationem. Rerum doloribus pariatur hic facere!
-        </div>
-
-        <time className={styles['diary__createdAt']}>26-06-14</time>
+        <div className={styles['diary__title']}>{diary.title}</div>
+        <div className={styles['diary__content']}>{diary.content}</div>
+        <time className={styles['diary__createdAt']}>{diary.diaryDate}</time>
       </div>
 
       <div className={styles['diary__actions']}>
-        <ActionPrompt
-          secondaryLabel="삭제"
-          onSecondary={handleDelete}
-          primaryLabel="수정"
-          onPrimary={handleEdit}
-          secondaryVariant="outline"
-          className={styles.diaryActions}
-        />
+        <DiaryActions diaryId={id} diaryDate={diary.diaryDate} className={styles.diaryActions} />
       </div>
     </div>
+    </>
   );
 }

src/app/(page)/diary/create/page.module.scss

@@ -17,10 +17,27 @@
     @include typo.text-body-s;
   }
 
+  &__form-area {
+    position: relative;
+  }
+
   &__form {
     display: flex;
     flex-direction: column;
     gap: fn.r(12);
+
+    &--loading {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  &__spinner-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__textarea {