Merge pull request #40 from salmonco/녹음듣기1/#25

feat/녹음듣기1 API 연동

App.tsx

@@ -12,7 +12,8 @@ import AppTabNav from './src/nav/tabNav/App'
 import AuthStackNav from '@stackNav/Auth'
 import YouthStackNav from '@stackNav/Youth'
 //
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 //font를 가져오는 함수
 const fetchFonts = () => {
@@ -28,6 +29,14 @@ const fetchFonts = () => {
 
 const Stack = createNativeStackNavigator<RootStackParamList>()
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 30,
+    },
+  },
+})
+
 function App() {
   const [fontsLoaded, setFontsLoaded] = useState(false)
 
@@ -45,20 +54,22 @@ function App() {
   }
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <NavigationContainer>
-        <Stack.Navigator
-          screenOptions={{
-            headerShown: false,
-          }}
-        >
-          {/* <Stack.Screen name="Splash" component={Splash}/> */}
-          {/* <Stack.Screen name="AuthStackNav" component={AuthStackNav} /> */}
-          {/* <Stack.Screen name="YouthStackNav" component={YouthStackNav} /> */}
-          <Stack.Screen name="AppTabNav" component={AppTabNav} />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </GestureHandlerRootView>
+    <QueryClientProvider client={queryClient}>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              headerShown: false,
+            }}
+          >
+            {/* <Stack.Screen name="Splash" component={Splash}/> */}
+            {/* <Stack.Screen name="AuthStackNav" component={AuthStackNav} /> */}
+            <Stack.Screen name="YouthStackNav" component={YouthStackNav} />
+            {/* <Stack.Screen name="AppTabNav" component={AppTabNav} /> */}
+          </Stack.Navigator>
+        </NavigationContainer>
+      </GestureHandlerRootView>
+    </QueryClientProvider>
   )
 }
 

package.json

@@ -13,6 +13,7 @@
     "@react-navigation/bottom-tabs": "6.5.12",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
+    "@tanstack/react-query": "^5.61.0",
     "axios": "^1.7.7",
     "cross-env": "^7.0.3",
     "expo": "52",

src/libs/apis/member.ts

@@ -0,0 +1,11 @@
+import client from '@apis/client'
+import { HelperNumResultResponseData } from '@type/member'
+
+const getHelperNum = async () => {
+  const res = await client.get<HelperNumResultResponseData>(
+    `/api/v1/member/helper-num`
+  )
+  return res.data
+}
+
+export { getHelperNum }

src/libs/apis/voiceFile.ts

@@ -0,0 +1,14 @@
+import client from '@apis/client'
+import {
+  VoiceFileResultResponseData,
+  VoiceFilesRequestData,
+} from '@type/voiceFile'
+
+const getVoiceFiles = async ({ alarmId }: Readonly<VoiceFilesRequestData>) => {
+  const res = await client.get<VoiceFileResultResponseData>(
+    `/api/v1/voicefiles?alarm-id=${alarmId}`
+  )
+  return res.data
+}
+
+export { getVoiceFiles }

src/libs/hooks/member/useGetHelperNum.ts

@@ -0,0 +1,8 @@
+import { getHelperNum } from '@apis/member'
+import { useQuery } from '@tanstack/react-query'
+
+const useGetHelperNum = () => {
+  return useQuery({ queryKey: ['getHelperNum'], queryFn: () => getHelperNum() })
+}
+
+export default useGetHelperNum

src/libs/hooks/voiceFile/useGetVoiceFiles.ts

@@ -0,0 +1,13 @@
+import { getHelperNum } from '@apis/member'
+import { getVoiceFiles } from '@apis/voiceFile'
+import { useQuery } from '@tanstack/react-query'
+import { VoiceFilesRequestData } from '@type/voiceFile'
+
+const useGetVoiceFiles = ({ alarmId }: Readonly<VoiceFilesRequestData>) => {
+  return useQuery({
+    queryKey: ['helperNum', alarmId],
+    queryFn: () => getVoiceFiles({ alarmId }),
+  })
+}
+
+export default useGetVoiceFiles

src/screens/LetterHome/index.tsx

@@ -2,17 +2,17 @@ import BG from '@components/atom/BG'
 import Body2 from '@components/atom/body/Body2'
 import Body3 from '@components/atom/body/Body3'
 import Body4 from '@components/atom/body/Body4'
