Merge pull request #103 from PoolC/pre-release

신입 지원 배너 추가 및 travis.yml 변경

.travis.yml

@@ -20,7 +20,10 @@ script:
 
 after_success:
   - docker login -u "$DOCKER_USERNAME" -p "$DOCKER_PASSWORD"
-  - if [ -n "${TRAVIS_TAG}"  ]; then
+  - if [ "${TRAVIS_BRANCH}" == "pre-release" ]; then
+    docker build -t poolchm/haribo:pre-release .;
+    docker push poolchm/haribo:pre-release;
+    elif [ -n "${TRAVIS_TAG}"  ]; then
     docker build -t poolchm/haribo:${TRAVIS_TAG} .;
     docker push poolchm/haribo:${TRAVIS_TAG};
     else

src/components/home/ApplyBanner/ApplyBanner.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MENU } from '../../../constants/menus';
+import colors from '../../../lib/styles/colors';
+import { withRouter } from 'react-router-dom';
+
+const BannerBlock = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 95vw;
+  max-width: 1366px;
+  margin: 0px 0 10px 0;
+`;
+
+export const Banner = styled.div`
+  cursor: pointer;
+  display: flex;
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 600;
+  justify-content: center;
+  align-items: center;
+  width: 95%;
+  border-radius: 10px;
+  box-shadow: ${colors.gray[1]};
+  height: 60px;
+  background-color: ${colors.mint[2]};
+  transition: 0.3s;
+  &:hover {
+    transition: 0.3s;
+    opacity: 0.75;
+    //background-color: ${colors.mint[1]};
+  }
+`;
+
+const ApplyBanner = ({ history }) => {
+  const redirectToApplyPage = () => {
+    history.push(`/${MENU.APPLY}`);
+  };
+  return (
+    <BannerBlock>
+      {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
+      <Banner onClick={redirectToApplyPage}>
+        PoolC 신입회원 지원하러 가기 ✨
+      </Banner>
+    </BannerBlock>
+  );
+};
+
+export default withRouter(ApplyBanner);

src/containers/home/ApplyBannerContainer/ApplyBannerContainer.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import * as infoAPI from '../../../lib/api/info';
+import Spinner from '../../../components/common/Spinner/Spinner';
+import ApplyBanner from '../../../components/home/ApplyBanner/ApplyBanner';
+import { useSelector } from 'react-redux';
+
+const ApplyBannerContainer = () => {
+  const [loading, setLoading] = useState(true);
+  const [isSubscriptionPeriod, setIsSubscriptionPeriod] = useState(null);
+  const [applyUri, setApplyUri] = useState(null);
+  const member = useSelector((state) => state.auth);
+  const isLogin = member.status.isLogin;
+  const role = member.user.role;
+
+  useEffect(() => {
+    infoAPI.getPoolCInfo().then((res) => {
+      if (res.status === 200) {
+        setIsSubscriptionPeriod(res.data.isSubscriptionPeriod);
+        setApplyUri(res.data.applyUri);
+        setLoading(false);
+      }
+    });
+  });
+
+  if (
+    isSubscriptionPeriod == null ||
+    (isSubscriptionPeriod === true && applyUri == null) ||
+    isSubscriptionPeriod === false ||
+    (isLogin && role !== 'UNACCEPTED')
+  )
+    return null;
+
+  return (
+    <>
+      {loading && <Spinner />}
+      {!loading && <ApplyBanner />}
+    </>
+  );
+};
+
+export default ApplyBannerContainer;

src/modules/auth.js

@@ -136,6 +136,7 @@ const initialState = {
     name: '',
     password: '',
     isAdmin: false,
+    role: null,
   },
 };
 
@@ -177,6 +178,7 @@ const auth = handleActions(
           memberId: data.loginID,
           isAdmin: data.isAdmin,
           name: data.name,
+          role: data.role,
         },
       };
     },
@@ -198,6 +200,7 @@ const auth = handleActions(
         password: '',
         name: '',
         isAdmin: false,
+        role: null,
       },
     }),
   },

src/pages/home/HomePage.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import ApplyBannerContainer from '../../containers/home/ApplyBannerContainer/ApplyBannerContainer';
 import CarouselContainer from '../../containers/home/CarouselContainer/CarouselContainer';
 import RecentNoticeContainer from '../../containers/home/RecentNoticeContainer/RecentNoticeContainer';
 import RecentProjectContainer from '../../containers/home/RecentProjectContainer/RecentProjectContainer';
@@ -15,6 +16,7 @@ const HomePage = () => {
   return (
     <HomePageBlock>
       <CarouselContainer />
+      <ApplyBannerContainer />
       <RecentNoticeContainer />
       <RecentProjectContainer />
     </HomePageBlock>