From 0d210df458196032722a917b66d2a2edbf7d832b Mon Sep 17 00:00:00 2001
From: y0unj1NoH <nohyoong711@gmail.com>
Date: Fri, 29 Nov 2024 09:47:24 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20LocationPicker=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organisms/LocationPicker/index.tsx        | 43 +++++++++++++++++++
 .../organisms/LocationPicker/stories.tsx      | 41 ++++++++++++++++++
 .../organisms/LocationPicker/styled.ts        |  7 +++
 3 files changed, 91 insertions(+)
 create mode 100644 src/components/organisms/LocationPicker/index.tsx
 create mode 100644 src/components/organisms/LocationPicker/stories.tsx
 create mode 100644 src/components/organisms/LocationPicker/styled.ts

diff --git a/src/components/organisms/LocationPicker/index.tsx b/src/components/organisms/LocationPicker/index.tsx
new file mode 100644
index 00000000..c7c889d2
--- /dev/null
+++ b/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>
+  );
+};
+
diff --git a/src/components/organisms/LocationPicker/stories.tsx b/src/components/organisms/LocationPicker/stories.tsx
new file mode 100644
index 00000000..a910ec6d
--- /dev/null
+++ b/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;
+
diff --git a/src/components/organisms/LocationPicker/styled.ts b/src/components/organisms/LocationPicker/styled.ts
new file mode 100644
index 00000000..cb374b21
--- /dev/null
+++ b/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;
+`;
+

From 7a24298518f06071ea73d84e3d9369777955b503 Mon Sep 17 00:00:00 2001
From: y0unj1NoH <nohyoong711@gmail.com>
Date: Fri, 29 Nov 2024 09:49:02 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20NeighborhoodAuthForm=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/organisms/NeighborhoodAuthForm/index.tsx   | 7 ++++---
 src/components/organisms/NeighborhoodAuthForm/stories.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/NeighborhoodAuthForm/index.tsx b/src/components/organisms/NeighborhoodAuthForm/index.tsx
index de30f372..ab5bca68 100644
--- a/src/components/organisms/NeighborhoodAuthForm/index.tsx
+++ b/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]);
diff --git a/src/components/organisms/NeighborhoodAuthForm/stories.tsx b/src/components/organisms/NeighborhoodAuthForm/stories.tsx
index 8e2741d6..2d72f33a 100644
--- a/src/components/organisms/NeighborhoodAuthForm/stories.tsx
+++ b/src/components/organisms/NeighborhoodAuthForm/stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof NeighborhoodAuthForm> = {
   argTypes: {
     onSubmitButtonClick: {
       action: "onSubmitButtonClick",
-      description: "동네 인증 완료 버튼 클릭 시 호출되는 함수"
+      description: "동네 인증 완료 버튼 클릭 이벤트"
     }
   },
   decorators: (story) => (