Merge pull request #10 from zoopi-palette/feat/map

Feat/map

components/LayoutMap/LayoutMap.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import {HeaderBar} from "components/HeaderBar";
+import {SearchBar} from "components/SearchBar";
+import {Stack} from "components/Stack";
+
+type LayoutMapProps = {
+  children: React.ReactNode;
+};
+
+const LayoutMap = ({children}: LayoutMapProps) => {
+  return (
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100vh",
+      }}
+    >
+      <HeaderBar />
+      <SearchBar />
+      <div css={{flex: 1, height: 10}}>
+        <Stack
+          spacing="29px"
+          divider={<hr css={{width: "88%", color: "#DDDDDD"}} />}
+        >
+          <div css={{height: 200}}>item2</div>
+          <div css={{height: 200}}>item2</div>
+          <div css={{height: 200}}>item2</div>
+          <div css={{height: 200}}>item2</div>
+          <div css={{height: 200}}>item2</div>
+        </Stack>
+
+        {/* naver map */}
+        <div css={{width: "100%"}}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default LayoutMap;

components/LayoutMap/index.ts

@@ -0,0 +1 @@
+export * from "./LayoutMap"

components/SearchBar/SearchBar.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {Select} from "components/Select";
+
+export const SearchBar = () => {
+  const hrColor = "#DDDDDD";
+
+  return (
+    <section
+      css={{
+        height: 68,
+        padding: 12,
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <input
+        type="text"
+        placeholder="검색어를 입력해 주세요"
+        css={{marginRight: 24}}
+      />
+      <hr css={{height: 24, color: hrColor, marginRight: 16, marginLeft: 24}} />
+      <Select id="distance" name="거리순"></Select>
+      <Select id="distance" name="동물 선택"></Select>
+      <Select id="distance" name="혈액형 선택"></Select>
+    </section>
+  );
+};

components/SearchBar/index.ts

@@ -0,0 +1 @@
+export * from "./SearchBar"

components/Select/Select.stories.tsx

@@ -0,0 +1,16 @@
+import {ComponentMeta, ComponentStory} from "@storybook/react";
+import {Select} from "./Select";
+
+export default {
+  title: "atoms/Select",
+  component: Select,
+  argTypes: {},
+  args: {
+    id: "id",
+    name: "name",
+  },
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+
+export const Default = Template.bind({});

components/Select/Select.tsx

@@ -0,0 +1,44 @@
+import {ChangeEventHandler, ReactNode, useCallback} from "react";
+import {Css, CssObject} from "styles/theme";
+
+export type SelectProps = {
+  children?: ReactNode;
+  id: string;
+  name: string;
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
+};
+
+export const Select = ({
+  children,
+  id,
+  name,
+  onChange,
+  ...rest
+}: SelectProps) => {
+  return (
+    <div
+      css={{
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderRadius: "22px",
+        borderColor: "#E6E7E9",
+        paddingTop: 12,
+        paddingRight: 11,
+        paddingBottom: 13,
+        paddingLeft: 12,
+        marginLeft: 8,
+        marginRight: 8,
+      }}
+    >
+      <select
+        id={id}
+        onChange={onChange}
+        {...rest}
+        css={{border: 0, color: "#393939", fontSize: 13, paddingRight: 4}}
+      >
+        {children}
+        <option value="">{name}</option>
+      </select>
+    </div>
+  );
+};

components/Select/index.ts

@@ -0,0 +1 @@
+export * from "./Select"

components/Stack/Stack.tsx

@@ -0,0 +1,59 @@
+import React, {ReactNode} from "react";
+
+// ref: https://stackoverflow.com/questions/62432985/typescript-saying-a-string-is-invalid-even-though-its-in-the-union
+type FlexDirection =
+  | "column"
+  | "inherit"
+  | "-moz-initial"
+  | "initial"
+  | "revert"
+  | "unset"
+  | "column-reverse"
+  | "row"
+  | "row-reverse"
+  | undefined;
+
+export type StackProps = {
+  children: ReactNode;
+  direction?: FlexDirection;
+  divider?: ReactNode;
+  spacing: number | string;
+};
+
+// ref: https://stackoverflow.com/questions/49496906/react-mapping-children-of-a-parent-component
+export const Stack = ({
+  children,
+  direction = "column",
+  divider,
+  spacing,
+}: StackProps) => {
+  return (
+    <>
+      {children && (
+        <div
+          css={{
+            display: "flex",
+            flexDirection: direction,
+            width: 400,
+            padding: 24,
+            overflowY: "scroll",
+          }}
+        >
+          {React.Children.map(children, (child) => {
+            return (
+              <div
+                css={{
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                {child}
+                {divider}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+};

components/Stack/index.ts

@@ -0,0 +1 @@
+export * from "./Stack"

package.json

@@ -31,6 +31,7 @@
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.9",
     "@svgr/webpack": "5.5.0",
+    "@types/navermaps": "^3.0.13",
     "@types/node": "17.0.23",
     "@types/react": "18.0.1",
     "@types/react-dom": "18.0.0",

pages/request/index.tsx

@@ -0,0 +1,92 @@
+import type {NextPage} from "next";
+import Script from "next/script";
+import {useEffect, useState} from "react";
+import LayoutMap from "components/LayoutMap/LayoutMap";
+
+type Location = {
+  latitude: number;
+  longitude: number;
+};
+
+const Request: NextPage = () => {
+  // 초기 위치: 건국대학교 동물병원
+  const [userLocation, setUserLocation] = useState<Location>({
+    latitude: 37.5390908,
+    longitude: 127.0747238,
+  });
+
+  useEffect(() => {
+    // 현재 위치 반영
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        setUserLocation({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    // userLocation으로 이동
+    const map = new naver.maps.Map("map", {
+      center: new naver.maps.LatLng(
+        userLocation.latitude,
+        userLocation.longitude
+      ),
+      zoom: 14,
+      zoomControl: true,
+      zoomControlOptions: {
+        style: naver.maps.ZoomControlStyle.SMALL,
+        position: naver.maps.Position.BOTTOM_RIGHT,
+      },
+    });
+
+    const locationBtn = "현재 위치 추적하는 아이콘, 추가 예정";
+
+    const getUserLocation = new naver.maps.CustomControl(locationBtn, {
+      position: naver.maps.Position.BOTTOM_RIGHT,
+    });
+
+    // 마커로 위치 표시
+    const marker = new naver.maps.Marker({
+      position: new naver.maps.LatLng(
+        userLocation.latitude,
+        userLocation.longitude
+      ),
+      map,
+      // icon: {
+      // url: ZoopiMarker,
+      // size: new naver.maps.Size(25, 34),
+      // scaledSize: new naver.maps.Size(25, 34),
+      // origin: new naver.maps.Point(0, 0),
+      // anchor: new naver.maps.Point(12, 34),
+      // },
+    });
+
+    naver.maps.Event.once(map, "init", function () {
+      getUserLocation.setMap(map);
+    });
+  }, [userLocation]);
+
+  const mapStyle = {
+    width: "100%",
+    height: "100%",
+  };
+
+  return (
+    <>
+      <LayoutMap>
+        <div id="map" style={mapStyle}></div>
+      </LayoutMap>
+      <Script
+        src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=w4dthat1j6"
+        strategy="beforeInteractive"
+      />
+    </>
+  );
+};
+
+// ref: https://nextjs.org/docs/basic-features/script
+
+export default Request;

yarn.lock

@@ -2709,6 +2709,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
+"@types/navermaps@^3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@types/navermaps/-/navermaps-3.0.13.tgz#eb06d733652e99a2e0f5699fdbbb875274d9e893"
+  integrity sha512-kA9Ss2FWm91IojmV8M6M3wtMcRjvVf4z0iAmoZD1xUqn3iJNoq2THvbOiQdbcO6Iu06a/bmXrXH7nKIlShmOZg==
+
 "@types/node-fetch@^2.5.7":
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.1.tgz#8f127c50481db65886800ef496f20bbf15518975"