From 033b2df6d17f930d1f3ad1b51ec19bd725064108 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8F=84=EA=B2=BD?= Date: Sat, 20 Jan 2024 18:58:20 +0900 Subject: [PATCH] =?UTF-8?q?faet=20#18=20=EC=9C=84=EC=B9=98=EC=A7=80?= =?UTF-8?q?=EC=A0=95=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20&=20?= =?UTF-8?q?=EC=A3=BC=EB=B3=80=20=EC=9E=A5=EC=86=8C=20=ED=99=95=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/api/register.ts | 41 +++++++- src/asset/icon/RegistMarker.svg | 4 + src/asset/icon/dropdown_down.svg | 3 + src/asset/icon/dropdown_up.svg | 3 + ...cMapOnMarker.tsx => MarkerOnStaticMap.tsx} | 28 ++++-- src/components/StyledCurrencyInput.tsx | 1 + .../Goods/components/PlaceInfo/index.tsx | 2 +- src/pages/Register/components/Cost/index.tsx | 29 +++--- .../Register/components/Notice/index.tsx | 8 +- .../components/Place/components/Selector.tsx | 79 +++++++++++++++ .../components/Place/components/postcode.tsx | 6 +- src/pages/Register/components/Place/index.tsx | 96 +++++++++++++++++-- src/pages/Register/index.tsx | 12 +-- src/types/register.d.ts | 51 ++++++++++ src/utils.ts | 13 +++ tailwind.config.ts | 4 + 17 files changed, 334 insertions(+), 47 deletions(-) create mode 100644 src/asset/icon/RegistMarker.svg create mode 100644 src/asset/icon/dropdown_down.svg create mode 100644 src/asset/icon/dropdown_up.svg rename src/components/{StaticMapOnMarker.tsx => MarkerOnStaticMap.tsx} (52%) create mode 100644 src/pages/Register/components/Place/components/Selector.tsx diff --git a/package.json b/package.json index 0ba0c65..3a51caf 100644 --- a/package.json +++ b/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", diff --git a/src/api/register.ts b/src/api/register.ts index 8ac8351..74ffed6 100644 --- a/src/api/register.ts +++ b/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 => { @@ -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 => { + 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; +}; diff --git a/src/asset/icon/RegistMarker.svg b/src/asset/icon/RegistMarker.svg new file mode 100644 index 0000000..3f6c02d --- /dev/null +++ b/src/asset/icon/RegistMarker.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/asset/icon/dropdown_down.svg b/src/asset/icon/dropdown_down.svg new file mode 100644 index 0000000..c090244 --- /dev/null +++ b/src/asset/icon/dropdown_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/asset/icon/dropdown_up.svg b/src/asset/icon/dropdown_up.svg new file mode 100644 index 0000000..bbd9788 --- /dev/null +++ b/src/asset/icon/dropdown_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/StaticMapOnMarker.tsx b/src/components/MarkerOnStaticMap.tsx similarity index 52% rename from src/components/StaticMapOnMarker.tsx rename to src/components/MarkerOnStaticMap.tsx index ae1e1d8..c958c60 100644 --- a/src/components/StaticMapOnMarker.tsx +++ b/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 (
-
- 위치 - 거래 위치 +
+ 위치 + {img ? ( + 거래 위치 + ) : ( +
+ )}
- {position ? ( + + {position?.lat ? ( diff --git a/src/pages/Goods/components/PlaceInfo/index.tsx b/src/pages/Goods/components/PlaceInfo/index.tsx index 69e13e2..4cb394f 100644 --- a/src/pages/Goods/components/PlaceInfo/index.tsx +++ b/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, diff --git a/src/pages/Register/components/Cost/index.tsx b/src/pages/Register/components/Cost/index.tsx index 7fcc01c..1b8f7c9 100644 --- a/src/pages/Register/components/Cost/index.tsx +++ b/src/pages/Register/components/Cost/index.tsx @@ -5,9 +5,22 @@ import NextButton from '../../../../components/NextButton'; function Cost() { const { data, setData } = useOutletContext(); - 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 (
@@ -22,12 +35,7 @@ function Cost() {
상품 구매가
- setData((prev) => ({ - ...prev, - goodsDto: { ...prev.goodsDto, goodsPrice: Number(value) }, - })) - } + onValueChange={handleChangeGoods} />
@@ -36,12 +44,7 @@ function Cost() {
- setData((prev) => ({ - ...prev, - goodsDto: { ...prev.goodsDto, deliveryFee: Number(value) }, - })) - } + onValueChange={handleChangeDelivery} />
diff --git a/src/pages/Register/components/Notice/index.tsx b/src/pages/Register/components/Notice/index.tsx index 537684e..d880e52 100644 --- a/src/pages/Register/components/Notice/index.tsx +++ b/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일 까지 입니다. 댓글로 픽업 시간을 알려주세요! diff --git a/src/pages/Register/components/Place/components/Selector.tsx b/src/pages/Register/components/Place/components/Selector.tsx new file mode 100644 index 0000000..54b4b0d --- /dev/null +++ b/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>; + 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 ( +
+
+
{getDisplayName(index)}
+ {open +
+ +
+
+ {isLoading ? ( +
+ 주변 장소 찾는 중... +
+ ) : ( + <> +
handleIdx(-1)} + className="cursor-pointer px-3 py-1.5 active:bg-slate-200" + > + 직접 입력할게요 +
+ {places && + places.map((item, idx) => ( +
handleIdx(idx)} + className="cursor-pointer px-3 py-1.5 active:bg-slate-200" + key={item.id} + > + {item.place_name} +
+ ))} + + )} +
+
+
+ ); +} diff --git a/src/pages/Register/components/Place/components/postcode.tsx b/src/pages/Register/components/Place/components/postcode.tsx index 9960e02..4cb09c7 100644 --- a/src/pages/Register/components/Place/components/postcode.tsx +++ b/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 ( -
+