Merge pull request #148 from prgrms-web-devcourse-final-project/feature/

#43

 feat: LocationPicker 컴포넌트 개발

src/components/organisms/LocationPicker/index.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Text, TextButton } from "components/atoms";
+import { Map } from "components/organisms";
+import { LocationPickerWrapper } from "./styled";
+import { ICoord } from "types";
+
+interface ILocationPickerProps {
+  /** 거래희망장소 좌표 (위도, 경도) */
+  coord?: ICoord;
+  /** 거래희망장소 선택 완료 버튼 클릭 이벤트 */
+  onLocationSelect: (selectedCoord: ICoord) => void;
+}
+
+export const LocationPicker = ({
+  coord,
+  onLocationSelect
+}: ILocationPickerProps) => {
+  const [centerCoord, setCenterCoord] = useState<any>(null);
+
+  const handleButtonClick = () => {
+    if (centerCoord) {
+      const iCoord = {
+        lat: centerCoord.lat(),
+        lng: centerCoord.lng()
+      } as const;
+
+      onLocationSelect(iCoord);
+    }
+  };
+
+  return (
+    <LocationPickerWrapper>
+      <Text
+        content={`이웃과 만나서 거래하고 싶은 장소를 선택해주세요.`}
+        variant="h5"
+      />
+      <Text content="만나서 거래할 때는 누구나 찾기 쉬운 공공장소가 좋아요" />
+      <Map coord={coord} isCenterMarkerExist setCenterCoord={setCenterCoord} />
+      <TextButton text="선택 완료" onClick={handleButtonClick} />
+    </LocationPickerWrapper>
+  );
+};
+

src/components/organisms/LocationPicker/stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavermapsProvider } from "react-naver-maps";
+import { LocationPicker } from ".";
+import { ICoord } from "types";
+
+const meta: Meta<typeof LocationPicker> = {
+  title: "Organisms/LocationPicker",
+  component: LocationPicker,
+  tags: ["autodocs"],
+  argTypes: {
+    onLocationSelect: {
+      action: "onSubmitButtonClick",
+      description: "거래희망장소 선택 완료 버튼 클릭 이벤트"
+    }
+  },
+  decorators: (story) => (
+    <NavermapsProvider ncpClientId={import.meta.env.VITE_NAVER_MAP_CLIENT_ID}>
+      {story()}
+    </NavermapsProvider>
+  )
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Register: Story = {
+  args: { onLocationSelect: (coord: ICoord) => console.log(coord) },
+  render: (args) => <LocationPicker {...args} />
+};
+export const Edit: Story = {
+  args: {
+    coord: {
+      lat: 37.5666805,
+      lng: 126.9784147
+    },
+    onLocationSelect: (coord: ICoord) => console.log(coord)
+  },
+  render: (args) => <LocationPicker {...args} />
+};
+
+export default meta;
+

src/components/organisms/LocationPicker/styled.ts

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+export const LocationPickerWrapper: ReturnType<typeof styled.div> = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+

src/components/organisms/NeighborhoodAuthForm/index.tsx

@@ -5,6 +5,7 @@ import { Map } from "components/organisms";
 import { ICoord } from "types";
 
 interface INeighborhoodAuthFormProps {
+  /** 동네 인증 버튼 클릭 이벤트 */
   onSubmitButtonClick?: (coord: ICoord) => void;
 }
 
@@ -17,15 +18,15 @@ export const NeighborhoodAuthForm = ({
 
   useEffect(() => {
     if (myCoord) {
-      const icoord = {
+      const iCoord = {
         lat: myCoord.lat(),
         lng: myCoord.lng()
       } as const;
-      setMyICoord(icoord);
+      setMyICoord(iCoord);
 
       // TODO: 위경도를 가지고 'OO동' 반환하는 유틸함수에 저장
       setMyNeighborhood(
-        `lat: ${icoord.lat.toString()}, lng: ${icoord.lng.toString()}`
+        `lat: ${iCoord.lat.toString()}, lng: ${iCoord.lng.toString()}`
       );
     }
   }, [myCoord]);

src/components/organisms/NeighborhoodAuthForm/stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof NeighborhoodAuthForm> = {
   argTypes: {
     onSubmitButtonClick: {
       action: "onSubmitButtonClick",
-      description: "동네 인증 완료 버튼 클릭 시 호출되는 함수"
+      description: "동네 인증 완료 버튼 클릭 이벤트"
     }
   },
   decorators: (story) => (