Add success page (for email unsubscription)

Author: velopert

asset-license.md

@@ -8,4 +8,4 @@ Icons made by [Smashicons](https://www.flaticon.com/authors/smashicons) from [ww
 
 Heart Icon: https://iconmonstr.com/favorite-8-svg/
 Clip Icon: https://iconmonstr.com/paperclip-2-svg/
-
+Check Icon: https://iconmonstr.com/check-mark-1-svg/

src/App.tsx

@@ -21,10 +21,7 @@ const loadableConfig = {
 const VelogPage = loadable(() => import('./pages/velog/VelogPage'), {
   fallback: <VelogPageFallback />,
 });
-const MainPage = loadable(
-  () => import('./pages/main/MainPage'),
-  loadableConfig,
-);
+
 const EmailLoginPage = loadable(
   () => import('./pages/EmailLoginPage'),
   loadableConfig,
@@ -41,6 +38,7 @@ const SettingPage = loadable(
   () => import('./pages/SettingPage'),
   loadableConfig,
 );
+const SuccessPage = loadable(() => import('./pages/SuccessPage'));
 
 interface AppProps {}
 
@@ -74,6 +72,7 @@ const App: React.FC<AppProps> = props => {
           <Route path="/tags" component={TagsPage} />
           <Route path={['/policy/:type?']} component={PolicyPage} />
           <Route path="/setting" component={SettingPage} />
+          <Route path="/success" component={SuccessPage} />
           <Route component={NotFoundPage} />
         </Switch>
       </ErrorBoundary>

src/pages/SuccessPage.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CheckIcon } from '../static/svg';
+import palette from '../lib/styles/palette';
+import Button from '../components/common/Button';
+import { RouteComponentProps } from 'react-router-dom';
+import media from '../lib/styles/media';
+import qs from 'qs';
+
+export type SuccessPageProps = {} & RouteComponentProps;
+
+const messages = {
+  unsubscribe_email:
+    '이메일 구독이 해지되었습니다.\n설정에서 다시 활성화 할 수 있습니다.',
+};
+
+type MessageTypes = keyof typeof messages;
+
+function SuccessPage({ history, location }: SuccessPageProps) {
+  const { type } = qs.parse(location.search, {
+    ignoreQueryPrefix: true,
+  }) as { type?: MessageTypes };
+
+  const message = type ? messages[type] : '성공!';
+
+  return (
+    <Block>
+      <CheckIcon />
+      <div className="message">{message}</div>
+      <div className="button-wrapper">
+        <Button onClick={() => history.push('/')}>홈으로</Button>
+      </div>
+    </Block>
+  );
+}
+
+const Block = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  svg {
+    fill: ${palette.teal5};
+    width: 5rem;
+    height: 5rem;
+  }
+  .message {
+    margin-top: 2rem;
+    font-size: 1.5rem;
+    white-space: pre;
+    text-align: center;
+    line-height: 1.5;
+  }
+  .button-wrapper {
+    color: ${palette.gray8};
+    margin-top: 1.5rem;
+  }
+
+  ${media.medium} {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    .message {
+      font-size: 1rem;
+    }
+  }
+`;
+
+export default SuccessPage;

src/static/svg/icon-check.svg

@@ -19,3 +19,4 @@ export { ReactComponent as ShareIcon2 } from './icon-share-2.svg';
 export { ReactComponent as SearchIcon } from './icon-search.svg'; // iconmonstr-magnifier-3
 export { ReactComponent as SearchIcon2 } from './icon-search-2.svg';
 export { ReactComponent as VelogIcon } from './velog-icon.svg';
+export { ReactComponent as CheckIcon } from './icon-check.svg';