Merge pull request #145 from team-ppointer/feat/native/problem-#141

[Feat/native/#141] 문제 풀이 Flow 구현

Author: b0nsu

apps/native/App.tsx

@@ -4,12 +4,13 @@ import { NavigationContainer, DefaultTheme, Theme } from '@react-navigation/nati
 import { StatusBar } from 'expo-status-bar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import RootNavigator from './src/navigation/RootNavigator';
-import { colors } from './src/theme/tokens';
-import './src/app/providers/global.css';
-import './src/app/providers/api';
-import { LoadingScreen } from '@/components/common/LoadingScreen';
-import { useLoadAssets } from '@/hooks/useAssets';
+import RootNavigator from '@navigation/RootNavigator';
+import { colors } from '@theme/tokens';
+import '@/app/providers/global.css';
+import '@/app/providers/api';
+import { LoadingScreen } from '@components/common';
+import { useLoadAssets } from '@hooks';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const queryClient = new QueryClient();
 
@@ -40,12 +41,14 @@ export default function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <SafeAreaProvider>
-        <NavigationContainer theme={navigationTheme} linking={linking}>
-          <StatusBar style='dark' />
-          <RootNavigator />
-        </NavigationContainer>
-      </SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SafeAreaProvider>
+          <NavigationContainer theme={navigationTheme} linking={linking}>
+            <StatusBar style='dark' />
+            <RootNavigator />
+          </NavigationContainer>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
     </QueryClientProvider>
   );
 }

apps/native/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "^5.2.7",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
@@ -24,6 +25,7 @@
     "expo": "~54.0.25",
     "expo-asset": "^12.0.10",
     "expo-constants": "~18.0.10",
+    "expo-file-system": "^19.0.19",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
     "expo-image": "~3.0.10",
@@ -45,11 +47,12 @@
     "react-native": "0.81.5",
     "react-native-css-interop": "^0.2.1",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~3.17.5",
+    "react-native-reanimated": "~4.1.5",
     "react-native-safe-area-context": "~5.4.0",
     "react-native-screens": "~4.16.0",
     "react-native-svg": "^15.15.0",
     "react-native-web": "~0.21.0",
+    "react-native-webview": "^13.16.0",
     "react-native-worklets": "0.5.1",
     "zustand": "^5.0.8"
   },

apps/native/src/apis/controller/study/index.ts

