diff --git a/api/diaries/index.ts b/api/diaries/index.ts
index 4a82dc7e..14128103 100644
--- a/api/diaries/index.ts
+++ b/api/diaries/index.ts
@@ -1,7 +1,6 @@
 import { UpdateCommentData } from '@/types/story/details';
 import { axiosInstance, axiosFileInstance } from '..';
 import { DiaryData } from '@/types/diary/';
-import { UpdateDiaryData } from '@/api/diaries';
 
 interface ImageUpload {
   images: File[];
diff --git a/components/calendar-monthly/pet-checkbox.tsx b/components/calendar-monthly/pet-checkbox.tsx
index b27da1ec..1127ba11 100644
--- a/components/calendar-monthly/pet-checkbox.tsx
+++ b/components/calendar-monthly/pet-checkbox.tsx
@@ -3,8 +3,6 @@ import styles from './pet-radio.module.scss';
 import { FieldValues, UseFormRegister } from 'react-hook-form';
 import { IFormInput } from '@/types/calendar';
 import { GrowthDetailsData } from '@/types/growth/details';
-import { DiaryDetail } from '@/types/diary/details';
-import { ChangeEvent } from 'react';
 
 interface PetRadio {
   register:
diff --git a/components/diaries/detail/add-comment/diary-detail-add-comment.tsx b/components/diaries/detail/add-comment/diary-detail-add-comment.tsx
index b6684d56..9526d8ec 100644
--- a/components/diaries/detail/add-comment/diary-detail-add-comment.tsx
+++ b/components/diaries/detail/add-comment/diary-detail-add-comment.tsx
@@ -1,5 +1,4 @@
 import { FormEvent, FormEventHandler, KeyboardEventHandler, useEffect } from 'react';
-import useRouterId from '@/hooks/utils/use-router-id';
 import useTextarea from '@/hooks/utils/use-textarea';
 import styles from './diary-detail-add-comment.module.scss';
 import useCommentPostMutation from '@/hooks/queries/diary/use-comment-post-mutation';
@@ -7,12 +6,12 @@ import useCommentPostMutation from '@/hooks/queries/diary/use-comment-post-mutat
 interface DiaryDetailAddCommentProps {
   replyOwner: { author: string; replyId: number } | null;
   onReplyReset: () => void;
+  diaryId: number;
 }
 
 export default function DiaryDetailAddComment(props: DiaryDetailAddCommentProps) {
-  const diaryId = +useRouterId('diaryId');
   const { ref, value, isDisbaled, handleValueChange, handleResizeHeight, handleResetValue } = useTextarea();
-  const commentMutation = useCommentPostMutation(String(diaryId));
+  const commentMutation = useCommentPostMutation(String(props.diaryId));
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
diff --git a/components/diaries/detail/diary-detail-post.tsx b/components/diaries/detail/diary-detail-post.tsx
index b25cb64b..0fa76663 100644
--- a/components/diaries/detail/diary-detail-post.tsx
+++ b/components/diaries/detail/diary-detail-post.tsx
@@ -3,19 +3,17 @@ import useReplyOwner from '@/hooks/detail/use-reply-owner';
 import DirayItemInfo from '@/components/diaries/detail/diary-item-info';
 import StoryItemSwiper from '@/components/story/item/story-item-swiper';
 
-import useRouterId from '@/hooks/utils/use-router-id';
 import { useDiaryQuery } from '@/hooks/queries/diary/use-diary-query';
 import DiaryItemHeader from './diary-item-header';
 import DirayDetailComments from '@/components/diaries/detail/comments/diary-detail-comments';
 import DiaryDetailAddComment from './add-comment/diary-detail-add-comment';
 
 interface StoryDetailPostProps {
-  id: string;
+  diaryId: number;
 }
 
 export default function DiaryDetailPost(props: StoryDetailPostProps) {
-  const diaryId = +useRouterId(props.id);
-  const detailQuery = useDiaryQuery(String(diaryId));
+  const detailQuery = useDiaryQuery(String(props.diaryId));
   const { replyOwner, handleReplyClick, handleReplyReset } = useReplyOwner();
 
   const isImage = detailQuery.data!.contentImages.length !== 0;
@@ -24,9 +22,9 @@ export default function DiaryDetailPost(props: StoryDetailPostProps) {
     <>
       <DiaryItemHeader {...detailQuery.data!} />
       {isImage && <StoryItemSwiper images={detailQuery.data!.contentImages} />}
-      <DirayItemInfo {...detailQuery.data!} diaryId={diaryId} />
+      <DirayItemInfo {...detailQuery.data!} diaryId={props.diaryId} />
       <DirayDetailComments comments={detailQuery.data!.comments} onReplyClick={handleReplyClick} />
-      <DiaryDetailAddComment replyOwner={replyOwner} onReplyReset={handleReplyReset} />
+      <DiaryDetailAddComment replyOwner={replyOwner} onReplyReset={handleReplyReset} diaryId={props.diaryId} />
     </>
   );
 }
diff --git a/components/diaries/diary-content/comment/diary-comment-reply.tsx b/components/diaries/diary-content/comment/diary-comment-reply.tsx
index 9b528f15..bb035b61 100644
--- a/components/diaries/diary-content/comment/diary-comment-reply.tsx
+++ b/components/diaries/diary-content/comment/diary-comment-reply.tsx
@@ -1,60 +1,60 @@
-import DropdownMenu from '@/components/kebab/kebab';
-import styles from './diary-comment-reply.module.scss';
-import useToggle from '@/hooks/use-toggle';
-import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile';
-import { Child } from '@/api/diaries';
-import useChildCommentMutation from '@/hooks/queries/diary/use-child-comment-mutation';
-import { useState } from 'react';
-import DiaryCommentEdit from './diary-comment-edit';
-import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation';
-
-interface DiaryCommentReplyProps {
-  comment: Child;
-  diaryId: string;
-}
-
-export default function DiaryCommentReply({ comment, diaryId }: DiaryCommentReplyProps) {
-  const [isEditing, setIsEditing] = useState(false);
-
-  const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
-
-  const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId);
-  const childCommentMutation = useChildCommentMutation(diaryId, comment.commentId);
-
-  const handleEdit = () => {
-    setIsEditing(true);
-    onCloseToggle();
-  };
-
-  const handleCancel = () => setIsEditing(false);
-
-  const handleDelete = () => childCommentMutation.mutate();
-
-  return (
-    <div className={styles.outer} key={comment.commentId}>
-      <div className={styles.commentProfile}>
-        <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} />
-        {comment.isMyComment && (
-          <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}>
-            <DropdownMenu.Kebab />
-            <DropdownMenu.Content>
-              <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item>
-              <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
-        )}
-      </div>
-
-      <p className={styles.commentDate}>{comment.date}</p>
-      {isEditing ? (
-        <DiaryCommentEdit
-          defaultValue={comment.comment}
-          mutationFn={commentPutMutation.mutate}
-          onCancel={handleCancel}
-        />
-      ) : (
-        <p className={styles.commentContent}>{comment.comment}</p>
-      )}
-    </div>
-  );
-}
+// import DropdownMenu from '@/components/kebab/kebab';
+// import styles from './diary-comment-reply.module.scss';
+// import useToggle from '@/hooks/use-toggle';
+// import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile';
+// import { Child } from '@/api/diaries';
+// import useChildCommentMutation from '@/hooks/queries/diary/use-child-comment-mutation';
+// import { useState } from 'react';
+// import DiaryCommentEdit from './diary-comment-edit';
+// import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation';
+
+// interface DiaryCommentReplyProps {
+//   comment: Child;
+//   diaryId: string;
+// }
+
+// export default function DiaryCommentReply({ comment, diaryId }: DiaryCommentReplyProps) {
+//   const [isEditing, setIsEditing] = useState(false);
+
+//   const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
+
+//   const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId);
+//   const childCommentMutation = useChildCommentMutation(diaryId, comment.commentId);
+
+//   const handleEdit = () => {
+//     setIsEditing(true);
+//     onCloseToggle();
+//   };
+
+//   const handleCancel = () => setIsEditing(false);
+
+//   const handleDelete = () => childCommentMutation.mutate();
+
+//   return (
+//     <div className={styles.outer} key={comment.commentId}>
+//       <div className={styles.commentProfile}>
+//         <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} />
+//         {comment.isMyComment && (
+//           <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}>
+//             <DropdownMenu.Kebab />
+//             <DropdownMenu.Content>
+//               <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item>
+//               <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item>
+//             </DropdownMenu.Content>
+//           </DropdownMenu>
+//         )}
+//       </div>
+
+//       <p className={styles.commentDate}>{comment.date}</p>
+//       {isEditing ? (
+//         <DiaryCommentEdit
+//           defaultValue={comment.comment}
+//           mutationFn={commentPutMutation.mutate}
+//           onCancel={handleCancel}
+//         />
+//       ) : (
+//         <p className={styles.commentContent}>{comment.comment}</p>
+//       )}
+//     </div>
+//   );
+// }
diff --git a/components/diaries/diary-content/comment/diary-comment.tsx b/components/diaries/diary-content/comment/diary-comment.tsx
index 0055375b..5cefa66d 100644
--- a/components/diaries/diary-content/comment/diary-comment.tsx
+++ b/components/diaries/diary-content/comment/diary-comment.tsx
@@ -1,84 +1,84 @@
-import DropdownMenu from '@/components/kebab/kebab';
-import styles from './diary-comment.module.scss';
-import useToggle from '@/hooks/use-toggle';
-import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile';
-import { Comment } from '@/api/diaries';
-import useParentCommentMutation from '@/hooks/queries/diary/use-parent-comment-mutation';
-import { useState } from 'react';
-import DiaryCommentForm from './diary-comment-form';
-import DiaryCommentReply from './diary-comment-reply';
-import useCommentPostMutation from '@/hooks/queries/diary/use-comment-post-mutation';
-import DiaryCommentEdit from './diary-comment-edit';
-import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation';
+// import DropdownMenu from '@/components/kebab/kebab';
+// import styles from './diary-comment.module.scss';
+// import useToggle from '@/hooks/use-toggle';
+// import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile';
+// import { Comment } from '@/api/diaries';
+// import useParentCommentMutation from '@/hooks/queries/diary/use-parent-comment-mutation';
+// import { useState } from 'react';
+// import DiaryCommentForm from './diary-comment-form';
+// import DiaryCommentReply from './diary-comment-reply';
+// import useCommentPostMutation from '@/hooks/queries/diary/use-comment-post-mutation';
+// import DiaryCommentEdit from './diary-comment-edit';
+// import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation';
 
