rank-page

src/components/common/SalesRankingCard.scss

@@ -63,7 +63,6 @@
             line-height: 20px;
             color: #888;
             cursor: pointer;
-            margin-left: 20px;
         }
     }
 }

src/constants/URLInfo.ts

@@ -19,7 +19,7 @@ const URL = {
   GUIDE_DETAIL: '/guide/:id',
   LOGIN_CALLBACK: '/callback/:type',
   ERROR: '/error',
-  RANKING: '',
+  RANKING: '/ranking',
 };
 
 const SEARCH_PARAM = {

src/pages/Ranking.scss

@@ -0,0 +1,20 @@
+@import "/assets/css/_lib";
+
+.ranking {
+  padding: 72px 16px 390px;
+  min-height: 100%;
+  margin: 0 auto -327px;
+  box-sizing: border-box;
+  @include pc {
+    width: 696px;
+    padding: 80px 0 290px;
+    margin-bottom: -210px;
+  }
+  .title {
+    display: block;
+    margin-top: 30px;
+    font-size: 24px;
+    line-height: 25px;
+    font-weight: normal;
+  }
+}

src/pages/Ranking.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import classNames from 'classnames/bind';
+import styles from './Ranking.scss';
+
+const cx = classNames.bind(styles);
+
+export interface IRankingProps {
+}
+
+export default function Ranking (props: IRankingProps) {
+  return (
+    <div className={cx('ranking')}>
+        <div className={cx('title')}>랭킹</div>
+        
+    </div>
+  );
+}

src/routes.ts

@@ -80,4 +80,10 @@ export const routes = [
     exact: true,
     component: lazy(() => import('@src/pages/Error')),
   },
+  {
+    path: URLInfo.RANKING,
+    title: '랭킹',
+    exact: true,
+    component: lazy(() => import('@src/pages/Ranking')),
+  }
 ];