Merge pull request #88 from TripInfoWeb/dev_informations

Feature: 커스텀 장소 등록 기능 수정
TripInfoWeb · Jun 30, 2024 · ed031e9 · ed031e9
2 parents 887e1d6 + c1b756a
commit ed031e9
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 38 deletions.
diff --git a/src/app/meetings/page.tsx b/src/app/meetings/page.tsx
@@ -1,5 +1,5 @@
 import Banner from "@/components/common/Banner";
-import TopListContainer from "@/containers/informations/TopListContainer";
+import TopList from "@/components/common/TopList";
 import MeetingsListContainer from "@/containers/meetings/MeetingsListContainer";
 import { Metadata } from "next";
 
@@ -21,7 +21,7 @@ export default function page({ searchParams }: MyProps) {
         category={"모임"}
       />
       {/* TODO : 나중에 API 연결하게 되면 그때 가서 공통컴포넌트 수정하기 */}
-      <TopListContainer category="모임" />
+      <TopList title="모임" />
       <MeetingsListContainer />
     </div>
   );

diff --git a/src/components/informations/write/PlaceModal.tsx b/src/components/informations/write/PlaceModal.tsx
@@ -12,8 +12,17 @@ type MyProps = {
         y: string;
       }[]
     | undefined;
-  handleSearch: DebouncedState<(search: string) => void>;
+  addressInfos:
+    | {
+        address_name: string;
+        x: string;
+        y: string;
+      }[]
+    | undefined;
+  handleLocationSearch: DebouncedState<(search: string) => void>;
+  handleAddressSearch: DebouncedState<(search: string) => void>;
   isCustom: boolean;
+  canTypePlaceName: boolean;
   canRegister: boolean;
   onClick: (isCustom: boolean) => void;
   onResetPlace: () => void;
@@ -24,18 +33,27 @@ type MyProps = {
     x: string;
     y: string;
   }) => void;