-interface DiaryCommentProps {
-  comment: Comment;
-  diaryId: string;
-}
+// interface DiaryCommentProps {
+//   comment: Comment;
+//   diaryId: string;
+// }
 
-export default function DiaryComment({ comment, diaryId }: DiaryCommentProps) {
-  const [isReplying, setIsReplying] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
+// export default function DiaryComment({ comment, diaryId }: DiaryCommentProps) {
+//   const [isReplying, setIsReplying] = useState(false);
+//   const [isEditing, setIsEditing] = useState(false);
 
-  const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
+//   const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
 
-  const commentPostMutation = useCommentPostMutation(diaryId);
-  const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId);
-  const parentCommentMutation = useParentCommentMutation(diaryId, comment.commentId);
+//   const commentPostMutation = useCommentPostMutation(diaryId);
+//   const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId);
+//   const parentCommentMutation = useParentCommentMutation(diaryId, comment.commentId);
 
-  const handleDelete = () => parentCommentMutation.mutate();
-  const handleEdit = () => {
-    setIsEditing(true);
-    onCloseToggle();
-  };
-  const handleCancel = () => setIsEditing(false);
+//   const handleDelete = () => parentCommentMutation.mutate();
+//   const handleEdit = () => {
+//     setIsEditing(true);
+//     onCloseToggle();
+//   };
+//   const handleCancel = () => setIsEditing(false);
 
-  const handleClickReply = () => {
-    setIsReplying(!isReplying);
-  };
+//   const handleClickReply = () => {
+//     setIsReplying(!isReplying);
+//   };
 
