자가진단표 로직 구현

app/diagnosis/funnel/index.tsx

@@ -1,4 +1,4 @@
-import { Text, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import DiagnosisPost from '@/features/diagnosis/ui/Funnel';
 import { useFunnel } from '@/features/diagnosis/lib/useFunnel';
 import { useState } from 'react';
@@ -7,14 +7,35 @@ import ProgressBar from '@/features/diagnosis/ui/ProgressBar';
 import useProgress from '@/features/diagnosis/lib/useProgress';
 import { handleNextClick } from '@/features/diagnosis/services/updateProgress';
 import theme from '@/shared/styles/theme';
+import { Label } from '@/shared/components/label/Label';
+import { useForm, FormProvider } from 'react-hook-form';
+import { useDiagnosisStore } from '@/features/diagnosis/services/useDiagnosisStore';
+
+type DiagnosisFormData = {
+  destination: "Hospital" | "Pharmacy";
+  symptoms: string[];
+  duration: string;
+  painLevel: number;
+  additionalNotes: string;
+};
 
 const steps = ['1', '2', '3', '4', '5'];
 
-const DiagnosisPostPage = () => {
+const DiagnosisPostPage =() => {
+  const { currentPage } = useDiagnosisStore();
 
   const { Funnel, Step, setStep } = useFunnel(steps[0]);
   const { currentStep, setCurrentStep, initialProgress, getCurrentStepIndex } = useProgress(steps);
   const [progress, setProgress] = useState<number>(initialProgress);
+  const methods = useForm<DiagnosisFormData>({
+    defaultValues: {
+      destination: "Hospital",
+      symptoms: [], 
+      duration: "",
+      painLevel: 5,
+      additionalNotes: "", 
+    },
+  });
 
   const nextClickHandler = handleNextClick(
     getCurrentStepIndex,
@@ -26,9 +47,16 @@ const DiagnosisPostPage = () => {
 
   return (
       <SafeAreaView style={styles.container}>
-        <Text style={styles.title}>Self-diagnosis</Text>
-        <ProgressBar progress={progress} currentStep={currentStep}/>
-        <DiagnosisPost steps={steps} nextClickHandler={nextClickHandler} Funnel={Funnel} Step={Step} />
+        <Label style={styles.title}>Self-diagnosis</Label>
+        <FormProvider {...methods}>
+          {currentPage === "main" && <ProgressBar progress={progress} currentStep={currentStep}/>}
+          <DiagnosisPost
+            steps={steps}
+            nextClickHandler={nextClickHandler} 
+            Funnel={Funnel} 
+            Step={Step} 
+          />
+        </FormProvider>
       </SafeAreaView>
   );
 };

app/diagnosis/index.tsx

@@ -59,6 +59,7 @@ const styles = StyleSheet.create({
     backgroundColor: theme.colors.background,
     paddingHorizontal:16,
   },
+
   header: {
     fontSize: 20,
     marginBottom: 48,

assets/icons/diagnosis/MinusButton.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+interface SvgComponentProps extends SvgProps {}
+
+const MinusButton: React.FC<SvgComponentProps> = (props) => (
+  <Svg
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <Path
+      fill="#000"
+      d="M1.143 7.143a1.143 1.143 0 0 0 0 2.286h13.714a1.143 1.143 0 0 0 0-2.286H1.143Z"
+    />
+  </Svg>
+);
+
+export default MinusButton;

features/diagnosis/diagnosis.type.ts

@@ -0,0 +1,11 @@
+
+export interface StepProps {
+    onNext: () => void;
+  }
+
+export type DestinationType = "Hospital" | "Pharmacy";
+
+export interface SelectDestinationProps {
+  selectedDestination?: DestinationType; 
+
+}

features/diagnosis/services/updateProgress.tsx

@@ -1,34 +1,34 @@
 // 다음 스텝의 이동, 진행률 업데이트 함수
 const navigateOrSetStep = (
-    index: number,
+  index: number,
+  steps: string[],
+  setStep: (step: string) => void,
+  setCurrentStep: (step: string) => void,
+  setProgress: (progress: number) => void,
+) => {
+  // 유효한 인덱스인지 검사 (0 이상, 전체 스텝 개수 미만)
+  if (index >= 0 && index < steps.length) {
+    const nextStep = steps[index];
+    setStep(nextStep);
+    setCurrentStep(nextStep);
+    setProgress(((index + 1) / steps.length) * 100);
+  }
+};
+
+// 전체 스텝 이동, 진행률 관리 함수 
+// 헤더 추가 시 뒤로 이동하는 로직 추가 예정
+export const handleNextClick =
+  (
+    getCurrentStepIndex: () => number,
     steps: string[],
     setStep: (step: string) => void,
     setCurrentStep: (step: string) => void,
     setProgress: (progress: number) => void,
-  ) => {
-    // 유효한 인덱스인지 검사 (0 이상, 전체 스텝 개수 미만)
-    if (index >= 0 && index < steps.length) {
-      const nextStep = steps[index];
-      setStep(nextStep);
-      setCurrentStep(nextStep);
-      setProgress(((index + 1) / steps.length) * 100);
-    }
+  ) =>
+  () => {
+    const nextIndex = getCurrentStepIndex() + 1;
+    navigateOrSetStep(nextIndex, steps, setStep, setCurrentStep, setProgress);
   };
-
-  // 전체 스텝 이동, 진행률 관리 함수 
-  // 헤더 추가 시 뒤로 이동하는 로직 추가 예정
-  export const handleNextClick =
-    (
-      getCurrentStepIndex: () => number,
-      steps: string[],
-      setStep: (step: string) => void,
-      setCurrentStep: (step: string) => void,
-      setProgress: (progress: number) => void,
-    ) =>
-    () => {
-      const nextIndex = getCurrentStepIndex() + 1;
-      navigateOrSetStep(nextIndex, steps, setStep, setCurrentStep, setProgress);
-    };
 
 
-    
+

features/diagnosis/services/useDiagnosisStore.tsx

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+
+type DiagnosisState = {
+  currentPage: "main" | "add"; 
+  setPage: (step: "main" | "add") => void;
+};
+
+interface SymptomsState {
+  customSymptoms: string[];
+  addSymptom: (symptom: string) => void;
+  removeSymptom: (symptom: string) => void;
+}
+
+// 증상 카테고리 추가 페이지 이동 상태관리
+export const useDiagnosisStore = create<DiagnosisState>((set) => ({
+  currentPage: "main", 
+  setPage: (step) => set({ currentPage: step }),
+}));
+
+// 추가 증상 상태관리
+export const useSymptomsStore = create<SymptomsState>((set) => ({
+  customSymptoms: [],
+  addSymptom: (symptom) =>
+    set((state) => ({ customSymptoms: [...state.customSymptoms, symptom] })),
+  removeSymptom: (symptom) =>
+    set((state) => ({ customSymptoms: state.customSymptoms.filter((s) => s !== symptom) })),
+}));

features/diagnosis/ui/Funnel.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { FunnelProps, StepProps } from '../lib/useFunnel';
-import StepOne from './StepOne';
-import StepTwo from './StepTwo';
-import StepThree from './StepThree';
-import StepFour from './StepFour';
-import StepFive from './StepFive';
+import StepOne from './pages/StepOne';
+import StepTwo from './pages/StepTwo';
+import StepThree from './pages/StepThree';
+import StepFour from './pages/StepFour';
+import StepFive from './pages/StepFive';
 
 export interface ClassPostProps {
   steps: string[];

features/diagnosis/ui/PainLevelBar.tsx

@@ -1,11 +1,12 @@
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet} from 'react-native';
 import { Label } from '@/shared/components/label/Label';
 import theme from '@/shared/styles/theme';
-import { useStore } from '../services/useStore';
 import Slider from '@react-native-assets/slider';
+import { Controller, useFormContext } from "react-hook-form"
 
+// 통증세기 입력바 컴포넌트
 const PainLevelBar = () => {
-    const { painLevel, setPainLevel } = useStore();
+    const { control } = useFormContext<{ painLevel: number }>();
 
     return (
         <View style={styles.scaleContainer}>    
@@ -14,18 +15,24 @@ const PainLevelBar = () => {
           <Label style={styles.scaleText}>10</Label>
         </View>
         <View style={styles.sliderContainer}>
-          <Slider
-            style={styles.slider}
-            minimumValue={0}
-            maximumValue={10}
-            step={1}
-            value={painLevel}
-            onValueChange={setPainLevel}
-            minimumTrackTintColor={theme.colors.primary}
-            maximumTrackTintColor={theme.colors.white_ec}
-            thumbTintColor={theme.colors.primary} 
-            trackStyle={styles.track}
-            thumbStyle={styles.thumb}
+          <Controller
+            name="painLevel"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <Slider
+                style={styles.slider}
+                minimumValue={0}
+                maximumValue={10}
+                step={1}
+                value={value}
+                onValueChange={onChange}
+                minimumTrackTintColor={theme.colors.primary}
+                maximumTrackTintColor={theme.colors.white_ec}
+                thumbTintColor={theme.colors.primary}
+                trackStyle={styles.track}
+                thumbStyle={styles.thumb}
+              />
+            )}
           />
         </View>
         <View style={styles.scaleLabelContainer}>

features/diagnosis/ui/ProgressBar.tsx

@@ -8,6 +8,7 @@ interface ProgressBarProps {
   currentStep: string;
 }
 
+// 진행률 바 컴포넌트
 const ProgressBar = ({ progress, currentStep}: ProgressBarProps) => {
     const animatedWidth = useRef(new Animated.Value(0)).current;
 

features/diagnosis/ui/SelectDestination.tsx

@@ -1,10 +1,13 @@
 import { View, Pressable, StyleSheet } from "react-native"
 import { Label } from "@/shared/components/label/Label"
 import theme from "@/shared/styles/theme"
-import { useStore } from "../services/useStore"
+import { SelectDestinationProps, DestinationType } from "../diagnosis.type";
+import { useFormContext } from "react-hook-form";
 
-const SelectDestination = () => {
-    const { selectedDestination, setDestination } = useStore();
+// 목적지 선택 컴포넌트 (병원, 약국 선택))
+const SelectDestination = ({selectedDestination}:SelectDestinationProps) => {
+
+    const { setValue } = useFormContext<{ destination: DestinationType }>(); 
 
     return(
         <View style={styles.buttonContainer}>
@@ -13,7 +16,7 @@ const SelectDestination = () => {
             styles.optionButton,
             selectedDestination === 'Hospital' && styles.selectedButton,
           ]}
-          onPress={() => setDestination('Hospital')}
+          onPress={() => setValue("destination", "Hospital")}
         >
           <Label
             style={[
@@ -29,7 +32,7 @@ const SelectDestination = () => {
             styles.optionButton,
             selectedDestination === 'Pharmacy' && styles.selectedButton,
           ]}
-          onPress={() => setDestination('Pharmacy')}
+          onPress={() => setValue("destination", "Pharmacy")}
         >
           <Label
             style={[
@@ -41,9 +44,7 @@ const SelectDestination = () => {
           </Label>
         </Pressable>
       </View>
-
     )
-
 }
 
 export default SelectDestination