@@ -1,10 +1,14 @@
+import postAnswer from './postAnswer';
+import postPointing from './postPointing';
 import useGetMonthlyPublish from './useGetMonthlyPublish';
 import useGetProblem from './useGetProblem';
 import useGetPublishDetail from './useGetPublishDetail';
 import useGetWeeklyProgress from './useGetWeeklyProgress';
 import useGetWeeklyPublish from './useGetWeeklyPublish';
 
 export {
+  postAnswer,
+  postPointing,
   useGetMonthlyPublish,
   useGetProblem,
   useGetPublishDetail,

apps/native/src/apis/controller/study/postAnswer.ts

@@ -0,0 +1,28 @@
+import { client } from '@apis';
+
+const postAnswer = async (
+  publishId: number,
+  problemId: number | null,
+  submitAnswer: number | null
+) => {
+  const body: {
+    publishId: number;
+    problemId?: number;
+    submitAnswer?: number;
+  } = {
+    publishId,
+    ...(submitAnswer !== null && submitAnswer !== undefined ? { submitAnswer } : {}),
+  };
+
+  if (problemId !== null) {
+    body.problemId = problemId;
+  } else {
+    throw new Error('problemId 반드시 입력하세요.');
+  }
+
+  return await client.POST('/api/student/study/submit/answer', {
+    body,
+  });
+};
+
+export default postAnswer;

apps/native/src/apis/controller/study/postPointing.ts

@@ -0,0 +1,12 @@
+import { client } from '@apis';
+
+const postPointing = async (pointingId: number, isUnderstood: boolean) => {
+  return await client.POST('/api/student/study/submit/pointing', {
+    body: {
+      pointingId,
+      isUnderstood,
+    },
+  });
+};
+
+export default postPointing;

apps/native/src/apis/index.ts

@@ -1,6 +1,7 @@
 import { client, TanstackQueryClient } from './client';
+import authMiddleware from './authMiddleware';
 
-export { client, TanstackQueryClient };
+export { client, TanstackQueryClient, authMiddleware };
 
 // controllers
 export * from './controller/auth';

apps/native/src/app/providers/api.ts

@@ -1,5 +1,3 @@
-import { client } from '@/apis';
-import authMiddleware from '@/apis/authMiddleware';
+import { client, authMiddleware } from '@apis';
 
 client.use(authMiddleware);
-

apps/native/src/components/common/LoadingScreen.tsx

@@ -1,16 +1,18 @@
 import { ActivityIndicator, Text, View } from 'react-native';
 
-import { colors } from '@/theme/tokens';
+import { colors } from '@theme/tokens';
 
 type Props = {
   label?: string;
 };
 
-export const LoadingScreen = ({ label = '잠시만 기다려 주세요.' }: Props) => {
+const LoadingScreen = ({ label = '잠시만 기다려 주세요.' }: Props) => {
   return (
     <View className='flex-1 items-center justify-center bg-gray-100 px-12'>
       <ActivityIndicator size='large' color={colors['primary-500']} />
       <Text className='mt-6 text-center text-[16px] text-gray-800'>{label}</Text>
     </View>
   );
 };
+
+export default LoadingScreen;

apps/native/src/components/common/NotificationItem.tsx

@@ -1,4 +1,4 @@
-import { colors } from '@/theme/tokens';
+import { colors } from '@theme/tokens';
 import { BookOpenText, LucideIcon, Megaphone, MessageCircleMore } from 'lucide-react-native';
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';

apps/native/src/components/common/SegmentedControl.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, Text, View, ViewProps } from 'react-native';
+
+type SegmentedControlProps = {
+  options: string[];
+  selectedIndex: number;
+  onChange: (index: number) => void;
+  containerProps?: ViewProps;
+};
+
+const SegmentedControl = ({
+  options,
+  selectedIndex,
+  onChange,
+  containerProps,
+}: SegmentedControlProps) => {
+  const translateValue = useRef(new Animated.Value(selectedIndex)).current;
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  useEffect(() => {
+    Animated.spring(translateValue, {
+      toValue: selectedIndex,
+      useNativeDriver: true,
+      tension: 200,
+      friction: 20,
+    }).start();
+  }, [selectedIndex, translateValue]);
+
+  const { segmentWidth, indicatorOffset } = useMemo(() => {
+    const horizontalPadding = 8; // p-[4px] on container
+    const contentWidth = Math.max(containerWidth - horizontalPadding, 0);
+    return {
+      segmentWidth: contentWidth > 0 ? contentWidth / options.length : 0,
+      indicatorOffset: horizontalPadding / 2,
+    };
+  }, [containerWidth, options.length]);
+
+  const indicatorStyle = useMemo(
+    () => ({
+      width: segmentWidth,
+      transform: [{ translateX: Animated.multiply(translateValue, segmentWidth || 0) }],
+    }),
+    [segmentWidth, translateValue]
+  );
+
+  return (
+    <View
+      className='my-[10px] flex-row items-center rounded-full bg-gray-300 p-[4px]'
+      onLayout={(event) => setContainerWidth(event.nativeEvent.layout.width)}
+      {...containerProps}>
+      <Animated.View
+        pointerEvents='none'
+        className='absolute h-full rounded-full bg-gray-800 shadow-[0px_1px_4px_0px_rgba(12,12,13,0.05),0px_1px_4px_0px_rgba(12,12,13,0.10)]'
+        style={[{ left: indicatorOffset }, indicatorStyle]}
+      />
+      {options.map((option, index) => {
+        const isSelected = index === selectedIndex;
+        return (
+          <Pressable key={option} className='z-10 flex-1 py-[8px]' onPress={() => onChange(index)}>
+            <Text
+              className={`text-center ${isSelected ? 'text-14b text-white' : 'text-13m text-black'}`}>
+              {option}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+export default SegmentedControl;