feat: 기록 화면 수정사항 반영 및 리팩토링

src/components/common/BasicConfirmModal.tsx

@@ -28,8 +28,12 @@ const BasicConfirmModal = ({
         <MyText style={{ textAlign: 'center' }}>{content}</MyText>
       </View>
       <View style={styles.modalButtons}>
-        <TextButton onPress={onCancel}>취소</TextButton>
-        <TextButton onPress={onConfirm}>{confirmText}</TextButton>
+        <TextButton style={styles.button} onPress={onCancel}>
+          취소
+        </TextButton>
+        <TextButton style={styles.button} onPress={onConfirm}>
+          {confirmText}
+        </TextButton>
       </View>
     </MyModal>
   );
@@ -47,7 +51,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 6,
-    width: '60%',
+    width: '100%',
+  },
+  button: {
+    flex: 1,
   },
 });
 

src/components/common/MyRadioButton.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleSheet, Pressable, View } from 'react-native';
+import MyText from 'components/common/MyText';
+import { fontLarge } from '@utils/Sizing';
+
+interface RadioButtonProps {
+  label: string;
+  value: string;
+  selected: boolean;
+  onPress: (value: string) => void;
+}
+
+const MyRadioButton = ({ label, value, selected, onPress }: RadioButtonProps) => {
+  return (
+    <Pressable
+      style={(state) => [
+        styles.radioButtonContainer,
+        state.pressed && { opacity: 0.5 },
+        state.hovered && { backgroundColor: 'rgba(31, 27, 21, 0.06)' },
+      ]}
+      onPress={() => onPress(value)}
+    >
+      <View style={[styles.radioCircle, selected && styles.selectedRadioCircle]}>
+        {selected && <View style={styles.radioInnerCircle} />}
+      </View>
+      <MyText style={styles.radioLabel}>{label}</MyText>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  radioButtonContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    borderRadius: 5,
+  },
+  radioCircle: {
+    height: 22,
+    width: 22,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#4e4539',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  selectedRadioCircle: {
+    borderColor: '#7e5700',
+  },
+  radioInnerCircle: {
+    height: 12,
+    width: 12,
+    borderRadius: 6,
+    backgroundColor: '#7e5700',
+  },
+  radioLabel: {
+    marginLeft: 10,
+    fontSize: fontLarge,
+  },
+});
+
+export default MyRadioButton;

src/components/common/TodayButton.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  GestureResponderHandlers,
+  Pressable,
+  Animated as RNAnimated,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import MyText from '@components/common/MyText';
+import { appColor3 } from '@utils/colors';
+
+interface ITodayButtonProps {
+  onPress?: () => void;
+  buttonStyle?: ViewStyle;
+  handler?: GestureResponderHandlers;
+}
+
+const TodayButton = ({ onPress, buttonStyle, handler }: ITodayButtonProps) => {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [styles.container, pressed && styles.pressed]}
+    >
+      <RNAnimated.View {...handler} style={[styles.todayButton, buttonStyle]}>
+        <MyText style={styles.todayButtonText}>오늘</MyText>
+      </RNAnimated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 8,
+  },
+  pressed: {
+    opacity: 0.5,
+  },
+  todayButton: {
+    backgroundColor: 'rgba(255, 255, 255, 0.47)',
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 5,
+    borderColor: appColor3,
+    borderWidth: 1,
+  },
+  todayButtonText: {
+    color: appColor3,
+    userSelect: 'none',
+    fontFamily: 'GowunBatang-Bold',
+  },
+});
+
+export default TodayButton;

