From 755dbde0af5e86fca36c4d4b3bfcb8f03119b77c Mon Sep 17 00:00:00 2001 From: hotbreakb Date: Sat, 30 Apr 2022 09:05:50 +0900 Subject: [PATCH 01/13] add select component --- components/SearchBar/SearchBar.tsx | 31 ++++++++++++++++++++++++ components/SearchBar/index.ts | 1 + components/Select/Select.tsx | 38 ++++++++++++++++++++++++++++++ components/Select/index.ts | 1 + 4 files changed, 71 insertions(+) create mode 100644 components/SearchBar/SearchBar.tsx create mode 100644 components/SearchBar/index.ts create mode 100644 components/Select/Select.tsx create mode 100644 components/Select/index.ts diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..4671ebc --- /dev/null +++ b/components/SearchBar/SearchBar.tsx @@ -0,0 +1,31 @@ +import {useTheme} from "@emotion/react"; +import {Button} from "components/Button"; +import Select from "components/Select/Select"; +import React from "react"; + +const SearchBar = () => { + const theme = useTheme(); + + const hrColor = "##DDDDDD"; + + return ( +
+ +
+ + + +
+ ); +}; + +export default SearchBar; diff --git a/components/SearchBar/index.ts b/components/SearchBar/index.ts new file mode 100644 index 0000000..0c52338 --- /dev/null +++ b/components/SearchBar/index.ts @@ -0,0 +1 @@ +export * from "./SearchBar" \ No newline at end of file diff --git a/components/Select/Select.tsx b/components/Select/Select.tsx new file mode 100644 index 0000000..9efb72e --- /dev/null +++ b/components/Select/Select.tsx @@ -0,0 +1,38 @@ +import {ChangeEventHandler, ReactNode, useCallback} from "react"; +import {Css, CssObject} from "styles/theme"; + +export type SelectProps = { + children?: ReactNode; + id: string; + name: string; + onChange?: ChangeEventHandler; +}; + +const Select = ({children, id, name, onChange, ...rest}: SelectProps) => { + return ( +
+ +
+ ); +}; + +export default Select; diff --git a/components/Select/index.ts b/components/Select/index.ts new file mode 100644 index 0000000..7c6d6be --- /dev/null +++ b/components/Select/index.ts @@ -0,0 +1 @@ +export * from "./Select" \ No newline at end of file From 3fc23dc9c089a944ad6ee66e428d390436539b42 Mon Sep 17 00:00:00 2001 From: hotbreakb Date: Sat, 30 Apr 2022 09:22:12 +0900 Subject: [PATCH 02/13] add layoutmap component --- components/LayoutMap/LayoutMap.tsx | 21 +++++++++++++++++++++ components/LayoutMap/index.ts | 1 + pages/request/index.tsx | 9 +++++++++ 3 files changed, 31 insertions(+) create mode 100644 components/LayoutMap/LayoutMap.tsx create mode 100644 components/LayoutMap/index.ts create mode 100644 pages/request/index.tsx diff --git a/components/LayoutMap/LayoutMap.tsx b/components/LayoutMap/LayoutMap.tsx new file mode 100644 index 0000000..cedc3a5 --- /dev/null +++ b/components/LayoutMap/LayoutMap.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import {HeaderBar} from "components/HeaderBar"; +import {SearchBar} from "components/SearchBar"; + +const LayoutMap = () => { + return ( +
+ + +
+ ); +}; + +export default LayoutMap; diff --git a/components/LayoutMap/index.ts b/components/LayoutMap/index.ts new file mode 100644 index 0000000..18589b1 --- /dev/null +++ b/components/LayoutMap/index.ts @@ -0,0 +1 @@ +export * from "./LayoutMap" \ No newline at end of file diff --git a/pages/request/index.tsx b/pages/request/index.tsx new file mode 100644 index 0000000..394555c --- /dev/null +++ b/pages/request/index.tsx @@ -0,0 +1,9 @@ +import type {NextPage} from "next"; +import {LayoutCenter} from "components/LayoutCenter"; +import LayoutMap from "components/LayoutMap/LayoutMap"; + +const Request: NextPage = () => { + return ; +}; + +export default Request; From 2c56c25d86f7c24dd20563c2f47f63e075f93496 Mon Sep 17 00:00:00 2001 From: hotbreakb Date: Sat, 30 Apr 2022 09:29:48 +0900 Subject: [PATCH 03/13] add select storybook --- components/Select/Select.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 components/Select/Select.stories.tsx diff --git a/components/Select/Select.stories.tsx b/components/Select/Select.stories.tsx new file mode 100644 index 0000000..ee2bdca --- /dev/null +++ b/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; + +const Template: ComponentStory = (args) => @@ -27,5 +20,3 @@ const SearchBar = () => { ); }; - -export default SearchBar; From fc5a6915e0621f8071a4a9b148c8a97beddf72d8 Mon Sep 17 00:00:00 2001 From: hotbreakb Date: Sat, 30 Apr 2022 09:46:38 +0900 Subject: [PATCH 05/13] fix export --- components/SearchBar/SearchBar.tsx | 2 +- components/Select/Select.stories.tsx | 2 +- components/Select/Select.tsx | 10 +++++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx index 4515aae..4e8d1bc 100644 --- a/components/SearchBar/SearchBar.tsx +++ b/components/SearchBar/SearchBar.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Select from "components/Select/Select"; +import {Select} from "components/Select"; export const SearchBar = () => { const hrColor = "#DDDDDD"; diff --git a/components/Select/Select.stories.tsx b/components/Select/Select.stories.tsx index ee2bdca..5e6fa72 100644 --- a/components/Select/Select.stories.tsx +++ b/components/Select/Select.stories.tsx @@ -1,5 +1,5 @@ import {ComponentMeta, ComponentStory} from "@storybook/react"; -import Select from "./Select"; +import {Select} from "./Select"; export default { title: "atoms/Select", diff --git a/components/Select/Select.tsx b/components/Select/Select.tsx index 9efb72e..5a82467 100644 --- a/components/Select/Select.tsx +++ b/components/Select/Select.tsx @@ -8,7 +8,13 @@ export type SelectProps = { onChange?: ChangeEventHandler; }; -const Select = ({children, id, name, onChange, ...rest}: SelectProps) => { +export const Select = ({ + children, + id, + name, + onChange, + ...rest +}: SelectProps) => { return (
{
); }; - -export default Select; From 267b3f2ef591197220633439150cf1b5186b1bef Mon Sep 17 00:00:00 2001 From: hotbreakb Date: Sat, 30 Apr 2022 11:27:22 +0900 Subject: [PATCH 06/13] add stack component --- components/Stack/Stack.tsx | 56 ++++++++++++++++++++++++++++++++++++++ components/Stack/index.ts | 1 + 2 files changed, 57 insertions(+) create mode 100644 components/Stack/Stack.tsx create mode 100644 components/Stack/index.ts diff --git a/components/Stack/Stack.tsx b/components/Stack/Stack.tsx new file mode 100644 index 0000000..7f1403b --- /dev/null +++ b/components/Stack/Stack.tsx @@ -0,0 +1,56 @@ +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 && ( +
+ {React.Children.map(children, (child) => { + return ( + <> + {child} + {divider} + + ); + })} +
+ )} + + ); +}; diff --git a/components/Stack/index.ts b/components/Stack/index.ts new file mode 100644 index 0000000..9a1f6e8 --- /dev/null +++ b/components/Stack/index.ts @@ -0,0 +1 @@ +export * from "./Stack" \ No newline at end of file From 46db46ee477290292cf4781cdf4988b2a4502e94 Mon Sep 17 00:00:00 2001 From: hotbreakb Date: Sat, 30 Apr 2022 13:10:26 +0900 Subject: [PATCH 07/13] add naver map --- package.json | 1 + pages/request/index.tsx | 85 ++++++++++++++++++++++++++++++++++++++++- yarn.lock | 5 +++ 3 files changed, 89 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 339bea3..a40eda3 100644 --- a/package.json +++ b/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", diff --git a/pages/request/index.tsx b/pages/request/index.tsx index 394555c..9cf773d 100644 --- a/pages/request/index.tsx +++ b/pages/request/index.tsx @@ -1,9 +1,90 @@ import type {NextPage} from "next"; -import {LayoutCenter} from "components/LayoutCenter"; +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 = () => { - return ; + // 초기 위치: 건국대학교 동물병원 + const [userLocation, setUserLocation] = useState({ + 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.TOP_LEFT, + }); + + getUserLocation.setMap(map); + + // 마커로 위치 표시 + // 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), + // }, + // }); + }, [userLocation]); + + const mapStyle = { + width: "100%", + height: "100%", + }; + + return ( + <> + +
+ +