Merge pull request #72 from proj-poppin/bug/#71

❗Bug - 캘린더 BottomSheet 버그 수정 (#71)

ios/Podfile.lock

@@ -2344,7 +2344,7 @@ PODS:
     - FirebaseCoreExtension
     - React-Core
     - RNFBApp
-  - RNGestureHandler (2.15.0):
+  - RNGestureHandler (2.17.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -2365,7 +2365,7 @@ PODS:
     - React
   - RNPermissions (4.1.5):
     - React-Core
-  - RNReanimated (3.7.1):
+  - RNReanimated (3.12.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -2794,12 +2794,12 @@ SPEC CHECKSUMS:
   RNFBApp: 614f1621b49db54ebd258df8c45427370d8d84a2
   RNFBAuth: fbfd567c34579b2a081b9ae5d6f0e33c2f4d1205
   RNFBMessaging: 74754ed198239360950f54f3e3de365fe85db451
-  RNGestureHandler: 7feb85c5a30ebbcd4d5c7a851ba9e7eafb9860cb
+  RNGestureHandler: 3e87b5059b54bf1315bba9bc0252fb08d8e2d7b2
   RNGoogleSignin: fc408799f1990a12497a32f64280c0fe353ffcc1
   RNImageCropPicker: e7ab6fb43d2fc3e84651e786ef4a080d63b0ed3d
   RNNaverLogin: dc2758a157dafaa1ffca63079cad4d4c75208a30
   RNPermissions: 294531ede5a64d1528463e88fffef05675842042
-  RNReanimated: 06342ad46707263f3009e00b88beca6188c3675d
+  RNReanimated: 5fdbe436bdb843bb5fcf081539fd03cd9f2a5705
   RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   RNVectorIcons: ee070291bc6c7b4c880181b214534d4657ea1905

ios/PoppinProject/Info.plist

@@ -52,7 +52,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>13</string>
+	<string>14</string>
 	<key>FirebaseAppDelegateProxyEnabled</key>
 	<true/>
 	<key>ITSAppUsesNonExemptEncryption</key>

src/apis/myPage/getUserSetting.ts

@@ -1,18 +1,8 @@
 import nonPublicApiInstance from '../../apis/apiInstance/NonPublicApiInstance';
 
-export interface GetUserSettingResponse {
-  success: boolean;
-  error?: {
-    code: string;
-    message: string;
-  };
-}
-
-const getUserSetting = async (): Promise<GetUserSettingResponse> => {
+const getUserSetting = async (): Promise<CommonResponse<any>> => {
   try {
-    const response = await nonPublicApiInstance.get(
-      `/api/v1/user/settings`,
-    );
+    const response = await nonPublicApiInstance.get('/api/v1/user/settings');
     console.log('getUserSetting response:', response.data);
 
     if (response.data.success) {

src/apis/myPage/putChangeProfileImage.ts

@@ -0,0 +1,50 @@
+import nonPublicApiInstance from '../apiInstance/NonPublicApiInstance.ts';
+
+const putChangeProfileImage = async (image: {
+  uri: string;
+  type: string;
+  name?: string;
+}) => {
+  try {
+    const formData = new FormData();
+
+    formData.append('profileImage', {
+      uri: image.uri.startsWith('file://') ? image.uri : `file://${image.uri}`,
+      type: image.type,
+      name: image.name || 'image.jpg',
+    } as any);
+
+    const response = await nonPublicApiInstance.post(
+      '/api/v1/user/image',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        transformRequest: data => data,
+      },
+    );
+
+    console.log('Response:', response);
+
+    if (response.data.success) {
+      return response.data;
+    } else {
+      return {
+        success: false,
+        error: response.data.error,
+      };
+    }
+  } catch (error) {
+    console.log('Error modifying info:', error);
+    return {
+      success: false,
+      error: {
+        code: 'Network',
+        message: error instanceof Error ? error.message : 'Network error',
+      },
+    };
+  }
+};
+
+export default putChangeProfileImage;

src/components/ConfirmationModal.tsx

@@ -13,6 +13,8 @@ import AlertSvg from '../assets/images/alert.svg';
 import Text14R from '../styles/texts/body_medium/Text14R.ts';
 import Text20B from '../styles/texts/title/Text20B.ts';
 import Text18B from '../styles/texts/body_large/Text18B.ts';
+import Text16M from '../styles/texts/body_medium_large/Text16M.ts';
+import Text14M from '../styles/texts/body_medium/Text14M.ts';
 
 const ConfirmationModal = ({
   isVisible,
@@ -34,7 +36,7 @@ const ConfirmationModal = ({
               {mainTitle}
             </Text>
             <View>{isAlertSvg ? <AlertSvg /> : <CheckSvg />}</View>
-            <Text style={[Text18B.text, styles.subText, {marginTop: 20}]}>
+            <Text style={[Text14M.text, styles.subText, {marginTop: 20}]}>
               {subTitle}
             </Text>
             <Pressable
@@ -43,7 +45,7 @@ const ConfirmationModal = ({
               {({pressed}) => (
                 <Text
                   style={[
-                    Text14R.text,
+                    Text16M.text,
                     {
                       color: pressed
                         ? globalColors.buttonPressed
@@ -69,6 +71,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
   modalView: {
+    width: '80%',
     margin: 20,
     backgroundColor: 'white',
     borderRadius: 20,

src/components/CustomOKModal.tsx

@@ -12,7 +12,8 @@ import AlertSvg from '../assets/images/alert.svg';
 import CheckSvg from '../assets/images/check3.svg';
 import Text14R from '../styles/texts/body_medium/Text14R.ts';
 import Text18B from '../styles/texts/body_large/Text18B.ts';
-import Text12B from '../styles/texts/label/Text12B.ts'; // CheckSvg 경로도 실제 환경에 맞게 조정
+import Text12M from '../styles/texts/label/Text12M.ts';
+import Text14M from '../styles/texts/body_medium/Text14M.ts'; // CheckSvg 경로도 실제 환경에 맞게 조정
 
 const CustomOKModal = ({
   isVisible,
@@ -33,15 +34,15 @@ const CustomOKModal = ({
               {mainTitle}
             </Text>
             {isSuccessModal ? <CheckSvg /> : <AlertSvg />}
-            <Text style={[Text12B.text, styles.subText, {marginTop: 20}]}>
+            <Text style={[Text12M.text, styles.subText, {marginTop: 20}]}>
               {isSuccessModal
                 ? '변경 사항이 저장되었습니다.'
                 : '잠시 후 다시 시도해 주세요.'}
             </Text>
             <Pressable
               style={[styles.button, styles.okButton]}
               onPress={onClose}>
-              <Text style={[Text14R.text, {color: globalColors.blue}]}>
+              <Text style={[Text14M.text, {color: globalColors.blue}]}>
                 확인
               </Text>
             </Pressable>

src/components/OperationCalendarBottomSheet.tsx

@@ -1,20 +1,15 @@
 import React, {useState, useRef, useEffect} from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Pressable,
-} from 'react-native';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
 import {useReducedMotion} from 'react-native-reanimated';
 import {BottomSheetModal, BottomSheetBackdrop} from '@gorhom/bottom-sheet';
-import {Calendar} from 'react-native-calendars'; // Ensure this is installed
-import CalendarGraySvg from '../assets/icons/calendarGray.svg'; // Your SVG path
+import {Calendar} from 'react-native-calendars';
+import CalendarGraySvg from '../assets/icons/calendarGray.svg';
 import globalColors from '../styles/color/globalColors.ts';
 import DividerLine from './DividerLine.tsx';
 import CompleteButton from './atoms/button/CompleteButton.tsx';
 import {BottomSheetDefaultBackdropProps} from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 import Text18B from '../styles/texts/body_large/Text18B.ts';
+
 interface Dates {
   start: string;
   end: string;
@@ -27,19 +22,20 @@ interface OperationCalendarBottomSheetProps {
 const OperationCalendarBottomSheet: React.FC<
   OperationCalendarBottomSheetProps
 > = ({setSelectedDates}) => {
-  const [dates, setDates] = useState<Dates>({start: '', end: ''});
+  const [dates, setDates] = useState<Dates>({start: '오픈일', end: '종료일'});
   const [selectionMode, setSelectionMode] = useState('start');
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const reducedMotion = useReducedMotion();
+
   useEffect(() => {
     const today = new Date();
     const tomorrow = new Date(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-
-    const todayStr = today.toISOString().split('T')[0];
-    const tomorrowStr = tomorrow.toISOString().split('T')[0];
+    tomorrow.setDate(today.getDate() + 1);
 
-    setDates({start: todayStr, end: tomorrowStr});
+    // setDates({
+    //   start: today.toISOString().split('T')[0],
+    //   end: tomorrow.toISOString().split('T')[0],
+    // });
   }, []);
 
   const handleOpenCalendar = (mode: 'start' | 'end') => {
@@ -57,8 +53,8 @@ const OperationCalendarBottomSheet: React.FC<
     }
   };
 
-  const getDateInputTextStyle = (type: string, value: string) => ({
-    color: value ? globalColors.black : globalColors.font,
+  const getDateInputTextStyle = (value: string, defaultText: string) => ({
+    color: value === defaultText ? globalColors.font : globalColors.black,
   });
 
   const handleComplete = () => {
@@ -119,16 +115,16 @@ const OperationCalendarBottomSheet: React.FC<
         <Pressable
           style={[styles.input, styles.firstInput]}
           onPress={() => handleOpenCalendar('start')}>
-          <Text style={getDateInputTextStyle('start', dates.start)}>
-            {dates.start || '오픈일'}
+          <Text style={getDateInputTextStyle(dates.start, '오픈일')}>
+            {dates.start !== '' ? dates.start : '오픈일'}
           </Text>
         </Pressable>
         <Text style={styles.toText}>~</Text>
         <Pressable
           style={[styles.input, styles.secondInput]}
           onPress={() => handleOpenCalendar('end')}>
-          <Text style={getDateInputTextStyle('end', dates.end)}>
-            {dates.end || '종료일'}
+          <Text style={getDateInputTextStyle(dates.end, '종료일')}>
+            {dates.end !== '' ? dates.end : '종료일'}
           </Text>
           <CalendarGraySvg />
         </Pressable>
@@ -154,7 +150,7 @@ const OperationCalendarBottomSheet: React.FC<
               pressed && {backgroundColor: globalColors.warmGray},
             ]}
             onPress={() => setSelectionMode('start')}>
-            <Text style={getDateInputTextStyle('start', dates.start)}>
+            <Text style={getDateInputTextStyle(dates.start, '오픈일')}>
               {dates.start}
             </Text>
           </Pressable>
@@ -168,7 +164,7 @@ const OperationCalendarBottomSheet: React.FC<
               pressed && {backgroundColor: globalColors.warmGray},
             ]}
             onPress={() => setSelectionMode('end')}>
-            <Text style={getDateInputTextStyle('end', dates.end)}>
+            <Text style={getDateInputTextStyle(dates.end, '종료일')}>
               {dates.end}
             </Text>
           </Pressable>

src/components/OperationHoursBottomSheet.tsx

@@ -18,12 +18,14 @@ interface OperationHoursBottomSheetProps {
   setOperationTimes: (times: {start: string; end: string}) => void;
   operationTimes: Times; // 추가: 초기값을 받도록 수정
 }
-
 const OperationHoursBottomSheet: React.FC<OperationHoursBottomSheetProps> = ({
   setOperationTimes,
   operationTimes,
 }) => {
-  const [times, setTimes] = useState<Times>(operationTimes); // 초기값 설정
+  const [times, setTimes] = useState<Times>({
+    start: '오픈 시간',
+    end: '종료 시간',
+  });
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const [tempTime, setTempTime] = useState(new Date());
   const [selectionMode, setSelectionMode] = useState('start');

src/components/TextInputWithSvgIconInRight.tsx

@@ -9,6 +9,7 @@ interface TextInputWithSvgIconInRightProps {
   onIconPress?: () => void;
   IconComponent: ReactElement;
   isRequired?: boolean;
+  isClickableTextInput?: boolean; // New prop
 }
 
 const TextInputWithSvgIconInRight: React.FC<
@@ -19,6 +20,7 @@ const TextInputWithSvgIconInRight: React.FC<
   onIconPress = () => {},
   IconComponent,
   isRequired = false,
+  isClickableTextInput = false, // Default value
 }) => {
   const [isFocused, setIsFocused] = useState(false);
 
@@ -40,6 +42,7 @@ const TextInputWithSvgIconInRight: React.FC<
           editable={false} // 텍스트 입력 비활성화 (필요에 따라 조정)
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
+          pointerEvents={isClickableTextInput ? 'none' : 'auto'} // Prevent focus if clickable
         />
         <View style={styles.iconButton}>{IconComponent}</View>
       </Pressable>
@@ -66,5 +69,4 @@ const styles = StyleSheet.create({
     paddingRight: 10,
   },
 });
-
 export default TextInputWithSvgIconInRight;

src/components/atoms/toast/ToastComponent.tsx

@@ -13,12 +13,11 @@ const ToastComponent: React.FC<ToastComponentProps> = ({
   message,
   height = 50,
   onClose,
-  duration = 4000,
+  duration = 3000,
   fadeDuration = 500,
 }) => {
   const [isToastVisible, setIsToastVisible] = useState(true);
   const fadeAnim = useRef(new Animated.Value(0)).current;
-
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsToastVisible(false);
@@ -44,11 +43,11 @@ const ToastComponent: React.FC<ToastComponentProps> = ({
       width: 368,
       height: height,
       borderRadius: 14,
-      marginTop: 110,
+      marginTop: 100,
       marginLeft: 16,
       marginRight: 16,
       backgroundColor: 'rgba(0, 0, 0, 0.7)',
-      opacity: 10.0,
+      opacity: 1.0,
     } as ViewStyle,
     toastText: {
       width: '100%',