-  return (
-    <div className={styles.outer} key={comment.commentId}>
-      <div className={styles.commentProfile}>
-        <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} />
-        {comment.isMyComment && (
-          <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}>
-            <DropdownMenu.Kebab />
-            <div style={{ position: 'relative', right: '2px' }}>
-              <DropdownMenu.Content>
-                <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item>
-                <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </div>
-          </DropdownMenu>
-        )}
-      </div>
-      <p className={styles.commentDate}>{comment.date}</p>
-      {isEditing ? (
-        <DiaryCommentEdit
-          defaultValue={comment.comment}
-          mutationFn={commentPutMutation.mutate}
-          onCancel={handleCancel}
-        />
-      ) : (
-        <p className={styles.commentContent}>{comment.comment}</p>
-      )}
-      <button onClick={handleClickReply} className={styles.commentReply}>
-        답글 {comment.children.length}개
-      </button>
-      {isReplying && (
-        <>
-          {comment.children.map((child) => (
-            <DiaryCommentReply key={child.commentId} comment={child} diaryId={diaryId} />
-          ))}
-          <div style={{ width: '100%', marginBottom: '10px' }}></div>
-          <DiaryCommentForm
-            mutateFn={commentPostMutation.mutate}
-            placeholder="답글 입력..."
-            parentCommentId={comment.commentId}
-          />
-        </>
-      )}
-    </div>
-  );
-}
+//   return (
+//     <div className={styles.outer} key={comment.commentId}>
+//       <div className={styles.commentProfile}>
+//         <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} />
+//         {comment.isMyComment && (
+//           <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}>
+//             <DropdownMenu.Kebab />
+//             <div style={{ position: 'relative', right: '2px' }}>
+//               <DropdownMenu.Content>
+//                 <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item>
+//                 <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item>
+//               </DropdownMenu.Content>
+//             </div>
+//           </DropdownMenu>
+//         )}
+//       </div>
+//       <p className={styles.commentDate}>{comment.date}</p>
+//       {isEditing ? (
+//         <DiaryCommentEdit
+//           defaultValue={comment.comment}
+//           mutationFn={commentPutMutation.mutate}
+//           onCancel={handleCancel}
+//         />
+//       ) : (
+//         <p className={styles.commentContent}>{comment.comment}</p>
+//       )}
+//       <button onClick={handleClickReply} className={styles.commentReply}>
+//         답글 {comment.children.length}개
+//       </button>
+//       {isReplying && (
+//         <>
+//           {comment.children.map((child) => (
+//             <DiaryCommentReply key={child.commentId} comment={child} diaryId={diaryId} />
+//           ))}
+//           <div style={{ width: '100%', marginBottom: '10px' }}></div>
+//           <DiaryCommentForm
+//             mutateFn={commentPostMutation.mutate}
+//             placeholder="답글 입력..."
+//             parentCommentId={comment.commentId}
+//           />
+//         </>
+//       )}
+//     </div>
+//   );
+// }
diff --git a/components/diaries/diary-content/kebab/index.tsx b/components/diaries/diary-content/kebab/index.tsx
index 3b938e59..aa0d1b2d 100644
--- a/components/diaries/diary-content/kebab/index.tsx
+++ b/components/diaries/diary-content/kebab/index.tsx
@@ -4,6 +4,7 @@ import DropdownMenu from '@/components/kebab/kebab';
 import useToggle from '@/hooks/use-toggle';
 import { deleteDiary } from '@/api/diaries';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 
 interface KebabProps {
   diaryId: number;
@@ -12,6 +13,7 @@ interface KebabProps {
 const Kebab: React.FC<KebabProps> = ({ diaryId }) => {
   const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   const handleDelete = async () => {
     try {
@@ -24,12 +26,16 @@ const Kebab: React.FC<KebabProps> = ({ diaryId }) => {
 
   const handleClick: MouseEventHandler = (e) => e.stopPropagation();
 
+  const updateFn = () => {
+    router.push(`/diaries/${diaryId}/edit`);
+  };
+
   return (
     <div className={styles.kebab} onClick={handleClick}>
       <DropdownMenu value={{ isOpen, onOpenToggle, onCloseToggle }}>
         <DropdownMenu.Kebab />
         <DropdownMenu.Content>
-          <DropdownMenu.Item>수정</DropdownMenu.Item>
+          <DropdownMenu.Item onClick={updateFn}>수정</DropdownMenu.Item>
           <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>
diff --git a/components/diaries/diary-create/diary-create.module.scss b/components/diaries/diary-create/diary-create.module.scss
deleted file mode 100644
index c4b37018..00000000
--- a/components/diaries/diary-create/diary-create.module.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-.container {
-  padding: 54px 0 100px;
-}
-
-.petSelect {
-  padding: 0 24px;
-  margin-top: 30px;
-}
-
-.pets {
-  display: flex;
-  gap: 15px;
-}
-
-.content {
-  font-size: 14px;
-  display: block;
-  width: 100%;
-  height: 160px;
-  padding: 0 24px;
-  margin-top: 22px;
-  margin-bottom: 30px;
-  border: none;
-  resize: none;
-  &::placeholder {
-    font-weight: 500;
-    line-height: 21px;
-    color: var(--text-color-gray);
-  }
-  &:focus {
-    outline: none;
-  }
-}
-
-.division {
-  margin: 0px auto 30px;
-  width: 382px;
-  border: 1px solid #d5d9dc;
-}
-
-.weatherContainer {
-  padding: 0 24px;
-  margin-bottom: 30px;
-}
-
-.weather {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: var(--text-color-gray);
-}
-.weatherIcons {
-  display: flex;
-  justify-content: space-between;
-
-  button {
-    height: 40px;
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    img {
-      width: 40px;
-      height: 40px;
-    }
-  }
-}
-
-.imagesContainer {
-  display: flex;
-  gap: 10px;
-  padding: 0 24px;
-  margin-bottom: 30px;
-  overflow-x: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.imagesContainer::-webkit-scrollbar {
-  display: none;
-}
-
-.images {
-  width: 110px;
-  height: 110px;
-  object-fit: cover;
-  border-radius: 10px;
-  cursor: pointer;
-}
-
-.button {
-  padding: 0 24px;
-}
-
-.storyshareContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 22px;
-  padding: 0 24px;
-  margin-bottom: 30px;
-}
-
-.storyshare {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 14px;
-  color: var(--text-color-gray);
-}
-
-.toggle {
-  position: relative;
-  display: inline-block;
-  width: 37.69px;
-  height: 20px;
-}
-
-.toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggleSlide {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--disabled-color);
-  transition: 0.4s;
-  border-radius: 27px;
-}
-
-.toggleSlide:before {
-  position: absolute;
-  content: '';
-  height: 16.92px;
-  width: 16.92px;
-  left: 2px;
-  bottom: 1.54px;
-  background-color: white;
-  transition: 0.4s;
-  border-radius: 50%;
-}
-
-input:checked + .toggleSlide {
-  background-color: var(--main-color);
-}
-
-input:checked + .toggleSlide:before {
-  transform: translateX(16.92px);
-}
-
-.dateContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  margin-bottom: 30px;
-}
-
-.date {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 43px;
-  height: 28px;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--white);
-  background-color: var(--main-color);
-}
-
-.dateInput {
-  border: none;
-  width: 96px;
-  font-size: 14px;
-  font-weight: bold;
-  color: var(--text-color-gray);
-
-  &::placeholder {
-    font-size: 14px;
-    font-weight: bold;
-    color: var(--text-color-gray);
-  }
-  &:focus {
-    outline: none;
-  }
-}
-
-.submit {
-  width: 100%;
-  padding: 14px;
-  color: var(--button-color);
-  background-color: var(--main-color);
-  border-radius: 9999px;
-}
-
-.disabled {
-  background-color: var(--disabled-color);
-  color: var(--white);
-}
-
-.error {
-  padding: 0 24px;
-  margin-top: 8px;
-  margin-bottom: 30px;
-  font-weight: 400;
-  color: var(--input-error);
-}
diff --git a/components/diaries/diary-create/diary-create.tsx b/components/diaries/diary-create/diary-create.tsx
deleted file mode 100644
index 1233ab59..00000000
--- a/components/diaries/diary-create/diary-create.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { useForm, SubmitHandler, FieldValues } from 'react-hook-form';
-import classNames from 'classnames';
-import { WEATHER_TYPES } from '@/lib/constants/diaries-constants';
-import { postDiariesImage, postDiaries } from '@/api/diaries/';
-import styles from './diary-create.module.scss';
-import useCalenderDateStore from '@/store/calendar.store';
-import { convertToLocalDate } from '@/utils/convert-local-date';
-import usePetsQuery from '@/hooks/queries/calendar/use-pets-query';
-import { useQueryClient } from '@tanstack/react-query';
-import PetSelect from '@/components/diaries/pet-select';
-import PetCheckbox from '@/components/diaries/pet-checkbox';
-import ImageSkeleton from '@/components/skeleton/image/';
-import { useRouter } from 'next/router';
-import WeatherItem from '../jihye/diary-edit-weather';
-
-export interface DiaryData {
-  content: string;
-  weather: string;
-  isShare: boolean;
-  date: string;
-  pets: number[];
-  images: number[];
-}
-
-const DiaryCreate: React.FC = () => {
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors, isValid },
-    resetField,
-  } = useForm<DiaryData & FieldValues>({
-    defaultValues: {
-      content: '',
-      weather: '',
-      isShare: false,
-      date: '',
-      pets: [],
-      images: [],
-    },
-  });
-
-  const queryClient = useQueryClient();
-  const router = useRouter();
-
-  const year = useCalenderDateStore.use.year().toString();
-  const month = (useCalenderDateStore.use.month() + 1).toString().padStart(2, '0');
-  const date = useCalenderDateStore.use.date().toString().padStart(2, '0');
-  const localDate = convertToLocalDate({ year, month, day: date });
-
-  useEffect(() => {
-    setValue('date', localDate);
-  }, [localDate, setValue]);
-
-  const selectedWeather = watch('weather');
-  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
-  const [imageIds, setImageIds] = useState<number[]>([]);
-  const fileInputRefs = useRef<HTMLInputElement[]>([]);
-
-  const watchDate = watch('date');
-  useEffect(() => {
-    if (watchDate) {
-      const [year, month, day] = watchDate.split('-');
-      const convertedDate = convertToLocalDate({ year, month, day });
-      setValue('date', convertedDate);
-    }
-  }, [watchDate, setValue]);
-
-  const handleImageChange = (index: number) => async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (files && files.length > 0) {
-      const fileArray = Array.from(files);
-
-      try {
-        const response = await postDiariesImage({ images: fileArray });
-        const newImageIds = [...imageIds];
-        newImageIds[index] = response.data[0];
-        setImageIds(newImageIds);
-
-        const fileReader = new FileReader();
-        fileReader.onload = () => {
-          const newImagePreviews = [...imagePreviews];
-          newImagePreviews[index] = fileReader.result as string;
-          setImagePreviews(newImagePreviews);
-        };
-        fileReader.readAsDataURL(files[0]);
-      } catch (error) {
-        console.error('failed to upload image:', error);
-      }
-    }
-  };
-
-  const onSubmit: SubmitHandler<DiaryData & FieldValues> = async (data) => {
-    console.log(data);
-    const completeData = { ...data, images: imageIds };
-    try {
-      const response = await postDiaries(completeData);
-      console.log('Diary posted successfully:', response);
-      queryClient.invalidateQueries({ queryKey: ['diaries'] });
-      router.push('/diaries');
-    } catch (error) {
-      console.error('failed to post diary:', error);
-    }
-  };
-
-  const { data: pets, isLoading, isError, error } = usePetsQuery();
-  const [selectedPets, setSelectedPets] = useState<number[]>([]);
-
-  if (isError) return <p>Error: {error.message}</p>;
-
-  const handleTogglePet = (petId: number) => {
-    setSelectedPets((prevSelectedPets) =>
-      prevSelectedPets.includes(petId) ? prevSelectedPets.filter((id) => id !== petId) : [...prevSelectedPets, petId],
-    );
-  };
-
-  const handleClickAll = () => {
-    if (selectedPets.length === pets.length) {
-      setSelectedPets([]);
-      resetField('pets');
-    } else {
-      const allPetIds = pets.map((pet) => pet.petId);
-      setSelectedPets(allPetIds);
-      setValue('pets', allPetIds);
-    }
-  };
-
-  return (
-    <div className={styles.container}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className={styles.petSelect}>
-          <PetSelect selectAll={handleClickAll} title="반려동물 선택">
-            <div className={styles.pets}>
-              {isLoading ? (
-                <ImageSkeleton />
-              ) : (
-                pets.map((pet) => (
-                  <PetCheckbox
-                    key={pet.petId}
-                    register={register}
-                    petId={pet.petId}
-                    petName={pet.name}
-                    petImage={pet.imageUrl}
-                    selectedPets={selectedPets}
-                    onTogglePet={handleTogglePet}
-                  />
-                ))
-              )}
-            </div>
-          </PetSelect>
-        </div>
-
-        <textarea
-          {...register('content', { required: '*내용을 입력해주세요.' })}
-          className={styles.content}
-          id="content"
-          placeholder={'메모\n어떤 일정인지 자세하게 기록하실 수 있어요!'}
-        />
-        {errors.content && <p className={styles.error}>{errors.content.message}</p>}
-
-        <hr className={styles.division} />
-
-        {/* <div className={styles.weatherContainer}>
-          <div className={styles.weather}>
-            <img src="/images/diaries/bar.svg" alt="Weather bar" />
-            날씨
-          </div>
-          <div className={styles.weatherIcons}>
-            {WEATHER_TYPES.map((weather) => (
-              <button
-                key={weather.id}
-                type="button"
-                onClick={() => setValue('weather', weather.id)}
-                className={selectedWeather === weather.id ? styles.selected : ''}
-              >
-                <img src={selectedWeather === weather.id ? weather.selectedIcon : weather.icon} alt={weather.label} />
-              </button>
-            ))}
-          </div>
-        </div> */}
-        <WeatherItem setValue={setValue} />
-
-        <div className={styles.imagesContainer}>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <div key={index}>
-              <input
-                ref={(el) => {
-                  fileInputRefs.current[index] = el!;
-                }}
-                type="file"
-                accept="image/*"
-                onChange={handleImageChange(index)}
-                hidden
-              />
-              <img
-                src={imagePreviews[index] || '/images/diaries/imageupload-default.svg'}
-                alt="Upload preview"
-                className={styles.images}
-                onClick={() => fileInputRefs.current[index].click()}
-              />
-            </div>
-          ))}
-        </div>
-
-        <div className={styles.storyshareContainer}>
-          <div className={styles.storyshare}>
-            <img src="/images/diaries/bar.svg" />
-            스토리에 공유하기
-          </div>
-          <label className={styles.toggle}>
-            <input type="checkbox" {...register('isShare')} />
-            <span className={styles.toggleSlide}></span>
-          </label>
-        </div>
-
-        <hr className={styles.division} />
-
-        <div className={styles.dateContainer}>
-          <div className={styles.date}>
-            <label htmlFor="date">날짜</label>
-          </div>
-          <input
-            className={styles.dateInput}
-            type="text"
-            id="date"
-            placeholder="YYYY-MM-DD"
-            {...register('date', {
-              required: '*날짜를 입력해주세요.',
-              pattern: {
-                value: /^\d{4}-\d{2}-\d{2}$/,
-                message: '*날짜 형식이 올바르지 않습니다. (예: 2024-06-15)',
-              },
-            })}
-          />
-        </div>
-        {errors.date && <p className={styles.error}>{errors.date.message}</p>}
-
-        <div className={styles.button}>
-          <button
-            className={classNames(styles.submit, {
-              [styles.disabled]: !isValid,
-            })}
-          >
-            등록하기
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default DiaryCreate;
diff --git a/components/diaries/edit/diary-edit-date/index.tsx b/components/diaries/edit/diary-edit-date/index.tsx
index f429999d..b94d4fde 100644
--- a/components/diaries/edit/diary-edit-date/index.tsx
+++ b/components/diaries/edit/diary-edit-date/index.tsx
@@ -6,7 +6,11 @@ import { useEffect, useState } from 'react';
 import { DateTime } from '@/types/calendar';
 import getDateTimeFrontend from '@/utils/get-date-time-frontend';
 
