Merge branch 'master' of https://github.com/connect-foundation/2019-12

README.md

@@ -1,10 +1,12 @@
 <h1>BookUs!</h1>
 <p>
     <img alt="travis" src="https://api.travis-ci.org/connect-foundation/2019-12.svg?branch=master" />
-    <img alt="Version" src="https://img.shields.io/badge/version-0.2.0-blue.svg?cacheSeconds=2592000" />
+    <img alt="Release" src="https://img.shields.io/github/v/release/connect-foundation/2019-12" />
     <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
 </p>
 
+### [HomePage](http://www.foorg.xyz/)
+
 [Bookus!](http://www.foorg.xyz/)는 이벤트 예약 서비스 [Festa!](https://festa.io/) 클론 프로젝트입니다. 순간적으로 많은 트래픽이 몰리더라도 중단되지 않는 **안정적인** 선착순 예약 서비스를 목표로 하고 있습니다. 따라서 다음과 같은 도전과제를 갖고 있습니다.
 
 ### 재사용성이 높고 테스트로 검증된 UI Component

client/.env.template

@@ -1,2 +1,3 @@
 REACT_APP_SERVER_URL=
+REACT_APP_SERVER_RESERVE_URL=
 REACT_APP_GOOGLE_MAP_API_KEY=

client/src/App.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import defaultTheme from '../src/commons/style/themes/default';
-import Normalize from '../src/commons/style/Normalize';
-import GlobalStyles from '../src/commons/style/GlobalStyle';
 
-import Login from './pages/Login';
-import SignUp from './pages/SignUp';
-import Main from './pages/Main';
-import EventDetail from './pages/EventDetail';
-import EventJoin from './pages/EventJoin';
-
-import GlobalStoreProvider from './stores';
+import defaultTheme from 'commons/style/themes/default';
+import Normalize from 'commons/style/Normalize';
+import GlobalStyles from 'commons/style/GlobalStyle';
+import Login from 'pages/Login';
+import SignUp from 'pages/SignUp';
+import Main from 'pages/Main';
+import EventDetail from 'pages/EventDetail';
+import EventJoin from 'pages/EventJoin';
+import NotFound from 'pages/NotFound';
+import GlobalStoreProvider from 'stores';
 
 const App: React.FC = () => (
   <GlobalStoreProvider>
@@ -32,9 +32,7 @@ const App: React.FC = () => (
             path="/events/:eventId([0-9]+)/register/tickets"
             component={EventJoin}
           />
-          <Route path="*">
-            <div>404 page</div>
-          </Route>
+          <Route path="*" component={NotFound} />
         </Switch>
       </Router>
     </ThemeProvider>

client/src/commons/constants/number.ts

@@ -1 +1 @@
-export const EVENT_NAME_MAX_LENGTH = 45;
+export const EVENT_NAME_MAX_LENGTH = 40;

client/src/commons/constants/routes.ts

@@ -3,8 +3,8 @@ export default {
   SIGNUP: '/signup',
   LOGIN: '/login',
   USER: '/user',
-  EVENT_CREATE: 'event/create',
-  EVENT_DETAIL: 'event/detail',
+  EVENT_CREATE: '/event/create',
+  EVENT_DETAIL: '/events',
   MYPAGE: '/', // 추후에 mypage로 변경해야함. 현재 MYPAGE로 이동해야하는 Route 는 전부 이것을 사용.
 
   // TODO : Modify google api to server api using google api

client/src/components/molecules/Card/index.tsx

@@ -20,6 +20,11 @@ export interface Props {
   price: number;
 }
 
+const shortenTitle = (title: string) =>
+  title.length >= EVENT_NAME_MAX_LENGTH
+    ? `${title.slice(0, EVENT_NAME_MAX_LENGTH)}...`
+    : title;
+
 function Card({
   to,
   imgSrc,
@@ -28,11 +33,7 @@ function Card({
   host,
   price,
 }: Props): React.ReactElement {
-  const eventTitle =
-    title.length >= EVENT_NAME_MAX_LENGTH
-      ? `${title.slice(0, EVENT_NAME_MAX_LENGTH)}...`
-      : title;
-
+  const eventTitle = shortenTitle(title);
   return (
     <S.LinkWrapper to={to} data-testid={'main-card'}>
       <S.HeaderWrapper></S.HeaderWrapper>

client/src/components/organisms/CardGrid/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import * as S from './style';
-import Card from '../../molecules/Card';
-import { Event } from '../../../types/Event';
+import Card from 'components/molecules/Card';
+import { Event } from 'types/Event';
+import ROUTES from 'commons/constants/routes';
 
 interface Props {
   cards: Event[];
@@ -10,7 +12,7 @@ interface Props {
 
 function CardGrid({ cards, setRef }: Props): React.ReactElement {
   return (
-    <S.CardGridWrapper>
+    <>
       <S.CardGridContainer>
         {cards.map(card => (
           <Card
@@ -20,12 +22,12 @@ function CardGrid({ cards, setRef }: Props): React.ReactElement {
             title={card.title}
             host={card.user.lastName + card.user.firstName}
             price={card.ticketType.price}
-            to={`/events/${card.id}`}
+            to={`${ROUTES.EVENT_DETAIL}/${card.id}`}
           />
         ))}
       </S.CardGridContainer>
       <div ref={setRef}></div>
-    </S.CardGridWrapper>
+    </>
   );
 }
 

client/src/components/organisms/CardGrid/style.ts

@@ -1,13 +1,17 @@
 import styled from 'styled-components';
 
-export const CardGridWrapper = styled.div``;
 export const CardGridContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(2, 49%);
   justify-content: space-between;
   column-gap: 1%;
   row-gap: 2rem;
 
+  @media screen and (min-width: 32rem) {
+    grid-template-columns: repeat(2, 49%);
+    column-gap: 1%;
+    row-gap: 2rem;
+  }
+
   @media screen and (min-width: 64rem) {
     grid-template-columns: repeat(4, 24%);
     column-gap: 1%;

client/src/hooks/base/useIntersect/index.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 
 interface OptionProps {
-  root?: null;
+  root?: HTMLElement | null;
   threshold?: number;
   rootMargin?: string;
 }
@@ -23,7 +23,6 @@ export const useIntersect = (
   React.Dispatch<React.SetStateAction<HTMLElement | null>>,
 ] => {
   const [ref, setRef] = useState<HTMLElement | null>(null);
-  // intersecting이 있을 때 target 엔트리와 observer를 넘겨주자.
   const checkIntersect = useCallback(
     ([entry]: IntersectionObserverEntry[], observer: IntersectionObserver) => {
       if (entry.isIntersecting) {
@@ -32,15 +31,13 @@ export const useIntersect = (
     },
     [onIntersect],
   );
-  // ref나 option이 바뀔 경우 observer를 새로 등록한다.
   useEffect(() => {
     let observer: IntersectionObserver;
     if (ref) {
       observer = new IntersectionObserver(checkIntersect, {
         ...baseOption,
         ...option,
       });
-      // start to observe ref
       observer.observe(ref);
     }
     return (): void => observer && observer.disconnect();
@@ -52,6 +49,5 @@ export const useIntersect = (
     checkIntersect,
     option,
   ]);
-  // setRef를 넘겨주어서 ref를 변경시킬 수 있도록 한다.
   return [ref, setRef];
 };

client/src/pages/EventDetail/store.tsx

@@ -13,10 +13,8 @@ const defaultState: EventDetailState = {
     place: '',
     address: '',
     placeDesc: '',
-    location: {
-      latitude: 0,
-      longitude: 0,
-    },
+    latitude: 37.5662952,
+    longitude: 126.9779451,
     mainImg: '',
     desc: '',
 

client/src/pages/EventDetail/view.tsx

@@ -28,7 +28,8 @@ function EventDetailView({ eventId }: Props): React.ReactElement {
     place,
     address,
     placeDesc,
-    location,
+    latitude,
+    longitude,
   } = eventData;
 
   const requestFetch = useFetch({
@@ -84,7 +85,11 @@ function EventDetailView({ eventId }: Props): React.ReactElement {
       // TODO: eventContent will change to contentViewer component
       eventContent={<div dangerouslySetInnerHTML={{ __html: desc }} />}
       ticket={<Ticket {...ticketType} />}
-      place={<Place {...{ place, address, placeDesc, location }} />}
+      place={
+        <Place
+          {...{ place, address, placeDesc, location: { latitude, longitude } }}
+        />
+      }
     />
   );
 }

client/src/pages/EventJoin/view.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
-
+import React, { useState } from 'react';
 import axios from 'axios';
 
 import EventJoinTemplate from './template';
 import TicketBox from 'components/organisms/TicketBox';
 import Counter from 'components/molecules/Counter';
 import Btn from 'components/atoms/Btn';
 import * as S from './style';
+import { useHistory } from 'react-router-dom';
+import httpStatus from 'http-status';
 
 const { REACT_APP_SERVER_RESERVE_URL } = process.env;
 
@@ -28,24 +29,26 @@ interface Props {
 }
 
 function EventJoin({ eventId }: Props): React.ReactElement {
+  const [isReserved, setisReserved] = useState(false);
+
+  const history = useHistory();
   let ticketCount = 0;
-  /**
-   * .post('/api/users/ticket')
-      .set({
-        Cookie: `UID=${token}`,
-        Accept: 'application/json',
-      })
-      .send({
-        ticketId: 2,
-        orderTicketNum: 1,
-      })
-   */
+
   const counterHandler = (count: number) => {
     ticketCount = count;
   };
 
   const requestOrder = async () => {
-    console.log(REACT_APP_SERVER_RESERVE_URL);
+    if (isReserved) {
+      return;
+    }
+    if (ticketCount <= 0) {
+      alert('티켓 개수는 1개 이상이어야 합니다.');
+      return;
+    }
+    // 401 : 로그인
+    // 403, 404 : ban
+
     await axios({
       url: `${REACT_APP_SERVER_RESERVE_URL}/api/users/ticket`,
       method: 'POST',
@@ -57,7 +60,28 @@ function EventJoin({ eventId }: Props): React.ReactElement {
         orderTicketNum: ticketCount,
       },
       withCredentials: true,
-    });
+    })
+      .then(res => {
+        const { status } = res;
+        if (status === httpStatus.OK) {
+          setisReserved(true);
+
+          alert('예약이 완료되었습니다.');
+          history.push('/');
+        }
+      })
+      .catch(err => {
+        const { response } = err;
+        const { status } = response;
+        if (status === httpStatus.UNAUTHORIZED) {
+          history.push('/login');
+        } else if (
+          status === httpStatus.FORBIDDEN ||
+          status === httpStatus.NOT_FOUND
+        ) {
+          alert('티켓 구매에 실패했습니다. 😔');
+        }
+      });
   };
 
   return (

client/src/pages/Main/index.tsx

@@ -6,18 +6,12 @@ import MainBanner from 'components/organisms/MainBanner';
 import CardGrid from 'components/organisms/CardGrid';
 import { Event } from '../../types/Event';
 import { useIntersect } from '../../hooks';
+import delay from '../../utils/delay';
 
 function Main(): React.ReactElement {
   const [events, setEvents] = useState<Event[]>([]);
   const { REACT_APP_SERVER_URL: SERVER_URL } = process.env;
 
-  const delay = (seconds: number): Promise<void> =>
-    new Promise(resolve =>
-      setTimeout(() => {
-        resolve();
-      }, seconds * 1000),
-    );
-
   const fetchItems = useCallback(async () => {
     const startAt =
       events.length === 0
@@ -28,7 +22,7 @@ function Main(): React.ReactElement {
       url: `${SERVER_URL}/api/events?cnt=12${startAt}`,
       withCredentials: true,
     });
-    await delay(0.5);
+    await delay(100);
     setEvents([...events, ...data]);
   }, [SERVER_URL, events]);
 
@@ -40,7 +34,9 @@ function Main(): React.ReactElement {
       await fetchItems();
     },
     {
+      root: null,
       threshold: 1.0,
+      rootMargin: '0% 0% 25% 0%',
     },
   );
 

client/src/pages/NotFound/index.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import NotFound from '.';
+
+export default {
+  title: 'Pages / NotFound',
+};
+
+export const notFound: React.FC = () => {
+  return <NotFound />;
+};

client/src/pages/NotFound/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import NotFoundTemplate from './template';
+import ImgBtn from 'components/molecules/ImgBtn';
+import ROUTES from 'commons/constants/routes';
+
+function NotFound(): React.ReactElement {
+  return (
+    <NotFoundTemplate
+      content={
+        <ImgBtn
+          alt="404 NOT FOUND"
+          src="https://kr.object.ncloudstorage.com/bookus/notfound.jpg"
+          to={ROUTES.HOME}
+        />
+      }
+    />
+  );
+}
+
+export default NotFound;