faet #18 상품 수정 페이지

src/Router.tsx

@@ -39,6 +39,7 @@ import MyJoinList from './pages/Mypage/components/MyJoinList';
 import GoodsDetail from './pages/Goods/components/GoodsDetail';
 
 import { AuthType } from './types/data';
+import GoodsModify from './pages/Goods/components/GoodsModify';
 
 export default function Router() {
   const [auth] = useRecoilState<AuthType>(authState);
@@ -109,7 +110,7 @@ export default function Router() {
               element: <GoodsDetail />,
               children: [{ path: 'submitted', element: <Submitted /> }],
             },
-            { path: 'modify', element: 'modify' },
+            { path: 'modify', element: <GoodsModify /> },
             {
               path: 'notice',
               element: <GoodsNotice />,

src/common.ts

@@ -1,3 +1,5 @@
+import { CategoryGroupCode } from './types/register';
+
 export const primaryYello = '#FFAE39';
 export const primaryJade = '#8CDDE2';
 export const primaryPurple = '#E4CCFF';
@@ -62,3 +64,11 @@ export const prohibition = {
     '만약 특정 항목이나 물품에 대한 의문이 있을 경우, 담당자에게 문의해 주시기 바랍니다.',
   description4: '이용해 주셔서 감사합니다.',
 };
+
+export const PlaceCodes: CategoryGroupCode[] = [
+  'MT1',
+  'CS2',
+  'SW8',
+  'BK9',
+  'PO3',
+];

src/components/PreviewMap.tsx

@@ -12,7 +12,7 @@ export default function PreviewMap({
   position?: PositionType;
 }) {
   return (
-    <div className="relative aspect-[1.9197] w-full rounded-xl bg-gray-300">
+    <div className="relative aspect-[1.9197] w-full rounded-md bg-gray-300">
       {position?.lat ? (
         // <StaticMap
         //   className="size-full rounded-xl"

src/components/StyledInputText.tsx

@@ -5,13 +5,15 @@ export default function StyledInputText({
   onChange,
   placeholder,
   height = 12,
+  disabled = false,
 }: StyledInputTextType) {
   return (
     <input
       type="text"
       placeholder={placeholder}
       value={value}
       onChange={onChange}
+      disabled={disabled}
       className={`block w-full rounded-md border border-slate-300 bg-white p-3 text-sm 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 ${`h-${height}`}`}
     />
   );

src/components/index.d.ts

@@ -12,6 +12,7 @@ export type StyledInputTextType = {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder: string;
   height?: numger;
+  disabled?: boolean;
 };
 
 export type StyledCurrencyInputType = {

src/pages/Goods/components/GoodsModify/components/ModifyCategory.tsx

@@ -0,0 +1,28 @@
+import category from '@src/pages/Map/components/BottomSheetComponent/data';
+
+export default function ModifyCategory({
+  idx,
+  btn,
+  onClick,
+}: {
+  idx: number;
+  btn?: JSX.Element;
+  onClick?: () => void;
+}) {
+  const { icon, name } = category.filter((item) => item.idx === idx)[0];
+
+  return (
+    <span
+      className="flex w-fit shrink-0 items-center rounded-md border bg-white px-3 py-2 text-sm"
+      onClick={onClick}
+    >
+      <img className="mr-1 inline-block size-[16px]" src={icon} alt={name} />
+      {name} {btn}
+    </span>
+  );
+}
+
+ModifyCategory.defaultProps = {
+  btn: undefined,
+  onClick: undefined,
+};

src/pages/Goods/components/GoodsModify/components/ModifyHeader.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import ChevronLeft from '@src/asset/icon/chevronLeft.svg';
+import { useNavigate } from 'react-router-dom';
+import { GoodsModifyType } from '@src/pages/Goods/index.d';
+
+export default function ModifyHeader({
+  curr,
+  prev,
+  setIsConfirm,
+}: {
+  curr: GoodsModifyType;
+  prev: GoodsModifyType;
+  setIsConfirm: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const navigate = useNavigate();
+
+  const handleGoingBack = () => {
+    if (JSON.stringify(curr) === JSON.stringify(prev)) {
+      // console.log('변동사항 없음');
+      navigate(-1);
+    } else {
+      // console.log('변동사항 있음');
+      setIsConfirm(true);
+    }
+  };
+  return (
+    <div className="absolute left-1/2 top-0 z-50 flex h-[48px] w-full max-w-screen-sm -translate-x-1/2 items-center justify-between bg-white px-4">
+      <button onClick={handleGoingBack}>
+        <img
+          className="h-12 w-10 cursor-pointer px-1 py-2"
+          src={ChevronLeft}
+          alt="뒤로가기"
+        />
+      </button>
+    </div>
+  );
+}

src/pages/Goods/components/GoodsModify/components/PostCodeModify.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import DaumPostcodeEmbed, { Address } from 'react-daum-postcode';
+import CloseIcon from '@src/asset/icon/CloseIcon.svg';
+import { GoodsModifyType } from '@src/pages/Goods/index.d';
+
+function PostCodeModify({
+  address,
+  setAddress,
+  setModify,
+}: {
+  address: string;
+  setAddress: React.Dispatch<React.SetStateAction<string>>;
+  setModify: React.Dispatch<React.SetStateAction<GoodsModifyType>>;
+}) {
+  const [open, setOpen] = useState(false);
+  const { kakao } = window;
+
+  const handleComplete = (param: Address) => {
+    const geocoder = new kakao.maps.services.Geocoder();
+    let fullAddress = param.address;
+    let extraAddress = '';
+
+    if (param.addressType === 'R') {
+      if (param.bname !== '') {
+        extraAddress += param.bname;
+      }
+      if (param.buildingName !== '') {
+        extraAddress +=
+          extraAddress !== '' ? `, ${param.buildingName}` : param.buildingName;
+      }
+      fullAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
+    }
+
+    geocoder.addressSearch(fullAddress, (result, status) => {
+      if (status === kakao.maps.services.Status.OK) {
+        setAddress(fullAddress);
+        setModify((prev) => ({
+          ...prev,
+          coordinate: {
+            latitude: Number(result[0].y),
+            longitude: Number(result[0].x),
+          },
+        }));
+      }
+    });
+
+    setOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <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"
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        value={address}
+      >
+        {address || (
+          <div className="text-gray-400">서울 성동구 왕십리로2길 20</div>
+        )}
+      </button>
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden outline-none focus:outline-none">
+          <div className="fixed left-0 top-0 z-50 h-svh w-screen bg-white">
+            <div onClick={() => setOpen(false)}>
+              <img
+                src={CloseIcon}
+                className="ml-auto mr-2 mt-2 w-10 p-2"
+                alt="닫기"
+              />
+            </div>
+          </div>
+          <DaumPostcodeEmbed
+            style={{ height: 'calc(100svh - 64px)' }}
+            className="fixed bottom-0 z-50"
+            onComplete={handleComplete}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PostCodeModify;