-export default function DiaryEditDate() {
+interface DiaryEditDateProps {
+  initialDate: string;
+}
+
+export default function DiaryEditDate({ initialDate }: DiaryEditDateProps) {
   const {
     register,
     watch,
@@ -16,12 +20,12 @@ export default function DiaryEditDate() {
   } = useFormContext();
 
   const [dateTime, setDateTime] = useState<DateTime>({
-    year: null,
-    month: null,
-    date: null,
-    ampm: null,
-    hour: null,
-    minute: null,
+    year: +initialDate.slice(0, 4),
+    month: +initialDate.slice(5, 7),
+    date: +initialDate.slice(8, 10),
+    ampm: '오전',
+    hour: 12,
+    minute: 0,
   });
 
   useEffect(() => {
diff --git a/components/diaries/edit/diary-edit-weather/index.tsx b/components/diaries/edit/diary-edit-weather/index.tsx
index edff1aaf..8da8314d 100644
--- a/components/diaries/edit/diary-edit-weather/index.tsx
+++ b/components/diaries/edit/diary-edit-weather/index.tsx
@@ -6,10 +6,6 @@ import { useFormContext } from 'react-hook-form';
 
 type WeatherType = (typeof WEATHER_TYPES)[number];
 
-interface WeatherItem {
-  defaultWeather?: string;
-}
-
 export default function WeatherItem() {
   const { setValue, watch } = useFormContext<{ weather: string }>();
 
diff --git a/components/diaries/edit/pets/diary-edit-pet-list.tsx b/components/diaries/edit/pets/diary-edit-pet-list.tsx
index 35e19ecf..afc3f724 100644
--- a/components/diaries/edit/pets/diary-edit-pet-list.tsx
+++ b/components/diaries/edit/pets/diary-edit-pet-list.tsx
@@ -9,17 +9,31 @@ interface DiaryEditPetListProps {
 }
 
 export default function DiaryEditPetList(props: DiaryEditPetListProps) {
+  console.log(props.pets);
+
+  const selectedPetSet = new Set(props.selectedPets);
+  // defaultPet={selectedPetSet.has(pet.petId)}
+
+  // 펫에 관련된 모든 펫. => fetchPet [2] 구찌, 블랑
+  // 선택된 펫을 반복하는거 => DiaryDataPet [2] 구찌, 블랑
+  // return (
+  //   <ul className={styles['pet-list']}>
+  //     {props.pets.map((pet) => {
+  //       return props.selectedPets.map((selectedPet) =>
+  //         +pet.petId === selectedPet ? (
+  //           <DiaryEditPetsItem pet={pet} key={pet.petId} defaultPet={pet.petId === selectedPet} />
+  //         ) : (
+  //           <DiaryEditPetsItem pet={pet} key={pet.petId} />
+  //         ),
+  //       );
+  //     })}
+  //   </ul>
+  // );
   return (
     <ul className={styles['pet-list']}>
-      {props.pets.map((pet) => {
-        return props.selectedPets.map((selectedPet) =>
-          +pet.petId === selectedPet ? (
-            <DiaryEditPetsItem pet={pet} key={pet.petId} defaultPet={true} />
-          ) : (
-            <DiaryEditPetsItem pet={pet} key={pet.petId} />
-          ),
-        );
-      })}
+      {props.pets.map((pet) => (
+        <DiaryEditPetsItem pet={pet} key={pet.petId} defaultPet={selectedPetSet.has(pet.petId)} />
+      ))}
     </ul>
   );
 }
diff --git a/components/diaries/edit/pets/pet-checkbox.tsx b/components/diaries/edit/pets/pet-checkbox.tsx
index 377b3012..c7a47b66 100644
--- a/components/diaries/edit/pets/pet-checkbox.tsx
+++ b/components/diaries/edit/pets/pet-checkbox.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import styles from './pet-checkbox.module.scss';
 import { UseFormRegister, FieldValues } from 'react-hook-form';
-import { DiaryData } from './diary-create/diary-create';
+import { DiaryData } from '@/pages/diaries/create';
 
 interface PetCheckboxProps {
   register: UseFormRegister<DiaryData & FieldValues>;
diff --git a/components/diaries/pet-checkbox.module.scss b/components/diaries/pet-checkbox.module.scss
new file mode 100644
index 00000000..b397b837
--- /dev/null
+++ b/components/diaries/pet-checkbox.module.scss
@@ -0,0 +1,44 @@
+.petLabel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.petImageContainer {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  border: 2px solid var(--pet-border);
+  border-radius: 9999px;
+
+  &:has(.petInput:checked) {
+    border: 2px solid var(--main-color);
+  }
+}
+
+.petImage {
+  border-radius: 9999px;
+}
+
+.petInput:checked ~ .check {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(50%);
+}
+
+.check {
+  display: none;
+}
+
+.petInput {
+  width: 0;
+  height: 0;
+}
+
+.petName {
+  font-weight: 400;
+}
diff --git a/components/diaries/pet-checkbox.tsx b/components/diaries/pet-checkbox.tsx
new file mode 100644
index 00000000..c7a47b66
--- /dev/null
+++ b/components/diaries/pet-checkbox.tsx
@@ -0,0 +1,54 @@
+import Image from 'next/image';
+import styles from './pet-checkbox.module.scss';
+import { UseFormRegister, FieldValues } from 'react-hook-form';
+import { DiaryData } from '@/pages/diaries/create';
+
+interface PetCheckboxProps {
+  register: UseFormRegister<DiaryData & FieldValues>;
+  petId: number;
+  petName: string;
+  petImage: string;
+  selectedPets?: number[];
+  onTogglePet: (petId: number) => void;
+}
+
+const PetCheckbox: React.FC<PetCheckboxProps> = ({
+  register,
+  petId,
+  petName,
+  petImage,
+  selectedPets = [],
+  onTogglePet,
+}) => {
+  const isSelected = selectedPets.includes(petId);
+
+  return (
+    <label className={styles.petLabel}>
+      <div className={styles.petImageContainer}>
+        <input
+          {...register('pets', {
+            validate: (selected: number[]) => selected.length > 0 || '*반려동물을 선택해주세요.',
+          })}
+          value={petId}
+          className={styles.petInput}
+          type="checkbox"
+          checked={isSelected}
+          onChange={() => onTogglePet(petId)}
+        />
+        <Image className={styles.petImage} src={petImage} alt="반려동물 프로필 사진" fill />
+        {isSelected && (
+          <Image
+            src="/images/calendar/check-circle.svg"
+            alt="체크 표시"
+            width={20}
+            height={20}
+            className={styles.check}
+          />
+        )}
+      </div>
+      <p className={styles.petName}>{petName}</p>
+    </label>
+  );
+};
+
+export default PetCheckbox;
diff --git a/components/story/detail/add-comment/story-detail-add-comment.tsx b/components/story/detail/add-comment/story-detail-add-comment.tsx
index 8d26cc21..fcf0f6d1 100644
--- a/components/story/detail/add-comment/story-detail-add-comment.tsx
+++ b/components/story/detail/add-comment/story-detail-add-comment.tsx
@@ -1,16 +1,15 @@
 import { FormEvent, FormEventHandler, KeyboardEventHandler, useEffect } from 'react';
 import { useCreateComment } from '@/hooks/queries/story/mutation';
-import useRouterId from '@/hooks/utils/use-router-id';
 import useTextarea from '@/hooks/utils/use-textarea';
 import styles from './story-detail-add-comment.module.scss';
 
 interface StoryDetailAddCommentProps {
   replyOwner: { author: string; replyId: number } | null;
   onReplyReset: () => void;
+  storyId: number;
 }
 
 export default function StoryDetailAddComment(props: StoryDetailAddCommentProps) {
-  const storyId = +useRouterId('storyId');
   const { ref, value, isDisbaled, handleValueChange, handleResizeHeight, handleResetValue } = useTextarea();
   const commentMutation = useCreateComment();
 
@@ -23,7 +22,7 @@ export default function StoryDetailAddComment(props: StoryDetailAddCommentProps)
       ? { content: value, parentCommentId: props.replyOwner.replyId }
       : { content: value, parentCommentId: null };
 
-    commentMutation.mutate({ diaryId: storyId, data });
+    commentMutation.mutate({ diaryId: props.storyId, data });
     handleResetValue();
     handleResizeHeight();
     props.onReplyReset();
diff --git a/components/story/detail/header/story-detail-header.tsx b/components/story/detail/header/story-detail-header.tsx
index eb29653a..2d747cc3 100644
--- a/components/story/detail/header/story-detail-header.tsx
+++ b/components/story/detail/header/story-detail-header.tsx
@@ -3,16 +3,16 @@ import CalendarInstance from '@/utils/date/date.utils';
 import DropdownMenu from '@/components/kebab/kebab';
 import useToggle from '@/hooks/use-toggle';
 import styles from './story-detail-header.module.scss';
-import { useRouter } from 'next/router';
 import { useDeleteStory } from '@/hooks/queries/story/mutation';
+import { useRouter } from 'next/router';
 
 interface StoryDetailHeaderProps {
   isMyStory: boolean | undefined;
+  storyId: number;
 }
 
 export default function StoryDetailHeader(props: StoryDetailHeaderProps) {
   const router = useRouter();
-  const storyId = +router.query.storyId!;
   const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
   const today = CalendarInstance.getToday();
 
@@ -20,12 +20,12 @@ export default function StoryDetailHeader(props: StoryDetailHeaderProps) {
 
   const updateFn = () => {
     // 다이어리 수정 페이지로 이동해야함.
-    router.push(`/diaries/${storyId}/edit`);
+    router.push(`/diaries/${props.storyId}/edit`);
     onCloseToggle();
   };
 
   const deleteFn = () => {
-    deleteStoryMutation.mutate(storyId);
+    deleteStoryMutation.mutate(props.storyId);
     router.push(`/story`);
     onCloseToggle();
   };
diff --git a/components/story/detail/story-detail-post.tsx b/components/story/detail/story-detail-post.tsx
index d8d9e92e..cc385bd8 100644
--- a/components/story/detail/story-detail-post.tsx
+++ b/components/story/detail/story-detail-post.tsx
@@ -6,15 +6,13 @@ import StoryItemInfo from '@/components/story/item/story-item-info';
 import StoryItemSwiper from '@/components/story/item/story-item-swiper';
 import StoryDetailComments from '@/components/story/detail/comments/story-detail-comments';
 import StoryDetailAddComment from '@/components/story/detail/add-comment/story-detail-add-comment';
-import useRouterId from '@/hooks/utils/use-router-id';
 
 interface StoryDetailPostProps {
-  id: string;
+  storyId: number;
 }
 
 export default function StoryDetailPost(props: StoryDetailPostProps) {
-  const storyId = +useRouterId(props.id || 'storyId');
-  const detailQuery = useFetchDetailStory(storyId);
+  const detailQuery = useFetchDetailStory(props.storyId);
   const { replyOwner, handleReplyClick, handleReplyReset } = useReplyOwner();
 
   const isImage = detailQuery.data!.images.length !== 0;
@@ -26,9 +24,9 @@ export default function StoryDetailPost(props: StoryDetailPostProps) {
     <>
       <StoryItemHeader {...detailQuery.data!} />
       {isImage && <StoryItemSwiper images={detailQuery.data!.images} />}
-      <StoryItemInfo {...detailQuery.data!} storyId={storyId} commentCount={totalCommentcount} />
+      <StoryItemInfo {...detailQuery.data!} storyId={props.storyId} commentCount={totalCommentcount} />
       <StoryDetailComments comments={detailQuery.data!.comments} onReplyClick={handleReplyClick} />
-      <StoryDetailAddComment replyOwner={replyOwner} onReplyReset={handleReplyReset} />
+      <StoryDetailAddComment replyOwner={replyOwner} onReplyReset={handleReplyReset} storyId={props.storyId} />
     </>
   );
 }
diff --git a/components/story/item/story-item.tsx b/components/story/item/story-item.tsx
index 46723c91..79b4ad32 100644
--- a/components/story/item/story-item.tsx
+++ b/components/story/item/story-item.tsx
@@ -7,7 +7,6 @@ import { Story } from '@/types/story';
 
 export default function StoryItem(props: Story) {
   return (
-<<<<<<< HEAD
     <li>
       <Link href={`/story/${props.diaryId}`}>
         <StoryItemHeader {...props} />
@@ -15,26 +14,5 @@ export default function StoryItem(props: Story) {
         <StoryItemInfo {...props} storyId={props.diaryId} commentCount={props.commentCount} />
       </Link>
     </li>
-=======
-    <Link href={`/story/${props.diaryId}`}>
-      <StoryItemHeader
-        content={props.content}
-        author={props.author}
-        authorImage={props.authorImage}
-        weather={props.weather}
-        petImages={props.petImages}
-      />
-      {props.images.length !== 0 && <StoryItemSwiper images={props.images} />}
-      <StoryItemInfo
-        storyId={props.diaryId}
-        favoriteState={props.favoriteState}
-        authorGroup={props.authorGroup}
-        date={props.date}
-        content={props.content}
-        favoriteCount={props.favoriteCount}
-        commentCount={props.commentCount}
-      />
-    </Link>
->>>>>>> 7c494cf1b7948d5de365b5ca20fb4e18cbf5c0cc
   );
 }
diff --git a/components/story/list/story-list.tsx b/components/story/list/story-list.tsx
index ff76094f..32efce84 100644
--- a/components/story/list/story-list.tsx
+++ b/components/story/list/story-list.tsx
@@ -11,9 +11,6 @@ interface StoryListProps {
 export default function StoryList(props: StoryListProps) {
   return (
     <ul className={styles.wrapper}>
-<<<<<<< HEAD
-      {props.data.map((page) => page.response.map((story) => <StoryItem key={story.diaryId} {...story} />))}
-=======
       {props.data.map((page) =>
         page.response.map((story, index) => {
           return (
@@ -29,7 +26,6 @@ export default function StoryList(props: StoryListProps) {
           );
         }),
       )}
->>>>>>> 7c494cf1b7948d5de365b5ca20fb4e18cbf5c0cc
     </ul>
   );
 }
diff --git a/hooks/queries/diary/use-comment-put-mutation.ts b/hooks/queries/diary/use-comment-put-mutation.ts
index 7ac372fb..fa26b61b 100644
--- a/hooks/queries/diary/use-comment-put-mutation.ts
+++ b/hooks/queries/diary/use-comment-put-mutation.ts
@@ -1,17 +1,17 @@
-import { putComment } from '@/api/diaries';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+// import { putComment } from '@/api/diaries';
+// import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-const useCommentPutMutation = (diaryId: string, commentId: number) => {
-  const queryClient = useQueryClient();
+// const useCommentPutMutation = (diaryId: string, commentId: number) => {
+//   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationKey: ['diaries', diaryId, 'comments', commentId],
-    mutationFn: (content: string) => putComment(commentId, content),
-    onSuccess: () =>
-      queryClient.invalidateQueries({
-        queryKey: ['diaries', diaryId],
-      }),
-  });
-};
+//   return useMutation({
+//     mutationKey: ['diaries', diaryId, 'comments', commentId],
+//     mutationFn: (data) => putComment({ commentId, data }),
+//     onSuccess: () =>
+//       queryClient.invalidateQueries({
+//         queryKey: ['diaries', diaryId],
+//       }),
+//   });
+// };
 
-export default useCommentPutMutation;
+// export default useCommentPutMutation;
diff --git a/pages/diaries/[diaryId]/edit/edit.module.scss b/pages/diaries/[diaryId]/edit/edit.module.scss
deleted file mode 100644
index 7f66471e..00000000
--- a/pages/diaries/[diaryId]/edit/edit.module.scss
+++ /dev/null
@@ -1,217 +0,0 @@
-.container {
-  padding: 54px 0 100px;
-}
-
-.petSelect {
-  padding: 0 24px;
-  margin-top: 30px;
-}
-
-.pets {
-  display: flex;
-  gap: 15px;
-}
-
-.content {
-  font-size: 14px;
-  display: block;
-  width: 100%;
-  height: 160px;
-  padding: 0 24px;
-  margin-top: 22px;
-  margin-bottom: 30px;
-  border: none;
-  resize: none;
-  &::placeholder {
-    font-weight: 500;
-    line-height: 21px;
-    color: var(--text-color-gray);
-  }
-  &:focus {
-    outline: none;
-  }
-}
-
-.division {
-  margin: 0px auto 30px;
-  width: 382px;
-  border: 1px solid #d5d9dc;
-}
-
-.weatherContainer {
-  padding: 0 24px;
-  margin-bottom: 30px;
-}
-
-.weather {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: var(--text-color-gray);
-}
-.weatherIcons {
-  display: flex;
-  justify-content: space-between;
-
-  button {
-    height: 40px;
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    img {
-      width: 40px;
-      height: 40px;
-    }
-  }
-}
-
-.imagesContainer {
-  display: flex;
-  gap: 10px;
-  padding: 0 24px;
-  margin-bottom: 30px;
-  overflow-x: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.imagesContainer::-webkit-scrollbar {
-  display: none;
-}
-
-.images {
-  width: 110px;
-  height: 110px;
-  object-fit: cover;
-  border-radius: 10px;
-  cursor: pointer;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.button {
-  padding: 0 24px;
-}
-
-.storyshareContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 22px;
-  padding: 0 24px;
-  margin-bottom: 30px;
-}
-
-.storyshare {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 14px;
-  color: var(--text-color-gray);
-}
-
-.toggle {
-  position: relative;
-  display: inline-block;
-  width: 37.69px;
-  height: 20px;
-}
-
-.toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggleSlide {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--disabled-color);
-  transition: 0.4s;
-  border-radius: 27px;
-}
-
-.toggleSlide:before {
-  position: absolute;
-  content: '';
-  height: 16.92px;
-  width: 16.92px;
-  left: 2px;
-  bottom: 1.54px;
-  background-color: white;
-  transition: 0.4s;
-  border-radius: 50%;
-}
-
-input:checked + .toggleSlide {
-  background-color: var(--main-color);
-}
-
-input:checked + .toggleSlide:before {
-  transform: translateX(16.92px);
-}
-
-.dateContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  margin-bottom: 30px;
-}
-
-.date {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 43px;
-  height: 28px;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--white);
-  background-color: var(--main-color);
-}
-
-.dateInput {
-  border: none;
-  width: 96px;
-  font-size: 14px;
-  font-weight: bold;
-  color: var(--text-color-gray);
-
-  &::placeholder {
-    font-size: 14px;
-    font-weight: bold;
-    color: var(--text-color-gray);
-  }
-  &:focus {
-    outline: none;
-  }
-}
-
-.submit {
-  width: 100%;
-  padding: 14px;
-  color: var(--button-color);
-  background-color: var(--main-color);
-  border-radius: 9999px;
-}
-
-.disabled {
-  background-color: var(--disabled-color);
-  color: var(--white);
-}
-
-.error {
-  padding: 0 24px;
-  margin-top: 8px;
-  margin-bottom: 30px;
-  font-weight: 400;
-  color: var(--input-error);
-}
diff --git a/pages/diaries/[diaryId]/edit/index-copy.tsx b/pages/diaries/[diaryId]/edit/index-copy.tsx
deleted file mode 100644
index 0b911591..00000000
--- a/pages/diaries/[diaryId]/edit/index-copy.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { useForm, SubmitHandler, FieldValues } from 'react-hook-form';
-import classNames from 'classnames';
-import { WEATHER_TYPES } from '@/lib/constants/diaries-constants';
-import { fetchDiaryById, updateDiary } from '@/api/diaries';
-import styles from './edit.module.scss';
-import useCalenderDateStore from '@/store/calendar.store';
-import { convertToLocalDate } from '@/utils/convert-local-date';
-import usePetsQuery from '@/hooks/queries/calendar/use-pets-query';
-import { useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
-import PetSelect from '@/components/diaries/pet-select';
-import PetCheckbox from '@/components/diaries/pet-checkbox';
-import Image from 'next/image';
-import { diaryImageUpload } from '@/api/image-api';
-import { useDiaryQuery } from '@/hooks/queries/diary/use-diary-query';
-import CalendarInstance from '@/utils/date/date.utils';
-
-interface DiaryData {
-  content: string;
-  weather: string;
-  isShare: boolean;
-  date: string;
-  pets: number[];
-  images: (number | File)[];
-}
-
-const DiaryEdit: React.FC = () => {
-  const router = useRouter();
-  const { diaryId } = router.query;
-
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors, isValid },
-    resetField,
-    getValues,
-  } = useForm<DiaryData & FieldValues>({
-    defaultValues: {
-      content: '',
-      weather: '',
-      isShare: false,
-      date: '',
-      pets: [],
-      images: [],
-    },
-  });
-
-  const diaryQuery = useDiaryQuery(String(diaryId));
-
-  if (diaryQuery.isLoading) return '';
-
-  const date = CalendarInstance.getDateTime(diaryQuery.data!.date);
-
-  const selectedWeather = watch('weather');
-  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
-  const fileInputRefs = useRef<HTMLInputElement[]>([]);
-
-  const watchDate = watch('date');
-  useEffect(() => {
-    if (watchDate) {
-      const [year, month, day] = watchDate.split('-');
-      const convertedDate = convertToLocalDate({ year, month, day });
-      setValue('date', convertedDate);
-    }
-  }, [watchDate, setValue]);
-
-  const handleImageChange = () => async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files!;
-
-    const fileReader = new FileReader();
-    fileReader.readAsDataURL(files[0]!);
-    fileReader.onload = () => {
-      const previewUrl = fileReader.result as string;
-      setImagePreviews((prevImgae) => [...prevImgae, previewUrl]);
-    };
-
-    const imageData = { images: files[0]! };
-    const result = (await diaryImageUpload(imageData)).data;
-    setValue('images', result.data);
-  };
-
-  const onSubmit: SubmitHandler<DiaryData & FieldValues> = async (data) => {
-    try {
-      const response = await updateDiary(Number(diaryId), data);
-      console.log(response);
-      queryClient.invalidateQueries({ queryKey: ['diaries'] });
-      router.push('/diaries');
-    } catch (error) {
-      console.error('Failed to update diary', error);
-    }
-  };
-
-  const { data: pets, isLoading, isError, error } = usePetsQuery();
-
-  if (isLoading) return <p>Loading...</p>;
-  if (isError) return <p>Error: {error.message}</p>;
-
-  const handleTogglePet = (petId: number) => {
-    setSelectedPets((prevSelectedPets = []) =>
-      prevSelectedPets.includes(petId) ? prevSelectedPets.filter((id) => id !== petId) : [...prevSelectedPets, petId],
-    );
-  };
-
-  const handleClickAll = () => {
-    if (selectedPets.length === pets.length) {
-      setSelectedPets([]);
-      resetField('pets');
-    } else {
-      const allPetIds = pets.map((pet) => pet.petId);
-      setSelectedPets(allPetIds);
-      setValue('pets', allPetIds);
-    }
-  };
-
-  console.log(getValues('images'));
-
-  return (
-    <div className={styles.container}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className={styles.petSelect}>
-          <PetSelect selectAll={handleClickAll} title="반려동물 선택">
-            <div className={styles.pets}>
-              {pets.map((pet) => (
-                <PetCheckbox
-                  key={pet.petId}
-                  register={register}
-                  petId={pet.petId}
-                  petName={pet.name}
-                  petImage={pet.imageUrl}
-                  selectedPets={selectedPets}
-                  onTogglePet={handleTogglePet}
-                />
-              ))}
-            </div>
-          </PetSelect>
-        </div>
-
-        <textarea
-          {...register('content', { required: '*내용을 입력해주세요.' })}
-          className={styles.content}
-          id="content"
-          placeholder={'메모\n어떤 일정인지 자세하게 기록하실 수 있어요!'}
-        />
-        {errors.content && <p className={styles.error}>{errors.content.message}</p>}
-
-        <hr className={styles.division} />
-
-        <div className={styles.weatherContainer}>
-          <div className={styles.weather}>
-            <img src="/images/diaries/bar.svg" alt="Weather bar" />
-            날씨
-          </div>
-          <div className={styles.weatherIcons}>
-            {WEATHER_TYPES.map((weather) => (
-              <button
-                key={weather.id}
-                type="button"
-                onClick={() => setValue('weather', weather.label)}
-                className={selectedWeather === weather.label ? styles.selected : ''}
-              >
-                <img
-                  src={selectedWeather === weather.label ? weather.selectedIcon : weather.icon}
-                  alt={weather.label}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className={styles.imagesContainer}>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <div key={index} className={styles.images}>
-              <input
-                ref={(el) => (fileInputRefs.current[index] = el!)}
-                type="file"
-                accept="image/*"
-                onChange={handleImageChange(index)}
-                hidden
-              />
-              {/* {getValues('images')[index] ? (
-                <Image src={getValues('images')[index]} alt="" width={110} height={110} />
-              ) : (
-                <Image
-                  src={imagePreviews[index] || '/images/diaries/imageupload-default.svg'}
-                  alt="Upload preview"
-                  className={styles.images}
-                  onClick={() => fileInputRefs.current[index].click()}
-                  width={110}
-                  height={110}
-                />
-              )} */}
-              <Image
-                src={imagePreviews[index] || '/images/diaries/imageupload-default.svg'}
-                alt="Upload preview"
-                className={styles.images}
-                onClick={() => fileInputRefs.current[index].click()}
-                width={110}
-                height={110}
-              />
-            </div>
-          ))}
-        </div>
-
-        <div className={styles.storyshareContainer}>
-          <div className={styles.storyshare}>
-            <img src="/images/diaries/bar.svg" />
-            스토리에 공유하기
-          </div>
-          <label className={styles.toggle}>
-            <input type="checkbox" {...register('isShare')} />
-            <span className={styles.toggleSlide}></span>
-          </label>
-        </div>
-
-        <hr className={styles.division} />
-
-        <div className={styles.dateContainer}>
-          <div className={styles.date}>
-            <label htmlFor="date">날짜</label>
-          </div>
-          <input
-            className={styles.dateInput}
-            type="text"
-            id="date"
-            placeholder="YYYY-MM-DD"
-            {...register('date', {
-              required: '*날짜를 입력해주세요.',
-              pattern: {
-                value: /^\d{4}-\d{2}-\d{2}$/,
-                message: '*날짜 형식이 올바르지 않습니다. (예: 2024-06-15)',
-              },
-            })}
-          />
-        </div>
-        {errors.date && <p className={styles.error}>{errors.date.message}</p>}
-
-        <div className={styles.button}>
-          <button
-            className={classNames(styles.submit, {
-              [styles.disabled]: !isValid,
-            })}
-          >
-            수정하기
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default DiaryEdit;
diff --git a/pages/diaries/[diaryId]/edit/index.module.scss b/pages/diaries/[diaryId]/edit/index.module.scss
index a838a7e8..32e5acc4 100644
--- a/pages/diaries/[diaryId]/edit/index.module.scss
+++ b/pages/diaries/[diaryId]/edit/index.module.scss
@@ -1,4 +1,12 @@
-.button {
-  margin: 0 24px;
-  height: 46px;
+.submit {
+  width: 100%;
+  padding: 14px;
+  color: var(--button-color);
+  background-color: var(--main-color);
+  border-radius: 9999px;
+}
+
+.disabled {
+  background-color: var(--disabled-color);
+  color: var(--white);
 }
diff --git a/pages/diaries/[diaryId]/edit/index.tsx b/pages/diaries/[diaryId]/edit/index.tsx
index ba9796e4..86070737 100644
--- a/pages/diaries/[diaryId]/edit/index.tsx
+++ b/pages/diaries/[diaryId]/edit/index.tsx
@@ -5,7 +5,6 @@ import MemoItem from '@/components/diaries/edit/memo';
 import WeatherItem from '@/components/diaries/edit/diary-edit-weather';
 import DiaryEditImage from '@/components/diaries/edit/diary-edit-image/diary-edit-image';
 import DiaryEditShare from '@/components/diaries/edit/diary-edit-share/diary-edit-share';
-import Button from '@/components/common/button/button';
 import styles from './index.module.scss';
 import diaryApiInstance from '@/api/diaries';
 import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
@@ -15,6 +14,7 @@ import { fetchPets } from '@/api/calendar/request';
 import DiaryEditDate from '@/components/diaries/edit/diary-edit-date';
 import { useRouter } from 'next/router';
 import { useUpdateDiary } from '@/hooks/queries/diary/mutation';
+import classNames from 'classnames';
 
 interface FormFields {
   pets: number[];
@@ -39,7 +39,7 @@ export default function DiaryEditPage(props: InferGetServerSidePropsType<typeof
       date: '',
     },
   });
-
+  const { isValid } = methods.formState;
   const onSubmit = async (data: FormFields) => {
     const petsIds = data.pets.map((pet: number) => +pet);
     const transformedData = {
@@ -64,12 +64,16 @@ export default function DiaryEditPage(props: InferGetServerSidePropsType<typeof
           <WeatherItem />
           <DiaryEditImage images={props.diaryData.contentImages} />
           <DiaryEditShare />
-          <DiaryEditDate />
+          <DiaryEditDate initialDate={props.diaryData.date} />
 
           <div className={styles.button}>
-            <Button className="primary" type="submit" round>
+            <button
+              className={classNames(styles.submit, {
+                [styles.disabled]: !isValid,
+              })}
+            >
               등록하기
-            </Button>
+            </button>
           </div>
         </form>
       </FormProvider>
diff --git a/pages/diaries/[diaryId]/index.tsx b/pages/diaries/[diaryId]/index.tsx
index 59bb0022..6596469b 100644
--- a/pages/diaries/[diaryId]/index.tsx
+++ b/pages/diaries/[diaryId]/index.tsx
@@ -2,21 +2,30 @@ import DiaryDetailPost from '@/components/diaries/detail/diary-detail-post';
 import DiaryDetailHeader from '@/components/diaries/detail/header/diary-detail-header';
 import Suspensive from '@/components/suspensive/suspensive';
 import { useDiaryQuery } from '@/hooks/queries/diary/use-diary-query';
-
-import { useRouter } from 'next/router';
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import React from 'react';
 
-export default function StoryDetailPage() {
-  const router = useRouter();
-  const diaryId = +router.query.diaryId!;
+export default function StoryDetailPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const diaryId = +props.diaryId;
   const detailQuery = useDiaryQuery(String(diaryId));
 
   return (
     <div style={{ padding: '54px 24px 0px 24px' }}>
       <DiaryDetailHeader isMyStory={detailQuery.data?.isMyDiary} />
       <Suspensive isLoading={detailQuery.isLoading}>
-        <DiaryDetailPost id="diaryId" />
+        <DiaryDetailPost diaryId={diaryId} />
       </Suspensive>
     </div>
   );
 }
+
+export const getServerSideProps = (async ({ query }) => {
+  const diaryId = query.diaryId;
+  if (!diaryId) return { notFound: true };
+
+  return {
+    props: {
+      diaryId,
+    },
+  };
+}) satisfies GetServerSideProps;
diff --git a/pages/diaries/create/create.module.scss b/pages/diaries/create/create.module.scss
index 8b137891..c4b37018 100644
--- a/pages/diaries/create/create.module.scss
+++ b/pages/diaries/create/create.module.scss
@@ -1 +1,215 @@
+.container {
+  padding: 54px 0 100px;
+}
 
+.petSelect {
+  padding: 0 24px;
+  margin-top: 30px;
+}
+
+.pets {
+  display: flex;
+  gap: 15px;
+}
+
+.content {
+  font-size: 14px;
+  display: block;
+  width: 100%;
+  height: 160px;
+  padding: 0 24px;
+  margin-top: 22px;
+  margin-bottom: 30px;
+  border: none;
+  resize: none;
+  &::placeholder {
+    font-weight: 500;
+    line-height: 21px;
+    color: var(--text-color-gray);
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.division {
+  margin: 0px auto 30px;
+  width: 382px;
+  border: 1px solid #d5d9dc;
+}
+
+.weatherContainer {
+  padding: 0 24px;
+  margin-bottom: 30px;
+}
+
+.weather {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: var(--text-color-gray);
+}
+.weatherIcons {
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    height: 40px;
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.imagesContainer {
+  display: flex;
+  gap: 10px;
+  padding: 0 24px;
+  margin-bottom: 30px;
+  overflow-x: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.imagesContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.images {
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.button {
+  padding: 0 24px;
+}
+
+.storyshareContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 22px;
+  padding: 0 24px;
+  margin-bottom: 30px;
+}
+
+.storyshare {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 14px;
+  color: var(--text-color-gray);
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 37.69px;
+  height: 20px;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggleSlide {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--disabled-color);
+  transition: 0.4s;
+  border-radius: 27px;
+}
+
+.toggleSlide:before {
+  position: absolute;
+  content: '';
+  height: 16.92px;
+  width: 16.92px;
+  left: 2px;
+  bottom: 1.54px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .toggleSlide {
+  background-color: var(--main-color);
+}
+
+input:checked + .toggleSlide:before {
+  transform: translateX(16.92px);
+}
+
+.dateContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  margin-bottom: 30px;
+}
+
+.date {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 43px;
+  height: 28px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--white);
+  background-color: var(--main-color);
+}
+
+.dateInput {
+  border: none;
+  width: 96px;
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--text-color-gray);
+
+  &::placeholder {
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--text-color-gray);
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.submit {
+  width: 100%;
+  padding: 14px;
+  color: var(--button-color);
+  background-color: var(--main-color);
+  border-radius: 9999px;
+}
+
+.disabled {
+  background-color: var(--disabled-color);
+  color: var(--white);
+}
+
+.error {
+  padding: 0 24px;
+  margin-top: 8px;
+  margin-bottom: 30px;
+  font-weight: 400;
+  color: var(--input-error);
+}
diff --git a/pages/diaries/create/index.tsx b/pages/diaries/create/index.tsx
index 70295230..6241f039 100644
--- a/pages/diaries/create/index.tsx
+++ b/pages/diaries/create/index.tsx
@@ -1,12 +1,227 @@
-import DiaryCreate from '@/components/diaries/diary-create/diary-create';
+import React, { useRef, useState, useEffect } from 'react';
+import { FormProvider, useForm, SubmitHandler, FieldValues } from 'react-hook-form';
+import classNames from 'classnames';
+import { postDiariesImage, postDiaries } from '@/api/diaries/';
 import styles from './create.module.scss';
+import useCalenderDateStore from '@/store/calendar.store';
+import { convertToLocalDate } from '@/utils/convert-local-date';
+import usePetsQuery from '@/hooks/queries/calendar/use-pets-query';
+import { useQueryClient } from '@tanstack/react-query';
+import PetSelect from '@/components/diaries/pet-select';
+import PetCheckbox from '@/components/diaries/pet-checkbox';
+import ImageSkeleton from '@/components/skeleton/image/';
+import { useRouter } from 'next/router';
+import WeatherItem from '@/components/diaries/edit/diary-edit-weather';
+import MemoItem from '@/components/diaries/edit/memo';
+
+export interface DiaryData {
+  content: string;
+  weather: string;
+  isShare: boolean;
+  date: string;
+  pets: number[];
+  images: number[];
+}
+
+export default function DiaryCreate() {
+  const methods = useForm<DiaryData & FieldValues>({
+    defaultValues: {
+      content: '',
+      weather: '',
+      isShare: false,
+      date: '',
+      pets: [],
+      images: [],
+    },
+  });
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors, isValid },
+    resetField,
+  } = methods;
+
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const year = useCalenderDateStore.use.year().toString();
+  const month = (useCalenderDateStore.use.month() + 1).toString().padStart(2, '0');
+  const date = useCalenderDateStore.use.date().toString().padStart(2, '0');
+  const localDate = convertToLocalDate({ year, month, day: date });
+
+  useEffect(() => {
+    setValue('date', localDate);
+  }, [localDate, setValue]);
+
+  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
+  const [imageIds, setImageIds] = useState<number[]>([]);
+  const fileInputRefs = useRef<HTMLInputElement[]>([]);
+
+  const watchDate = watch('date');
+  useEffect(() => {
+    if (watchDate) {
+      const [year, month, day] = watchDate.split('-');
+      const convertedDate = convertToLocalDate({ year, month, day });
+      setValue('date', convertedDate);
+    }
+  }, [watchDate, setValue]);
+
+  const handleImageChange = (index: number) => async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      const fileArray = Array.from(files);
+
+      try {
+        const response = await postDiariesImage({ images: fileArray });
+        const newImageIds = [...imageIds];
+        newImageIds[index] = response.data[0];
+        setImageIds(newImageIds);
+
+        const fileReader = new FileReader();
+        fileReader.onload = () => {
+          const newImagePreviews = [...imagePreviews];
+          newImagePreviews[index] = fileReader.result as string;
+          setImagePreviews(newImagePreviews);
+        };
+        fileReader.readAsDataURL(files[0]);
+      } catch (error) {
+        console.error('failed to upload image:', error);
+      }
+    }
+  };
+
+  const onSubmit: SubmitHandler<DiaryData & FieldValues> = async (data) => {
+    const completeData = { ...data, images: imageIds };
+    try {
+      const response = await postDiaries(completeData);
+      console.log('Diary posted successfully:', response);
+      queryClient.invalidateQueries({ queryKey: ['diaries'] });
+      router.push('/diaries');
+    } catch (error) {
+      console.error('failed to post diary:', error);
+    }
+  };
+
+  const { data: pets, isLoading, isError, error } = usePetsQuery();
+  const [selectedPets, setSelectedPets] = useState<number[]>([]);
+
+  if (isError) return <p>Error: {error.message}</p>;
+
+  const handleTogglePet = (petId: number) => {
+    setSelectedPets((prevSelectedPets) =>
+      prevSelectedPets.includes(petId) ? prevSelectedPets.filter((id) => id !== petId) : [...prevSelectedPets, petId],
+    );
+  };
+
+  const handleClickAll = () => {
+    if (selectedPets.length === pets.length) {
+      setSelectedPets([]);
+      resetField('pets');
+    } else {
+      const allPetIds = pets.map((pet) => pet.petId);
+      setSelectedPets(allPetIds);
+      setValue('pets', allPetIds);
+    }
+  };
 
-const Create = () => {
   return (
     <div className={styles.container}>
-      <DiaryCreate />
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className={styles.petSelect}>
+            <PetSelect selectAll={handleClickAll} title="반려동물 선택">
+              <div className={styles.pets}>
+                {isLoading ? (
+                  <ImageSkeleton />
+                ) : (
+                  pets.map((pet) => (
+                    <PetCheckbox
+                      key={pet.petId}
+                      register={register}
+                      petId={pet.petId}
+                      petName={pet.name}
+                      petImage={pet.imageUrl}
+                      selectedPets={selectedPets}
+                      onTogglePet={handleTogglePet}
+                    />
+                  ))
+                )}
+              </div>
+            </PetSelect>
+          </div>
+          <MemoItem register={register} fieldName="content" />
+          <hr className={styles.division} />
+
+          <WeatherItem />
+
+          <div className={styles.imagesContainer}>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <div key={index}>
+                <input
+                  ref={(el) => {
+                    fileInputRefs.current[index] = el!;
+                  }}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageChange(index)}
+                  hidden
+                />
+                <img
+                  src={imagePreviews[index] || '/images/diaries/imageupload-default.svg'}
+                  alt="Upload preview"
+                  className={styles.images}
+                  onClick={() => fileInputRefs.current[index].click()}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className={styles.storyshareContainer}>
+            <div className={styles.storyshare}>
+              <img src="/images/diaries/bar.svg" />
+              스토리에 공유하기
+            </div>
+            <label className={styles.toggle}>
+              <input type="checkbox" {...register('isShare')} />
+              <span className={styles.toggleSlide}></span>
+            </label>
+          </div>
+
+          <hr className={styles.division} />
+
+          <div className={styles.dateContainer}>
+            <div className={styles.date}>
+              <label htmlFor="date">날짜</label>
+            </div>
+            <input
+              className={styles.dateInput}
+              type="text"
+              id="date"
+              placeholder="YYYY-MM-DD"
+              {...register('date', {
+                required: '*날짜를 입력해주세요.',
+                pattern: {
+                  value: /^\d{4}-\d{2}-\d{2}$/,
+                  message: '*날짜 형식이 올바르지 않습니다. (예: 2024-06-15)',
+                },
+              })}
+            />
+          </div>
+          {errors.date && <p className={styles.error}>{errors.date.message}</p>}
+
+          <div className={styles.button}>
+            <button
+              className={classNames(styles.submit, {
+                [styles.disabled]: !isValid,
+              })}
+            >
+              등록하기
+            </button>
+          </div>
+        </form>
+      </FormProvider>
     </div>
   );
-};
-
-export default Create;
+}
diff --git a/pages/story/[storyId]/index.tsx b/pages/story/[storyId]/index.tsx
index b0cec49f..e663bdbb 100644
--- a/pages/story/[storyId]/index.tsx
+++ b/pages/story/[storyId]/index.tsx
@@ -4,18 +4,17 @@ import Suspensive from '@/components/suspensive/suspensive';
 import StoryListItemSkeleton from '@/components/skeleton/story/item/story-list-item-skeleton';
 
 import { useFetchDetailStory } from '@/hooks/queries/story';
-import { useRouter } from 'next/router';
 import React from 'react';
 import StoryCommentListSkeleton from '@/components/skeleton/story/comment/list/story-comment-list-skeleton';
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 
-export default function StoryDetailPage() {
-  const router = useRouter();
-  const storyId = +router.query.storyId!;
+export default function StoryDetailPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const storyId = +props.storyId!;
   const detailQuery = useFetchDetailStory(storyId);
 
   return (
     <div style={{ padding: '54px 24px 0px 24px' }}>
-      <StoryDetailHeader isMyStory={detailQuery.data?.isMyStory} />
+      <StoryDetailHeader isMyStory={detailQuery.data?.isMyStory} storyId={storyId} />
       <Suspensive
         isLoading={detailQuery.isLoading}
         fallback={
@@ -25,8 +24,19 @@ export default function StoryDetailPage() {
           </>
         }
       >
-        <StoryDetailPost id="storyId" />
+        <StoryDetailPost storyId={storyId} />
       </Suspensive>
     </div>
   );
 }
+
+export const getServerSideProps = (async ({ query }) => {
+  const storyId = query.storyId;
+  if (!storyId) return { notFound: true };
+
+  return {
+    props: {
+      storyId,
+    },
+  };
+}) satisfies GetServerSideProps;