Merge pull request #99 from DearMyPeace/SS-34-FE-modify-diary-time

fix: �기록 시간 표시 수정, 설정 ui 수정
DearMyPeace · Nov 1, 2024 · 49a1741 · 49a1741
2 parents 68078be + 2b6f3d0
commit 49a1741
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 81 deletions.
diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx
@@ -14,7 +14,6 @@ const DiaryCard = ({
   id,
   content,
   createdDate,
-  modifiedDate,
   isEditing,
   setIsEditing,
   isLetterSent,
@@ -29,8 +28,6 @@ const DiaryCard = ({
     setSendModalVisible,
     isEditModalVisible,
     setEditModalVisible,
-    isInformModalVisible,
-    setInformModalVisible,
     setSnackbar,
     addNewDiary,
     removeDiary,
@@ -112,24 +109,9 @@ const DiaryCard = ({
       setIsEditing(false);
       return;
     }
-    if (isLetterSent) {
-      setInformModalVisible(true);
-      return;
-    }
-    sendDiaryData();
-  };
-
-  const onConfirmSaveEdit = () => {
-    setInformModalVisible(false);
     sendDiaryData();
   };
 
-  const onCancelSaveEdit = () => {
-    setInformModalVisible(false);
-    setIsEditing(false);
-    setDiaryInput(content);
-  };
-
   const onKeyboardDismiss = () => {
     setIsEditing(false);
     Keyboard.dismiss();
@@ -146,7 +128,7 @@ const DiaryCard = ({
           {isSuccess ? (
             <DiaryCardHeader
               isNew={id === NEW_DIARY}
-              modifiedDate={modifiedDate}
+              createdDate={createdDate}
               timeStartWriting={timeStartWriting}
               isEditing={isEditing}
               isLetterSent={isLetterSent}
@@ -190,14 +172,6 @@ const DiaryCard = ({
         content={`이 날의 기록을 모두 보내시겠습니까?\n수정 후 기록을 다시 보내면\n이전 편지는 사라집니다.`}
         confirmText="보내기"
       />
-      <BasicConfirmModal
-        visible={isInformModalVisible}
-        setIsVisible={setInformModalVisible}
-        onConfirm={onConfirmSaveEdit}
-        onCancel={onCancelSaveEdit}
-        content={`기록을 수정해도\n편지의 내용은 바뀌지 않아요.`}
-        confirmText="저장"
-      />
       {sendDiary.isPending && <DiaryLoading />}
     </>
   );

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;
-  modifiedDate: string;
+  createdDate: string;
   timeStartWriting: string;
   isEditing: boolean;
   isLetterSent: boolean;
@@ -28,7 +28,7 @@ const formatTime = (time: string) => {
 
 const DiaryCardHeader = ({
   isNew,
-  modifiedDate,
+  createdDate,
   timeStartWriting,
   isEditing,
   isLetterSent,
@@ -42,9 +42,7 @@ const DiaryCardHeader = ({
 
   return (
     <View style={styles.header}>
-      <MyText size={15}>
-        {isEditing ? formatTime(timeStartWriting) : formatTime(modifiedDate)}
-      </MyText>
+      <MyText size={15}>{formatTime(createdDate) || formatTime(timeStartWriting)}</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
@@ -28,7 +28,6 @@ const DiaryCarousel = () => {
         id={item.id}
         content={item.content}
         createdDate={item.createdDate}
-        modifiedDate={item.modifiedDate}
         isEditing={isEditing}
         setIsEditing={setIsEditing}
         isLetterSent={sendStatus}
@@ -62,7 +61,6 @@ const DiaryCarousel = () => {
           id={NEW_DIARY}
           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
@@ -41,7 +41,6 @@ const DiaryCarousel = () => {
           id={data[activeIndex]?.id || NEW_DIARY}
           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/DiaryPagination.tsx b/src/components/diary/carousel/DiaryPagination.tsx
@@ -11,7 +11,7 @@ const DiaryPagination = ({ activeIndex, diaryList }: IDiaryPaginationProps) => {
   return (
     <View style={styles.container}>
       {diaryList.length === 0 && <View style={[styles.dot, styles.empty]} />}
-      {diaryList.map((diary, index) => {
+      {diaryList.map((_, index) => {
         return <View key={index} style={[styles.dot, activeIndex === index && styles.activeDot]} />;
       })}
     </View>

diff --git a/src/components/setting/SettingSection.tsx b/src/components/setting/SettingSection.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import MyText from '@components/common/MyText';
-import TextButton from '@components/common/TextButton';
 import { Pressable, StyleSheet, View } from 'react-native';
 import { fontLarge } from '@utils/Sizing';
 
 interface ISectionProps {
   label: string;
   content?: string;
   onPress?: () => void;
-  onLabelPress?: () => void;
   textColor?: string;
   icon?: React.ReactNode;
 }
@@ -17,60 +15,51 @@ const SettingSection = ({
   label,
   content = '',
   onPress,
-  onLabelPress,
   textColor = 'black',
   icon,
 }: ISectionProps) => {
   return (
     <View style={styles.container}>
-      <View style={styles.content}>
-        {onLabelPress ? (
-          <Pressable onPress={onLabelPress}>
-            {({ pressed }) => (
-              <MyText bold size={fontLarge} style={[pressed && styles.pressed]}>
-                {label}
-              </MyText>
-            )}
-          </Pressable>
-        ) : (
-          <MyText bold size={fontLarge}>
-            {label}
-          </MyText>
-        )}
-        {onPress ? (
-          <TextButton textColor={textColor} onPress={onPress}>
-            {content}
-          </TextButton>
-        ) : (
-          <View style={styles.contentContainer}>
-            {icon}
-            <MyText style={{ color: textColor }}>{content}</MyText>
-          </View>
-        )}
-      </View>
+      <Pressable
+        style={(state) => [
+          styles.button,
+          state.pressed && { opacity: 0.5 },
+          state.hovered && { backgroundColor: 'rgba(31, 27, 21, 0.06)' },
+          !onPress && { cursor: 'default' },
+        ]}
+        onPress={onPress}
+      >
+        <MyText bold size={fontLarge}>
+          {label}
+        </MyText>
+        <View style={styles.contentContainer}>
+          {icon}
+          <MyText style={{ color: textColor }}>{content}</MyText>
+        </View>
+      </Pressable>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
-    paddingTop: 11,
+    borderBottomWidth: 1,
+    borderBottomColor: '#D5D5D5',
   },
-  content: {
-    paddingVertical: 6,
+  button: {
+    padding: 5,
+    marginVertical: 6,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#D5D5D5',
+    borderRadius: 5,
   },
   pressed: {
     opacity: 0.5,
   },
   contentContainer: {
     flexDirection: 'row',
-    marginHorizontal: 8,
     marginVertical: 9,
   },
 });

diff --git a/src/hooks/diary/useDiaryActions.ts b/src/hooks/diary/useDiaryActions.ts
@@ -27,7 +27,6 @@ export const useDiaryActions = ({ setIsEditing, setTimeStartWriting }: IUseDiary
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
   const [isSendModalVisible, setSendModalVisible] = useState(false);
   const [isEditModalVisible, setEditModalVisible] = useState(false);
-  const [isInformModalVisible, setInformModalVisible] = useState(false);
 
   const addNewDiary = useMutation({
     mutationFn: (data: IDiaryPostRequest) => postDiary(data),
@@ -114,8 +113,6 @@ export const useDiaryActions = ({ setIsEditing, setTimeStartWriting }: IUseDiary
     setSendModalVisible,
     isEditModalVisible,
     setEditModalVisible,
-    isInformModalVisible,
-    setInformModalVisible,
     setSnackbar,
     addNewDiary,
     removeDiary,

diff --git a/src/screens/setting/SettingTermsScreen.tsx b/src/screens/setting/SettingTermsScreen.tsx
@@ -42,13 +42,10 @@ const SettingTermsScreen = () => {
 
   return (
     <SettingContainer modals={modals} footerText="SimSim.Co">
-      <SettingSection label="개인정보 처리방침" onLabelPress={() => setModalName('policy')} />
-      <SettingSection label="이용약관" onLabelPress={() => setModalName('terms')} />
-      <SettingSection
-        label="오픈 소스 라이브러리"
-        onLabelPress={() => setModalName('openSource')}
-      />
-      {/* <SettingSection label="사업자 정보" onLabelPress={() => setModalName('business')} /> */}
+      <SettingSection label="개인정보 처리방침" onPress={() => setModalName('policy')} />
+      <SettingSection label="이용약관" onPress={() => setModalName('terms')} />
+      <SettingSection label="오픈 소스 라이브러리" onPress={() => setModalName('openSource')} />
+      {/* <SettingSection label="사업자 정보" onPress={() => setModalName('business')} /> */}
     </SettingContainer>
   );
 };

diff --git a/src/types/Diary.ts b/src/types/Diary.ts
@@ -4,7 +4,7 @@ export interface IDiary {
   id: number;
   content: string;
   createdDate: string;
-  modifiedDate: string;
+  modifiedDate?: string;
 }
 
 export interface IDiaryList {