feat: 주소 검색 및 진단 폼 기능 구현

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.12",
     "@tanstack/react-query": "^5.85.3",

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

@@ -0,0 +1,28 @@
+import { fetchInstance } from '@/shared';
+
+import type { HouseType } from '../types';
+
+export const DIAGNOSIS_API_PATH = '/api/diagnosis';
+
+interface DiagnosisApiResponse {
+  address: string;
+  addressDetail: string;
+  houseType: HouseType;
+  deposit: number;
+}
+
+export const diagnosisApi = async ({
+  address,
+  addressDetail,
+  houseType,
+  deposit,
+}: DiagnosisApiResponse) => {
+  const response = await fetchInstance.post<DiagnosisApiResponse>(DIAGNOSIS_API_PATH, {
+    address,
+    addressDetail,
+    houseType,
+    deposit,
+  });
+
+  return response.data;
+};

src/features/main/apis/index.ts

@@ -0,0 +1 @@
+export * from './diagnosis.api';

src/features/main/components/common/AddressField.tsx

@@ -0,0 +1,23 @@
+import { useFormContext } from 'react-hook-form';
+
+import { FormField, FormItem, FormLabel, FormMessage, Input } from '@/shared';
+
+import { FORM_FIELDS, LABEL_TEXTS, PLACEHOLDER_TEXTS } from '../../constants';
+import { type SearchAddressType } from '../../model';
+
+export const AddressField = () => {
+  const form = useFormContext<SearchAddressType>();
+  return (
+    <FormField
+      control={form.control}
+      name='address'
+      render={({ field }) => (
+        <FormItem className='flex flex-col gap-2'>
+          <FormLabel htmlFor={FORM_FIELDS.ADDRESS}>{LABEL_TEXTS.ADDRESS}</FormLabel>
+          <Input {...field} placeholder={PLACEHOLDER_TEXTS.ADDRESS} />
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

src/features/main/components/common/DepositField.tsx

@@ -0,0 +1,43 @@
+import { useFormContext } from 'react-hook-form';
+
+import { FormField, FormItem, FormMessage, Input } from '@/shared';
+
+import { PLACEHOLDER_TEXTS } from '../../constants';
+import type { SearchAddressType } from '../../model';
+
+export const DepositField = () => {
+  const form = useFormContext<SearchAddressType>();
+
+  const convertToNumber = (value: string, onChange: (value: number) => void) => {
+    const numValue = value === '' ? 0 : Number(value);
+    const safeValue = isNaN(numValue) ? 0 : numValue;
+    onChange(safeValue);
+  };
+
+  const getDisplayValue = (value: number) => {
+    return value === 0 ? '' : String(value);
+  };
+
+  return (
+    <FormField
+      control={form.control}
+      name='deposit'
+      render={({ field }) => (
+        <FormItem className='flex flex-col gap-2'>
+          <div className='relative'>
+            <Input
+              {...field}
+              placeholder={PLACEHOLDER_TEXTS.DEPOSIT}
+              onChange={(e) => convertToNumber(e.target.value, field.onChange)}
+              value={getDisplayValue(field.value)}
+            />
+            <span className='absolute top-1/2 right-4 -translate-y-1/2 transform text-sm font-semibold text-[#333D4B]'>
+              원
+            </span>
+          </div>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

src/features/main/components/common/DetailAddressField.tsx

@@ -0,0 +1,23 @@
+import { useFormContext } from 'react-hook-form';
+
+import { FormField, FormItem, FormLabel, FormMessage, Input } from '@/shared';
+
+import { FORM_FIELDS, LABEL_TEXTS, PLACEHOLDER_TEXTS } from '../../constants';
+import type { SearchAddressType } from '../../model';
+
+export const DetailAddressField = () => {
+  const form = useFormContext<SearchAddressType>();
+  return (
+    <FormField
+      control={form.control}
+      name='detailAddress'
+      render={({ field }) => (
+        <FormItem className='flex flex-col gap-2'>
+          <FormLabel htmlFor={FORM_FIELDS.DETAIL_ADDRESS}>{LABEL_TEXTS.DETAIL_ADDRESS}</FormLabel>
+          <Input {...field} placeholder={PLACEHOLDER_TEXTS.DETAIL_ADDRESS} />
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

src/features/main/components/common/HouseTypeField.tsx

@@ -0,0 +1,53 @@
+import { useFormContext } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared';
+
+import { HOUSE_TYPE_OPTIONS, LABEL_TEXTS } from '../../constants';
+import type { SearchAddressType } from '../../model';
+
+export const HouseTypeField = () => {
+  const form = useFormContext<SearchAddressType>();
+
+  return (
+    <FormField
+      control={form.control}
+      name='houseType'
+      render={({ field }) => (
+        <FormItem className='flex flex-col gap-2'>
+          <FormLabel>{LABEL_TEXTS.HOUSE_TYPE}</FormLabel>
+          <Select onValueChange={field.onChange} defaultValue={field.value}>
+            <FormControl>
+              <SelectTrigger className='w-full rounded-full border-none shadow-[0px_4px_30px_0px_#0000001A] focus-visible:border-lighthouse-blue focus-visible:shadow-lighthouse-blue-shadow [&_span]:text-input-placeholder-gray'>
+                <SelectValue placeholder='주택유형을 선택해주세요' />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>{LABEL_TEXTS.HOUSE_TYPE}</SelectLabel>
+                {HOUSE_TYPE_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

src/features/main/components/common/RentTypeField.tsx

@@ -0,0 +1,22 @@
+import { Label, RadioGroup, RadioGroupItem } from '@/shared';
+
+export const RentTypeField = () => {
+  return (
+    <div className='flex flex-col gap-2'>
+      <Label className='text-sm font-medium'>임대 유형</Label>
+      <RadioGroup value='jeonse' className='flex items-center gap-4'>
+        <div className='flex items-center gap-2'>
+          <RadioGroupItem
+            value='jeonse'
+            id='jeonse'
+            checked
+            className='data-[state=checked]:border-[#8A8A8A] data-[state=checked]:before:bg-[#4353FF]'
+          />
+          <Label htmlFor='jeonse' className='text-sm'>
+            전세
+          </Label>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+};

src/features/main/components/common/index.ts

@@ -4,3 +4,8 @@ export * from './ChartLineItem';
 export * from './LegendLine';
 export * from './Needle';
 export * from './Pagination';
+export * from './AddressField';
+export * from './HouseTypeField';
+export * from './DetailAddressField';
+export * from './DepositField';
+export * from './RentTypeField';

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

@@ -24,7 +24,7 @@ export const RiskChartBox = ({ riskScore, title }: Props) => {
   const needleAngle = getGaugeAngle(riskScore);
 
   return (
-    <div className='w-full rounded-lg bg-white p-6'>
+    <div className='w-full rounded-lg bg-white pt-6'>
       <h3 className='mb-2 text-2xl font-bold text-gray-900'>{title}</h3>
       <p className='text-md mb-6 flex items-center gap-2 text-gray-600'>
         <span className='font-semibold'>위험 점수 :</span>

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

@@ -13,9 +13,9 @@ export const RiskFactorsBox = ({ riskFactors }: Props) => {
           <div key={factor.name} className='flex items-center gap-5 py-3 text-center font-semibold'>
             <div className='size-1 rounded-full bg-black' />
             <span className='flex items-center gap-2 text-gray-900'>
-              <span className='text-lg text-lighthouse-blue'>{factor.name}</span>
-              <div className='flex items-center gap-1'>
-                <span className='font-medium text-red-500'>{factor.percent}</span>
+              <span className='text-lg text-black'>{factor.name}</span>
+              <div className='flex items-center gap-1 font-semibold'>
+                <span className='text-red-500'>{factor.percent}</span>
                 <span className='text-black'>%</span>
               </div>
             </span>

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

@@ -1,78 +1,67 @@
-import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 
-import { Button, Input, Label, RadioGroup, RadioGroupItem } from '@/shared';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
 
+import { Button, Form } from '@/shared';
+
+import { diagnosisApi } from '../../../apis';
+import { type SearchAddressType, searchAddressSchema } from '../../../model';
+import type { HouseType } from '../../../types';
 import {
-  FORM_FIELDS,
-  LABEL_TEXTS,
-  PLACEHOLDER_TEXTS,
-  RENT_TYPES,
-  RENT_TYPE_CONFIG,
-} from '../../../constants';
-import type { RentType } from '../../../types';
+  AddressField,
+  DepositField,
+  DetailAddressField,
+  HouseTypeField,
+  RentTypeField,
+} from '../../common';
 
 export const DiagnosticForm = () => {
-  const [rentType, setRentType] = useState<RentType>(RENT_TYPES.JEONSE);
+  const form = useForm<SearchAddressType>({
+    resolver: zodResolver(searchAddressSchema),
+    defaultValues: {
+      address: '',
+      houseType: '',
+      detailAddress: '',
+      deposit: 0,
+    },
+  });
 
-  const handleRentTypeChange = (value: string) => {
-    setRentType(value as RentType);
-  };
+  const { mutate: diagnosisMutate } = useMutation({
+    mutationFn: (data: SearchAddressType) =>
+      diagnosisApi({
+        address: data.address,
+        addressDetail: data.detailAddress,
+        houseType: data.houseType as HouseType,
+        deposit: data.deposit,
+      }),
+  });
 
-  const currentRentConfig = RENT_TYPE_CONFIG[rentType];
+  const onSubmit = (data: SearchAddressType) => {
+    diagnosisMutate(data);
+  };
 
-  //TODO: 추후 Form 컴포넌트로 리팩토링
   return (
-    <div className='mt-10 flex w-full flex-col items-center gap-2'>
-      <div className='flex w-4/5 flex-col gap-2'>
-        <div className='flex w-full flex-col gap-4'>
-          <div className='flex flex-col gap-2'>
-            <Label htmlFor={FORM_FIELDS.ADDRESS} className='text-sm font-medium'>
-              {LABEL_TEXTS.ADDRESS}
-            </Label>
-            <Input id={FORM_FIELDS.ADDRESS} placeholder={PLACEHOLDER_TEXTS.ADDRESS} />
-          </div>
-          <div className='flex flex-col gap-2'>
-            <Label htmlFor={FORM_FIELDS.HOUSE_TYPE} className='text-sm font-medium'>
-              {LABEL_TEXTS.HOUSE_TYPE}
-            </Label>
-            <Input id={FORM_FIELDS.HOUSE_TYPE} placeholder={PLACEHOLDER_TEXTS.HOUSE_TYPE} />
+    <Form {...form}>
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className='mt-10 flex w-full flex-col items-center gap-2'
+      >
+        <div className='flex w-4/5 flex-col gap-2'>
+          <div className='flex w-full flex-col gap-5'>
+            <AddressField />
+            <HouseTypeField />
+            <DetailAddressField />
+            <RentTypeField />
+            <DepositField />
           </div>
-          <div className='flex flex-col gap-2'>
-            <Label htmlFor={FORM_FIELDS.DETAIL_ADDRESS} className='text-sm font-medium'>
-              {LABEL_TEXTS.DETAIL_ADDRESS}
-            </Label>
-            <Input id={FORM_FIELDS.DETAIL_ADDRESS} placeholder={PLACEHOLDER_TEXTS.DETAIL_ADDRESS} />
+          <div className='py-10'>
+            <Button className='w-full' onClick={form.handleSubmit(onSubmit)}>
+              진단하기
+            </Button>
           </div>
-          <div className='flex flex-col gap-2'>
-            <Label className='text-sm font-medium'>{LABEL_TEXTS.DEPOSIT}</Label>
-            <RadioGroup
-              value={rentType}
-              onValueChange={handleRentTypeChange}
-              className='flex items-center gap-4'
-            >
-              {Object.entries(RENT_TYPE_CONFIG).map(([value, config]) => (
-                <div key={value} className='flex items-center gap-2'>
-                  <RadioGroupItem value={value} id={value} />
-                  <Label htmlFor={value} className='text-sm'>
-                    {config.label}
-                  </Label>
-                </div>
-              ))}
-            </RadioGroup>
-          </div>
-          <div className='flex flex-col gap-2'>
-            <div className='relative'>
-              <Input placeholder={currentRentConfig.placeholder} className='pr-12' />
-              <span className='absolute top-1/2 right-4 -translate-y-1/2 transform text-sm font-semibold text-gray-600'>
-                원
-              </span>
-            </div>
-          </div>
-        </div>
-        <div className='py-10'>
-          <Button className='w-full'>진단하기</Button>
         </div>
-      </div>
-    </div>
+      </form>
+    </Form>
   );
 };

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

@@ -11,7 +11,7 @@ export const ReasonBox = () => {
         >
           <div className='size-1 rounded-full bg-black' />
           <span className='flex items-center gap-2 text-gray-900'>
-            <span className='text-lg text-lighthouse-blue'>{reason.name}</span>
+            <span className='text-lg text-black'>{reason.name}</span>
             <div className='flex items-center gap-1'>
               <span className='font-medium text-red-500'>{reason.percent}</span>
               <span className='text-black'>%</span>