Merge pull request #67 from DearMyPeace/dev/컴포넌트-분리-및-코드-정리/#65

feat: Calendar Header Select modal /#65

Makefile

@@ -14,6 +14,9 @@ ios:
 web:
 	npm run start-react
 
+web-cc:
+	npm run start-react --reset-cache
+
 web-build:
 	npm run build
 
@@ -35,15 +38,20 @@ asset:
 cc: 
 	npx react-native start --reset-cache
 
-clean:
-	rm -rf ./node_modules
-	rm -rf ./ios/Pods
-	rm -rf ./ios/Podfile.lock
-	rm -rf ./ios/build
+clean-web:
+	sudo rm -rf node_modules && rm -rf dist
+
+clean-ios:
+	sudo rm -rf ./ios/Pods
+	sudo rm -rf ./ios/Podfile.lock
+	sudo rm -rf ./ios/build
 
 clean-android:
 	cd android && ./gradlew clean
 
-fclean: clean
+fclean-ios: clean-ios
+	sudo rm -rf node_modules
 
 re: fclean all
+
+re-web: clean-web npm web

babel.config.js

@@ -43,6 +43,7 @@ module.exports = {
       ? ['react-native-web', { commonjs: true }]
       : ['@babel/plugin-transform-private-methods', { loose: true }],
     moduleResolver,
+    '@babel/plugin-proposal-export-namespace-from',
     'react-native-reanimated/plugin',
     [
       'module:react-native-dotenv',

ios/Podfile

@@ -5,7 +5,7 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, min_ios_version_supported
+platform :ios, '12.0'
 prepare_react_native_project!
 
 linkage = ENV['USE_FRAMEWORKS']

ios/Podfile.lock

@@ -1187,6 +1187,8 @@ PODS:
     - React-utils (= 0.74.2)
   - RNAppleAuthentication (2.3.0):
     - React-Core
+  - RNCAsyncStorage (1.23.1):
+    - React-Core
   - RNCCheckbox (0.5.17):
     - BEMCheckBox (~> 1.4)
     - React-Core
@@ -1324,6 +1326,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNAppleAuthentication (from `../node_modules/@invertase/react-native-apple-authentication`)"
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCCheckbox (from `../node_modules/@react-native-community/checkbox`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -1458,6 +1461,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNAppleAuthentication:
     :path: "../node_modules/@invertase/react-native-apple-authentication"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCCheckbox:
     :path: "../node_modules/@react-native-community/checkbox"
   RNCPicker:
@@ -1538,6 +1543,7 @@ SPEC CHECKSUMS:
   React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
   ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
   RNAppleAuthentication: e99eaf3c4c01ad8ecb6125dd6f0cfd98871685b5
+  RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
   RNCCheckbox: a3ca9978cb0846b981d28da4e9914bd437403d77
   RNCPicker: b7873ba797dc586bfaf3307d737cbdc620a9ff3e
   RNGestureHandler: 2282cfbcf86c360d29f44ace393203afd5c6cff7

package.json

@@ -13,7 +13,9 @@
     "build": "BABEL_ENV=web webpack --config webpack.config.js --mode production"
   },
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@invertase/react-native-apple-authentication": "^2.3.0",
+    "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/checkbox": "^0.5.17",
     "@react-native-google-signin/google-signin": "^12.2.1",
     "@react-native-picker/picker": "^2.7.7",

src/components/ai/AiLetterEntryContent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { IAiLetterEntry } from '@type/IAiLetterEntry';
 import { fontBasic } from '@utils/Sizing';
-import MyText from '@components/common/MyText';
+import Markdown from 'react-native-markdown-display';
 
 interface AiLetterEntryContentProps {
   section: IAiLetterEntry;
@@ -11,7 +11,7 @@ interface AiLetterEntryContentProps {
 const AiLetterEntryContent: React.FC<AiLetterEntryContentProps> = ({ section }) => {
   return (
     <View style={styles.content}>
-      <MyText style={styles.contentText}>{section.content}</MyText>
+      <Markdown style={styles.contentText}>{section.content}</Markdown>
     </View>
   );
 };
@@ -23,8 +23,18 @@ const styles = StyleSheet.create({
     backgroundColor: '#F1E2CC',
   },
   contentText: {
-    color: 'black',
-    fontSize: fontBasic,
+    body: {
+      fontSize: fontBasic,
+      fontFamily: 'GowunBatang-Regular',
+    },
+    heading2: {
+      fontSize: 24,
+      fontFamily: 'GowunBatang-Bold',
+      marginTop: 10,
+    },
+    heading3: {
+      marginTop: 10,
+    },
   },
 });
 

src/components/ai/AiLetterEntryHeader.tsx

@@ -4,6 +4,7 @@ import { IAiLetterEntry } from '@type/IAiLetterEntry';
 import MyText from '@components/common/MyText';
 import Entypo from 'react-native-vector-icons/Entypo';
 import { fontBasic, fontMedium } from '@utils/Sizing';
+import { alertColor } from '@utils/colors';
 
 interface AiLetterEntryHeaderProps {
   section: IAiLetterEntry;
@@ -101,7 +102,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 1,
     right: -4,
-    backgroundColor: '#EB6D52',
+    backgroundColor: alertColor,
     borderRadius: 4,
     width: 4,
     height: 4,

src/components/common/MyText.tsx

@@ -5,6 +5,7 @@ interface MyTextProps extends TextProps {
   font?: string;
   size?: number;
   bold?: boolean;
+  style?: any;
 }
 
 // android 호환성 문제로 fontweight은 사용 불가

src/components/common/TabIcons.tsx

@@ -8,6 +8,7 @@ import AntDesign from 'react-native-vector-icons/AntDesign';
 import MyIconButtons from '@components/common/MyIconButtons';
 import { useRecoilValue } from 'recoil';
 import { userInfoState } from '@stores/login';
+import { alertColor } from '@utils/colors';
 
 export const CalendarIcon = memo(({ color }: ITabBarIconProps) => {
   if (Platform.OS === 'web') {
@@ -55,7 +56,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: -1,
     top: 1,
-    backgroundColor: '#EB6D52',
+    backgroundColor: alertColor,
     borderRadius: 8,
     width: 7,
     height: 7,

src/components/login/storageUtils.ts

@@ -0,0 +1,19 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const saveCheckStatus = async (key: string, value: boolean) => {
+  try {
+    await AsyncStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    console.error('Failed to save check status', e);
+  }
+};
+
+export const getCheckStatus = async (key: string): Promise<boolean> => {
+  try {
+    const value = await AsyncStorage.getItem(key);
+    return value ? JSON.parse(value) : false;
+  } catch (e) {
+    console.error('Failed to load check status', e);
+    return false;
+  }
+};

src/components/login/storageUtils.web.ts

@@ -0,0 +1,17 @@
+export const saveCheckStatus = async (key: string, value: boolean) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    console.error('Failed to save check status', e);
+  }
+};
+
+export const getCheckStatus = async (key: string): Promise<boolean> => {
+  try {
+    const value = localStorage.getItem(key);
+    return value ? JSON.parse(value) : false;
+  } catch (e) {
+    console.error('Failed to load check status', e);
+    return false;
+  }
+};

src/hooks/ai/ailetterHook.ts

@@ -38,8 +38,6 @@ export const useAiLetterData = (initialDateStr: string) => {
       console.log('fetchMonthSummary result: ', result);
       return result;
     },
-    staleTime: isCurrentMonth(currentDateStr) ? 0 : Infinity,
-    gcTime: isCurrentMonth(currentDateStr) ? 0 : Infinity,
   });
 
   const fetchContentForID = async (id: IID) => {

src/navigators/TabNavigator.tsx

@@ -9,14 +9,10 @@ import PieceChip from '@components/diary/header/PieceChip';
 import SettingButton from '@components/diary/header/SettingButton';
 import { CalendarIcon, AiLetterIcon, PieceIcon, ShopIcon } from '@components/common/TabIcons';
 import { appColor3 } from '@utils/colors';
-import { useRecoilValue } from 'recoil';
-import { userInfoState } from '@stores/login';
 
 const Tab = createBottomTabNavigator();
 
 const TabNavigator = () => {
-  const userInfo = useRecoilValue(userInfoState);
-
   return (
     <Tab.Navigator
       // initialRouteName="AiLetter"
@@ -55,7 +51,9 @@ const TabNavigator = () => {
         component={AiLetter}
         options={{
           tabBarLabel: '편지',
-          tabBarIcon: ({ color }) => <AiLetterIcon color={color} userInfo={userInfo} />,
+          tabBarIcon: ({ focused, color, size }) => (
+            <AiLetterIcon focused={focused} color={color} size={size} />
+          ),
           tabBarIconStyle: { marginTop: 5 },
         }}
       />