Feat/courtCreate/addNewCourtInfo

package.json

@@ -14,9 +14,11 @@
     "@emotion/styled": "^11.6.0",
     "axios": "^0.24.0",
     "feather-icons": "^4.28.0",
+    "framer-motion": "^5.3.3",
     "next": "12.0.4",
     "react": "17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal-sheet": "^1.4.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

src/components/KakaoMap/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, CSSProperties } from "react";
 import type { ReactNode } from "react";
 import { DEFAULT_POSITION } from "@utils/geolocation";
 import { useMapContext } from "@contexts/MapProvider";
@@ -14,17 +14,23 @@ declare global {
 interface Props {
   level: number;
   center: Coord;
+  draggable?: boolean;
+  zoomable?: boolean;
   onClick: (_: kakao.maps.Map, event: kakao.maps.event.MouseEvent) => void;
-  onDragEnd: (_: kakao.maps.Map) => void;
+  onDragEnd?: (_: kakao.maps.Map) => void;
   children: ReactNode;
+  style?: CSSProperties;
 }
 
 const KakaoMap = ({
   level,
   center,
+  draggable = true,
+  zoomable = true,
   onClick,
   onDragEnd,
   children,
+  style,
 }: Props): JSX.Element => {
   const { map, handleInitMap } = useMapContext();
   const mapRef = useRef<HTMLDivElement>(null);
@@ -41,6 +47,18 @@ const KakaoMap = ({
     }
   }, [map, level]);
 
+  useEffect(() => {
+    if (map) {
+      map.setDraggable(draggable);
+    }
+  }, [map, draggable]);
+
+  useEffect(() => {
+    if (map) {
+      map.setZoomable(zoomable);
+    }
+  }, [map, zoomable]);
+
   useEffect(() => {
     if (!mapRef.current) {
       return;
@@ -62,7 +80,7 @@ const KakaoMap = ({
 
   return (
     <>
-      <div ref={mapRef} style={{ width: "100%", height: "100%" }}>
+      <div ref={mapRef} style={{ width: "100%", height: "100%", ...style }}>
         현재 위치를 받아오는 중입니다.
         {children}
       </div>

src/components/base/Input/index.tsx

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+import Text from "../Text";
+
+interface Props extends HTMLAttributes<HTMLInputElement> {
+  label: string;
+  type: string;
+  name: string;
+  block?: boolean;
+  [x: string]: any;
+}
+
+const Input = ({ label, block, ...props }: Props) => (
+  <div>
+    <label>
+      <Text block={block}>{label}</Text>
+      <input {...props}></input>
+    </label>
+  </div>
+);
+
+export default Input;

src/contexts/NavigationProvider/actionTypes.ts

@@ -10,4 +10,5 @@ export const pageType = {
   MAP: "MAP",
   BOOK: "BOOK",
   ACTIVITY: "ACTIVITY",
+  COURT_CREATE: "COURT_CREATE",
 } as const;

src/contexts/NavigationProvider/reducer.ts

@@ -105,6 +105,20 @@ export const reducer: Reducer<DataProps, ReducerAction> = (
         title: "로그인",
       };
     }
+    case pageType.COURT_CREATE: {
+      return {
+        ...state,
+        isTopNavigation: true,
+        isBottomNavigation: true,
+        currentPage: type,
+        isBack: true,
+        isNotifications: true,
+        isProfile: true,
+        isNext: false,
+        isMenu: false,
+        title: "새 농구장 추가",
+      };
+    }
     default: {
       return { ...state };
     }

src/hooks/useForm.ts

@@ -1,14 +1,16 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 
+export type Error<T> = { [P in keyof T]?: string };
+
 interface UseFormArgs<T> {
   initialValues: T;
   onSubmit: (values: T) => void;
-  validate: (values: T) => T;
+  validate: (values: T) => Error<T>;
 }
 
 const useForm = <T>({ initialValues, onSubmit, validate }: UseFormArgs<T>) => {
   const [values, setValues] = useState<T>(initialValues);
-  const [errors, setErrors] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Error<T>>({});
   const [isLoading, setIsLoading] = useState(false);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -19,8 +21,7 @@ const useForm = <T>({ initialValues, onSubmit, validate }: UseFormArgs<T>) => {
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     setIsLoading(true);
     e.preventDefault();
-    console.log("hi");
-    const newErrors = validate ? validate(values) : initialValues;
+    const newErrors = validate ? validate(values) : {};
     if (Object.keys(newErrors).length === 0) {
       await onSubmit(values);
     }