src/components/diary/calendar/CalendarHeader.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import MyText from '@components/common/MyText';
+import TextButton from '@components/common/TextButton';
+import CalendarSelectModal from './CalendarSelectModal';
+import { kMonth } from '@utils/localeConfig';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { selectedDateStatus, tense } from '@stores/tense';
+import { fontLarge } from '@utils/Sizing';
+import TodayButton from '@components/common/TodayButton';
+import { getToday } from '@utils/dateUtils';
+
+const CalendarHeader = ({ date }: { date: string }) => {
+  const dateState = useRecoilValue(tense);
+  const [isModalVisible, setModalVisible] = useState(false);
+  const [selectedDate, setSelectedDate] = useRecoilState(selectedDateStatus);
+  const [selectedMonth, setSelectedMonth] = useState(parseInt(selectedDate.slice(5, 7), 10));
+  const [selectedYear, setSelectedYear] = useState(parseInt(selectedDate.slice(0, 4), 10));
+
+  const handleModalDismiss = () => {
+    const day = selectedDate.slice(8, 10);
+    const lastDay = new Date(selectedYear, selectedMonth, 0).getDate();
+    const month = selectedMonth.toString().padStart(2, '0');
+    if (parseInt(day, 10) > lastDay) {
+      setSelectedDate(`${selectedYear}-${month}-${lastDay}`);
+    } else {
+      setSelectedDate(`${selectedYear}-${month}-${day}`);
+    }
+    setModalVisible(false);
+  };
+
+  const onHeaderPress = () => {
+    setModalVisible(true);
+  };
+
+  const getDisplayDate = (date: Date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    return `${kMonth[month]} ${year}`;
+  };
+
+  const onPressToday = () => {
+    setSelectedDate(getToday());
+  };
+
+  return (
+    <View style={styles.header}>
+      <TextButton onPress={onHeaderPress}>
+        <MyText style={styles.headerText}>{getDisplayDate(new Date(date))}</MyText>
+      </TextButton>
+      {dateState !== 'TODAY' && <TodayButton onPress={onPressToday} />}
+      <CalendarSelectModal
+        isModalVisible={isModalVisible}
+        handleModalDismiss={handleModalDismiss}
+        selectedMonth={selectedMonth}
+        selectedYear={selectedYear}
+        setSelectedMonth={setSelectedMonth}
+        setSelectedYear={setSelectedYear}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  headerText: {
+    color: '#333333',
+    fontSize: fontLarge,
+  },
+  headerButton: {
+    fontSize: 20,
+  },
+});
+
+export default CalendarHeader;

src/components/diary/calendar/MyCalendar.tsx

@@ -1,31 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import CalendarArrow, { Direction } from '@components/diary/calendar/CalendarArrow';
 import { StyleSheet, View } from 'react-native';
 import { Calendar } from 'react-native-calendars';
-import setLocaleConfig, { kMonth } from '@utils/localeConfig';
+import setLocaleConfig from '@utils/localeConfig';
 import { IDate, IMarkedDates } from '@type/Diary';
 import { dotColors } from '@utils/colors';
 import { fontLarge } from '@utils/Sizing';
-import MyText from '@components/common/MyText';
-import TextButton from '@components/common/TextButton';
-import CalendarSelectModal from './CalendarSelectModal';
 import useCalendarHook from '@hooks/diary/calendarHook';
