faet #18 위치지정 퍼블리싱 & 주변 장소 확인

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-host": "vite --host",
     "build": "vite build",
     "lint": "eslint ./src --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "eslint ./src --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",

src/api/register.ts

@@ -1,7 +1,13 @@
-import { GoodsData } from '@src/types/register';
+import {
+  CategoryGroupCode,
+  GoodsData,
+  NearPlacesType,
+} from '@src/types/register';
+import axios from 'axios';
+import { PositionType } from '@src/types/map';
 import jigumeAxios from './axios';
 
-const postGoods = async (
+export const postGoods = async (
   images: File[],
   goodsDto_: GoodsData
 ): Promise<string> => {
@@ -27,4 +33,33 @@ const postGoods = async (
   return response;
 };
 
-export default postGoods;
+export const getPlaces = async ({
+  position,
+  CAT_CODE,
+}: {
+  position: PositionType | undefined;
+  CAT_CODE: CategoryGroupCode;
+}): Promise<NearPlacesType[]> => {
+  const KAKAO_KEY = import.meta.env.VITE_KAKAO_REST_KEY;
+  const url = 'https://dapi.kakao.com/v2/local/search/category.json';
+
+  const response: NearPlacesType[] = await axios(url, {
+    params: {
+      category_group_code: CAT_CODE,
+      x: position?.lng,
+      y: position?.lat,
+      radius: 1000,
+    },
+    headers: {
+      Authorization: `KakaoAK ${KAKAO_KEY}`,
+    },
+  }).then((res) => {
+    return res.data.documents.map((item: NearPlacesType) => ({
+      ...item,
+      distance: Number(item.distance),
+      x: Number(item.x),
+      y: Number(item.y),
+    }));
+  });
+  return response;
+};

src/components/StaticMapOnMarker.tsx → src/components/MarkerOnStaticMap.tsx

@@ -2,24 +2,31 @@ import { StaticMap } from 'react-kakao-maps-sdk';
 import { PositionType } from '@src/types/map';
 import markerPin from '@src/asset/icon/markerPin.svg';
 
-export default function StaticMapOnMarker({
+export default function MarkerOnStaticMap({
   img,
   position,
+  markerImg,
 }: {
   img?: string;
+  markerImg?: string;
   position?: PositionType;
 }) {
   return (
     <div className="relative aspect-[1.9197] w-full rounded-xl bg-gray-300">
-      <div className="absolute left-1/2 top-[calc(50%+10px)] z-10 w-8 -translate-x-1/2 -translate-y-1/2">
-        <img src={markerPin} alt="위치" />
-        <img
-          src={img}
-          className="absolute left-[5px] top-[5px] z-50 size-[22px] rounded-full bg-gray-300"
-          alt="거래 위치"
-        />
+      <div className="absolute left-1/2 top-[45%] z-10 w-8 -translate-x-1/2 -translate-y-1/2">
+        <img src={markerImg || markerPin} alt="위치" />
+        {img ? (
+          <img
+            src={img}
+            className="absolute left-[5px] top-[5px] z-50 size-[22px] rounded-full bg-gray-300"
+            alt="거래 위치"
+          />
+        ) : (
+          <div className="absolute left-[5px] top-[5px] z-50 size-[22px] rounded-full bg-white" />
+        )}
       </div>
-      {position ? (
+
+      {position?.lat ? (
         <StaticMap
           className="size-full rounded-xl"
           marker={false}
@@ -37,7 +44,8 @@ export default function StaticMapOnMarker({
   );
 }
 
-StaticMapOnMarker.defaultProps = {
+MarkerOnStaticMap.defaultProps = {
   img: undefined,
+  markerImg: undefined,
   position: undefined,
 };

src/components/StyledCurrencyInput.tsx

@@ -11,6 +11,7 @@ export default function StyledCurrencyInput({
       className="w-full rounded-md border border-slate-300 p-3 text-right text-sm font-medium placeholder:text-slate-400 focus:border-success focus:outline-none focus:ring-1 focus:ring-success disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-500 disabled:shadow-none"
       value={value}
       defaultValue={0}
+      placeholder="0 원"
       decimalsLimit={2}
       onValueChange={onValueChange}
     />

src/pages/Goods/components/PlaceInfo/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useQuery } from 'react-query';
 import { GoodsPageDTO } from '@src/types/goods';
 import { PositionType } from '@src/types/map';
-import IntroStaticMap from '@src/components/StaticMapOnMarker';
+import IntroStaticMap from '@src/components/MarkerOnStaticMap';
 
 export default function PlaceInfo({
   data,

src/pages/Register/components/Cost/index.tsx

@@ -5,9 +5,22 @@ import NextButton from '../../../../components/NextButton';
 
 function Cost() {
   const { data, setData } = useOutletContext<RegisterContextType>();
-
   const isMovable = data.goodsDto.goodsPrice && data.goodsDto.deliveryFee;
 
+  const handleChangeGoods = (value: string | undefined) => {
+    setData((prev) => ({
+      ...prev,
+      goodsDto: { ...prev.goodsDto, goodsPrice: Number(value) },
+    }));
+  };
+
+  const handleChangeDelivery = (value: string | undefined) => {
+    setData((prev) => ({
+      ...prev,
+      goodsDto: { ...prev.goodsDto, deliveryFee: Number(value) },
+    }));
+  };
+
   return (
     <div className="flex h-[calc(100svh-48px)] w-full flex-col justify-between">
       <div />
@@ -22,12 +35,7 @@ function Cost() {
           <div className="mb-2 text-sm  font-thin">상품 구매가</div>
           <StyledCurrencyInput
             value={data.goodsDto.goodsPrice}
-            onValueChange={(value) =>
-              setData((prev) => ({
-                ...prev,
-                goodsDto: { ...prev.goodsDto, goodsPrice: Number(value) },
-              }))
-            }
+            onValueChange={handleChangeGoods}
           />
         </div>
         <div>
@@ -36,12 +44,7 @@ function Cost() {
           </div>
           <StyledCurrencyInput
             value={data.goodsDto.deliveryFee}
-            onValueChange={(value) =>
-              setData((prev) => ({
-                ...prev,
-                goodsDto: { ...prev.goodsDto, deliveryFee: Number(value) },
-              }))
-            }
+            onValueChange={handleChangeDelivery}
           />
         </div>
       </div>

src/pages/Register/components/Notice/index.tsx

@@ -1,10 +1,10 @@
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import { useMutation } from 'react-query';
 import { RegisterContextType } from '@src/types/register';
-import NextButton from '../../../../components/NextButton';
-import StyledTextarea from '../../../../components/StyledTextarea';
-import postGoods from '../../../../api/register';
-import LoadingButton from '../../../../components/LoadingButton';
+import NextButton from '@src/components/NextButton';
+import StyledTextarea from '@src/components/StyledTextarea';
+import { postGoods } from '@src/api/register';
+import LoadingButton from '@src/components/LoadingButton';
 import { initData } from '../..';
 
 const notice = `픽업 기간은 배송 완료 예정일인 9월 10일부터 13일 까지 입니다. 댓글로 픽업 시간을 알려주세요!

src/pages/Register/components/Place/components/Selector.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import DropDownUP from '@src/asset/icon/dropdown_up.svg';
+import DropDownDown from '@src/asset/icon/dropdown_down.svg';
+import { NearPlacesType } from '@src/types/register';
+
+export default function Selector({
+  index,
+  setIndex,
+  places,
+  isLoading,
+}: {
+  index: number;
+  setIndex: React.Dispatch<React.SetStateAction<number>>;
+  places: NearPlacesType[];
+  isLoading: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const handleToggle = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleIdx = (p: number) => {
+    if (p > places?.length) return;
+    setIndex(p);
+  };
+
+  const getDisplayName = (i: number) => {
+    if (i === -2) return '픽업 위치를 선택해주세요';
+    if (i === -1) return '직접 입력할게요';
+    return places[i].place_name;
+  };
+
+  return (
+    <div
+      className={`text-md absolute z-30 w-[calc(100%-2rem)] max-w-screen-sm overflow-y-scroll rounded-md border border-slate-300 bg-white text-left font-light text-slate-600 ${!open ? 'py-3' : 'pt-3'}`}
+      onClick={handleToggle}
+    >
+      <div className="flex justify-between px-3">
+        <div>{getDisplayName(index)}</div>
+        <img
+          src={open ? DropDownUP : DropDownDown}
+          alt={open ? '닫기' : '열기'}
+        />
+      </div>
+
+      <div
+        className={`transition-max-height duration-200 ease-in-out ${open ? 'max-h-40 overflow-scroll' : 'max-h-0 overflow-hidden'}`}
+      >
+        <div className="pt-1.5">
+          {isLoading ? (
+            <div className="cursor-pointer px-3 py-1.5 active:bg-slate-200">
+              주변 장소 찾는 중...
+            </div>
+          ) : (
+            <>
+              <div
+                onClick={() => handleIdx(-1)}
+                className="cursor-pointer px-3 py-1.5 active:bg-slate-200"
+              >
+                직접 입력할게요
+              </div>
+              {places &&
+                places.map((item, idx) => (
+                  <div
+                    onClick={() => handleIdx(idx)}
+                    className="cursor-pointer px-3 py-1.5 active:bg-slate-200"
+                    key={item.id}
+                  >
+                    {item.place_name}
+                  </div>
+                ))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Register/components/Place/components/postcode.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import DaumPostcodeEmbed, { Address } from 'react-daum-postcode';
 import { RegisterDataType } from '@src/types/register';
-import CloseIcon from '../../../../../asset/icon/CloseIcon.svg';
+import CloseIcon from '@src/asset/icon/CloseIcon.svg';
 
 function Postcode({
   data,
@@ -47,11 +47,11 @@ function Postcode({
   };
 
   return (
-    <div>
+    <div className="relative top-16">
       <button
         data-modal-target="defaultModal"
         data-modal-toggle="defaultModal"
-        className="w-full rounded-md border border-slate-300 p-3  text-right text-sm font-medium focus:border-success focus:outline-none focus:ring-1 focus:ring-success disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-500 disabled:shadow-none"
+        className="w-full rounded-md border border-slate-300 p-3 text-right text-sm font-medium focus:border-success focus:outline-none focus:ring-1 focus:ring-success disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-500 disabled:shadow-none"
         type="button"
         onClick={() => setOpen((prev) => !prev)}
         value={data.address}