Merge pull request #97 from DearMyPeace/SS-30-FE-modify-diary

Fix: 기록 수정 변경사항 반영
DearMyPeace · Oct 26, 2024 · 68078be · 68078be
2 parents a8ad075 + 6226b6b
commit 68078be
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 195 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
           ),