Merge pull request #41 from ehdrhelr/fe/feature/map

[Fe] 카카오 Map
codesquad-members-2021 · Jun 1, 2021 · a1f13f9 · a1f13f9
2 parents 48bbe29 + 4b3c285
commit a1f13f9
Show file tree

Hide file tree

Showing 32 changed files with 779 additions and 24 deletions.
diff --git a/FE/airbnb/.env.development b/FE/airbnb/.env.development
@@ -0,0 +1 @@
+REACT_APP_MAP_APPKEY=9f0ba239664a570240d7a243e65f8e6a
diff --git a/FE/airbnb/.env.production b/FE/airbnb/.env.production
@@ -0,0 +1 @@
+REACT_APP_MAP_APPKEY=9f0ba239664a570240d7a243e65f8e6a
diff --git a/FE/airbnb/package-lock.json b/FE/airbnb/package-lock.json
diff --git a/FE/airbnb/package.json b/FE/airbnb/package.json
@@ -10,11 +10,13 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.9",
     "react": "^17.0.2",
     "react-cool-kyle-carousel": "0.0.6",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "recoil": "^0.3.1",
     "styled-components": "^5.3.0",

diff --git a/FE/airbnb/public/index.html b/FE/airbnb/public/index.html
@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_MAP_APPKEY%"
+    ></script>
     <title>Airbnb</title>
   </head>
   <body>

diff --git a/FE/airbnb/src/App.tsx b/FE/airbnb/src/App.tsx
@@ -2,12 +2,31 @@ import './App.css';
 import theme from './theme';
 import styled, { ThemeProvider } from 'styled-components';
 import MainPage from './pages/MainPage';
+import ReservePage from './pages/ReservePage';
+import { Suspense } from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
 
 function App() {
+  console.log('app');
   return (
     <ThemeProvider theme={theme}>
       <StyledApp>
-        <MainPage />
+        <Router>
+          <Route exact={true} path='/'>
+            <MainPage />
+          </Route>
+          <Route path='/reserve'>
+            <Suspense fallback='loading'>
+              <ReservePage />
+            </Suspense>
+          </Route>
+        </Router>
       </StyledApp>
     </ThemeProvider>
   );

diff --git a/FE/airbnb/public/image/hero-img.png → FE/airbnb/src/assets/image/hero-img.png b/FE/airbnb/public/image/hero-img.png → FE/airbnb/src/assets/image/hero-img.png
diff --git a/FE/airbnb/src/assets/svg/Property 1=star.svg b/FE/airbnb/src/assets/svg/Property 1=star.svg
diff --git a/FE/airbnb/src/components/header/Background.tsx b/FE/airbnb/src/components/header/Background.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+  src: string;
+}
+
+const Background = ({ src }: Props) => {
+  return (
+    <StyledBackground>
+      <img src={src} alt='' />{' '}
+    </StyledBackground>
+  );
+};
+
+export default React.memo(Background);
+
+const StyledBackground = styled.div`
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  width: 100%;
+  height: 70vh;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  background-repeat: no-repeat;
+  background-size: contain;
+`;
diff --git a/FE/airbnb/src/components/header/form/FormColumn.tsx b/FE/airbnb/src/components/header/form/FormColumn.tsx
@@ -1,17 +1,27 @@
+import { FormEvent, RefObject } from 'react';
 import styled from 'styled-components';
 
 interface Props {
   title: string;
   description: string;
   isInput?: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+  handleInput?: (e: FormEvent<HTMLInputElement>) => void;
 }
 
