diff --git a/src/api/diary/get.ts b/src/api/diary/get.ts
index c893fc7..fdded25 100644
--- a/src/api/diary/get.ts
+++ b/src/api/diary/get.ts
@@ -19,7 +19,8 @@ export const useDiaryList = (targetDate: string, isMarked: boolean) => {
       const diaryList = data.diaries.map((item) => ({
         id: item.diaryId,
         content: item.content,
-        createdTime: item.createdDate,
+        createdDate: item.createdDate,
+        modifiedDate: item.modifiedDate,
       }));
       diaryList.length < 3 && diaryList.push(newDiary);
       return { sendStatus: data.sendStatus, diaryList };
diff --git a/src/components/common/TodayButton.tsx b/src/components/common/TodayButton.tsx
index 809477f..e408fe0 100644
--- a/src/components/common/TodayButton.tsx
+++ b/src/components/common/TodayButton.tsx
@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   todayButton: {
     backgroundColor: 'rgba(255, 255, 255, 0.47)',
     borderRadius: 10,
-    paddingVertical: 5,
+    paddingVertical: 1.5,
     paddingHorizontal: 5,
     borderColor: appColor3,
     borderWidth: 1,
diff --git a/src/components/diary/calendar/CalendarSelectModal.tsx b/src/components/diary/calendar/CalendarSelectModal.tsx
index 4386112..8810454 100644
--- a/src/components/diary/calendar/CalendarSelectModal.tsx
+++ b/src/components/diary/calendar/CalendarSelectModal.tsx
@@ -1,16 +1,15 @@
+import React, { useRef, useEffect } from 'react';
 import MyText from '@components/common/MyText';
 import { appColor3 } from '@utils/colors';
 import { kMonth } from '@utils/localeConfig';
 import { fontLarge } from '@utils/Sizing';
-import React from 'react';
 import {
   View,
   Modal,
-  FlatList,
   Pressable,
   TouchableWithoutFeedback,
   StyleSheet,
-  ListRenderItem,
+  ScrollView,
 } from 'react-native';
 
 interface IMonthItem {
@@ -35,51 +34,61 @@ const CalendarSelectModal = ({
   setSelectedMonth,
   setSelectedYear,
 }: ICalendarSelectModalProps) => {
-  const renderMonthItem: ListRenderItem<IMonthItem> = ({ item }) => (
-    <Pressable style={styles.modalItem} onPress={() => setSelectedMonth(item.index + 1)}>
-      <View style={selectedMonth === item.index + 1 && styles.selectedStyle}>
-        <MyText style={selectedMonth === item.index + 1 ? styles.selectedText : styles.modalText}>
-          {item.month}
+  const monthScrollRef = useRef<ScrollView>(null);
+  const yearScrollRef = useRef<ScrollView>(null);
+
+  const monthItemHeight = 49;
+  const yearItemHeight = 49;
+
+  const renderMonthItem = ({ month, index }: IMonthItem) => (
+    <Pressable key={index} style={styles.modalItem} onPress={() => setSelectedMonth(index + 1)}>
+      <View style={selectedMonth === index + 1 ? styles.selectedStyle : null}>
+        <MyText style={selectedMonth === index + 1 ? styles.selectedText : styles.modalText}>
+          {month}
         </MyText>
       </View>
     </Pressable>
   );
 
-  const renderYearItem: ListRenderItem<number> = ({ item }) => (
-    <Pressable style={styles.modalItem} onPress={() => setSelectedYear(item)}>
-      <View style={selectedYear === item && styles.selectedStyle}>
-        <MyText style={selectedYear === item ? styles.selectedText : styles.modalText}>
-          {item}
+  const renderYearItem = (year: number) => (
+    <Pressable key={year} style={styles.modalItem} onPress={() => setSelectedYear(year)}>
+      <View style={selectedYear === year ? styles.selectedStyle : null}>
+        <MyText style={selectedYear === year ? styles.selectedText : styles.modalText}>
+          {year}
         </MyText>
       </View>
     </Pressable>
   );
+
+  useEffect(() => {
+    if (isModalVisible) {
+      const monthOffset = (selectedMonth - 1) * monthItemHeight - 120;
+      const yearOffset = (selectedYear - 2000) * yearItemHeight - 120;
+      monthScrollRef.current?.scrollTo({ y: monthOffset, animated: true });
+      yearScrollRef.current?.scrollTo({ y: yearOffset, animated: true });
+    }
+  }, [isModalVisible, selectedMonth, selectedYear]);
+
   return (
     <Modal visible={isModalVisible} transparent={true} animationType="fade">
       <TouchableWithoutFeedback onPress={handleModalDismiss}>
         <View style={styles.modalOverlay}>
           <View style={styles.modalContent}>
             <View style={styles.modalListContainer}>
-              <View style={styles.modalMonth}>
-                <FlatList
-                  data={kMonth.map((month, index) => ({ month, index }))}
-                  renderItem={renderMonthItem}
-                  keyExtractor={(item) => item.index.toString()}
-                  initialScrollIndex={Math.max(0, selectedMonth - 1)}
-                  getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })}
-                  showsVerticalScrollIndicator={false}
-                />
-              </View>
-              <View style={styles.modalYear}>
-                <FlatList
-                  data={Array.from({ length: 50 }, (_, i) => 2000 + i)}
-                  renderItem={renderYearItem}
-                  keyExtractor={(item) => item.toString()}
-                  initialScrollIndex={Math.max(0, selectedYear - 2000)}
-                  getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })}
-                  showsVerticalScrollIndicator={false}
-                />
-              </View>
+              <ScrollView
+                ref={monthScrollRef}
+                style={styles.modalMonth}
+                showsVerticalScrollIndicator={false}
+              >
+                {kMonth.map((month, index) => renderMonthItem({ month, index }))}
+              </ScrollView>
+              <ScrollView
+                ref={yearScrollRef}
+                style={styles.modalYear}
+                showsVerticalScrollIndicator={false}
+              >
+                {Array.from({ length: 50 }, (_, i) => 2000 + i).map((year) => renderYearItem(year))}
+              </ScrollView>
             </View>
           </View>
         </View>
diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx
index 51edf1f..1ec2584 100644
--- a/src/components/diary/carousel/DiaryCard.tsx
+++ b/src/components/diary/carousel/DiaryCard.tsx
@@ -12,8 +12,9 @@ import { useDiaryActions } from '@hooks/diary/useDiaryActions';
 
 const DiaryCard = ({
   id,
-  createdTime,
   content,
+  createdDate,
+  modifiedDate,
   isEditing,
   setIsEditing,
   isLetterSent,
@@ -90,11 +91,10 @@ const DiaryCard = ({
   };
 
   const sendDiaryData = () => {
-    const cretatedDate = id === NEW_DIARY ? timeStartWriting : createdTime;
     const data = {
       content: diaryInput,
-      createdDate: cretatedDate,
-      modifiedDate: cretatedDate,
+      createdDate: createdDate || timeStartWriting,
+      modifiedDate: timeStartWriting,
     };
     id === NEW_DIARY ? addNewDiary.mutate(data) : editDiary.mutate({ diaryId: id, data });
   };
@@ -146,7 +146,7 @@ const DiaryCard = ({
           {isSuccess ? (
             <DiaryCardHeader
               isNew={id === NEW_DIARY}
-              createdTime={id !== NEW_DIARY ? createdTime : ''}
+              modifiedDate={modifiedDate}
               timeStartWriting={timeStartWriting}
               isEditing={isEditing}
               isLetterSent={isLetterSent}
@@ -187,7 +187,7 @@ const DiaryCard = ({
         visible={isSendModalVisible}
         setIsVisible={setSendModalVisible}
         onConfirm={onConfirmSend}
-        content={`이 날의 기록을 모두 보내시겠습니까?\n편지는 하루에 한 번만 받을 수 있어요.`}
+        content={`이 날의 기록을 모두 보내시겠습니까?\n수정 후 기록을 다시 보내면\n이전 편지는 사라집니다.`}
         confirmText="보내기"
       />
       <BasicConfirmModal
diff --git a/src/components/diary/carousel/DiaryCardHeader.tsx b/src/components/diary/carousel/DiaryCardHeader.tsx
index 9b2d01f..9beb652 100644
--- a/src/components/diary/carousel/DiaryCardHeader.tsx
+++ b/src/components/diary/carousel/DiaryCardHeader.tsx
@@ -10,7 +10,7 @@ import { DiaryButtonType } from '@type/Diary';
 
 interface DiaryCardHeaderProps {
   isNew: boolean;
-  createdTime: string;
+  modifiedDate: string;
   timeStartWriting: string;
   isEditing: boolean;
   isLetterSent: boolean;
@@ -28,7 +28,7 @@ const formatTime = (time: string) => {
 
 const DiaryCardHeader = ({
   isNew,
-  createdTime,
+  modifiedDate,
   timeStartWriting,
   isEditing,
   isLetterSent,
@@ -42,7 +42,9 @@ const DiaryCardHeader = ({
 
   return (
     <View style={styles.header}>
-      <MyText size={15}>{formatTime(createdTime) || formatTime(timeStartWriting)}</MyText>
+      <MyText size={15}>
+        {isEditing ? formatTime(timeStartWriting) : formatTime(modifiedDate)}
+      </MyText>
       <View style={styles.icons}>
         {Platform.OS === 'web' && isEditing && (
           <TextButton
diff --git a/src/components/diary/carousel/DiaryCarousel.native.tsx b/src/components/diary/carousel/DiaryCarousel.native.tsx
index af526bf..60bc274 100644
--- a/src/components/diary/carousel/DiaryCarousel.native.tsx
+++ b/src/components/diary/carousel/DiaryCarousel.native.tsx
@@ -26,8 +26,9 @@ const DiaryCarousel = () => {
     ({ item }) => (
       <DiaryCard
         id={item.id}
-        createdTime={item.createdTime}
         content={item.content}
+        createdDate={item.createdDate}
+        modifiedDate={item.modifiedDate}
         isEditing={isEditing}
         setIsEditing={setIsEditing}
         isLetterSent={sendStatus}
@@ -59,8 +60,9 @@ const DiaryCarousel = () => {
       <View style={[styles.container, { marginBottom: 28 }]}>
         <DiaryCard
           id={NEW_DIARY}
-          createdTime=""
           content=""
+          createdDate=""
+          modifiedDate=""
           isEditing={isEditing}
           setIsEditing={setIsEditing}
           isLetterSent={sendStatus}
diff --git a/src/components/diary/carousel/DiaryCarousel.web.tsx b/src/components/diary/carousel/DiaryCarousel.web.tsx
index cbb8de9..9875a67 100644
--- a/src/components/diary/carousel/DiaryCarousel.web.tsx
+++ b/src/components/diary/carousel/DiaryCarousel.web.tsx
@@ -39,8 +39,9 @@ const DiaryCarousel = () => {
         )}
         <DiaryCard
           id={data[activeIndex]?.id || NEW_DIARY}
-          createdTime={data[activeIndex]?.createdTime || ''}
           content={data[activeIndex]?.content || ''}
+          createdDate={data[activeIndex]?.createdDate}
+          modifiedDate={data[activeIndex]?.modifiedDate}
           isEditing={isEditing}
           setIsEditing={setIsEditing}
           isLetterSent={sendStatus}
diff --git a/src/components/diary/carousel/DiaryInput.tsx b/src/components/diary/carousel/DiaryInput.tsx
index 68b6064..dcd19ac 100644
--- a/src/components/diary/carousel/DiaryInput.tsx
+++ b/src/components/diary/carousel/DiaryInput.tsx
@@ -32,19 +32,16 @@ const DiaryInput = ({
 
   const onChangeText = (text: string) => {
     if (text.length > MAX_LENGTH) return;
+    setDiaryInput(text);
+  };
+
+  const onFocus = () => {
     if (!timeStartWriting) {
       const now = new Date();
       const [year, month, date] = targetDate.split('-').map(Number);
       now.setFullYear(year, month - 1, date);
       setTimeStartWriting(now.toISOString());
     }
-    if (text.length === 0) {
-      setTimeStartWriting('');
-    }
-    setDiaryInput(text);
-  };
-
-  const onFocus = () => {
     setIsEditing(true);
   };
 
diff --git a/src/hooks/diary/diaryHook.ts b/src/hooks/diary/diaryHook.ts
index 4754dfd..ce5be76 100644
--- a/src/hooks/diary/diaryHook.ts
+++ b/src/hooks/diary/diaryHook.ts
@@ -1,6 +1,6 @@
 import { useDiaryList } from '@api/diary/get';
 import { markedDateStatus } from '@stores/tense';
-import { newDiary } from '@type/Diary';
+import { IDiary, newDiary } from '@type/Diary';
 import { useRecoilValue } from 'recoil';
 
 const useDiaryHook = (selectedDate: string) => {
@@ -10,7 +10,7 @@ const useDiaryHook = (selectedDate: string) => {
     markedDateSet.has(selectedDate),
   );
 
-  const diaryData = isSuccess
+  const diaryData: IDiary[] = isSuccess
     ? data?.diaryList || [newDiary]
     : isPending
     ? [{ ...newDiary, content: '심심기록을 가져오는 중입니다.' }]
diff --git a/src/hooks/diary/useDiaryActions.ts b/src/hooks/diary/useDiaryActions.ts
index e124789..c6f1a25 100644
--- a/src/hooks/diary/useDiaryActions.ts
+++ b/src/hooks/diary/useDiaryActions.ts
@@ -33,9 +33,8 @@ export const useDiaryActions = ({ setIsEditing, setTimeStartWriting }: IUseDiary
     mutationFn: (data: IDiaryPostRequest) => postDiary(data),
     onSuccess: (data: IDiariesResponse) => {
       queryClient.setQueryData(['diary', 'list', targetDate], (prev: IDiaryListResponse) => {
-        console.log('prev', prev);
         return {
-          ...prev,
+          sendStatus: false,
           diaries: [...prev.diaries, data],
         };
       });
@@ -55,7 +54,7 @@ export const useDiaryActions = ({ setIsEditing, setTimeStartWriting }: IUseDiary
     onSuccess: (_, diaryId) => {
       queryClient.setQueryData(['diary', 'list', targetDate], (prev: IDiaryListResponse) => {
         return {
-          ...prev,
+          sendStatus: false,
           diaries: prev.diaries.filter((item: IDiariesResponse) => item.diaryId !== diaryId),
         };
       });
@@ -72,10 +71,9 @@ export const useDiaryActions = ({ setIsEditing, setTimeStartWriting }: IUseDiary
   const editDiary = useMutation({
     mutationFn: (data: IDiaryPatchRequest) => patchDiary(data),
     onSuccess: (data) => {
-      setTimeStartWriting(data.createdDate);
       queryClient.setQueryData(['diary', 'list', targetDate], (prev: IDiaryListResponse) => {
         return {
-          ...prev,
+          sendStatus: false,
           diaries: prev.diaries.map((diary: IDiariesResponse) =>
             diary.diaryId === data.diaryId ? data : diary,
           ),
diff --git a/src/screens/ai/AiLetterCalendarHeader.tsx b/src/screens/ai/AiLetterCalendarHeader.tsx
index 755483b..cb31f9d 100644
--- a/src/screens/ai/AiLetterCalendarHeader.tsx
+++ b/src/screens/ai/AiLetterCalendarHeader.tsx
@@ -1,18 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {
-  View,
-  StyleSheet,
-  Pressable,
-  Modal,
-  ScrollView,
-  TouchableWithoutFeedback,
-} from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
 import CalendarArrow from '@components/diary/calendar/CalendarArrow';
 import { IDay } from '@type/Diary';
 import MyText from '@components/common/MyText';
-import { appColor3 } from '@utils/colors';
-import { fontLarge } from '@utils/Sizing';
 import TodayButton from '@components/common/TodayButton';
+import CalendarSelectModal from '@components/diary/calendar/CalendarSelectModal';
+import { kMonth } from '@utils/localeConfig';
 
 interface AiLetterCalendarHeaderProps {
   selectedDate: IDay;
@@ -31,69 +24,20 @@ const AiLetterCalendarHeader = ({
   isToday,
   onPressToday,
 }: AiLetterCalendarHeaderProps) => {
-  const kMonth = [
-    '일 월',
-    '이 월',
-    '삼 월',
-    '사 월',
-    '오 월',
-    '유 월',
-    '칠 월',
-    '팔 월',
-    '구 월',
-    '시 월',
-    '십일 월',
-    '십이 월',
-  ];
   const [isModalVisible, setModalVisible] = useState(false);
   const [selectedMonth, setSelectedMonth] = useState(parseInt(selectedDate.month, 10));
   const [selectedYear, setSelectedYear] = useState(parseInt(selectedDate.year, 10));
 
-  const monthItemHeight = 49;
-  const yearItemHeight = 49;
-
-  const monthScrollRef = useRef<ScrollView>(null);
-  const yearScrollRef = useRef<ScrollView>(null);
-
   useEffect(() => {
     setSelectedMonth(parseInt(selectedDate.month, 10));
     setSelectedYear(parseInt(selectedDate.year, 10));
   }, [selectedDate]);
 
-  useEffect(() => {
-    if (isModalVisible) {
-      const monthOffset = (selectedMonth - 1) * monthItemHeight - 120;
-      const yearOffset = (selectedYear - 2000) * yearItemHeight - 120;
-      monthScrollRef.current?.scrollTo({ y: monthOffset, animated: true });
-      yearScrollRef.current?.scrollTo({ y: yearOffset, animated: true });
-    }
-  }, [isModalVisible, selectedMonth, selectedYear]);
-
   const handleModalDismiss = () => {
     onMonthYearSelect(selectedMonth, selectedYear);
     setModalVisible(false);
   };
 
-  const renderMonthItem = (month, index) => (
-    <Pressable key={index} style={styles.modalItem} onPress={() => setSelectedMonth(index + 1)}>
-      <View style={selectedMonth === index + 1 ? styles.selectedStyle : null}>
-        <MyText style={selectedMonth === index + 1 ? styles.selectedText : styles.modalText}>
-          {month}
-        </MyText>
-      </View>
-    </Pressable>
-  );
-
-  const renderYearItem = (year) => (
-    <Pressable key={year} style={styles.modalItem} onPress={() => setSelectedYear(year)}>
-      <View style={selectedYear === year ? styles.selectedStyle : null}>
-        <MyText style={selectedYear === year ? styles.selectedText : styles.modalText}>
-          {year}
-        </MyText>
-      </View>
-    </Pressable>
-  );
-
   return (
     <View style={styles.headerContainer}>
       <View style={styles.MYContainer}>
@@ -112,34 +56,15 @@ const AiLetterCalendarHeader = ({
           <CalendarArrow direction="right" />
         </Pressable>
       </View>
-
       {/* Month and Year Modal */}
-      <Modal visible={isModalVisible} transparent={true} animationType="fade">
-        <TouchableWithoutFeedback onPress={handleModalDismiss}>
-          <View style={styles.modalOverlay}>
-            <View style={styles.modalContent}>
-              <View style={styles.modalListContainer}>
-                <ScrollView
-                  ref={monthScrollRef}
-                  style={styles.modalMonth}
-                  showsVerticalScrollIndicator={false}
-                >
-                  {kMonth.map((month, index) => renderMonthItem(month, index))}
-                </ScrollView>
-                <ScrollView
-                  ref={yearScrollRef}
-                  style={styles.modalYear}
-                  showsVerticalScrollIndicator={false}
-                >
-                  {Array.from({ length: 50 }, (_, i) => 2000 + i).map((year) =>
-                    renderYearItem(year),
-                  )}
-                </ScrollView>
-              </View>
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
-      </Modal>
+      <CalendarSelectModal
+        isModalVisible={isModalVisible}
+        handleModalDismiss={handleModalDismiss}
+        selectedMonth={selectedMonth}
+        selectedYear={selectedYear}
+        setSelectedMonth={setSelectedMonth}
+        setSelectedYear={setSelectedYear}
+      />
     </View>
   );
 };
@@ -167,49 +92,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 10,
   },
-  modalOverlay: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  modalContent: {
-    width: 300,
-    maxHeight: 300,
-    backgroundColor: '#ffffff',
-    borderRadius: 10,
-    padding: 10,
-    flexDirection: 'row',
-  },
-  modalListContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  modalMonth: {
-    width: '50%',
-  },
-  modalYear: {
-    width: '50%',
-  },
-  modalItem: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-  },
-  modalText: {
-    fontSize: fontLarge,
-    textAlign: 'center',
-  },
-  selectedText: {
-    fontSize: fontLarge,
-    textAlign: 'center',
-    color: appColor3,
-  },
-  selectedStyle: {
-    borderColor: appColor3,
-    borderWidth: 1,
-    borderRadius: 15,
-    paddingVertical: 10,
-    paddingHorizontal: 19,
-  },
 });
diff --git a/src/types/Diary.ts b/src/types/Diary.ts
index 7988b9d..c085072 100644
--- a/src/types/Diary.ts
+++ b/src/types/Diary.ts
@@ -3,7 +3,8 @@ import { Dispatch, SetStateAction } from 'react';
 export interface IDiary {
   id: number;
   content: string;
-  createdTime: string;
+  createdDate: string;
+  modifiedDate: string;
 }
 
 export interface IDiaryList {
@@ -15,7 +16,8 @@ export const NEW_DIARY = -1;
 export const newDiary = {
   id: NEW_DIARY,
   content: '이 날의 심심기록을 남겨보세요',
-  createdTime: '',
+  createdDate: '',
+  modifiedDate: '',
 };
 
 export type DateStatus = 'TODAY' | 'PAST' | 'FUTURE';