Merge pull request #466 from connect-foundation/develop

Release 0.6.0

client/.eslintrc.json

@@ -26,6 +26,7 @@
     "SharedArrayBuffer": "readonly"
   },
   "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
     "jest/no-disabled-tests": "warn",
     "jest/no-focused-tests": "error",
     "jest/no-identical-title": "error",

client/cypress/integration/eventjoin.spec.ts

@@ -186,6 +186,6 @@ context('이벤트 예약 페이지', () => {
         expect(alertStub.getCall(0)).to.be.calledWith(RESERVE_COMPLETE);
       });
 
-    cy.location('pathname').should('eq', '/');
+    cy.location('pathname').should('eq', '/my/tickets');
   });
 });

client/src/App.tsx

@@ -25,6 +25,7 @@ import {
 import GlobalStoreProvider from 'stores';
 import { UserAccountState, UserAccountAction } from 'stores/accountStore';
 import { defaultAccountState } from 'stores/accountStore/reducer';
+import { AfterLoginAction } from 'stores/afterLoginStore';
 import { useIsMount } from 'hooks';
 const { REACT_APP_TEST_UID_TOKEN } = process.env;
 
@@ -36,11 +37,11 @@ const App: React.FC = () => {
         <GlobalStyles />
         <Router>
           <Switch>
-            <Route exact path="/" component={Main} />
-            <Route path="/login" component={Login} />
-            <Route path="/signup" component={SignUp} />
+            <PublicRoute exact path="/" component={Main} />
+            <PublicRoute path="/login" component={Login} />
+            <PublicRoute path="/signup" component={SignUp} />
             <PrivateRoute exact path="/event/create" component={EventCreate} />
-            <Route
+            <PublicRoute
               exact
               path="/events/:eventId([0-9]+)"
               component={EventDetail}
@@ -54,7 +55,7 @@ const App: React.FC = () => {
               component={MyPage}
             />
 
-            <Route path="*" component={NotFound} />
+            <PublicRoute path="*" component={NotFound} />
           </Switch>
         </Router>
       </ThemeProvider>
@@ -64,6 +65,16 @@ const App: React.FC = () => {
 
 export default App;
 
+function PublicRoute({ ...rest }: any): React.ReactElement {
+  const { setLoginCallback } = useContext(AfterLoginAction);
+
+  useEffect(() => {
+    setLoginCallback('/');
+  }, [setLoginCallback]);
+
+  return <Route {...rest} />;
+}
+
 function PrivateRoute({
   component: TargetPage,
   ...rest
@@ -72,11 +83,17 @@ function PrivateRoute({
   const accountState = useContext(UserAccountState);
   const { setLoginState } = useContext(UserAccountAction);
   const [isLoginCheck, setIsLoginCheck] = useState(false);
+  const { setLoginCallback } = useContext(AfterLoginAction);
+  const path = window.location.pathname;
 
   useEffect(() => {
     setLoginState(true);
   }, [setLoginState]);
 
+  useEffect(() => {
+    if (isLoginCheck && !accountState.isLogin) setLoginCallback(path);
+  }, [rest, accountState.isLogin, setLoginCallback, isLoginCheck, path]);
+
   useIsMount(() => {
     if (defaultAccountState !== accountState) setIsLoginCheck(true);
   }, accountState);

client/src/commons/constants/string.ts

@@ -5,6 +5,8 @@ export const LOGIN_SOCIAL = '소셜 계정을 사용해서 로그인';
 export const BEFORE_LOGIN = '가입 혹은 로그인';
 export const FOOTER_INFO =
   '대표 이메일 boostcamp@festa.io\n북어스(BookUs) | 대표 부캠이 | 서울특별시 서울구 서울동 서울로 123-1234 | 통신판매업 12345678 | 대표전화 123-1234-1234 (문의는 이메일 바랍니다)';
+export const INTERNAL_SERVER_ERROR =
+  '서버 요청에 실패했습니다. 잠시 후에 다시 시도해주세요';
 
 export const SIGNUP_EMAIL = '이메일';
 export const SIGNUP_LAST_NAME = '성';
@@ -131,12 +133,15 @@ export const BOUGHT_TICKET_EVENT_TITLE_CAPTION = '현재 구매한 티켓 목록
 export const HISTORY_METHOD_PUSH = 'PUSH';
 export const HISTORY_METHOD_REPLACE = 'REPLACE';
 
-
 export const REFUND_TICKET_SUCCESS = '환불이 완료되었습니다.';
 export const REFUND_TICKET_FAILURE = '환불이 실패했습니다.';
 export const NOT_FOUND_BOUGHT_TICKET = '아직 구매한 티켓이 없네요..😅';
 export const NOT_FOUND_CREATED_EVENT = '주최한 이벤트가 없네요..🤣';
 
+export const TICKET_REMAIN_DAYS = '일 후에 판매마감';
+export const TICKET_INVALID_DATE = '판매기간이 지났습니다';
+export const TICKET_COMMING_SOON = '일 후 판매시작';
+
 export const FORM_NAME: any = {
   event: {
     isPublic: '공개 여부',
@@ -164,4 +169,3 @@ export const FORM_NAME: any = {
     refundEndAt: '티켓 환불 마감 날짜',
   },
 };
-

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import * as S from './style';
 import { Props as BtnProps } from 'components/atoms/Btn';

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

@@ -14,7 +14,7 @@ interface Props {
   endAt: string;
   user: User;
   ticketType: TicketType;
-  doneEvent?: boolean;
+  doneEventType?: number;
 }
 
 function EventHeader({
@@ -26,12 +26,13 @@ function EventHeader({
   endAt,
   user,
   ticketType,
-  doneEvent,
+  doneEventType,
 }: Props): React.ReactElement {
   const ticketInfo = ticketType;
   const { firstName, lastName } = user;
   const profileImgUrl =
     'https://kr.object.ncloudstorage.com/bookus/defaultProfileImg.png';
+  const doneTypes = ['등록', '종료되었습니다.', '매진되었습니다.'];
 
   return (
     <S.HeaderContainer>
@@ -71,9 +72,9 @@ function EventHeader({
           <S.ReservedPeople>{ticketInfo.leftCnt}명</S.ReservedPeople>
         </S.ReservedPeopleContainer>
         <S.SubmitBtn
-          children={doneEvent ? '이벤트 종료' : '등록'}
+          children={!doneEventType ? doneTypes[0] : doneTypes[doneEventType]}
           to={`/events/${eventId}/register/tickets`}
-          disabled={doneEvent}
+          disabled={doneEventType === 1 || doneEventType === 2}
         />
       </S.SubmitContainer>
     </S.HeaderContainer>

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

@@ -6,6 +6,11 @@ import { IconLabel, Price } from 'components';
 import { calculateDiffDaysOfDateRange } from 'utils/dateCalculator';
 
 import { FaTicketAlt, FaCheck, FaRegCalendarAlt } from 'react-icons/fa';
+import {
+  TICKET_INVALID_DATE,
+  TICKET_REMAIN_DAYS,
+  TICKET_COMMING_SOON,
+} from 'commons/constants/string';
 
 interface Prop extends TicketType {
   count?: number;
@@ -29,6 +34,26 @@ function Ticket({
     Date().toString(),
     salesEndAt,
   );
+
+  function makeLabelContent(remainDays: number, salesStartAt: string) {
+    if (!doneEvent) {
+      return `${remainDays}${TICKET_REMAIN_DAYS}`;
+    }
+
+    if (remainDays <= 0) {
+      return TICKET_INVALID_DATE;
+    }
+
+    const convertToUTCDate = new Date();
+    convertToUTCDate.setHours(-9);
+
+    const commingDays = calculateDiffDaysOfDateRange(
+      convertToUTCDate.toString(),
+      salesStartAt,
+    );
+    return `${commingDays}${TICKET_COMMING_SOON}`;
+  }
+
   return (
     <>
       <S.TicketLabel>티켓</S.TicketLabel>
@@ -39,21 +64,20 @@ function Ticket({
           </S.TicketPriceWrapper>
           <S.TicketName>{`${name} ${count ? `* ${count}` : ''}`}</S.TicketName>
           <S.TicketDesc>{desc}</S.TicketDesc>
-          <IconLabel
-            icon={<FaTicketAlt size={'1.5rem'} />}
-            labelContent={`${remainCnt}개 남음`}
-          />
+          {leftCnt !== -1 && (
+            <IconLabel
+              icon={<FaTicketAlt size={'1.5rem'} />}
+              labelContent={`${remainCnt}개 남음`}
+            />
+          )}
+
           <IconLabel
             icon={<FaCheck size={'1.5rem'} />}
             labelContent={`1인당 ${maxCntPerPerson}개 구입 가능`}
           />
           <IconLabel
             icon={<FaRegCalendarAlt size={'1.5rem'} />}
-            labelContent={
-              remainDays <= 0
-                ? '판매기간이 종료되었습니다.'
-                : `${remainDays}일 후에 판매마감`
-            }
+            labelContent={makeLabelContent(remainDays, salesStartAt)}
           />
         </S.TicketContentWrapContainer>
       </S.TicketContentContainer>

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { theme, palette } from 'styled-tools';
+import { theme, palette, ifProp } from 'styled-tools';
 
 export const TicketLabel = styled.div`
   ${theme('fontStyle.h6')};
@@ -22,7 +22,11 @@ interface TicketContentWrapContainerProps {
 export const TicketContentWrapContainer = styled.div<
   TicketContentWrapContainerProps
 >`
-  color: ${palette('grayscale', 4)}
+  color: ${ifProp(
+    'disabled',
+    palette('grayscale', 4),
+    palette('grayscale', 1),
+  )};
   padding-left: 2rem;
   padding-top: 1rem;
   padding-bottom: 1rem;

client/src/hooks/useFetch.spec.tsx

@@ -40,7 +40,7 @@ describe('Hooks', () => {
       return <></>;
     }
     // when
-    const wrapper = mount(<MockComponent />);
+    mount(<MockComponent />);
 
     // then
     await new Promise(resolve => {
@@ -80,7 +80,7 @@ describe('Hooks', () => {
       return <></>;
     }
     // when
-    const wrapper = mount(<MockComponent />);
+    mount(<MockComponent />);
 
     // then
     await new Promise(resolve => {

client/src/pages/EventCreate/store.tsx

@@ -106,7 +106,7 @@ const TicketFormDefaultState: TicketFormState = {
     value: '',
   },
   isPublicLeftCnt: {
-    valid: false,
+    valid: true,
     value: false,
   },
   maxCntPerPerson: {

client/src/pages/EventDetail/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { NOT_FOUND, INTERNAL_SERVER_ERROR } from 'http-status';
 
@@ -52,6 +52,7 @@ function EventDetailView(): React.ReactElement {
   const [internalServerError, setInternalError] = useState(false);
   const history = useHistory();
   const isEventInState = checkIfEventIsInState(eventsState.events!, +eventId!);
+  const remainDays = useRef(0);
 
   const events = isEventInState
     ? eventsState.events!.get(+eventId!)!
@@ -73,19 +74,33 @@ function EventDetailView(): React.ReactElement {
     longitude,
   } = events;
 
-  const remainDays = calculateDiffDaysOfDateRange(
-    Date().toString(),
-    ticketType.salesEndAt,
-  );
+  function doneEventType() {
+    remainDays.current = calculateDiffDaysOfDateRange(
+      Date().toString(),
+      ticketType.salesEndAt,
+    );
+
+    if (remainDays.current <= 0) return 1;
+
+    const remainTickets = ticketType.quantity - ticketType.leftCnt;
+    if (remainTickets <= 0) return 2;
+
+    return 0;
+  }
 
   useEffect(() => {
-    if (!isEventInState)
+    if (!isEventInState) {
       eventFetchDispatcher({
         type: 'EVENT',
         params: {
           eventId: +eventId!,
         },
       });
+      remainDays.current = calculateDiffDaysOfDateRange(
+        Date().toString(),
+        ticketType.salesEndAt,
+      );
+    }
 
     if (eventsState.status === NOT_FOUND) {
       history.replace('/NOT_FOUND');
@@ -101,6 +116,7 @@ function EventDetailView(): React.ReactElement {
     eventsState.status,
     history,
     isEventInState,
+    ticketType.salesEndAt,
   ]);
 
   return (
@@ -117,11 +133,11 @@ function EventDetailView(): React.ReactElement {
             place,
             ticketType,
           }}
-          doneEvent={remainDays <= 0}
+          doneEventType={doneEventType()}
         />
       }
       eventContent={<TuiViewer content={desc} />}
-      ticket={<Ticket {...ticketType} doneEvent={remainDays <= 0} />}
+      ticket={<Ticket {...ticketType} doneEvent={!!doneEventType()} />}
       place={
         <Place
           {...{