-const FormColumn = ({ title, description, isInput }: Props) => {
+const FormColumn = ({ title, description, isInput, inputRef, handleInput }: Props) => {
   return (
     <StyledFormColumn>
       <div className='title'>{title}</div>
       {isInput ? (
-        <input type='text' name='locationInput' placeholder={description} />
+        <input
+          type='text'
+          name='locationInput'
+          placeholder={description}
+          ref={inputRef}
+          onChange={handleInput}
+          autoComplete='off'
+        />
       ) : (
         <div className='description'>{description}</div>
       )}

diff --git a/FE/airbnb/src/components/header/form/FormLocation.tsx b/FE/airbnb/src/components/header/form/FormLocation.tsx
@@ -1,8 +1,8 @@
-import { useRef, useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRef, useEffect, FormEvent } from 'react';
+import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import useToggle from '../../../hooks/useToggle';
-import { isFormOpenedState } from '../../../recoil/headerAtom';
+import { isFormOpenedState, locationState } from '../../../recoil/headerAtom';
 import HoverBlock from '../HoverBlock';
 import FormColumn from './FormColumn';
 import FormLocationToggle from './FormLocationToggle';
@@ -13,20 +13,40 @@ const FormLocation = () => {
   const toggleRef = useRef<HTMLDivElement>(null);
   const { open } = useToggle({ clickRef, toggleRef });
   const setIsFormOpened = useSetRecoilState(isFormOpenedState);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [location, setLocation] = useRecoilState(locationState);
+  const clearLocation = useResetRecoilState(locationState);
 
   const isShowDeleteBtn = open;
 
   useEffect(() => {
-    if (open) setIsFormOpened(true);
-    else setIsFormOpened(false);
+    if (open) {
+      setIsFormOpened(true);
+      if (inputRef.current) inputRef.current.focus();
+    } else setIsFormOpened(false);
   }, [open]);
 
+  const handleInput = (e: FormEvent<HTMLInputElement>) => {
+    setLocation(e.currentTarget.value);
+  };
+
+  const handleDeleteBtn = () => {
+    clearLocation();
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
   return (
     <StyledLocationWrapper>
       <StyledFormLocation ref={clickRef} data-type='location'>
         <HoverBlock color='gray4' className='hover__location' dataKey='location' isModal={open}>
-          <FormColumn title='위치' description='어디로 여행가세요' isInput={true} />
-          {isShowDeleteBtn && <DeleteBtn />}
+          <FormColumn
+            title='위치'
+            description='어디로 여행가세요'
+            isInput={true}
+            inputRef={inputRef}
+            handleInput={handleInput}
+          />
+          {isShowDeleteBtn && <DeleteBtn onClick={handleDeleteBtn} />}
         </HoverBlock>
       </StyledFormLocation>
       {open && <FormLocationToggle toggleRef={toggleRef} />}

diff --git a/FE/airbnb/src/components/header/form/FormPrice.tsx b/FE/airbnb/src/components/header/form/FormPrice.tsx
@@ -61,7 +61,9 @@ const FormPrice = () => {
 
 export default FormPrice;
 
-const StyledFormPriceWrapper = styled.div``;
+const StyledFormPriceWrapper = styled.div`
+  position: relative;
+`;
 
 const StyledFormPrice = styled.div`
   height: 100%;

diff --git a/FE/airbnb/src/components/header/form/calendar/FormCalendar.tsx b/FE/airbnb/src/components/header/form/calendar/FormCalendar.tsx
@@ -100,6 +100,7 @@ interface StyleType {
 }
 
 const StyledFormCalendar = styled.div<StyleType>`
+  z-index: 10;
   overflow: hidden;
   position: absolute;
   top: 100px;

diff --git a/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx b/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx
@@ -37,3 +37,13 @@ export const getDateByTime = (time: number | null): date | void => {
   const date = new Date(time);
   return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
 };
+
+export const dateToString = (date: date | void): string => {
+  if (!date) return '';
+  let { year, month, day } = date;
+  let newMonth = month + '';
+  let newDay = day + '';
+  if (month < 10) newMonth = '0' + month;
+  if (day < 10) newDay = '0' + day;
+  return `${year}-${newMonth}-${newDay}`;
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_MAP_APPKEY=9f0ba239664a570240d7a243e65f8e6a