+import CalendarHeader from './CalendarHeader';
 
 setLocaleConfig();
 
 const MyCalendar = () => {
-  const {
-    onDayPress,
-    onMonthChange,
-    markedDates,
-    selectedDate,
-    setSelectedDate,
-    saveDateStatus,
-    setTargetMonth,
-  } = useCalendarHook();
-  const [isModalVisible, setModalVisible] = useState(false);
-  const [selectedMonth, setSelectedMonth] = useState(parseInt(selectedDate.slice(5, 7), 10));
-  const [selectedYear, setSelectedYear] = useState(parseInt(selectedDate.slice(0, 4), 10));
+  const { onDayPress, onMonthChange, markedDates, selectedDate, saveDateStatus, setTargetMonth } =
+    useCalendarHook();
   const markedDatesList: IMarkedDates = markedDates.reduce((acc, date) => {
     acc[date.markedDate] = {
       selected: date.markedDate === selectedDate,
@@ -38,37 +26,13 @@ const MyCalendar = () => {
   useEffect(() => {
     const year = new Date(selectedDate).getFullYear();
     const month = new Date(selectedDate).getMonth() + 1;
-    setSelectedMonth(month);
-    setSelectedYear(year);
     setTargetMonth({
       year: year.toString() as IDate['year'],
       month: month.toString().padStart(2, '0') as IDate['month'],
     });
     saveDateStatus(selectedDate);
   }, [selectedDate]);
 
-  const handleModalDismiss = () => {
-    const day = selectedDate.slice(8, 10);
-    const lastDay = new Date(selectedYear, selectedMonth, 0).getDate();
-    const month = selectedMonth.toString().padStart(2, '0');
-    if (parseInt(day, 10) > lastDay) {
-      setSelectedDate(`${selectedYear}-${month}-${lastDay}`);
-    } else {
-      setSelectedDate(`${selectedYear}-${month}-${day}`);
-    }
-    setModalVisible(false);
-  };
-
-  const onHeaderPress = () => {
-    setModalVisible(true);
-  };
-
-  const getDisplayDate = (date: Date) => {
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    return `${kMonth[month]} ${year}`;
-  };
-
   return (
     <View style={styles.container}>
       <Calendar
@@ -90,7 +54,12 @@ const MyCalendar = () => {
           selectedDayTextColor: '#FFFFFF',
           todayTextColor: '#C48E24',
           'stylesheet.calendar.header': {
-            headerContainer: { position: 'absolute', flexDirection: 'row', left: 10, gap: 20 },
+            headerContainer: {
+              position: 'absolute',
+              flexDirection: 'row',
+              left: 10,
+              gap: 20,
+            },
             header: {
               flexDirection: 'row',
               justifyContent: 'flex-end',
@@ -112,21 +81,7 @@ const MyCalendar = () => {
           ...markedDatesList,
         }}
         renderArrow={(direction: Direction) => <CalendarArrow direction={direction} />}
-        renderHeader={(date: string) => (
-          <>
-            <TextButton onPress={onHeaderPress}>
-              <MyText size={fontLarge}>{getDisplayDate(new Date(date))}</MyText>
-            </TextButton>
-            <CalendarSelectModal
-              isModalVisible={isModalVisible}
-              handleModalDismiss={handleModalDismiss}
-              selectedMonth={selectedMonth}
-              selectedYear={selectedYear}
-              setSelectedMonth={setSelectedMonth}
-              setSelectedYear={setSelectedYear}
-            />
-          </>
-        )}
+        renderHeader={(date: string) => <CalendarHeader date={date} />}
       />
     </View>
   );

src/components/diary/carousel/DiaryCard.tsx

@@ -17,6 +17,7 @@ const DiaryCard = ({
   isEditing,
   setIsEditing,
   isLetterSent,
+  isSuccess,
 }: IDiaryCardProps) => {
   const [diaryInput, setDiaryInput] = useState('');
   const [timeStartWriting, setTimeStartWriting] = useState<string>('');
@@ -36,7 +37,6 @@ const DiaryCard = ({
     sendDiary,
   } = useDiaryActions({
     setIsEditing,
-    setDiaryInput,
     setTimeStartWriting,
   });
   const targetDate = useRecoilValue(selectedDateStatus);
@@ -143,21 +143,23 @@ const DiaryCard = ({
         disabled={Platform.OS === 'web'}
       >
         <View style={styles.card}>
-          <DiaryCardHeader
-            isNew={id === NEW_DIARY}
-            createdTime={id !== NEW_DIARY ? createdTime : ''}
-            timeStartWriting={timeStartWriting}
-            isEditing={isEditing}
-            isLetterSent={isLetterSent}
-            loadingButton={loagindButton}
-            onClose={onClose}
-            onSave={onSave}
-            onDelete={onDelete}
-            onSend={onSend}
-            // isLoading={sendDiary.isPending || addNewDiary.isPending || editDiary.isPending}
-          />
+          {isSuccess ? (
+            <DiaryCardHeader
+              isNew={id === NEW_DIARY}
+              createdTime={id !== NEW_DIARY ? createdTime : ''}
+              timeStartWriting={timeStartWriting}
+              isEditing={isEditing}
+              isLetterSent={isLetterSent}
+              loadingButton={loagindButton}
+              onClose={onClose}
+              onSave={onSave}
+              onDelete={onDelete}
+              onSend={onSend}
+            />
+          ) : (
+            <View style={{ minHeight: 38 }} />
+          )}
           <DiaryInput
-            id={id}
             isNew={id === NEW_DIARY}
             diaryInput={diaryInput}
             setDiaryInput={setDiaryInput}