Feat : 서비스 소개 컨테이너 구현

ssafy-mate · Feb 9, 2022 · 53f0b93 · 53f0b93
1 parent d232f90
commit 53f0b93
Show file tree

Hide file tree

Showing 31 changed files with 1,080 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,8 @@
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/sockjs-client": "^1.5.1",
+    "animate.css": "^4.1.1",
+    "animate.css-react": "^1.1.0",
     "axios": "^0.24.0",
     "chart.js": "^3.7.0",
     "connected-react-router": "^6.9.2",

diff --git a/public/images/home/iphone-frame.png b/public/images/home/iphone-frame.png
diff --git a/public/images/home/mobile-team-info-sample.png b/public/images/home/mobile-team-info-sample.png
diff --git a/public/images/home/mobile-team-list-sample.png b/public/images/home/mobile-team-list-sample.png
diff --git a/public/images/home/pc-team-info-sample.png b/public/images/home/pc-team-info-sample.png
diff --git a/public/images/home/pc-team-list-sample.png b/public/images/home/pc-team-list-sample.png
diff --git a/public/images/home/pc-user-info-sample.png b/public/images/home/pc-user-info-sample.png
diff --git a/public/images/home/pc-user-list-sample.png b/public/images/home/pc-user-list-sample.png
diff --git a/public/images/projects/sample-team_logo1.jpeg b/public/images/projects/sample-team_logo1.jpeg
diff --git a/public/images/projects/sample-team_logo1.png b/public/images/projects/sample-team_logo1.png
diff --git a/public/images/projects/sample-team_logo6.png b/public/images/projects/sample-team_logo6.png
diff --git a/public/images/projects/sample-team_logo7.png b/public/images/projects/sample-team_logo7.png
diff --git a/public/index.html b/public/index.html
@@ -44,6 +44,9 @@
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <script src="https://unpkg.com/splitting/dist/splitting.js"></script>
+    <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
+
     <title>싸피 메이트</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -77,7 +77,7 @@ const App: React.FC = () => {
           <Route exact path="/chatting/:roomId" component={ChattingPage} />
           <Route component={NotFoundPage} />
         </Switch>
-        {process.env.NODE_ENV === 'development' && <ReactQueryDevtools />}
+        {/* {process.env.NODE_ENV === 'development' && <ReactQueryDevtools />} */}
       </Router>
     </ErrorBoundary>
   );

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { useMediaQuery } from 'react-responsive';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { logout } from '../../redux/modules/auth';
+import { logout as logoutSagaStart } from '../../redux/modules/auth';
 
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
@@ -97,7 +97,7 @@ const Header: React.FC<HeaderProps> = ({ offFixed }) => {
   }, [accountBoxOpen, isMobile]);
 
   const handleClickLogoutButton = () => {
-    dispatch(logout());
+    dispatch(logoutSagaStart());
   };
 
   const handleExpandMenu = () => {

diff --git a/src/components/home/ImacBox.tsx b/src/components/home/ImacBox.tsx
@@ -0,0 +1,193 @@
+import styled from '@emotion/styled';
+
+interface ImacBoxProps {
+  imgUrl: string;
+  isVisible: boolean;
+}
+
+const ImacBox: React.FC<ImacBoxProps> = ({ imgUrl, isVisible }) => {
+  return (
+    <Box className={isVisible ? 'scroll' : ''}>
+      <div className="imac">
+        <div className="screen">
+          <div
+            className="viewport"
+            style={{
+              backgroundImage: `url(${imgUrl})`,
+            }}
+          ></div>
+        </div>
+        <div className="logo"></div>
+        <div className="leg"></div>
+        <div className="foot"></div>
+      </div>
+      <Text>* 상단의 모니터 화면에 마우스를 올려보세요.</Text>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  width: 100%;
+  max-width: 540px;
+  opacity: 0;
+
+  &.scroll {
+    animation: 0.6s ease-in-out 0.6s 1 normal forwards running fadeinBottom;
+  }
+
+  @keyframes fadeinBottom {
+    from {
+      transform: translate3d(0, 50px, 0);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 991px) {
+    margin: 0 auto;
+  }
+  @media (max-width: 575px) {
+    max-width: 420px;
+  }
+
+  .screen {
+    position: relative;
+    width: 100%;
+    background: #000;
+    border-radius: 3% 3% 0 0 / 5% 5% 0 0;
+  }
+
+  .screen:before {
+    content: '';
+    display: block;
+    padding-top: 60%;
+  }
+
+  .logo {
+    position: relative;
+    width: 100%;
+    background: linear-gradient(90deg, #a6a6aa, #e1e2e4);
+    border-radius: 0 0 3% 3%/ 0 0 33.33% 33.33%;
+  }
+
+  .logo:before {
+    content: '';
+    display: block;
+    padding-top: 9%;
+  }
+
+  .logo:after {
+    content: '';
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    width: 4.8%;
+    margin-left: -2.4%;
+    padding-top: 4.8%;
+    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0nMS4xJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgc3R5bGU9J2hlaWdodDoyNHB4O3dpZHRoOjI0cHg7Jz4NCgk8cGF0aCBkPSdNNzcuMjk1IDUzLjEzNGMtMC4xMjYtMTIuNjY0IDEwLjMyOC0xOC43MzggMTAuNzk1LTE5LjA0MC01Ljg3NC04LjU5Ni0xNS4wMjQtOS43NzMtMTguMjg1LTkuOTA5LTcuNzg3LTAuNzg4LTE1LjE5NSA0LjU4NS0xOS4xNDcgNC41ODUtMy45NDIgMC0xMC4wNDEtNC40NjgtMTYuNDk5LTQuMzUxLTguNDg4IDAuMTI2LTE2LjMxNCA0LjkzNS0yMC42ODUgMTIuNTM3LTguODE5IDE1LjMwMy0yLjI1OCAzNy45NzMgNi4zMzcgNTAuMzgzIDQuMiA2LjA3NSA5LjIwOCAxMi44OTggMTUuNzg0IDEyLjY1NCA2LjMzMi0wLjI1MyA4LjcyNy00LjA5NyAxNi4zODItNC4wOTcgNy42NTYgMCA5LjgwNyA0LjA5NyAxNi41MDkgMy45NzIgNi44MTQtMC4xMjcgMTEuMTMxLTYuMTkxIDE1LjMwMi0xMi4yODUgNC44MjMtNy4wNDggNi44MDktMTMuODcxIDYuOTI2LTE0LjIyMS0wLjE1MS0wLjA2OS0xMy4yODctNS4xMDEtMTMuNDE5LTIwLjIyOHpNNjQuNzAzIDE1Ljk2OWMzLjQ5LTQuMjM0IDUuODQ2LTEwLjEwOSA1LjIwMy0xNS45NjktNS4wMjcgMC4yMDUtMTEuMTIxIDMuMzQ5LTE0LjcyOCA3LjU3My0zLjIzNyAzLjc0OC02LjA2OSA5LjcyOS01LjMxIDE1LjQ3MiA1LjYxMiAwLjQzOCAxMS4zNDEtMi44NTIgMTQuODM0LTcuMDc3eicgLz4NCjwvc3ZnPg0KDQo=');
+  }
+
+  .viewport {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 4%;
+    background: #333;
+  }
+
+  .leg {
+    position: relative;
+    width: 20%;
+    margin: 0 auto;
+  }
+
+  .leg:before {
+    content: '';
+    display: block;
+    padding-top: 46%;
+    background: linear-gradient(
+      #7a7b80,
+      #abacaf 26%,
+      #d0d1d2 57%,
+      #f2f2f2 76%,
+      #e4e4e4 84%,
+      #787878
+    );
+  }
+
+  .foot {
+    position: relative;
+    width: 20%;
+    margin: 0 auto;
+    perspective: 180px;
+  }
+
+  .foot:before {
+    content: '';
+    display: block;
+    padding-top: 40%;
+    transform: rotateX(68deg);
+    transform-origin: center top;
+    background: linear-gradient(
+      #7b7b7b,
+      #7f7f7f 39%,
+      #a6a6a6 53%,
+      #ccc 67%,
+      #aaa 86%,
+      #eee 88%,
+      #fff 95%,
+      #a9a9a9 95%,
+      #000
+    );
+    border-radius: 0 0 10% 10% / 0 0 30% 30%;
+    box-shadow: 0 -10px 5px rgba(255, 255, 255, 0.1) inset,
+      0 -17px 6px rgba(0, 0, 0, 0.1) inset;
+  }
+
+  .imac .viewport {
+    overflow: hidden;
+    background-position: 0 0;
+    background-size: 100% auto;
+    transition: background-position 3s ease;
+    cursor: pointer;
+  }
+
+  .imac:hover .viewport {
+    background-position: 0 100%;
+  }
+
+  .imac .viewport:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: radial-gradient(
+      circle at right bottom,
+      transparent 75%,
+      rgba(255, 255, 255, 0.05) 75%,
+      transparent
+    );
+  }
+`;
+
+const Text = styled.span`
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+  font-size: 15px;
+  color: #98a8b9;
+
+  @media (max-width: 575px) {
+    margin-top: 8px;
+    font-size: 14px;
+  }
+`;
+
+export default ImacBox;
diff --git a/src/components/home/IntroContainer.tsx b/src/components/home/IntroContainer.tsx
@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+
+import IntroSection from './IntroSection';
+import MobileServiceIntroSection from './MobileServiceIntroSection';
+
+const IntroContainer = () => {
+  return (
+    <Container id="intro-container">
+      {INTRODUCTION_LIST_DATA.map((introduction) => (
+        <IntroSection
+          key={introduction.id}
+          headText={introduction.headText}
+          subHeadText={introduction.subHeadText}
+          descriptionText={introduction.descriptionText}
+          imgUrl={introduction.imgUrl}
+          reversed={introduction.id % 2 === 0 ? true : false}
+        />
+      ))}
+      <MobileServiceIntroSection />
+    </Container>
+  );
+};
+
+const INTRODUCTION_LIST_DATA = [
+  {
+    id: 1,
+    headText: '팀 공고',
+    subHeadText: '나와 맞는 팀을 빠르게 검색',
+    descriptionText:
+      '여러 팀들의 정보를 비교하고 검색 폼을 통해 내가 원하는 프로젝트 트랙, 직무, 기술 스택 등을 검색하여 내게 꼭 맞는 팀을 찾아보세요.',
+    imgUrl: '/images/home/pc-team-list-sample.png',
+  },
+  {
+    id: 2,
+    headText: '팀 상세 정보',
+    subHeadText: '팀 정보를 한눈에',
+    descriptionText:
+      '팀이 추구하는 개발 목표와 어떤 교육생들이 팀에 합류되어 있는지 등과 같은 팀의 더 자세한 정보를 확인하고 내게 맞다면 팀에 지원해보세요.',
+    imgUrl: '/images/home/pc-team-info-sample.png',
+  },
+  {
+    id: 3,
+    headText: '교육생 공고',
+    subHeadText: '팀에 필요한 역량을 가진 교육생을 빠르게 검색',
+    descriptionText:
+      '여러 교육생들의 정보를 한눈에 확인하고 검색 폼을 통해 나의 팀에 필요한 직무, 기술 역량 등을 갖춘 교육생을 찾아보세요.',
+    imgUrl: '/images/home/pc-user-list-sample.png',
+  },
+  {
+    id: 4,
+    headText: '교육생 상세 정보',
+    subHeadText: '교육생 정보를 한눈에',
+    descriptionText:
+      '교육생이 추구하는 개발 목표와 기술 스택 숙련도 그리고 깃 허브, 기술 블로그 활동 기록들을 확인해 보며 나의 팀에 필요한 교육생들을 영입해보세요.',
+    imgUrl: '/images/home/pc-user-info-sample.png',
+  },
+];
+
+const Container = styled.div``;
+
+export default IntroContainer;