+  onChangeAddress: (value: {
+    address_name: string;
+    x: string;
+    y: string;
+  }) => void;
   onChangeCustomPlaceName: (placeName: string) => void;
   closeModal: () => void;
 };
 
 const PlaceModal = ({
   placeInfos,
-  handleSearch,
+  addressInfos,
+  handleLocationSearch,
+  handleAddressSearch,
   isCustom,
+  canTypePlaceName,
   canRegister,
   onClick,
   onResetPlace,
   onChangePlace,
+  onChangeAddress,
   onChangeCustomPlaceName,
   closeModal,
 }: MyProps) => {
@@ -69,44 +87,86 @@ const PlaceModal = ({
               </button>
             </div>
           </div>
-          <div className={`${isCustom ? "hidden" : ""} flex flex-col gap-2`}>
+          <div
+            className={`${isCustom ? "hidden" : ""} flex w-full flex-col gap-2`}
+          >
             <h3 className="text-lg font-medium text-black">장소 검색하기</h3>
-            <div className="flex h-56 flex-col rounded-3xl border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]">
+            <div className="flex h-80 flex-col rounded-3xl border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]">
               <input
                 className="h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
                 type="text"
                 autoComplete="location"
                 name="location"
-                placeholder="장소명을 입력하세요."
-                onChange={(e) => handleSearch(e.target.value)}
+                placeholder="장소명을 입력하세요. (Ex. 테라로사 포스코센터점)"
+                onChange={(e) => handleLocationSearch(e.target.value)}
               />
-              <div className="flex flex-col items-start gap-2 px-6 py-4">
+              <div className="flex h-64 flex-col items-start gap-2 overflow-y-auto px-6 py-4">
                 {placeInfos?.map((placeInfo, index) => (
                   <button
                     key={index}
-                    className="flex flex-row items-center gap-2 text-sm hover:text-main"
+                    className="flex w-full flex-col gap-1 hover:bg-gray-100"
+                    type="button"
                     onClick={() => onChangePlace(placeInfo)}
                   >
-                    <Image
-                      src="/location-icon.svg"
-                      alt="location-icon"
-                      width={10}
-                      height={10}
-                    />
-                    {placeInfo.place_name}
+                    <div className="flex flex-row items-center gap-2 text-sm">
+                      <Image
+                        src="/location-icon.svg"
+                        alt="location-icon"
+                        width={10}
+                        height={10}
+                      />
+                      {placeInfo.place_name}
+                    </div>
+                    <span className="text-xs text-gray1">
+                      {placeInfo.address_name}
+                    </span>
                   </button>
                 ))}
               </div>
             </div>
           </div>
           <div
-            className={`${isCustom ? "" : "hidden"} flex h-fit w-full flex-col gap-2`}
+            className={`${isCustom ? "" : "hidden"} flex w-full flex-col gap-2`}
           >
-            <h3 className="text-lg font-medium text-black">
-              지도에서 주소 찾기
-            </h3>
-            {/* <KakaoMapAddressContainer /> */}
-            <div className="mt-4 flex flex-row items-center justify-between gap-2">
+            <h3 className="text-lg font-medium text-black">도로명주소 찾기</h3>
+            <div
+              className={`${canTypePlaceName ? "h-fit" : "h-80"} flex flex-col rounded-3xl border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]`}
+            >
+              <input
+                className="h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
+                type="text"
+                autoComplete="address"
+                name="address"
+                placeholder="도로명주소를 입력하세요. (Ex. 용산구 청파로)"
+                onChange={(e) => handleAddressSearch(e.target.value)}
+                disabled={canTypePlaceName}
+              />
+              <div
+                className={`${canTypePlaceName ? "hidden" : ""} flex h-64 flex-col items-start gap-2 overflow-y-auto px-6 py-4`}
+              >
+                {addressInfos?.map((addressInfo, index) => (
+                  <button
+                    key={index}
+                    className="flex w-full flex-col gap-1 hover:bg-gray-100"
+                    type="button"
+                    onClick={() => onChangeAddress(addressInfo)}
+                  >
+                    <div className="flex flex-row items-center gap-2 text-sm">
+                      <Image
+                        src="/location-icon.svg"
+                        alt="location-icon"
+                        width={10}
+                        height={10}
+                      />
+                      {addressInfo.address_name}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div
+              className={`${canTypePlaceName ? "" : "hidden"} flex flex-row items-center justify-between gap-2`}
+            >
               <input
                 className="h-[3.3125rem] w-96 rounded-[21px] border-[0.0625rem] bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
                 type="text"
@@ -115,7 +175,6 @@ const PlaceModal = ({
                 placeholder="장소명을 입력하세요."
                 onChange={(e) => onChangeCustomPlaceName(e.target.value)}
               />
-
               <button
                 className={`h-[3.3125rem] w-40 rounded-full bg-main text-[0.9375rem] text-white hover:scale-105 ${canRegister ? "" : "hidden"}`}
                 type="button"

diff --git a/src/containers/informations/write/PlaceModalContainer.tsx b/src/containers/informations/write/PlaceModalContainer.tsx
@@ -10,10 +10,17 @@ type MyProps = {
 };
 
 const PlaceModalContainer = ({ closeModal }: MyProps) => {
-  const { address, placeName, changeField, resetPlaceInfo } = useEditorStore();
+  const { address, placeName, placeId, changeField, resetPlaceInfo } =
+    useEditorStore();
   const [isCustom, setIsCustom] = useState<boolean>(false);
 
-  // 검색으로 얻어진 장소 목록
+  // 장소 검색 객체 (place search)
+  const [ps, setPs] = useState<any>();
+
+  // 주소-좌표 변환 객체
+  const [geocoder, setGeocoder] = useState<any>();
+
+  // 장소 검색으로 얻어진 장소 목록
   const [placeInfos, setPlaceInfos] = useState<
     {
       place_name: string;
@@ -24,8 +31,34 @@ const PlaceModalContainer = ({ closeModal }: MyProps) => {
     }[]
   >();
 
-  // 장소 검색 객체 (place search)
-  const [ps, setPs] = useState<any>();
+  // 주소 검색으로 얻어진 주소 목록
+  const [addressInfos, setAddressInfos] = useState<
+    {
+      address_name: string;
+      x: string;
+      y: string;
+    }[]
+  >();
+
+  const handleLocationSearch = useDebouncedCallback((search: string) => {
+    // 키워드로 장소를 검색합니다.
+    ps.keywordSearch(search, (result: any, status: any) => {
+      // 정상적으로 검색이 완료됐으면
+      if (status === window.kakao.maps.services.Status.OK) {
+        setPlaceInfos(result);
+      }
+    });
+  }, 300);
+
+  const handleAddressSearch = useDebouncedCallback((search: string) => {
+    // 주소로 좌표를 검색합니다.
+    geocoder.addressSearch(search, (result: any, status: any) => {
+      // 정상적으로 검색이 완료됐으면
+      if (status === window.kakao.maps.services.Status.OK) {
+        setAddressInfos(result);
+      }
+    });
+  }, 300);
 
   const onResetPlace = () => {
     resetPlaceInfo();
@@ -47,15 +80,16 @@ const PlaceModalContainer = ({ closeModal }: MyProps) => {
     closeModal();
   };
 
-  const handleSearch = useDebouncedCallback((search: string) => {
-    // 키워드로 장소를 검색합니다.
-    ps.keywordSearch(search, (result: any, status: any) => {
-      // 정상적으로 검색이 완료됐으면
-      if (status === window.kakao.maps.services.Status.OK) {
-        setPlaceInfos(result.slice(0, 5));
-      }
-    });
-  }, 300);
+  const onChangeAddress = (addressInfo: {
+    address_name: string;
+    x: string;
+    y: string;
+  }) => {
+    changeField("address", addressInfo.address_name);
+    changeField("placeXAxis", addressInfo.x);
+    changeField("placeYAxis", addressInfo.y);
+    changeField("placeId", "0");
+  };
 
   const onChangeCustomPlaceName = (placeName: string) => {
     changeField("placeName", placeName);
@@ -70,19 +104,26 @@ const PlaceModalContainer = ({ closeModal }: MyProps) => {
       window.kakao.maps.load(() => {
         // 장소 검색 객체 생성
         setPs(new window.kakao.maps.services.Places());
+
+        // 주소-좌표 변환 객체 생성
+        setGeocoder(new window.kakao.maps.services.Geocoder());
       });
     }
   }, []);
 
   return (
     <PlaceModal
       placeInfos={placeInfos}
-      handleSearch={handleSearch}
+      addressInfos={addressInfos}
+      handleLocationSearch={handleLocationSearch}
+      handleAddressSearch={handleAddressSearch}
       isCustom={isCustom}
+      canTypePlaceName={placeId === "0"}
       canRegister={address !== "" && placeName !== ""}
       onClick={onClick}
       onResetPlace={onResetPlace}
       onChangePlace={onChangePlace}
+      onChangeAddress={onChangeAddress}
       onChangeCustomPlaceName={onChangeCustomPlaceName}
       closeModal={closeModal}
     />