Merge pull request #47 from DearMyPeace/dev/26-diary-bug/#26

fix: diary bug/#26
DearMyPeace · Jul 2, 2024 · 17a3009 · 17a3009
2 parents 7d298c5 + cec72cc
commit 17a3009
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 31 deletions.
diff --git a/src/components/diary/calendar/MyCalendar.tsx b/src/components/diary/calendar/MyCalendar.tsx
@@ -21,13 +21,17 @@ const MyCalendar = ({ selectedDate, markedDates, onDayPress, onMonthChange }: IM
       selected: date.markedDate === selectedDate,
       marked: date.markedDate !== selectedDate,
       dotColor: dotColors[date.diaryCount] || dotColors[3],
+      disableTouchEvent: false,
+      disabled: false,
     };
     return acc;
   }, {} as IMarkedDates);
 
   return (
     <View style={styles.container}>
       <Calendar
+        disabledByDefault
+        disableAllTouchEventsForDisabledDays
         style={styles.calendar}
         theme={{
           textDayFontFamily: 'GowunBatang-Regular',
@@ -37,6 +41,7 @@ const MyCalendar = ({ selectedDate, markedDates, onDayPress, onMonthChange }: IM
           textDayHeaderFontSize: 15,
           textMonthFontSize: fontLarge,
           dayTextColor: '#666666',
+          textDisabledColor: '#666666',
           arrowColor: '#666666',
           monthTextColor: '#333333',
           selectedDayBackgroundColor: '#C48E24',
@@ -61,7 +66,7 @@ const MyCalendar = ({ selectedDate, markedDates, onDayPress, onMonthChange }: IM
         onDayPress={onDayPress}
         onMonthChange={onMonthChange}
         markedDates={{
-          [selectedDate]: { selected: true },
+          [selectedDate]: { selected: true, disabled: false, disableTouchEvent: false },
           ...markedDatesList,
         }}
         renderArrow={(direction: Direction) => <CalendarArrow direction={direction} />}
@@ -74,19 +79,12 @@ export default MyCalendar;
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 10,
     paddingBottom: 16,
   },
   calendar: {
     borderWidth: 1,
     borderColor: '#EBEBEB',
     borderRadius: 12,
-    marginHorizontal: 14,
     padding: 10,
-    ...Platform.select({
-      web: {
-        marginHorizontal: 28,
-      },
-    }),
   },
 });
diff --git a/src/components/diary/carousel/DiaryArrowIcons.tsx b/src/components/diary/carousel/DiaryArrowIcons.tsx
@@ -25,11 +25,12 @@ export default DiaryArrowIcons;
 const styles = StyleSheet.create({
   icon: {
     position: 'absolute',
+    zIndex: 1,
   },
   leftIcon: {
-    left: 5,
+    left: 0,
   },
   rightIcon: {
-    right: 5,
+    right: 0,
   },
 });
diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx
@@ -151,10 +151,9 @@ const styles = StyleSheet.create({
     width: CARD_WIDTH,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 10,
     ...Platform.select({
       web: {
-        width: '90%',
+        width: '100%',
         height: '100%',
       },
     }),
@@ -166,13 +165,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     backgroundColor: '#F1E2CC',
     borderRadius: 12,
-    marginHorizontal: 6,
-    ...Platform.select({
-      web: {
-        width: '100%',
-        height: '100%',
-      },
-    }),
   },
 });
 

diff --git a/src/components/diary/carousel/DiaryCarousel.web.tsx b/src/components/diary/carousel/DiaryCarousel.web.tsx
@@ -59,16 +59,14 @@ export default DiaryCarousel;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
     alignItems: 'center',
   },
   cardContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
-    height: '90%',
+    height: '100%',
     position: 'relative',
   },
 });
diff --git a/src/screens/diary/DiaryScreen.tsx b/src/screens/diary/DiaryScreen.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import MyCalendar from '@components/diary/calendar/MyCalendar';
 import DiaryCarousel from '@components/diary/carousel/DiaryCarousel';
 import useCalendarHook from '@hooks/diary/calendarHook';
 import MySnackbar from '@components/common/MySnackbar';
+import { paddingLarge } from '@utils/Sizing';
 
 const DiaryScreen = () => {
   const { selectedDate, onDayPress, onMonthChange, markedDates, snackbarText } = useCalendarHook();
@@ -27,7 +28,8 @@ const DiaryScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 16,
+    paddingHorizontal: paddingLarge,
+    paddingVertical: 10,
   },
 });
 

diff --git a/src/types/Diary.ts b/src/types/Diary.ts
@@ -33,6 +33,8 @@ export interface IMarkedDates {
     selected: boolean;
     marked: boolean;
     dotColor: string;
+    disableTouchEvent: boolean;
+    disabled: boolean;
   };
 }
 

diff --git a/src/utils/Sizing.ts b/src/utils/Sizing.ts
@@ -1,10 +1,12 @@
 import { Dimensions } from 'react-native';
 
+export const paddingLarge = 30;
+
 export const windowWidth = Dimensions.get('window').width;
 
 export const windowHeight = Dimensions.get('window').height;
 
-export const CARD_WIDTH = windowWidth - 32;
+export const CARD_WIDTH = windowWidth - paddingLarge * 2;
 
 export const fontBasic = 14;
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -94,13 +94,13 @@ module.exports = {
       resourceRegExp: /^expo-constants$/,
     }),
     new CopyWebpackPlugin({
-        patterns: [
+      patterns: [
         {
-            from: path.resolve(appDirectory, 'public/favicon'),
-            to: path.resolve(appDirectory, 'dist/favicon'),
-            },
-        ],
-        }),
+          from: path.resolve(appDirectory, 'public/favicon'),
+          to: path.resolve(appDirectory, 'dist/favicon'),
+        },
+      ],
+    }),
   ],
   resolve: {
     alias: {