CS492-Team-1 · SeonghakIm · Nov 21, 2021 · Nov 21, 2021 · Nov 22, 2021 · Nov 23, 2021
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/"
+  status = 200
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.4.17",
+    "@inlet/react-pixi": "^6.6.5",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -12,15 +13,19 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "graphql": "15.5.2",
+    "pixi-viewport": "^4.34.1",
+    "pixi.js": "^6.2.0",
     "react": "^17.0.2",
+    "react-datepicker": "^4.3.0",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.19.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.3",
     "styled-normalize": "^8.0.7",
+    "subscriptions-transport-ws": "^0.11.0",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1",
-    "subscriptions-transport-ws": "^0.11.0"
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -53,6 +58,7 @@
     "@graphql-codegen/typescript-apollo-client-helpers": "^1.1.9",
     "@graphql-codegen/typescript-operations": "^1.18.3",
     "@graphql-codegen/typescript-react-apollo": "^2.2.8",
+    "@types/react-datepicker": "^4.3.2",
     "@types/react-router-dom": "^5.3.2",
     "@types/styled-components": "^5.1.15"
   }

diff --git a/public/index.html b/public/index.html
@@ -22,6 +22,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
+    <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css' rel='stylesheet' type='text/css'>
     <title>WeTicket</title>
   </head>
   <body>

diff --git a/src/assets/icons/ticket.png b/src/assets/icons/ticket.png
diff --git a/src/assets/styles/colors.ts b/src/assets/styles/colors.ts
@@ -2,6 +2,7 @@ export const colors = {
   primary: '#0a3d62',
   primary_light: '#60a3bc',
   black: '#000000',
+  gray: '#F0F0F0',
   white: '#ffffff',
   error: '#ea2027',
   success: '#2ecc71',

diff --git a/src/assets/styles/global-styles.ts b/src/assets/styles/global-styles.ts
@@ -1,4 +1,3 @@
-
 import { createGlobalStyle } from 'styled-components';
 import { normalize } from 'styled-normalize';
 
@@ -50,9 +49,7 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   * {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: 'Spoqa Han Sans Neo', 'Spoqa Han Sans JP', sans-serif !important;
   }
-`;
 
-
-
+`;
diff --git a/src/components/Loading.ts b/src/components/Loading.ts
@@ -0,0 +1,26 @@
+import styled, { keyframes } from 'styled-components';
+
+import { colors } from '../assets/styles/colors';
+
+const spinner = keyframes`
+0% {transform: rotate(0deg); }
+100% {transform: rotate(360deg);}
+`;
+
+export const Spinner = styled.div`
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 48px;
+  height: 48px;
+  margin-top: -24px;
+  margin-left: -24px;
+  border-radius: 50%;
+  border: 6px solid transparent;
+  border-top-color: ${colors.primary};
+  border-bottom-color: ${colors.primary_light};
+  border-right-color: ${colors.primary_light};
+  border-left-color: ${colors.primary_light};
+  animation: ${spinner} 0.8s ease infinite;
+`;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './Loading';
diff --git a/src/pages/Login/LoginContainer.tsx b/src/pages/Login/LoginContainer.tsx
@@ -38,6 +38,7 @@ export const LoginContainer: React.FC = () => {
    * @param username 아이디
    * @param password 패스워드
    */
+
   const login = async (username: string, password: string) => {
     try {
       const { data } = await loginMutation({
@@ -67,7 +68,7 @@ export const LoginContainer: React.FC = () => {
    * @param username 아이디
    * @param password 패스워드
    */
-  const register = async (username: string, password: string) => {
+  const register = async (username: string, password: string,  togglePage: ()=>void) => {
     try {
       const { data } = await registerMutation({
         variables: {
@@ -79,7 +80,10 @@ export const LoginContainer: React.FC = () => {
       });
 
       if (data?.register.ok) {
-        // TODO : 회원가입 성공시 핸들링
+
+        togglePage();
+        window.alert("회원가입에 성공했습니다!");
+
       } else if (data?.register.error) {
         window.alert(data.register.error);
       }
@@ -94,5 +98,10 @@ export const LoginContainer: React.FC = () => {
   };
 
   //TODO : prop으로 필요한 데이터 및 메소드 전달
-  return <LoginPresenter login={_tempLogin} />;
+  return <LoginPresenter 
+            login={login} 
+            loginLoading= {loginLoading} 
+            register = {register} 
+            registerLoading = {registerLoading}
+          />;
 };