+import Caption1 from '@components/atom/caption/Caption1'
 import ShadowView from '@components/atom/ShadowView'
 import Title1 from '@components/atom/title/Title1'
 import Title4 from '@components/atom/title/Title4'
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import { emotions } from '@screens/YouthListen'
+import { LetterStackParamList } from '@type/LetterStackParamList'
 import { Image, Pressable, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import ChevronRightWhiteIcon from '../../../assets/images/youth/chevron_right_white.svg'
-import { emotions } from '@screens/YouthListen'
-import Caption1 from '@components/atom/caption/Caption1'
-import { NativeStackScreenProps } from '@react-navigation/native-stack'
-import { LetterStackParamList } from '@type/LetterStackParamList'
 
 type LetterProps = NativeStackScreenProps<
   LetterStackParamList,

src/screens/YouthHome/index.tsx

@@ -1,8 +1,9 @@
 import Body3 from '@components/atom/body/Body3'
 import Title2 from '@components/atom/title/Title2'
 import Title3 from '@components/atom/title/Title3'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
+  Alert,
   Image,
   ImageBackground,
   Pressable,
@@ -12,17 +13,35 @@ import {
 import CancelIcon from '../../../assets/images/youth/cancel.svg'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import { YouthStackParamList } from '@stackNav/Youth'
+import useGetHelperNum from '@hooks/member/useGetHelperNum'
+import useGetVoiceFiles from '@hooks/voiceFile/useGetVoiceFiles'
 
 type YouthProps = NativeStackScreenProps<YouthStackParamList, 'YouthHomeScreen'>
 
 const YouthHomeScreen = ({ navigation }: Readonly<YouthProps>) => {
   const [clicked, setClicked] = useState(false)
+  const { data: helperNumData, isError: isHelperNumError } = useGetHelperNum()
+  const { data: voiceFilesData, isError: isVoiceFilesError } = useGetVoiceFiles(
+    { alarmId: 1 }
+  )
 
   const handleButtonClick = (label: string) => {
     console.log(label)
     navigation.navigate('YouthListenScreen')
   }
 
+  useEffect(() => {
+    if (isHelperNumError) {
+      Alert.alert('오류', '조력자 수를 불러오는 중 오류가 발생했어요')
+    }
+  }, [isHelperNumError])
+
+  useEffect(() => {
+    if (isVoiceFilesError) {
+      Alert.alert('오류', '목소리 파일을 불러오는 중 오류가 발생했어요')
+    }
+  }, [isVoiceFilesError])
+
   return (
     <SafeAreaView className="flex-1">
       <ImageBackground
@@ -36,7 +55,10 @@ const YouthHomeScreen = ({ navigation }: Readonly<YouthProps>) => {
           />
           <View className="mt-[9] px-[30]">
             <View className="flex-row items-center">
-              <Title2 text="1000명의 목소리" className="text-yellowPrimary" />
+              <Title2
+                text={`${helperNumData?.result.youthMemberNum}명의 목소리`}
+                className="text-yellowPrimary"
+              />
               <Title2 text="가" className="text-white" />
             </View>
             <Title2 text="당신의 일상을 비추고 있어요" className="text-white" />

src/types/member.ts

@@ -0,0 +1,9 @@
+type HelperNumResponseData = {
+  youthMemberNum: number
+}
+
+type HelperNumResultResponseData = {
+  result: HelperNumResponseData
+}
+
+export type { HelperNumResponseData, HelperNumResultResponseData }

src/types/voiceFile.ts

@@ -0,0 +1,19 @@
+type VoiceFilesRequestData = {
+  alarmId: number
+}
+
+type VoiceFileResponseData = {
+  voiceFileId: number
+  fileUrl: string
+  providedFileId: number
+}
+
+type VoiceFileResultResponseData = {
+  result: VoiceFileResponseData
+}
+
+export type {
+  VoiceFilesRequestData,
+  VoiceFileResponseData,
+  VoiceFileResultResponseData,
+}

yarn.lock

@@ -1132,20 +1132,7 @@
     "@babel/parser" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
-  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/generator" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/template" "^7.25.9"
-    "@babel/types" "^7.25.9"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
-"@babel/traverse@^7.25.3", "@babel/traverse@^7.25.9":
+"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3", "@babel/traverse@^7.25.3", "@babel/traverse@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
   integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
@@ -2122,6 +2109,18 @@
     deepmerge "^4.3.1"
     svgo "^3.0.2"
 
+"@tanstack/[email protected]":
+  version "5.60.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.60.6.tgz#0dd33fe231b0d18bf66d0c615b29899738300658"
+  integrity sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==
+
+"@tanstack/react-query@^5.61.0":
+  version "5.61.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.61.0.tgz#73473feb37aa28ceb410e297ee060e18f06f88e0"
+  integrity sha512-SBzV27XAeCRBOQ8QcC94w2H1Md0+LI0gTWwc3qRJoaGuewKn5FNW4LSqwPFJZVEItfhMfGT7RpZuSFXjTi12pQ==
+  dependencies:
+    "@tanstack/query-core" "5.60.6"
+
 "@testing-library/react-native@^12.5.2":
   version "12.8.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.8.1.tgz#833c73a825aa87b9127717a44d4aeee44b59a963"
@@ -8066,16 +8065,7 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8154,7 +8144,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8168,13 +8158,6 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -8913,16 +8896,7 @@ wonka@^6.3.2:
   resolved "https://registry.yarnpkg.com/wonka/-/wonka-6.3.4.tgz#76eb9316e3d67d7febf4945202b5bdb2db534594"
   integrity sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==