[Feature] 주소 검색 API 적용

package.json

@@ -34,6 +34,7 @@
     "path-to-regexp": "^8.2.0",
     "react": "^19",
     "react-datepicker": "^7.4.0",
+    "react-daum-postcode": "^3.2.0",
     "react-dom": "^19",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.0",

src/app/providers/google-map-provider.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { APIProvider } from '@vis.gl/react-google-maps'
+import { ReactNode } from 'react'
+
+export const GoogleMapProvider = ({ children }: { children: ReactNode }) => {
+  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''
+
+  return <APIProvider apiKey={apiKey}>{children}</APIProvider>
+}

src/app/providers/index.tsx

@@ -1,6 +1,7 @@
 import { SessionProvider } from 'next-auth/react'
 import { ReactNode } from 'react'
 
+import { GoogleMapProvider } from './google-map-provider'
 import { MSWProvider } from './msw-provider'
 import { QueryProvider } from './query-provider'
 import { ToastProvider } from './toast-provider'
@@ -15,7 +16,9 @@ export const AppProviders = ({ basePath, children }: Props) => {
     <SessionProvider basePath={basePath}>
       <MSWProvider>
         <ToastProvider>
-          <QueryProvider>{children}</QueryProvider>
+          <QueryProvider>
+            <GoogleMapProvider>{children}</GoogleMapProvider>
+          </QueryProvider>
         </ToastProvider>
       </MSWProvider>
     </SessionProvider>

src/entities/job-post/config/location.ts

@@ -1,19 +1,19 @@
 export enum Location {
-  SEOUL = 'Seoul',
-  BUSAN = 'Busan',
-  DAEGU = 'Daegu',
-  INCHEON = 'Incheon',
-  GWANGJU = 'Gwangju',
-  DAEJEON = 'Daejeon',
-  ULSAN = 'Ulsan',
-  SEJONG = 'Sejong',
-  GYEONGGI = 'Gyeonggi',
-  GANGWON = 'Gangwon',
-  CHUNGBUK = 'Chungcheongbuk-do',
-  CHUNGNAM = 'Chungcheongnam-do',
-  JEONBUK = 'Jeollabuk-do',
-  JEONNAM = 'Jeollanam-do',
-  GYEONGBUK = 'Gyeongsangbuk-do',
-  GYEONGNAM = 'Gyeongsangnam-do',
-  JEJU = 'Jeju',
+  SEOUL = 'SEOUL',
+  BUSAN = 'BUSAN',
+  DAEGU = 'DAEGU',
+  INCHEON = 'INCHEON',
+  GWANGJU = 'GWANGJU',
+  DAEJEON = 'DAEJEON',
+  ULSAN = 'ULSAN',
+  SEJONG = 'SEJONG',
+  GYEONGGI = 'GYEONGGI',
+  GANGWON = 'GANGWON',
+  CHUNGBUK = 'CHUNGBUK',
+  CHUNGNAM = 'CHUNGNAM',
+  JEONBUK = 'JEONBUK',
+  JEONNAM = 'JEONNAM',
+  GYEONGBUK = 'GYEONGBUK',
+  GYEONGNAM = 'GYEONGNAM',
+  JEJU = 'JEJU',
 }

src/entities/job-post/ui/academy-address/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps'
+import { AdvancedMarker, Map } from '@vis.gl/react-google-maps'
 import React from 'react'
 
 const Pin = () => {
@@ -29,22 +29,18 @@ type Props = {
 }
 
 const AcademyAddress = ({ address, lat, lng }: Props) => {
-  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''
-
   return (
     <div className="overflow-hidden rounded-[10px] border border-gray-300">
-      <APIProvider apiKey={apiKey}>
-        <Map
-          mapId="academy-address-map"
-          defaultZoom={15}
-          defaultCenter={{ lat, lng }}
-          className="h-[232px] w-full"
-        >
-          <AdvancedMarker key={address} position={{ lat, lng }}>
-            <Pin />
-          </AdvancedMarker>
-        </Map>
-      </APIProvider>
+      <Map
+        mapId="academy-address-map"
+        defaultZoom={15}
+        defaultCenter={{ lat, lng }}
+        className="h-[232px] w-full"
+      >
+        <AdvancedMarker key={address} position={{ lat, lng }}>
+          <Pin />
+        </AdvancedMarker>
+      </Map>
       <div className="title-small h-12 w-full bg-white p-3 font-normal text-gray-900">
         {address ?? '-'}
       </div>

src/entities/job-post/ui/posting-title/index.tsx

@@ -1,5 +1,6 @@
 import { format } from 'date-fns'
-import { capitalize } from 'lodash-es'
+import { lowerCase } from 'lodash-es'
+import { useTranslations } from 'next-intl'
 
 import { colors } from 'shared/config'
 import { cn } from 'shared/lib'
@@ -15,6 +16,8 @@ type Props = {
 }
 
 export const PostingTitle = ({ jobPost, size }: Props) => {
+  const t = useTranslations()
+
   const studentType = convertStudentType({
     forKindergarten: jobPost.forKindergarten,
     forElementary: jobPost.forElementary,
@@ -32,7 +35,9 @@ export const PostingTitle = ({ jobPost, size }: Props) => {
       <ul className="flex flex-col gap-1">
         <li className={cn(css.description({ size }))}>
           <Icon name="LocationFilled" color={colors.gray[500]} size={size} />
-          <span>{capitalize(jobPost.locationType ?? '-')}</span>
+          <span>
+            {t(`field.location.option.${lowerCase(jobPost.locationType)}`)}
+          </span>
         </li>
         <li className={cn(css.description({ size }))}>
           <Icon name="User" color={colors.gray[500]} size={size} />

src/features/job-post-filter/ui/job-post-filters.tsx

@@ -1,3 +1,5 @@
+import { lowerCase } from 'lodash-es'
+import { useTranslations } from 'next-intl'
 import { ChangeEvent, KeyboardEvent } from 'react'
 
 import { Location, StudentType } from 'entities/job-post'
@@ -19,6 +21,8 @@ export const JobPostFilters = ({
   useSearchField = false,
   onChange,
 }: Props) => {
+  const t = useTranslations()
+
   const {
     filters,
     isFilterExist,
@@ -89,7 +93,7 @@ export const JobPostFilters = ({
           >
             {Object.keys(Location).map(key => (
               <Filter.Item key={key} value={key}>
-                {Location[key as keyof typeof Location]}
+                {t(`field.location.option.${lowerCase(key)}`)}
               </Filter.Item>
             ))}
           </Filter>
@@ -116,7 +120,7 @@ export const JobPostFilters = ({
             {filters.locations.map(location => (
               <Chip key={location} selected>
                 <Chip.Label>
-                  {Location[location as keyof typeof Location]}
+                  {t(`field.location.option.${lowerCase(location as string)}`)}
                 </Chip.Label>
                 <Chip.RemoveButton
                   onClick={() => handleLocationFilterRemove(location)}

src/features/sign-up/lib/use-geocoding.ts

@@ -0,0 +1,33 @@
+import { useMapsLibrary } from '@vis.gl/react-google-maps'
+import { useEffect, useRef } from 'react'
+
+export const useGeocoding = () => {
+  const lib = useMapsLibrary('geocoding')
+  const geocoder = useRef<google.maps.Geocoder | null>(null)
+
+  useEffect(() => {
+    if (lib) {
+      geocoder.current = new lib.Geocoder()
+    }
+  }, [lib])
+
+  const geocode = async (
+    address: string,
+    callback: (result: { lat: number; lng: number }) => void,
+  ) => {
+    if (!geocoder.current) return null
+
+    await geocoder.current.geocode({ address }, (results, status) => {
+      if (status === 'OK' && results?.[0]) {
+        const { location } = results[0].geometry
+
+        callback({
+          lat: location.lat(),
+          lng: location.lng(),
+        })
+      }
+    })
+  }
+
+  return { geocode }
+}

src/features/sign-up/lib/util.ts

@@ -0,0 +1,42 @@
+import { Location } from 'entities/job-post'
+
+export const convertToLocationType = (sido: string) => {
+  switch (sido) {
+    case '서울':
+      return Location.SEOUL
+    case '부산':
+      return Location.BUSAN
+    case '대구':
+      return Location.DAEGU
+    case '인천':
+      return Location.INCHEON
+    case '광주':
+      return Location.GWANGJU
+    case '대전':
+      return Location.DAEJEON
+    case '울산':
+      return Location.ULSAN
+    case '세종특별자치시':
+      return Location.SEJONG
+    case '경기':
+      return Location.GYEONGGI
+    case '강원특별자치도':
+      return Location.GANGWON
+    case '충북':
+      return Location.CHUNGBUK
+    case '충남':
+      return Location.CHUNGNAM
+    case '전북특별자치도':
+      return Location.JEONBUK
+    case '전남':
+      return Location.JEONNAM
+    case '경북':
+      return Location.GYEONGBUK
+    case '경남':
+      return Location.GYEONGNAM
+    case '제주특별자치도':
+      return Location.JEJU
+    default:
+      return null
+  }
+}

src/features/sign-up/ui/field/address.tsx

@@ -1,22 +1,76 @@
 import { useTranslations } from 'next-intl'
+import { ChangeEvent, useState } from 'react'
+import DaumPostcode, { type Address as AddressType } from 'react-daum-postcode'
+import { useFormContext } from 'react-hook-form'
 
 import { fieldCss } from 'shared/form'
-import { Button, Label, TextField } from 'shared/ui'
+import { Button, Label, Modal, TextField } from 'shared/ui'
+
+import { useGeocoding } from '../../lib/use-geocoding'
+import { convertToLocationType } from '../../lib/util'
 
 export const Address = () => {
   const t = useTranslations()
 
+  const { geocode } = useGeocoding()
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [address, setAddress] = useState('')
+  const [detailedAddress, setDetailedAddress] = useState('')
+
+  const form = useFormContext()
+
+  const handleButtonClick = () => {
+    setIsOpen(true)
+  }
+
+  const handleCompleteSearchingCode = (data: AddressType) => {
+    setAddress(data.address)
+    setDetailedAddress('')
+
+    form.setValue('detailedAddress', data.address)
+    form.setValue('locationType', convertToLocationType(data.sido))
+
+    geocode(data.address, ({ lat, lng }) => {
+      form.setValue('lat', lat)
+      form.setValue('lng', lng)
+    })
+
+    setIsOpen(false)
+  }
+
+  const handleAddressChange = (event: ChangeEvent<HTMLInputElement>) => {
+    form.setValue('detailedAddress', `${address} ${event.target.value}`)
+    setDetailedAddress(event.target.value)
+  }
+
   return (
     <div className={fieldCss.fieldWrapper()}>
       <Label required>{t('field.address.label')}</Label>
       <div className="flex gap-2">
-        <TextField readOnly className="bg-gray-100" />
-        <Button variant="lined" size="large" className="w-[120px] shrink-0">
-          주소 검색
-        </Button>
+        <TextField value={address} readOnly className="bg-gray-100" />
+        <Modal open={isOpen} onOpenChange={setIsOpen}>
+          <Button
+            variant="lined"
+            size="large"
+            className="w-[120px] shrink-0"
+            onClick={handleButtonClick}
+          >
+            주소 검색
+          </Button>
+          <Modal.Content className="h-[600px] w-[450px]">
+            <DaumPostcode
+              style={{ height: '500px' }}
+              onComplete={handleCompleteSearchingCode}
+            />
+          </Modal.Content>
+        </Modal>
       </div>
-      <TextField readOnly className="bg-gray-100" />
-      <TextField placeholder={t('field.address.placeholder')} />
+      <TextField
+        value={detailedAddress}
+        placeholder={t('field.address.placeholder')}
+        onChange={handleAddressChange}
+      />
     </div>
   )
 }

src/shared/config/internationalization/locales/en/field.json

@@ -49,6 +49,27 @@
     "business-registration-number": {
       "label": "Business Registration Number",
       "placeholder": "Enter 10 digits only (no dashes)"
+    },
+    "location": {
+      "option": {
+        "seoul": "Seoul",
+        "busan": "Busan",
+        "daegu": "Daegu",
+        "incheon": "Incheon",
+        "gwangju": "Gwangju",
+        "daejeon": "Daejeon",
+        "ulsan": "Ulsan",
+        "sejong": "Sejong",
+        "gyeonggi": "Gyeonggi",
+        "gangwon": "Gangwon",
+        "chungbuk": "Chungcheongbuk-do",
+        "chungnam": "Chungcheongnam-do",
+        "jeonbuk": "Jeollabuk-do",
+        "jeonnam": "Jeollanam-do",
+        "gyeongbuk": "Gyeongsangbuk-do",
+        "gyeongnam": "Gyeongsangnam-do",
+        "jeju": "Jeju"
+      }
     }
   }
 }