style: migrate from legacy(#5)

package.json

@@ -7,14 +7,19 @@
     "@types/node": "12.11.6",
     "@types/react": "16.9.9",
     "@types/react-dom": "16.9.2",
+    "apexcharts": "^3.8.6",
     "axios": "^0.19.0",
+    "classnames": "^2.2.6",
     "dotenv": "^8.2.0",
     "react": "^16.11.0",
+    "react-apexcharts": "^1.3.3",
     "react-dom": "^16.11.0",
+    "react-minimal-pie-chart": "^5.0.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "simple-query-string": "^1.3.2",
     "styled-components": "^4.4.0",
+    "typeface-nanum-square-round-subset": "^1.0.1",
     "typescript": "3.6.4",
     "use-async-effect": "^2.2.1"
   },
@@ -48,6 +53,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
+    "@types/classnames": "^2.2.9",
     "@types/dotenv": "^6.1.1",
     "@types/react-router-dom": "^5.1.2",
     "@types/simple-query-string": "^1.3.0",
@@ -61,6 +67,7 @@
     "eslint-plugin-codeceptjs": "^1.1.0",
     "husky": ">=1",
     "lint-staged": ">=8",
+    "node-sass": "^4.13.0",
     "prettier": "^1.18.2",
     "puppeteer": "^1.20.0",
     "ts-node": "^8.4.1",

src/@types/models.ts

@@ -20,6 +20,8 @@ export type TypeUser = {
   semesters: TypeSemester[]
 }
 
+export type TypeUserOmitMailid = Omit<TypeUser, 'mailid'>
+
 export enum enumSemester {
   '1학기' = 'FIRST',
   '하기계절' = 'SUMMER',

src/index.tsx

@@ -2,5 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
+import './styles/theme.scss'
+import 'typeface-nanum-square-round-subset'
 
 ReactDOM.render(<App />, document.getElementById('root'))

src/routes/Fetch.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Fragment } from 'react'
 
 import { fetchAndSet, isCodeFF } from '../control'
-import { Input } from '../view/Input'
+import { Input } from '../views/Input'
 import { saveToken } from '../utils'
 import { Redirect } from 'react-router-dom'
 import { TypeForm } from '../@types/events'

src/routes/Login.tsx

@@ -1,6 +1,6 @@
 import React, { useState, Fragment } from 'react'
 
-import { Input } from '../view/Input'
+import { Input } from '../views/Input'
 import { submitID } from '../control'
 import { TypeForm } from '../@types/events'
 

src/routes/Main.tsx

@@ -3,38 +3,37 @@ import useAsyncEffect from 'use-async-effect'
 
 import { resData, isCodeFF } from '../control'
 import { Redirect, Link } from 'react-router-dom'
-import { TypeUser } from '../@types/models'
+import { TypeUserOmitMailid } from '../@types/models'
+
+import Wrapper from '../views/Wrapper'
 
 const App = () => {
   const [status, setStatus] = useState<number>()
-  const [userData, setUserData] = useState<TypeUser>()
+  const [userData, setUserData] = useState<TypeUserOmitMailid>()
 
   useAsyncEffect(async () => {
     const { status: resStatus, data } = await resData()
     setStatus(resStatus)
-    setUserData(data)
+    const { mailid, ...pick } = data
+    setUserData(pick)
   }, [])
 
   const isCode = isCodeFF(status)
 
   const Go2Login = () => (
     <div id="error">
-      {isCode(401) && <p>서버에서 사용자 정보를 찾을 수 없어요 :/</p>}
-      {isCode(500) && <p>500 오류 :/</p>}
+      {isCode(401) ? (
+        <p>서버에서 사용자 정보를 찾을 수 없어요 :/</p>
+      ) : (
+        <p>500 오류 :/</p>
+      )}
       <Link to="/login">다시 로그인하러 가기</Link>
     </div>
   )
-
-  if (isCode(undefined)) return <p id="loading">불러오는 중..</p>
   return (
     <Fragment>
-      {isCode(200) && (
-        <p>
-          <span id="result">캐싱 된 데이터:</span> {console.log(userData)}
-        </p>
-      )}
       {isCode(204) && <Redirect to="/fetch" />}
-      {(isCode(401) || isCode(500)) && <Go2Login />}
+      {isCode(401) || isCode(500) ? <Go2Login /> : <Wrapper {...userData} />}
     </Fragment>
   )
 }

src/styles/colors.ts

@@ -1 +1,24 @@
+export const primary = 'rgba(2, 126, 204, 0.85)'
+export const secondary = 'rgba(74, 144, 226, 0.85)'
 export const white = 'rgba(255, 255, 255, 0.85)'
+export const black = 'rgba(0, 0, 0, 0.85)'
+export const darken_normal = 'rgba(0, 0, 0, 0.65)'
+export const darken_medium = 'rgba(0, 0, 0, 0.25)'
+export const darken_lite = 'rgba(0, 0, 0, 0.09)'
+export const darken_ultra = 'rgba(0, 0, 0, 0.03)'
+export const background = '#f7f7f7'
+
+export const mainBoxShadow = 'rgba(21, 19, 19, 0.07)'
+
+export const valid = {
+  outside: 'rgba(186, 231, 255, 0.65)',
+  inside: 'rgba(64, 169, 255, 0.65)',
+}
+
+export const invaild = {
+  outside: 'rgba(244, 179, 187, 0.65)',
+  inside: 'rgba(229, 27, 52, 0.65)',
+}
+
+export const green = 'rgba(82, 196, 26, 0.85)'
+export const red = '#f5222d'

src/styles/index.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const FlexBox = styled.div`
+  display: flex;
+`

src/styles/reset.scss

@@ -0,0 +1,144 @@
+/* stylelint-disable */
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (static domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Custom */
+textarea,
+input,
+button {
+  border: none;
+  appearance: none;
+  outline: none;
+}

src/styles/theme.scss

@@ -0,0 +1,19 @@
+@import 'reset';
+
+body {
+  font-family: NanumSquareRound;
+}
+
+::-moz-placeholder {
+  opacity: 1;
+}
+
+body {
+  background-color: #f7f7f7;
+  display: flex;
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+}

src/styles/variables.ts

@@ -0,0 +1 @@
+export const fontSize = 16

src/varables.ts

@@ -0,0 +1,4 @@
+export const MAX_GPA = 4.3
+export const REQUIRE_CREADIT = 130
+export type TYPE_MAX_GPA = 4.3
+export type TYPE_REQUIRE_CREADIT = 130