feat register location detail

components/organisms/SearchLocation.tsx

@@ -8,12 +8,13 @@ import LocationSearch from "./location/LocationSearch";
 interface SearchLocationProps {
   placeInfo: KakaoLocationProps;
   setPlaceInfo: DispatchType<KakaoLocationProps>;
+  isSmall?: boolean;
 }
 
-function SearchLocation({ placeInfo, setPlaceInfo }: SearchLocationProps) {
+function SearchLocation({ placeInfo, setPlaceInfo, isSmall }: SearchLocationProps) {
   return (
     <>
-      <LocationSearch info={placeInfo} setInfo={setPlaceInfo} />
+      <LocationSearch info={placeInfo} setInfo={setPlaceInfo} isSmall={isSmall} />
       <Box mt="20px">
         <Input
           placeholder="상세 주소"

components/organisms/location/LocationSearch.tsx

@@ -10,9 +10,10 @@ import { InputGroup } from "../../atoms/Input";
 interface ISearchLocation {
   info: KakaoLocationProps;
   setInfo: DispatchType<KakaoLocationProps>;
+  isSmall?: boolean;
 }
 
-function LocationSearch({ info, setInfo }: ISearchLocation) {
+function LocationSearch({ info, setInfo, isSmall = false }: ISearchLocation) {
   const [value, setValue] = useState(info?.place_name || "");
   const [results, setResults] = useState<KakaoLocationProps[]>([]);
 
@@ -45,7 +46,7 @@ function LocationSearch({ info, setInfo }: ISearchLocation) {
         />
       </Wrapper>
 
-      <SearchContent isContent={results.length !== 0}>
+      <SearchContent isContent={results.length !== 0} isSmall={isSmall}>
         {results.length > 0 && (
           <>
             {results.map((result, idx) => {
@@ -79,10 +80,10 @@ const Wrapper = styled.div`
   align-items: center;
 `;
 
-const SearchContent = styled.div<{ isContent: boolean }>`
+const SearchContent = styled.div<{ isContent: boolean; isSmall: boolean }>`
   display: ${(props) => (props.isContent ? "block" : "none")};
   margin-top: var(--gap-3);
-  height: ${(props) => props.isContent && "240px"};
+  height: ${(props) => props.isContent && (props.isSmall ? "120px" : "240px")};
   padding: 12px 16px;
   overflow: auto;
   border: ${(props) => (props.isContent ? "1px solid var(--gray-400)" : null)};

hooks/user/mutations.ts

@@ -9,6 +9,7 @@ import {
   IAvatar,
   IUser,
   IUserRegisterFormWriting,
+  LocationDeatilProps,
   UserRole,
 } from "../../types/models/userTypes/userInfoTypes";
 import { IPointSystem } from "../../types/services/pointSystem";
@@ -61,10 +62,22 @@ type UserInfoFieldParam<T> = T extends "avatar"
           ? { isPrivate: boolean }
           : T extends "instagram"
             ? { instagram: string }
-            : { comment: string };
+            : T extends "comment"
+              ? { comment: string }
+              : T extends "locationDetail"
+                ? LocationDeatilProps
+                : null;
 
 export const useUserInfoFieldMutation = <
-  T extends "avatar" | "comment" | "role" | "rest" | "belong" | "isPrivate" | "instagram",
+  T extends
+    | "avatar"
+    | "comment"
+    | "role"
+    | "rest"
+    | "belong"
+    | "isPrivate"
+    | "instagram"
+    | "locationDetail",
 >(
   field: T,
   options?: MutationOptions<UserInfoFieldParam<T>>,

modals/pop-up/LocationRegisterPopUp.tsx

@@ -0,0 +1,57 @@
+import { Box } from "@chakra-ui/react";
+import { useState } from "react";
+
+import SearchLocation from "../../components/organisms/SearchLocation";
+import { useToast } from "../../hooks/custom/CustomToast";
+import { useUserInfoFieldMutation } from "../../hooks/user/mutations";
+import { ModalSubtitle } from "../../styles/layout/modal";
+import { IModal } from "../../types/components/modalTypes";
+import { KakaoLocationProps } from "../../types/externals/kakaoLocationSearch";
+import { IFooterOptions, ModalLayout } from "../Modals";
+
+interface LocationRegisterPopUp extends IModal {}
+
+function LocationRegisterPopUp({ setIsModal }: LocationRegisterPopUp) {
+  const toast = useToast();
+  const [placeInfo, setPlaceInfo] = useState<KakaoLocationProps>({
+    place_name: "",
+    road_address_name: "",
+  });
+
+  const { mutate } = useUserInfoFieldMutation("locationDetail", {
+    onSuccess() {
+      toast("success", "등록되었습니다. 이후 연락을 기다려주세요!");
+      setIsModal(false);
+    },
+  });
+
+  const footerOptions: IFooterOptions = {
+    main: {
+      text: "활동 장소 입력 완료",
+      func: () => {
+        const { place_name: placeName, y, x } = placeInfo;
+        if (!placeName || !y || !x) {
+          toast("error", "누락된 항목이 있습니다.");
+          return;
+        }
+
+        mutate({
+          text: placeName,
+          lat: +y,
+          lon: +x,
+        });
+      },
+    },
+  };
+
+  return (
+    <ModalLayout title="주 활동 장소 등록" footerOptions={footerOptions} setIsModal={setIsModal}>
+      <ModalSubtitle>등록 장소에 따라 소속 동네 모임이 결정됩니다.</ModalSubtitle>
+      <Box h="228px">
+        <SearchLocation placeInfo={placeInfo} setPlaceInfo={setPlaceInfo} isSmall={true} />
+      </Box>
+    </ModalLayout>
+  );
+}
+
+export default LocationRegisterPopUp;

pageTemplates/setting/userSetting/userSettingPopUp.tsx

@@ -21,6 +21,7 @@ import AlphabetPopUp from "../../../modals/pop-up/AlphabetPopUp";
 import FAQPopUp from "../../../modals/pop-up/FAQPopUp";
 import InstaPopUp from "../../../modals/pop-up/InstaPopUp";
 import LastWeekAttendPopUp from "../../../modals/pop-up/LastWeekAttendPopUp";
+import LocationRegisterPopUp from "../../../modals/pop-up/LocationRegisterPopUp";
 import ManagerPopUp from "../../../modals/pop-up/ManagerPopUp";
 import SuggestPopUp from "../../../modals/pop-up/SuggestPopUp";
 import { IUser, IUserSummary } from "../../../types/models/userTypes/userInfoTypes";
@@ -35,7 +36,8 @@ export type UserPopUp =
   // | "manager"
   | "alphabet"
   | "enthusiastic"
-  | "instagram";
+  | "instagram"
+  | "registerLocation";
 
 const MODAL_COMPONENTS = {
   faq: FAQPopUp,
@@ -47,6 +49,7 @@ const MODAL_COMPONENTS = {
   enthusiastic: EnthusiasticModal,
   manager: ManagerPopUp,
   instagram: InstaPopUp,
+  registerLocation: LocationRegisterPopUp,
 };
 
 interface UserSettingPopUpProps {
@@ -114,38 +117,43 @@ export default function UserSettingPopUp({ cnt, userInfo }: UserSettingPopUpProp
 
   useEffect(() => {
     let popUpCnt = cnt;
+    if (!userInfo?.locationDetail) {
+      setModalTypes((old) => [...old, "registerLocation"]);
+      if (popUpCnt++ === 2) return;
+    }
+
     if (!checkAndSetLocalStorage(ALPHABET_POP_UP, 15)) {
       setModalTypes((old) => [...old, "alphabet"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
     if (!checkAndSetLocalStorage(ATTEND_POP_UP, 7)) {
       setModalTypes((old) => [...old, "lastWeekAttend"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
     // if (!checkAndSetLocalStorage(ENTHUSIASTIC_POP_UP, 27)) {
     //   setModalTypes((old) => [...old, "enthusiastic"]);
-    //   if (++popUpCnt === 2) return;
+    //   if (popUpCnt++ === 2) return;
     // }
     if (!checkAndSetLocalStorage(FAQ_POP_UP, 21)) {
       setModalTypes((old) => [...old, "faq"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
 
     if (!checkAndSetLocalStorage(PROMOTION_POP_UP, 14)) {
       setModalTypes((old) => [...old, "promotion"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
     if (!checkAndSetLocalStorage(SUGGEST_POP_UP, 29)) {
       setModalTypes((old) => [...old, "suggest"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
     if (!checkAndSetLocalStorage(USER_GUIDE_POP_UP, 30)) {
       setModalTypes((old) => [...old, "userGuide"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
     if (!checkAndSetLocalStorage(INSTAGRAM_POP_UP, 26) && !userInfo?.instagram) {
       setModalTypes((old) => [...old, "instagram"]);
-      if (++popUpCnt === 2) return;
+      if (popUpCnt++ === 2) return;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

types/models/userTypes/userInfoTypes.ts

@@ -21,6 +21,13 @@ export interface IUser extends Omit<IUserRegisterForm, "location">, IUserSummary
   instagram?: string;
   isPrivate?: boolean;
   _id: string;
+  locationDetail: LocationDeatilProps;
+}
+
+export interface LocationDeatilProps {
+  text: string;
+  lat: number;
+  lon: number;
 }
 
 export interface IUserSummary {