Team-SADA · dduicoder · Jul 15, 2024 · Jul 16, 2024 · Jul 16, 2024 · Jul 18, 2024
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/sada_ui.iml b/.idea/sada_ui.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,19 @@
     "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
+    "hangul-js": "^0.2.6",
+    "primereact": "^10.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.24.1",
     "react-router-dom": "^6.24.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "react-unity-webgl": "^9.5.2",
     "sass": "^1.77.6",
     "scss": "^0.2.4",
-    "typescript": "^4.9.5",
+    "typescript": "^3.2.1",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -43,5 +48,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "html-webpack-plugin": "^5.6.0",
+    "node-polyfill-webpack-plugin": "^4.0.0",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   }
 }
diff --git a/public/Earth.jpeg b/public/Earth.jpeg
diff --git a/public/Earth_D.png b/public/Earth_D.png
diff --git a/public/Moon.png b/public/Moon.png
diff --git a/public/Moon_D.png b/public/Moon_D.png
diff --git a/public/Sun.png b/public/Sun.png
diff --git a/public/Sun_D.png b/public/Sun_D.png
diff --git a/public/dorm_unity_build/HaksulUnityBuild.data b/public/dorm_unity_build/HaksulUnityBuild.data
diff --git a/public/dorm_unity_build/HaksulUnityBuild.framework.js b/public/dorm_unity_build/HaksulUnityBuild.framework.js
diff --git a/public/dorm_unity_build/HaksulUnityBuild.loader.js b/public/dorm_unity_build/HaksulUnityBuild.loader.js
diff --git a/public/dorm_unity_build/HaksulUnityBuild.wasm b/public/dorm_unity_build/HaksulUnityBuild.wasm
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       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`.
     -->
-    <title>React App</title>
+    <title>끔찍한 UI 챌린지</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/UI/Backdrop.module.scss b/src/components/UI/Backdrop.module.scss
@@ -0,0 +1,33 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 7;
+  backdrop-filter: blur(0.5rem);
+  background-color: rgba(0, 0, 0, 0.25);
+
+  &.open {
+    animation: fade-in 0.25s ease-in-out forwards;
+  }
+
+  &.close {
+    animation: fade-out 0.25s ease-in-out forwards;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/src/components/UI/Backdrop.tsx b/src/components/UI/Backdrop.tsx
@@ -0,0 +1,35 @@
+import { FC, useRef } from "react";
+
+import { CSSTransition } from "react-transition-group";
+import Portal from "./Portal";
+
+import classes from "./Backdrop.module.scss";
+
+type PropsType = {
+  show: boolean;
+  close: () => void;
+};
+
+const Backdrop: FC<PropsType> = ({ show, close }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <Portal query=".overlays">
+      <CSSTransition
+        nodeRef={ref}
+        mountOnEnter
+        unmountOnExit
+        in={show}
+        timeout={250}
+        classNames={{
+          enterActive: classes.open,
+          exitActive: classes.close,
+        }}
+      >
+        <div ref={ref} className={classes.backdrop} onClick={close} />
+      </CSSTransition>
+    </Portal>
+  );
+};
+
+export default Backdrop;
diff --git a/src/components/context/context.ts b/src/components/context/context.ts
@@ -5,13 +5,15 @@ export type GlobalContent = {
   setStudentNumber: (c: string) => void;
   activateTime: () => void;
   stopTime: () => void;
+  goBack: () => void;
 };
 
 const GlobalContext = createContext<GlobalContent>({
   studentNumber: "",
   setStudentNumber: () => {},
   activateTime: () => {},
   stopTime: () => {},
+  goBack: () => {},
 });
 
 export default GlobalContext;
diff --git a/src/components/first_page_modal.module.scss b/src/components/first_page_modal.module.scss
@@ -0,0 +1,82 @@
+.modal {
+  padding: 1rem;
+  border-radius: 1rem;
+  position: fixed;
+  top: 25vh;
+  left: 50%;
+  // height: 50vh;
+  width: min(100%, 45rem);
+  transform: translateX(-50%);
+  z-index: 10;
+  overflow-y: scroll;
+  background-color: white;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .control {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h1 {
+      font-size: 1.5rem;
+      margin: 0.5rem 0;
+    }
+
+    span {
+      cursor: pointer;
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+  }
+
+  .main {
+    .center {
+      padding: 2rem 0;
+      display: flex;
+      justify-content: center;
+      span {
+        font-size: 2rem;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .check {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &.open {
+    animation: pop-in 0.25s ease-in-out forwards;
+  }
+
+  &.close {
+    animation: pop-out 0.25s ease-in-out forwards;
+  }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    top: 15vh;
+  }
+  to {
+    opacity: 1;
+    top: 25vh;
+  }
+}
+
+@keyframes pop-out {
+  from {
+    opacity: 1;
+    top: 25vh;
+  }
+  to {
+    opacity: 0;
+    top: 15vh;
+  }
+}
diff --git a/src/components/first_page_modal.tsx b/src/components/first_page_modal.tsx
@@ -0,0 +1,87 @@
+import { useContext, useEffect, useRef } from "react";
+import { useNotification } from "./notification/NotificationProvider";
+
+import { CSSTransition } from "react-transition-group";
+import Backdrop from "./UI/Backdrop";
+import Portal from "./UI/Portal";
+
+import classes from "./first_page_modal.module.scss";
+import { useNavigate } from "react-router";
+import GlobalContext from "./context/context";
+
+type PropsType = {
+  show: boolean;
+  close: () => void;
+};
+
+const FirstPageModal = ({ show, close }: PropsType) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { activateTime } = useContext(GlobalContext);
+
+  const navigate = useNavigate();
+  const notice = useNotification();
+
+  const nextPageHandler = (type: "STUDENT" | "NOT_STUDENT") => {
+    notice({ type: "SUCCESS", message: "반갑습니다!" });
+    activateTime();
+    navigate(type === "STUDENT" ? "student-number" : "non-student/name");
+  };
+
+  useEffect(() => {
+    window.onkeydown = (event) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+
+    return () => {
+      window.onkeydown = null;
+    };
+  }, [close]);
+
+  return (
+    <>
+      <Backdrop show={show} close={() => close()} />
+      <Portal query=".overlays">
+        <CSSTransition
+          nodeRef={ref}
+          mountOnEnter
+          unmountOnExit
+          in={show}
+          timeout={250}
+          classNames={{
+            enterActive: classes.open,
+            exitActive: classes.close,
+          }}
+        >
+          <div ref={ref} className={classes.modal}>
+            <div className={classes.control}>
+              <h1>외부인 확인</h1>
+              <span onClick={() => close()}>X</span>
+            </div>
+            <div className={classes.main}>
+              <p>시작하기 전에! 당신은 경기북 학생인가요?</p>
+            </div>
+            <div className={classes.check}>
+              <button
+                className="btn"
+                onClick={() => nextPageHandler("NOT_STUDENT")}
+              >
+                아니오
+              </button>
+              <button
+                className="btn-flat"
+                onClick={() => nextPageHandler("STUDENT")}
+              >
+                예
+              </button>
+            </div>
+          </div>
+        </CSSTransition>
+      </Portal>
+    </>
+  );
+};
+
+export default FirstPageModal;
diff --git a/src/components/notification/NotificationProvider.tsx b/src/components/notification/NotificationProvider.tsx
@@ -5,12 +5,13 @@ import {
   useContext,
   useReducer,
   Dispatch,
-  useState,
 } from "react";
 
 import Portal from "../UI/Portal";
 import Notification from "./Notification";
 
+import { v4 } from "uuid";
+
 import classes from "./NotificationProvider.module.scss";
 
 type NoticeType = {
@@ -79,7 +80,7 @@ export const useNotification = () => {
     dispatch({
       type: "ADD_NOTIFICATION",
       payload: {
-        id: crypto.randomUUID(),
+        id: v4(),
         ...props,
       },
     });