Merge pull request #61 from solutionchallenge/feat/#58/feat-diagnosis

Feat/#58/feat-diagnosis

Author: zziglet

src/App.tsx

@@ -9,14 +9,12 @@ import LoginPage from "./services/auth/login";
 import OAuthCallback from "./services/auth/oauth";
 import Layout from "./layout.tsx";
 import { AnimatePresence } from "framer-motion";
-import PHQPage from "./services/home/test/phq/index.tsx"; //error 수정
 import SettingPage from "./services/setting/index.tsx";
-import GADPage from "./services/home/test/gad/index.tsx";
-import PSSPage from "./services/home/test/pss/index.tsx";
 import RootRedirect from "./services/redirect/rootRedirect.tsx";
 import { useTokenMonitor } from "./hooks/auth/useTokenMonitor";
 import ReportMainPage from "./services/report/main/index.tsx";
 import ReportDetailPage from "./services/report/detail/index.tsx";
+import DiagnosisTest from "./services/home/test/index.tsx";
 
 function App() {
   const location = useLocation();
@@ -30,9 +28,9 @@ function App() {
           <Route path="home">
             <Route index path="*" element={<HomePage />} />
             <Route path="test">
-              <Route path="phq" element={<PHQPage />} />
-              <Route path="pss" element={<PSSPage />} />
-              <Route path="gad" element={<GADPage />} />
+              <Route path="phq" element={<DiagnosisTest type="phq-9" />} />
+              <Route path="pss" element={<DiagnosisTest type="pss" />} />
+              <Route path="gad" element={<DiagnosisTest type="gad-7" />} />
             </Route>
           </Route>
           <Route path="*" element={<NotFoundPage />} />

src/api/test/diagnosis.ts

@@ -0,0 +1,89 @@
+import { http } from "../fetch";
+
+export interface DiagnosisQuestion {
+  index: number;
+  question: string;
+  answers: {
+    score: number;
+    text: string;
+  }[];
+}
+
+interface GetDiagnosisParams {
+  paper_id: string;
+}
+
+export const getDiagnosis = async ({
+  paper_id,
+}: GetDiagnosisParams): Promise<{
+  name: string;
+  guides: string;
+  questions: DiagnosisQuestion[];
+  results: {
+    min: number;
+    max: number;
+    name: string;
+    description: string;
+    critical: boolean;
+  }[];
+  scoring: {
+    min: number;
+    max: number;
+  };
+}> => {
+  const { response } = await http.get<{
+    name: string;
+    guides: string;
+    questions: DiagnosisQuestion[];
+    results: {
+      min: number;
+      max: number;
+      name: string;
+      description: string;
+      critical: boolean;
+    }[];
+    scoring: {
+      min: number;
+      max: number;
+    };
+  }>(`/diagnosis-papers/${paper_id}`);
+  return response;
+};
+
+interface DiagnosisResultRequest {
+  diagnosis: string;
+  result_score: number;
+  total_score: number;
+  result_name: string;
+  result_description: string;
+  result_critical: boolean;
+}
+
+export const postDiagnosisResult = async (
+  result: DiagnosisResultRequest
+): Promise<{ id: number; success: boolean }> => {
+  const { response } = await http.post<{ id: number; success: boolean }>(
+    "/diagnoses",
+    result
+  );
+  return response;
+};
+
+interface DiagnosisResultResponse {
+  diagnosis: string;
+  id: number;
+  result_critical: boolean;
+  result_description: string;
+  result_name: string;
+  result_score: number;
+  total_score: number;
+}
+
+export const getDiagnosisResult = async (
+  diagnosis_id: number
+): Promise<DiagnosisResultResponse> => {
+  const { response } = await http.get<DiagnosisResultResponse>(
+    `/diagnosis-papers/${diagnosis_id}`
+  );
+  return response;
+};

src/assets/images/test/answer/icon_never.svg

@@ -1,34 +1,13 @@
 import { useState, useEffect } from "react";
 import AnswerItem from "./item";
 
-interface Answer {
-  title: string;
-}
-
-const defaultAnswers: Answer[] = [
-  { title: "Not at all" },
-  { title: "Several days" },
-  { title: "More than half the days" },
-  { title: "Nearly every day" },
-];
-
-const pssAnswers: Answer[] = [
-  { title: "Never" },
-  { title: "Almost Never" },
-  { title: "Sometimes" },
-  { title: "Fairly Often" },
-  { title: "Very Often" },
-];
-
 const AnswerGroup: React.FC<{
   onSelect: (score: number) => void;
   questionIndex: number;
-  type?: string;
-}> = ({ onSelect, questionIndex, type }) => {
+  answers: { title: string }[];
+}> = ({ onSelect, questionIndex, answers }) => {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
-  const answers = type === "PSS" ? pssAnswers : defaultAnswers;
-
   useEffect(() => {
     setSelectedIndex(null);
   }, [questionIndex]);

src/services/home/test/AnswerToggle/group.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import IconNever from "../../../../assets/images/test/answer/icon_never.svg?react";
 import IconNot from "../../../../assets/images/test/answer/icon_not.svg?react";
 import IconSeveral from "../../../../assets/images/test/answer/icon_several.svg?react";
 import IconMore from "../../../../assets/images/test/answer/icon_more.svg?react";
@@ -11,7 +12,7 @@ interface AnswerItemProps {
   onClick?: () => void;
 }
 
-const orderIcons = [IconNot, IconSeveral, IconMore, IconEvery];
+const orderIcons = [IconNever, IconNot, IconSeveral, IconMore, IconEvery];
 
 const AnswerItem: React.FC<AnswerItemProps> = ({
   title,

src/services/home/test/AnswerToggle/item.tsx

@@ -8,7 +8,7 @@ const QuestionStepperText = ({
   totalSteps,
 }: QuestionStepperProps) => {
   return (
-    <div className="inline-flex items-end gap-1 sm:gap-2">
+    <div className="inline-flex items-end gap-1 sm:gap-2 px-4 py-3 pb-3">
       <div className="text-second text-2xl sm:text-3xl md:text-4xl font-semibold leading-none">
         {String(currentStep).padStart(2, "0")}
       </div>

src/services/home/test/QuestionStepperText/index.tsx

@@ -4,11 +4,11 @@ import pssIcon from "../../../../assets/images/test/img_pss_start.svg?react";
 import gadIcon from "../../../../assets/images/test/img_gad_start.svg?react";
 
 interface StartCardProps {
-  type: "phq" | "pss" | "gad";
+  type: "phq-9" | "pss" | "gad-7";
 }
 
 const CONTENT = {
-  phq: {
+  "phq-9": {
     description:
       "PHQ-9 is a clinically validated questionnaire used to screen for depression.",
     icon: phqIcon,
@@ -28,7 +28,7 @@ const CONTENT = {
       "Your answers will stay private.",
     ],
   },
-  gad: {
+  "gad-7": {
     description:
       "GAD-7 is a tool used to identify general anxiety disorder symptoms.",
     icon: gadIcon,