[Refactor][BottomSheet] upload screen 바텀시트 높이설정 & 자잘한 디자인 교정 (#270)

* fix: 잘못된 margin 수정

* fix: 수정 시 뒤로가기 모달 수정

* fix: 폴더 선택 바텀 시트를 키보드 높이에 동적으로 적용되어 위치하도록 작업 했으나, 키보드가 최소 한 번은 나타나야 그 높이를 알 수 있어서, 처음 열때는 정적 높이를 지정할 수 없는 상태로 우선 push

* chore: 콘솔 제거

* upload screen 초입 시 autoFocus가 있으면 keyboard를 띄우고 시작할 수 있음을 깨달음

* android에서 contitinal button 의 글자가 희미한 현상 해결을 위해 색상을 투명도가 아닌 hex로 조정. 이것이 해결책이 될지는 불확실

* fix: 예외처리 추가

* fix: folder 삭제 모달 디자인 수정

src/components/bottomsheet/SheetPostOptions.tsx

@@ -5,12 +5,13 @@ import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/typ
 import { Feather } from '@expo/vector-icons';
 import ConditionalButton from '../buttons/ConditionalButton';
 import TwoButtonModal from '../modal/TwoButtonModal';
-import { reportInsight, reportType } from '../../utils/api/report/insight/insightReport';
+import { reportInsight } from '../../utils/api/report/insight/insightReport';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
 import DetailReportSheetContent from '../../screens/detailedPost/DetailReportSheetContent';
 import { blockApi } from '../../utils/api/block/block';
 import { useNavigation } from '@react-navigation/native';
 import { InsightAPI } from '../../utils/api/InsightAPI';
+import { reportType } from '../../utils/api/report/comment/commentReport';
 
 interface BSPostOptionsProps {
   modalRef: React.RefObject<BottomSheetModalMethods>;
@@ -39,7 +40,6 @@ const SheetPostOptions = ({
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [selectedReport, setSelectedReport] = useState<number | null>(null);
   const [reportText, setReportText] = useState('');
-  const [isSnackBarVisible, setIsSnackBarVisible] = useState(false);
   const screenWidth = Dimensions.get('window').width;
 
   const navigation = useNavigation();
@@ -147,7 +147,7 @@ const SheetPostOptions = ({
             <Text>기타 신고 사유</Text>
           </Text>
         </Pressable>
-        <Pressable onPress={handleReportSubmit}>
+        <Pressable onPress={handleReportSubmit} style={styles.reportSubmitButton}>
           <ConditionalButton
             isActive={selectedReport !== null}
             width={screenWidth - 32}
@@ -223,11 +223,13 @@ function createStyles(fonts: ReactNativePaper.ThemeFonts) {
     },
     clickableOption: {
       paddingVertical: 18,
-      marginBottom: 30,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
     },
+    reportSubmitButton: {
+      marginTop: 30,
+    },
     header: {
       ...fonts.text.headline1,
       marginBottom: 24,

src/components/buttons/ConditionalButton.tsx

@@ -54,13 +54,12 @@ const ConditionalButton = ({
               ...styles.btn,
               width: width,
               borderRadius: borderRadius ?? 50,
-              backgroundColor: color || theme.colors.graphic.black,
-              opacity: isActive ? 1 : 0.2,
+              backgroundColor: isActive ? color || theme.colors.graphic.black : '#d3d3d3',
             },
             styleProp,
           ]}
         >
-          <Text style={{ ...styles.text, color: textColor ? textColor : 'white' }}>{text}</Text>
+          <Text style={{ ...styles.text, color: textColor || 'white' }}>{text}</Text>
         </View>
       </Pressable>
     </KeyboardAvoidingView>
@@ -83,6 +82,5 @@ const styles = StyleSheet.create({
   text: {
     fontWeight: '600',
     fontSize: 18,
-    color: 'white',
   },
 });

src/components/challenge/ChallengeParticipationView.tsx

@@ -27,7 +27,7 @@ const ChallengeParticipationView = ({
     () => getFormattedDateArray(startDate as string, dayProgresses as []),
     [current, insightPerWeek, startDate, endDate, dayProgresses],
   );
-  const firstDay = formattedWeekWithCheck[0].day;
+  const firstDay = formattedWeekWithCheck[0]?.day ?? '';
   return (
     <View style={styles.container}>
       <View style={styles.upperSection}>
@@ -45,7 +45,7 @@ const ChallengeParticipationView = ({
           return (
             <View key={challenge.day} style={styles.day}>
               {today === challenge.day && <TodayBubble isFirst={today === firstDay} />}
-              <CircularCheckbox isChecked={challenge.progress.check} />
+              <CircularCheckbox isChecked={challenge.progress?.check ?? false} />
               <Text style={{ color: `${theme.colors.graphic.black}80` }}>{challenge.day}</Text>
             </View>
           );

src/components/comments/CommentVerticalDots.tsx

@@ -21,7 +21,7 @@ const CommentVerticalDots = ({ userId, userName, commentId }: FeedVerticalDotsPr
 
   const handleLayout = (event) => {
     const height = event.nativeEvent.layout.height;
-    setContentHeight(height + 50);
+    setContentHeight(height + 76);
   };
 
   const renderBackdrop = useCallback(

src/components/comments/SheetOthersComment.tsx

@@ -26,7 +26,6 @@ const SheetOthersComment = ({ modalRef, userId, userName, commentId }: BSPostOpt
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [selectedReport, setSelectedReport] = useState<number | null>(null);
   const [reportText, setReportText] = useState('');
-  const [isSnackBarVisible, setIsSnackBarVisible] = useState(false);
   const screenWidth = Dimensions.get('window').width;
 
   const handlePress = () => {
@@ -146,7 +145,7 @@ const SheetOthersComment = ({ modalRef, userId, userName, commentId }: BSPostOpt
         ))}
         <Pressable onPress={handleEtcReason} style={styles.clickableOption}>
           <Text style={styles.optionTitle}>
-            <Text>기타 사유 신고</Text>
+            <Text>기타 신고 사유</Text>
           </Text>
         </Pressable>
         <Pressable onPress={handleReportSubmit} style={{ marginTop: 30 }}>

src/components/modal/TwoButtonModal.tsx

@@ -43,8 +43,8 @@ const TwoButtonModal = ({
           <BottomFixButton
             isActive={true}
             text={leftButtonText}
-            width={148}
-            height={48}
+            width={152}
+            height={52}
             color={`${theme.colors.graphic.black}1a`}
             textColor={`${theme.colors.graphic.black}cc`}
             buttonStyle={styles.modalButton}
@@ -53,8 +53,8 @@ const TwoButtonModal = ({
           <BottomFixButton
             isActive={true}
             text={rightButtonText}
-            width={148}
-            height={48}
+            width={152}
+            height={52}
             color={rightButtonColor ?? theme.colors.graphic.black}
             textColor={theme.colors.graphic.white}
             buttonStyle={styles.modalButton}
@@ -83,6 +83,6 @@ const styles = StyleSheet.create({
   },
   modalButton: {
     borderRadius: 12,
-    marginHorizontal: 4,
+    marginHorizontal: 12,
   },
 });

src/components/texts/StaticSizeScrollTextArea.tsx

@@ -24,6 +24,7 @@ const StaticSizeScrollTextArea = ({
   placeholder,
   setInputValue,
   limit,
+  autoFocus,
 }: AutoGrowScrollTextAreaProps) => {
   const theme = useTheme();
 
@@ -44,6 +45,7 @@ const StaticSizeScrollTextArea = ({
           numberOfLines={16}
           scrollEnabled={true}
           textAlignVertical="top"
+          autoFocus={autoFocus}
         />
         <View style={styles.letterNumberContainer}>
           <View style={styles.limitContainer}>

src/screens/Feed/FeedVerticalDots.tsx

@@ -39,7 +39,7 @@ const FeedVerticalDots = ({
 
   const handleLayout = (event) => {
     const height = event.nativeEvent.layout.height;
-    setContentHeight(height + 50);
+    setContentHeight(height + 72);
   };
 
   const renderBackdrop = useCallback(

src/screens/settings/folderSettings/FolderEditScreen.tsx

@@ -79,7 +79,7 @@ const FolderEditScreen = ({ navigation }) => {
       <FolderEditSection userFolderList={userFolderList} />
       <BottomSheetModal
         ref={modalRefAdd}
-        snapPoints={['52%', '60%']}
+        snapPoints={['52%', '62%']}
         backdropComponent={renderBackdrop}
       >
         <View>

src/screens/settings/folderSettings/FolderEditSection.tsx

@@ -1,5 +1,5 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { SvgXml } from 'react-native-svg';
 import { roundedMinus } from '../../../../assets/images/user/settings/folder/rounded_minus';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -8,19 +8,20 @@ import BottomSheetHeader from '../../../components/header/BottomSheetHeader';
 import HeaderRightButton from '../../../components/header/HeaderRightButton';
 import BlandTextInput from '../../../components/texts/BlandTextInput';
 import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet';
-import { UploadApis } from '../../../utils/api/UploadAPIs';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
 import { MypageQueryKeys } from '../../../utils/api/mypageAPI';
-import { Updater, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { drawerApi } from '../../../utils/api/drawer/drawerApi';
 import { getUserId } from '../../../utils/hooks/asyncStorage/Login';
 import { useGetUserId } from '../../../utils/hooks/useGetUserId';
+import { useTheme } from 'react-native-paper';
 
 interface FolderEditSectionProps {
   userFolderList: FolderData[];
 }
 
 const FolderEditSection = ({ userFolderList }: FolderEditSectionProps) => {
+  const theme = useTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [pressedFolderId, setPressedFolderId] = useState<number | null>(null);
   const [folderName, setFolderName] = useState<string>('');
@@ -130,7 +131,7 @@ const FolderEditSection = ({ userFolderList }: FolderEditSectionProps) => {
             </Pressable>
             <BottomSheetModal
               ref={modalRefEdit}
-              snapPoints={['52%', '60%']}
+              snapPoints={['52%', '62%']}
               backdropComponent={renderBackdrop}
             >
               <View>
@@ -161,11 +162,12 @@ const FolderEditSection = ({ userFolderList }: FolderEditSectionProps) => {
         dismissable={true}
         visible={isModalVisible}
         onDismiss={() => setIsModalVisible(false)}
-        mainTitle="폴더 삭제"
+        mainTitle="폴더를 삭제할까요?"
         leftButtonText="취소"
         rightButtonText="삭제하기"
         leftButtonPress={() => setIsModalVisible(false)}
         rightButtonPress={handleDeleteFolder}
+        rightButtonColor={theme.colors.graphic.red}
       />
     </ScrollView>
   );

src/screens/upload/FolderSheetContent.tsx

@@ -1,30 +1,34 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { LayoutChangeEvent, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import React, { useState } from 'react';
 import BottomSheetHeader from '../../components/header/BottomSheetHeader';
 import HeaderRightButton from '../../components/header/HeaderRightButton';
 import Folder from '../../components/Folder/Folder';
 import BlandTextInput from '../../components/texts/BlandTextInput';
-import { BottomSheetScrollView, useBottomSheet } from '@gorhom/bottom-sheet';
+import { useBottomSheet } from '@gorhom/bottom-sheet';
 import { backButtonModalClose } from '../../utils/helper/bottomSheetUtils/bottomSheetUtils';
 import { IFolder } from '../../types/upload';
 import { useTheme } from 'react-native-paper';
 
 interface FolderSheetContentProps {
+  scrollViewHeight?: number;
   onHeaderLeftPress: () => void;
   handleSheetComplete: () => void;
   setFolder: React.Dispatch<React.SetStateAction<IFolder[]>>;
   selectedFolder: string;
   setSelectedFolder: React.Dispatch<React.SetStateAction<string>>;
   folders: IFolder[];
+  onLayout?: (event: LayoutChangeEvent) => void;
 }
 
 const FolderSheetContent = ({
+  scrollViewHeight,
   onHeaderLeftPress,
   handleSheetComplete,
   setFolder,
   setSelectedFolder,
   folders,
   selectedFolder,
+  onLayout,
 }: FolderSheetContentProps) => {
   const theme = useTheme();
   const [createFolder, setCreateFolder] = useState(false);
@@ -35,67 +39,67 @@ const FolderSheetContent = ({
     setCreateFolder(true);
   };
 
-  return (
-    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
-      {createFolder ? (
-        <>
-          <BottomSheetHeader
-            onLeftButtonPress={onHeaderLeftPress}
-            onPress={handleSheetComplete}
-            title="새폴더 만들기"
-            headerRightButton={() => (
-              <HeaderRightButton
-                pressableStyle={{
-                  right: -10,
-                }}
-                text="완료"
-                disabled={false}
-                borderLine={false}
-                backGroundColor="#b0e817"
-                textColor="black"
-                handlePress={handleSheetComplete}
-              />
-            )}
-          />
+  return createFolder ? (
+    <View onLayout={onLayout}>
+      <View style={{ height: 132 }}>
+        <BottomSheetHeader
+          onLeftButtonPress={onHeaderLeftPress}
+          title="새폴더 만들기"
+          headerRightButton={() => (
+            <HeaderRightButton
+              pressableStyle={{
+                right: -10,
+              }}
+              text="완료"
+              disabled={false}
+              borderLine={false}
+              backGroundColor="#b0e817"
+              textColor="black"
+              handlePress={handleSheetComplete}
+            />
+          )}
+        />
 
-          <View style={styles.newFolderContainer}>
-            <BlandTextInput textVal={selectedFolder} setTextVal={setSelectedFolder} />
-          </View>
-        </>
-      ) : (
-        <>
+        <View style={styles.newFolderContainer}>
+          <BlandTextInput textVal={selectedFolder} setTextVal={setSelectedFolder} />
+        </View>
+      </View>
+    </View>
+  ) : (
+    <ScrollView
+      contentContainerStyle={styles.contentContainer}
+      style={{ height: scrollViewHeight }}
+    >
+      <Folder
+        style={styles.folderContainer}
+        key={0}
+        text={'선택안함'}
+        textStyle={{ color: '#12131450' }}
+        setSelectedFolder={setSelectedFolder}
+        selectedFolder={selectedFolder}
+      />
+      {folders.map((folder) => {
+        return (
           <Folder
             style={styles.folderContainer}
-            key={0}
-            text={'선택안함'}
-            textStyle={{ color: '#12131450' }}
+            key={folder.id}
+            text={folder.name}
             setSelectedFolder={setSelectedFolder}
             selectedFolder={selectedFolder}
           />
-          {folders.map((folder, index) => {
-            return (
-              <Folder
-                style={styles.folderContainer}
-                key={folder.id}
-                text={folder.name}
-                setSelectedFolder={setSelectedFolder}
-                selectedFolder={selectedFolder}
-              />
-            );
-          })}
-          <Pressable onPress={handleNewFolder} style={{ ...styles.folderContainer }}>
-            <Text
-              style={{
-                ...theme.fonts.text.body1.regular,
-                color: theme.colors.brand.onprimary.container,
-              }}
-            >
-              새 폴더 만들기
-            </Text>
-          </Pressable>
-        </>
-      )}
-    </BottomSheetScrollView>
+        );
+      })}
+      <Pressable onPress={handleNewFolder} style={{ ...styles.folderContainer, marginBottom: 50 }}>
+        <Text
+          style={{
+            ...theme.fonts.text.body1.regular,
+            color: theme.colors.brand.onprimary.container,
+          }}
+        >
+          새 폴더 만들기
+        </Text>
+      </Pressable>
+    </ScrollView>
   );
 };
 
@@ -104,8 +108,6 @@ export default FolderSheetContent;
 const styles = StyleSheet.create({
   contentContainer: {
     width: '100%',
-    // BottomSheetScrollView height makes it not scrollable
-    // height: '80%',
     flexDirection: 'column',
     justifyContent: 'flex-start',
   },