feat: 진단 API 연동 및 위험도 분석 섹션 구현

src/entities/chart/types/risk-analysis.type.ts

@@ -2,19 +2,17 @@
  * 위험도 분석 관련 entities
  */
 
-// 위험 요인
-export type RiskFactor = {
+export type Factor = {
   name: string;
   percent: number;
 };
 
-// 위험도 요약
 export type RiskSummary = {
   score: number;
-  factors: RiskFactor[];
+  grade: string;
+  factors: Factor[];
 };
 
-// 임대인 정보
 export type Landlord = {
   landlordId: number;
   name: string;
@@ -25,7 +23,6 @@ export type Landlord = {
   updatedAt: string;
 };
 
-// 임대인 신뢰도
 export type LandlordTrust = {
   trustScore: number;
   subrogationCount: number;
@@ -35,7 +32,6 @@ export type LandlordTrust = {
   grade: string;
 };
 
-// 임대인 소유 매물
 export type LandlordPlace = {
   placeId: number;
   label: string;

src/features/main/apis/diagnosis.api.ts

@@ -1,22 +1,30 @@
+import type { Landlord, LandlordPlace, LandlordTrust, RiskSummary } from '@/entities';
 import { fetchInstance } from '@/shared';
 
 import type { HouseType } from '../types';
 
 export const DIAGNOSIS_API_PATH = '/api/diagnosis';
 
-interface DiagnosisApiResponse {
+interface DiagnosisApiRequest {
   address: string;
   addressDetail: string;
   houseType: HouseType;
   deposit: number;
 }
 
+interface DiagnosisApiResponse {
+  riskSummary: RiskSummary;
+  landlord: Landlord;
+  landlordTrust: LandlordTrust;
+  landlordPlaces: LandlordPlace[];
+}
+
 export const diagnosisApi = async ({
   address,
   addressDetail,
   houseType,
   deposit,
-}: DiagnosisApiResponse) => {
+}: DiagnosisApiRequest) => {
   const response = await fetchInstance.post<DiagnosisApiResponse>(DIAGNOSIS_API_PATH, {
     address,
     addressDetail,

src/features/main/components/features/chart/RiskFactorsBox.tsx

@@ -1,7 +1,7 @@
-import type { RiskFactor } from '@/entities';
+import type { Factor } from '@/entities';
 
 type Props = {
-  riskFactors: RiskFactor[];
+  riskFactors: Factor[];
 };
 
 export const RiskFactorsBox = ({ riskFactors }: Props) => {

src/features/main/components/features/form/DiagnosticForm.tsx

@@ -7,6 +7,7 @@ import { Button, Form } from '@/shared';
 
 import { diagnosisApi } from '../../../apis';
 import { type SearchAddressType, searchAddressSchema } from '../../../model';
+import { useHouseData } from '../../../store';
 import type { HouseType } from '../../../types';
 import {
   AddressField,
@@ -17,6 +18,8 @@ import {
 } from '../../common';
 
 export const DiagnosticForm = () => {
+  const { setDiagnosisData } = useHouseData();
+
   const form = useForm<SearchAddressType>({
     resolver: zodResolver(searchAddressSchema),
     defaultValues: {
@@ -35,6 +38,9 @@ export const DiagnosticForm = () => {
         houseType: data.houseType as HouseType,
         deposit: data.deposit,
       }),
+    onSuccess: (data) => {
+      setDiagnosisData(data);
+    },
   });
 
   const onSubmit = (data: SearchAddressType) => {

src/features/main/components/features/reliability/GradeBox.tsx

@@ -1,21 +1,30 @@
+import type { LandlordTrust } from '@/entities';
 import { getTrustGradeColorClass } from '@/shared';
 
 import { LANDLORD_TRUST_DATA } from '../../../mock';
 
-export const GradeBox = () => {
+type Props = {
+  gradeData: LandlordTrust;
+};
+
+export const GradeBox = ({ gradeData }: Props) => {
+  const data = gradeData || LANDLORD_TRUST_DATA;
+
   return (
     <div className='flex flex-col gap-2'>
       <h1 className='text-3xl font-bold'>임대인 신뢰도 등급</h1>
       <span className='text-md flex gap-2 font-semibold'>
         <span className='text-black'>위험점수 :</span>
-        <span className='text-chart-green'>{LANDLORD_TRUST_DATA.trustScore}</span>
+        <span className='text-chart-green'>{data.trustScore}</span>
         <span className='text-black'>점</span>
       </span>
       <div className='flex w-full items-center justify-center'>
         <span
-          className={`text-landlord-reliability font-semibold ${getTrustGradeColorClass(LANDLORD_TRUST_DATA.grade)}`}
+          className={`text-landlord-reliability font-semibold ${getTrustGradeColorClass(
+            data.grade,
+          )}`}
         >
-          {LANDLORD_TRUST_DATA.grade}
+          {data.grade}
         </span>
       </div>
     </div>

src/features/main/components/features/reliability/MultiHouseBox.tsx

@@ -1,12 +1,20 @@
+import type { LandlordTrust } from '@/entities';
+
 import { LANDLORD_TRUST_DATA } from '../../../mock';
 
-export const MultiHouseBox = () => {
+type Props = {
+  multiHouseData: LandlordTrust;
+};
+
+export const MultiHouseBox = ({ multiHouseData }: Props) => {
+  const data = multiHouseData || LANDLORD_TRUST_DATA;
+
   return (
     <div>
       <h1 className='text-3xl font-bold'>다주택자</h1>
       <div className='flex w-full items-end justify-center'>
         <span className='text-landlord-reliability font-bold text-blue-500'>
-          {LANDLORD_TRUST_DATA.ownedUnsoldCount}
+          {data.ownedUnsoldCount}
         </span>
         <span className='mb-25 text-5xl font-semibold text-black'>채</span>
       </div>

src/features/main/components/features/reliability/ReasonBox.tsx

@@ -1,10 +1,12 @@
 import { RELIABILITY_REASONS } from '../../../mock';
 
 export const ReasonBox = () => {
+  const data = RELIABILITY_REASONS;
+
   return (
     <div className='flex w-full flex-col gap-2 pb-3'>
       <h1 className='text-3xl font-bold'>임대인 신뢰도 등급 사유</h1>
-      {RELIABILITY_REASONS.map((reason, index) => (
+      {data.map((reason, index) => (
         <div
           key={`${reason.name}-${reason.percent}-${index}`}
           className='flex items-center gap-5 py-3 text-center font-semibold'

src/features/main/components/features/reliability/SubrogationPaymentBox.tsx

@@ -2,15 +2,19 @@ import { getSubrogationColorClass } from '@/shared';
 
 import { LANDLORD_TRUST_DATA } from '../../../mock';
 
-export const SubrogationPaymentBox = () => {
+type Props = {
+  subrogationData: number;
+};
+
+export const SubrogationPaymentBox = ({ subrogationData }: Props) => {
+  const data = subrogationData || LANDLORD_TRUST_DATA.subrogationCount;
+
   return (
     <div>
       <h1 className='text-3xl font-bold'>대위변제 이력</h1>
       <div className='flex w-full items-end justify-center'>
-        <span
-          className={`text-landlord-reliability font-bold ${getSubrogationColorClass(LANDLORD_TRUST_DATA.subrogationCount)}`}
-        >
-          {LANDLORD_TRUST_DATA.subrogationCount}
+        <span className={`text-landlord-reliability font-bold ${getSubrogationColorClass(data)}`}>
+          {data}
         </span>
         <span className='mb-25 text-5xl font-semibold text-black'>회</span>
       </div>

src/features/main/constants/house-type.ts

@@ -5,6 +5,6 @@ export const HOUSE_TYPE_OPTIONS = [
   { value: 'ONE_ROOM', label: '원룸' },
   { value: 'TWO_ROOM', label: '투룸' },
   { value: 'OFFICETEL', label: '오피스텔' },
-  { value: 'APARTMENT', label: '아파트' },
+  { value: 'APT', label: '아파트' },
   { value: 'ETC', label: '기타' },
 ] as const;

src/features/main/mock/risk-analysis.mock.ts

@@ -9,6 +9,7 @@ export const TEMP_RISK_ANALYSIS_DATA: RiskAnalysisResponse[] = [
     data: {
       riskSummary: {
         score: 50,
+        grade: 'B',
         factors: [
           { name: '전세가율', percent: 12 },
           { name: '가격하락', percent: 10 },

src/features/main/store/index.ts

@@ -1 +1,2 @@
 export * from './useMapAddress';
+export * from './useHouseData';

src/features/main/store/useHouseData.ts

@@ -0,0 +1,71 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+import type { Landlord, LandlordPlace, LandlordTrust, RiskSummary } from '@/entities';
+
+export type HouseDiagnosisData = {
+  riskSummary: RiskSummary;
+  landlord: Landlord;
+  landlordTrust: LandlordTrust;
+  landlordPlaces: LandlordPlace[];
+};
+
+// API 응답 형태
+export type ApiResponse = {
+  data: HouseDiagnosisData;
+  status: string;
+  serverDateTime: string;
+  errorCode: string | null;
+  errorMessage: string | null;
+};
+
+type HouseDataState = {
+  // 상태
+  diagnosisData: HouseDiagnosisData | null;
+  isLoading: boolean;
+  error: string | null;
+
+  // 액션
+  setDiagnosisData: (data: HouseDiagnosisData | ApiResponse) => void;
+  clearDiagnosisData: () => void;
+  resetState: () => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+};
+
+export const useHouseData = create<HouseDataState>()(
+  devtools(
+    (set) => ({
+      // 초기 상태
+      diagnosisData: null,
+      isLoading: false,
+      error: null,
+
+      // 액션들
+      setDiagnosisData: (data: HouseDiagnosisData | ApiResponse) => {
+        // API 응답 형태인지 확인하고 적절히 처리
+        const processedData = 'data' in data ? data.data : data;
+        set({ diagnosisData: processedData });
+      },
+
+      clearDiagnosisData: () => {
+        set({ diagnosisData: null });
+      },
+
+      resetState: () => {
+        set({ diagnosisData: null, isLoading: false, error: null });
+      },
+
+      setLoading: (loading: boolean) => {
+        set({ isLoading: loading });
+      },
+
+      setError: (error: string | null) => {
+        set({ error });
+      },
+    }),
+    {
+      name: 'house-data-store',
+    },
+  ),
+);

src/features/main/store/useMapAddress.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
 
 import type { MapAddress } from '@/entities';
 
@@ -11,40 +12,47 @@ type MapAddressState = {
   updateAddress: (address: string) => void;
 };
 
-export const useMapAddress = create<MapAddressState>()((set, get) => ({
-  mapAddress: null,
-
-  setMapAddress: (address: MapAddress) => {
-    set({ mapAddress: address });
-  },
-
-  clearMapAddress: () => {
-    set({ mapAddress: null });
-  },
-
-  updateCoordinates: (latitude: number, longitude: number) => {
-    const currentAddress = get().mapAddress;
-    if (currentAddress) {
-      set({
-        mapAddress: {
-          ...currentAddress,
-          latitude,
-          longitude,
-        },
-      });
-    }
-  },
-
-  updateAddress: (address: string) => {
-    const currentAddress = get().mapAddress;
-
-    if (currentAddress) {
-      set({
-        mapAddress: {
-          ...currentAddress,
-          address,
-        },
-      });
-    }
-  },
-}));
+export const useMapAddress = create<MapAddressState>()(
+  devtools(
+    (set, get) => ({
+      mapAddress: null,
+
+      setMapAddress: (address: MapAddress) => {
+        set({ mapAddress: address });
+      },
+
+      clearMapAddress: () => {
+        set({ mapAddress: null });
+      },
+
+      updateCoordinates: (latitude: number, longitude: number) => {
+        const currentAddress = get().mapAddress;
+        if (currentAddress) {
+          set({
+            mapAddress: {
+              ...currentAddress,
+              latitude,
+              longitude,
+            },
+          });
+        }
+      },
+
+      updateAddress: (address: string) => {
+        const currentAddress = get().mapAddress;
+
+        if (currentAddress) {
+          set({
+            mapAddress: {
+              ...currentAddress,
+              address,
+            },
+          });
+        }
+      },
+    }),
+    {
+      name: 'map-address-store', // Redux DevTools에서 표시될 이름
+    },
+  ),
+);