[Refactor] [챌린지] 챌린지 전체보기 페이지네이션 리스트 구현 (#112)

* 주석삭제 * 첼린지 상세페이지 일부 구현 및 전체 코드 리팩토링 * snackbar 삭제 * 토스트메세지 위치조정 * 명칭 변경 * 챌린지 프로파일 오류 수정 * 롤백 * fix * headerRightButton 오류 수정 * 전체보기 페이지 구현 * 공유하기 스크린 개선, 챌린지 만들기 후 탭 페이지로 복귀 * feedScreen 자동 invalidateQuery 삭제
CCC-org · Mar 8, 2023 · 7f1637e · 7f1637e
1 parent 56cbac1
commit 7f1637e
Show file tree

Hide file tree

Showing 33 changed files with 463 additions and 388 deletions.
diff --git a/App.tsx b/App.tsx
@@ -45,6 +45,9 @@ import UserFollowersScreen from './src/screens/follow/UserFollowersScreen';
 import FollowTopTabs from './src/navigation/tabs/FollowTopTabs';
 import Toasts from './src/components/bars/Toasts';
 import { RootStackParamList } from './types';
+import ChallengeDetailScreen from './src/screens/Main/challenge/ChallengeDetailScreen';
+import CurrentChallengeScreen from './src/screens/Main/challenge/CurrentChallengeScreen';
+import HistoryChallengeScreen from './src/screens/Main/challenge/HistoryChallengeScreen';
 
 // const Stack = createNativeStackNavigator();
 const Stack = createStackNavigator<RootStackParamList>();
@@ -134,7 +137,6 @@ export default function App() {
                       component={ProfileScreen}
                       options={{ ...headerOptions, title: '' }}
                     />
-                    {/* 챌린지 그룹 */}
                     <Stack.Group
                       screenOptions={{
                         headerStyle: { backgroundColor: 'white' },
@@ -179,6 +181,11 @@ export default function App() {
                         component={ChallengeSubjectCreationScreen}
                         options={headerOptions}
                       />
+                      <Stack.Screen
+                        name="ChallengeDetail"
+                        component={ChallengeDetailScreen}
+                        options={headerOptions}
+                      />
                       <Stack.Screen
                         name="ChallengeGoalSetting"
                         component={ChallengeGoalSettingScreen}
@@ -199,8 +206,17 @@ export default function App() {
                         component={ChallengeJoinApprovedScreen}
                         options={headerOptions}
                       />
+                      <Stack.Screen
+                        name="ChallengeCurrent"
+                        component={CurrentChallengeScreen}
+                        options={{ ...headerOptions, title: '모든 챌린지' }}
+                      />
+                      <Stack.Screen
+                        name="ChallengeHistory"
+                        component={HistoryChallengeScreen}
+                        options={{ ...headerOptions, title: '종료된 챌린지' }}
+                      />
                     </Stack.Group>
-
                     <Stack.Group
                       screenOptions={{
                         title: '',

diff --git a/src/components/bars/SnackBar.tsx b/src/components/bars/SnackBar.tsx
diff --git a/src/components/bars/Toasts.tsx b/src/components/bars/Toasts.tsx
@@ -1,102 +1,33 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import React from 'react';
-import { BaseToast, ErrorToast } from 'react-native-toast-message';
-import { Toast } from 'react-native-toast-message/lib/src/Toast';
+import Toast from 'react-native-toast-message';
 import theme from '../../theme/light';
+
 const toastConfig = {
-  /*
-    Overwrite 'success' type,
-    by modifying the existing `BaseToast` component
-  */
-  success: (props) => (
-    <BaseToast
-      {...props}
-      style={{ borderRadius: 8 }}
-      contentContainerStyle={{
-        backgroundColor: '#121314',
+  snackbar: (props) => (
+    <View
+      style={{
+        width: 343,
+        height: 60,
         borderRadius: 8,
+        paddingHorizontal: 10,
+        marginBottom: 48,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        backgroundColor: `${theme.colors.graphic.black}cc`,
+        alignContent: 'center',
+        justifyContent: 'center',
       }}
-      text1Style={{
-        fontSize: 15,
-        fontWeight: '400',
-        color: 'white',
-        fontFamily: 'pretendard',
-      }}
-    />
-  ),
-  /*
-    Overwrite 'error' type,
-    by modifying the existing `ErrorToast` component
-  */
-  error: (props) => (
-    <ErrorToast
-      {...props}
-      text1Style={{
-        fontSize: 17,
-      }}
-      text2Style={{
-        fontSize: 15,
-      }}
-    />
+    >
+      <Text style={{ marginLeft: 15, fontFamily: 'pretendard', fontSize: 14, color: '#FFFFFF' }}>
+        {props.text1}
+      </Text>
+    </View>
   ),
-  /*
-    Or create a completely new type - `tomatoToast`,
-    building the layout from scratch.
-
-    I can consume any custom `props` I want.
-    They will be passed when calling the `show` method (see below)
-  */
-  snackbar: ({ text1, props }) => (
-    <>
-      <View
-        style={{
-          width: 343,
-          height: 60,
-          borderRadius: 8,
-          paddingHorizontal: 10,
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          backgroundColor: `${theme.colors.graphic.black}cc`,
-          alignContent: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text style={{ marginLeft: 15, fontFamily: 'pretendard', fontSize: 14, color: '#FFFFFF' }}>
-          {text1}
-        </Text>
-      </View>
-    </>
-  ),
-
-  styles: {
-    container: {
-      position: 'absolute',
-      bottom: 0,
-      width: '100%',
-      zIndex: 9999,
-      elevation: 9999,
-      padding: 10,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    text: {
-      fontSize: 16,
-      color: 'white',
-      fontWeight: 'bold',
-    },
-    text1: {
-      fontSize: 16,
-      color: 'white',
-      fontWeight: 'bold',
-    },
-  },
 };
 
 const Toasts = () => {
   return <Toast config={toastConfig} />;
 };
 
 export default Toasts;
-
-const styles = StyleSheet.create({});
diff --git a/src/components/bottomsheet/BSMyPostOptions.tsx b/src/components/bottomsheet/BSMyPostOptions.tsx
@@ -14,7 +14,7 @@ const BSMyPostOptions = ({ modalRef }: BSMyPostOptionsProps) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const handleDeleteInsight = () => {
     Toast.show({
-      type: 'success',
+      type: 'snackbar',
       text1: '인사이트를 삭제했어요.',
       position: 'bottom',
       text2: '아직 인사이트 삭제 api가 개발이안된듯',
@@ -33,7 +33,7 @@ const BSMyPostOptions = ({ modalRef }: BSMyPostOptionsProps) => {
       </Pressable>
       <TwoButtonModal
         dismissable={false}
-        mainTitle={`인사이트를 삭제할까요?`}
+        mainTitle={'인사이트를 삭제할까요?'}
         visible={isModalVisible}
         onDismiss={() => setIsModalVisible(false)}
         leftButtonText="취소"

diff --git a/src/components/bottomsheet/BSPostOptions.tsx b/src/components/bottomsheet/BSPostOptions.tsx
@@ -124,13 +124,7 @@ const BSPostOptions = ({ modalRef, userId, userName, insightId }: BSPostOptionsP
           </Text>
         </Pressable>
         <Pressable onPress={handleReportSubmit} style={{ marginTop: 72 }}>
-          <ConditionalButton
-            isActive={selectedReport !== null}
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            onPress={() => {}}
-            width={'100%'}
-            text="신고하기"
-          />
+          <ConditionalButton isActive={selectedReport !== null} width={'100%'} text="신고하기" />
         </Pressable>
       </ScrollView>
     );
@@ -156,7 +150,6 @@ const BSPostOptions = ({ modalRef, userId, userName, insightId }: BSPostOptionsP
         rightButtonPress={handleBlockUser}
         rightButtonColor="#f24822"
       />
-      <SnackBar text="인사이트를 신고했어요" visible={isSnackBarVisible} />
     </ScrollView>
   );
 };

diff --git a/src/components/buttons/ConditionalButton.tsx b/src/components/buttons/ConditionalButton.tsx
@@ -35,19 +35,10 @@ const ConditionalButton = ({
   borderRadius,
   style: styleProp,
 }: ConditionalButtonProps) => {
-  const [offset, setOffset] = useState(0);
-
-  function handleLayout(event: LayoutChangeEvent) {
-    const { y: yCoordinate = 0, height = 0 } = event.nativeEvent.layout;
-    setOffset(fullHeightOfScreen - yCoordinate - height);
-  }
-
   const theme = useTheme();
   return (
     <KeyboardAvoidingView
-      onLayout={handleLayout}
       behavior={Platform.select({ ios: 'padding' })} // position || padding
-      keyboardVerticalOffset={Platform.select({ ios: offset })}
       style={styles.container}
     >
       <View

diff --git a/src/components/comments/BSMyComment.tsx b/src/components/comments/BSMyComment.tsx
@@ -14,7 +14,7 @@ const BSMyComment = ({ modalRef }: BSMyPostOptionsProps) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const handleDeleteInsight = () => {
     Toast.show({
-      type: 'success',
+      type: 'snackbar',
       text1: '댓글을 삭제했어요.',
       position: 'bottom',
       text2: '아직 인사이트 삭제 api가 개발이안된듯',
@@ -30,7 +30,7 @@ const BSMyComment = ({ modalRef }: BSMyPostOptionsProps) => {
       </Pressable>
       <TwoButtonModal
         dismissable={false}
-        mainTitle={`댓글을 삭제할까요?`}
+        mainTitle={'댓글을 삭제할까요?'}
         visible={isModalVisible}
         onDismiss={() => setIsModalVisible(false)}
         leftButtonText="취소"

diff --git a/src/components/comments/BSOthersComment.tsx b/src/components/comments/BSOthersComment.tsx
@@ -10,7 +10,6 @@ import CountingTextArea from '../texts/CountingTextArea';
 import TwoButtonModal from '../modal/TwoButtonModal';
 import { blockUser } from '../../utils/api/user/profile/block';
 import { reportInsight, reportType } from '../../utils/api/report/insight/insightReport';
-import SnackBar from '../bars/SnackBar';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
 
 interface BSPostOptionsProps {
@@ -179,7 +178,6 @@ const BSOthersComment = ({
         rightButtonPress={handleBlockUser}
         rightButtonColor="#f24822"
       />
-      <SnackBar text="인사이트를 신고했어요" visible={isSnackBarVisible} />
     </ScrollView>
   );
 };

diff --git a/src/components/comments/Comment.tsx b/src/components/comments/Comment.tsx
@@ -3,7 +3,6 @@ import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import React, { useRef } from 'react';
 import MiniProfile from '../profile/MiniProfile';
 import { useTheme } from 'react-native-paper';
-import { Entypo } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import CommentVerticalDots from './CommentVerticalDots';
 

diff --git a/src/components/header/BottomSheetHeader.tsx b/src/components/header/BottomSheetHeader.tsx
@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 12,
+    paddingLeft: 12,
     paddingBottom: 12,
   },
   text: {