If using custom web server, verify that web server is sending .br files with HTTP Response Header "Content-Encoding: br". Brotli compression may not be supported in Firefox over HTTP connections. '+r+' See https://bugzilla.mozilla.org/show_bug.cgi?id=1670675 for more information.':"Unable to parse "+l.frameworkUrl+'!
If using custom web server, verify that web server is sending .br files with HTTP Response Header "Content-Encoding: br". Brotli compression may not be supported over HTTP connections. Migrate your server to use HTTPS.'),void s(n,"error"))}s("Unable to parse "+l.frameworkUrl+"! The file is corrupt, or compression was misconfigured? (check Content-Encoding HTTP Response Header on web server)","error")}var o=unityFramework;unityFramework=null,i.onload=null,a(o)},i.onerror=function(e){s("Unable to load file "+l.frameworkUrl+"! Check that the file exists on the remote server. (also check browser Console and Devtools Network tab to debug)","error")},document.body.appendChild(i),l.deinitializers.push(function(){document.body.removeChild(i)})}).then(function(e){e(l)});P(n="dataUrl"),e=l.cacheControl(l[n]),t=l.companyName&&l.productName?l.cachedFetch:l.fetchWithProgress,r=l[n],r=/file:\/\//.exec(r)?"same-origin":void 0;var n,e,t,r,o=t(l[n],{method:"GET",companyName:l.companyName,productName:l.productName,productVersion:l.productVersion,control:e,mode:r,onProgress:function(e){P(n,e)}}).then(function(e){return e.parsedBody}).catch(function(e){var t="Failed to download file "+l[n];"file:"==location.protocol?s(t+". Loading web pages via a file:// URL without a web server is not supported by this browser. Please use a local development web server to host Unity content, or use the Unity Build and Run option.","error"):console.error(t)});l.preRun.push(function(){l.addRunDependency("dataUrl"),o.then(function(e){var t=new DataView(e.buffer,e.byteOffset,e.byteLength),n=0,r="UnityWebData1.0\0";if(!String.fromCharCode.apply(null,e.subarray(n,n+r.length))==r)throw"unknown data format";var o=t.getUint32(n+=r.length,!0);for(n+=4;n
+
+
+
+ 외부인 확인
+ close()}>X +
+
+ 시작하기 전에! 당신은 경기북 학생인가요?
+
+
+
+
+
+
+
+
+ 전화번호 확인
+ close()}>X +
+
+
+ {phoneNumber}
+
+ + 이게 당신의 번호가 맞습니까? 상품은 전화번호를 바탕으로 + 전달되오니 신중하게 입력해주세요~ +
+
+
+
+
+
{time !== null && (
@@ -60,7 +90,13 @@ export default function App() {
)}
{/*
@@ -68,11 +104,23 @@ export default function App() {
+
diff --git a/src/pages/birthday_page.scss b/src/pages/birthday_page.scss
new file mode 100644
index 0000000..a4473d1
--- /dev/null
+++ b/src/pages/birthday_page.scss
@@ -0,0 +1,206 @@
+HTML {
+ --rotate: 0deg;
+ --rotate2: 0deg;
+ --rotate3: 0deg;
+}
+
+.play {
+ position: absolute;
+ background-color: white;
+ right: 1rem;
+ bottom: 1rem;
+ padding: 1rem;
+ border-radius: 1rem;
+ cursor: pointer;
+}
+
+.overlay {
+ text-align: center;
+ position: absolute;
+ top: 2rem;
+ left: 50vw;
+ font-size: 1.25rem;
+ transform: translateX(-50%);
+ color: white;
+}
+
+.wrapper {
+ width: 100vw;
+ height: 100vh;
+ background-color: black;
+}
+
+.layout {
+ // background-color: black;
+ width: 100%;
+ height: 110%;
+ position: fixed;
+ left: 0;
+ top: -10%;
+ border: 3px solid black;
+}
+
+.Day_Button {
+ border-top: 5px solid white;
+ border-bottom: 5px solid white;
+ width: 80px;
+ height: 80px;
+ color: white;
+ background-color: black;
+ font-size: 40px;
+ font-weight: bold;
+ position: fixed;
+ left: 91%;
+ top: 80%;
+ text-align: center;
+ line-height: 80px;
+ border-radius: 10%;
+}
+
+.Day_Text {
+ font-size: 16px;
+ position: fixed;
+ top: 79.5%;
+ left: 92.5%;
+ color: white;
+}
+.Month_Button {
+ border-top: 5px solid white;
+ border-bottom: 5px solid white;
+ width: 80px;
+ height: 80px;
+ color: white;
+ background-color: black;
+ font-size: 40px;
+ font-weight: bold;
+ position: fixed;
+ left: 81.55%;
+ top: 80%;
+ text-align: center;
+ line-height: 80px;
+ border-radius: 10%;
+}
+
+.Month_Text {
+ font-size: 16px;
+ position: fixed;
+ top: 79.5%;
+ left: 82.5%;
+ color: white;
+}
+
+.Year_Button {
+ border-top: 5px solid white;
+ border-bottom: 5px solid white;
+ width: 160px;
+ height: 80px;
+ color: white;
+ background-color: black;
+ font-size: 40px;
+ font-weight: bold;
+ position: fixed;
+ left: 66%;
+ top: 80%;
+ text-align: center;
+ line-height: 80px;
+ border-radius: 10%;
+}
+
+.Year_Text {
+ font-size: 16px;
+ position: fixed;
+ top: 79.5%;
+ left: 70%;
+ color: white;
+}
+
+/*Month*/
+.ModeChanger {
+ color: white;
+ background-color: black;
+ white-space: pre-wrap;
+ text-align: center;
+ position: fixed;
+ left: calc(100% - 220px);
+ top: 50%;
+ font-size: 16px;
+ width: 200px;
+ height: 75px;
+ line-height: 25px;
+ border: 3px solid white;
+}
+
+.Moon {
+ rotate: var(--rotate2);
+ position: fixed;
+ left: calc(50% - 300px);
+ top: calc(50% - 500px);
+}
+
+.Sun {
+ rotate: var(--rotate3);
+ position: fixed;
+ left: -2400px;
+ top: -1000px;
+}
+
+/*Day*/
+
+.Earth {
+ rotate: var(--rotate);
+ position: fixed;
+ left: calc(50% + 50px);
+ top: calc(50% - 150px);
+ transform: scale(60%, 60%);
+}
+
+.circle_box {
+ /*background-color: lightgray;*/
+ width: 180px;
+ height: 180px;
+ border-radius: 150px;
+ position: fixed;
+ left: calc(50% + 110px);
+ top: calc(50% - 105px);
+ opacity: 0.3;
+}
+
+.circle_box2 {
+ /*background-color: red;*/
+ width: 1000px;
+ height: 1000px;
+ border-radius: 500px;
+ position: fixed;
+ left: calc(50% - 300px);
+ top: calc(50% - 510px);
+ opacity: 0.3;
+}
+
+.circle_box3 {
+ /*background-color: green;*/
+ width: 3000px;
+ height: 3000px;
+ border-radius: 1500px;
+ position: fixed;
+ left: -2650px;
+ top: -1000px;
+ opacity: 0.3;
+}
+
+.Spin_Power_Text {
+ color: white;
+ position: fixed;
+ top: 15%;
+ white-space: pre-wrap;
+}
+
+.UnClick_Circle {
+ /*background-color: blue;*/
+ width: 700px;
+ height: 700px;
+ border-radius: 50%;
+ position: fixed;
+ left: calc(50% - 150px);
+ top: calc(50% - 350px);
+ opacity: 0.3;
+}
diff --git a/src/pages/birthday_page.tsx b/src/pages/birthday_page.tsx
index ca58dfa..0bfb3d1 100644
--- a/src/pages/birthday_page.tsx
+++ b/src/pages/birthday_page.tsx
@@ -1,19 +1,405 @@
import { useNavigate } from "react-router";
-const BirthdayPage = () => {
+import "./birthday_page.scss";
+import { useState } from "react";
+import Portal from "../components/UI/Portal";
+import { useNotification } from "../components/notification/NotificationProvider";
+
+type PropsType = {
+ nextLink: string;
+};
+
+const BirthdayPage = ({ nextLink }: PropsType) => {
+ const Rotate_Times1 = 0.5;
+ const Rotate_Times2 = 15;
+ const Rotate_Times3 = 1;
+
+ const notice = useNotification();
+
const navigate = useNavigate();
- const onSubmit = () => {
- navigate("/email");
- };
+ let Rotate_CSS_Day = 0;
+ let Rotate_CSS_Month = 0;
+ let Rotate_CSS_Year = 0;
+ let [Earth_Spin_Power, setEarth_Spin_Power] = useState(0);
+ let [Moon_Spin_Power, setMoon_Spin_Power] = useState(0);
+ let [Sun_Spin_Power, setSun_Spin_Power] = useState(0);
+ const rootStyles = window.getComputedStyle(document.documentElement);
+
+ let [Now_Day, setNow_Day] = useState("1");
+ let [Now_Month, setNow_Month] = useState("1");
+ let [Now_Year, setNow_Year] = useState("1924");
+
+ function Layout1() {
+ return (
+ ![{"Earth"}]({"../Earth_D.png"})
+ );
+ }
+
+ function Sun() {
+ return (
+ ![{"Sun"}]({"../Sun_D.png"})
+ );
+ }
+
+ function Moon() {
+ return (
+ ![{"Moon"}]({"../Moon_D.png"})
+ );
+ }
+
+ //times
+ function DayButton() {
+ return (
+
- 생일
-
-
+ <>
+
+
+
+
+ 각 천체에 마우스를 가져다 대 생일을 입력하세요!
+
+ 태양은 연도, 달은 월, 지구는 일을 변경합니다 +
+ Tip: 달은 달 궤도 사이에 마우스를 놓으면 이동합니다! + +
+
);
};
diff --git a/src/pages/dorm_room_page.module.scss b/src/pages/dorm_room_page.module.scss
new file mode 100644
index 0000000..66a0830
--- /dev/null
+++ b/src/pages/dorm_room_page.module.scss
@@ -0,0 +1,21 @@
+.unity {
+ width: 80vw !important;
+ height: 80vh !important;
+}
+
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ h1 {
+ margin-top: 0;
+ }
+}
+.overlay {
+ position: absolute;
+ top: 1rem;
+ left: 50%;
+ transform: translateX(-50%);
+}
\ No newline at end of file
diff --git a/src/pages/dorm_room_page.tsx b/src/pages/dorm_room_page.tsx
index 774c28b..7060ca9 100644
--- a/src/pages/dorm_room_page.tsx
+++ b/src/pages/dorm_room_page.tsx
@@ -1,18 +1,50 @@
import { useNavigate } from "react-router";
+import classes from "./dorm_room_page.module.scss";
+import { Unity, useUnityContext } from "react-unity-webgl";
+import {
+ SetStateAction,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from "react";
+import { useNotification } from "../components/notification/NotificationProvider";
+import Portal from "../components/UI/Portal";
const DormRoomPage = () => {
const navigate = useNavigate();
+ const notice = useNotification();
- const onSubmit = () => {
+ const { unityProvider } = useUnityContext({
+ loaderUrl: "dorm_unity_build/HaksulUnityBuild.loader.js",
+ dataUrl: "dorm_unity_build/HaksulUnityBuild.data",
+ frameworkUrl: "dorm_unity_build/HaksulUnityBuild.framework.js",
+ codeUrl: "dorm_unity_build/HaksulUnityBuild.wasm",
+ });
+ const submitHandler = useCallback((e: Event) => {
+ const { detail } = e as CustomEvent<{ roomNum: string }>;
+ const { roomNum } = detail;
+ // setDormRoom(roomNum);
+
+ console.log(roomNum);
+ notice({ type: "SUCCESS", message: "기숙사 호실 입력 완료!" });
navigate("/phone-number");
- };
+ }, []);
+
+ useEffect(() => {
+ window.addEventListener("SendDormNumber", submitHandler);
+ return () => {
+ window.removeEventListener("SendDormNumber", submitHandler);
+ };
+ }, [window.addEventListener, window.removeEventListener, submitHandler]);
return (
-
- 기숙사 호실
-
+
+
+
+
);
};
diff --git a/src/pages/email_page.module.scss b/src/pages/email_page.module.scss
index c05c34d..b73c12c 100644
--- a/src/pages/email_page.module.scss
+++ b/src/pages/email_page.module.scss
@@ -1,21 +1,3 @@
-.main {
- margin: 2rem auto;
- padding: 0 1rem;
- min-height: calc(100vh - 8rem);
- width: min(100%, 45rem);
-
- h1 {
- display: flex;
- align-items: center;
- gap: 1rem;
- margin-bottom: 2rem;
-
- img {
- width: 2rem;
- }
- }
-}
-
.down {
animation: slide-down 10s ease-in-out forwards;
}
@@ -87,16 +69,6 @@ section {
}
}
-.delete {
- margin-top: 2rem;
- padding: 1rem;
- width: 100%;
- &:hover {
- color: white;
- background-color: green;
- }
-}
-
.keyboard {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto;
@@ -105,12 +77,21 @@ section {
button {
width: 100%;
height: 2em;
+ border-radius: 0.5rem;
}
button:hover {
color: white;
background-color: green;
}
- .clearbtn {
- width: 100%;
+}
+
+.delete {
+ margin-top: 2rem;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ width: 100%;
+ &:hover {
+ color: white;
+ background-color: green;
}
}
diff --git a/src/pages/email_page.tsx b/src/pages/email_page.tsx
index 4dabbfb..e74793f 100644
--- a/src/pages/email_page.tsx
+++ b/src/pages/email_page.tsx
@@ -2,6 +2,112 @@ import { useContext, useEffect, useState } from "react";
import classes from "./email_page.module.scss";
import { useNavigate } from "react-router-dom";
import GlobalContext from "../components/context/context";
+import { useNotification } from "../components/notification/NotificationProvider";
+
+const json: any = require("../components/context/data.json");
+
+const original_3rd_grade_list = [
+ "강덕윤",
+ "강민후",
+ "강준호",
+ "강현민",
+ "공진",
+ "곽경욱",
+ "김경린",
+ "김규림",
+ "김규현",
+ "김동혁",
+ "김두영",
+ "김민구",
+ "김민규",
+ "김민석",
+ "김민재",
+ "김서호",
+ "김세현",
+ "김승연",
+ "김시우",
+ "김연준",
+ "김윤",
+ "김은수",
+ "김정헌",
+ "김주윤",
+ "김주한",
+ "김주해",
+ "김지원",
+ "김지한",
+ "김청아",
+ "김하루",
+ "김현민",
+ "김형원",
+ "노경민",
+ "라진우",
+ "문정원",
+ "문찬희",
+ "박건욱",
+ "박건희",
+ "박선용",
+ "박성현",
+ "박세웅",
+ "박세준",
+ "박승규",
+ "박연우",
+ "박종현",
+ "박종현",
+ "박준하",
+ "박준혁",
+ "박혜원",
+ "서명원",
+ "서윤아",
+ "송민준",
+ "송하엘",
+ "신주원",
+ "신주현",
+ "신희찬",
+ "안재형",
+ "오태양",
+ "오현택",
+ "우현욱",
+ "이동욱",
+ "이동혁",
+ "이명제",
+ "이상현",
+ "이서준",
+ "이성준",
+ "이세환",
+ "이승민",
+ "이윤수",
+ "이윤호",
+ "이재아",
+ "이종현",
+ "이주형",
+ "이한진",
+ "이현석",
+ "이형준",
+ "임휘묵",
+ "장서영",
+ "장연수",
+ "장차웅",
+ "전서한",
+ "정용환",
+ "정우영",
+ "정우재",
+ "정준상",
+ "정지훈",
+ "조민서",
+ "조민정",
+ "조민혁",
+ "차민재",
+ "최서원",
+ "최영빈",
+ "최정우",
+ "최진혁",
+ "최현규",
+ "한예원",
+ "함성준",
+ "홍세호",
+ "황보철준",
+ "황의찬",
+];
const shuffle = (str: string) =>
str
@@ -9,7 +115,7 @@ const shuffle = (str: string) =>
.sort(() => Math.random() - 0.5)
.join("");
-const shuffleTime = 20;
+const shuffleTime = 60;
const EmailPage = () => {
const [show, setShow] = useState(false);
@@ -27,6 +133,8 @@ const EmailPage = () => {
const navigate = useNavigate();
+ const notice = useNotification();
+
const type = (text: string) => {
if (text === "delete") {
setEmail("");
@@ -39,7 +147,7 @@ const EmailPage = () => {
setShow(true);
setTimeout(() => {
setIsDisabled(false);
- }, 1000);
+ }, 5000);
};
useEffect(() => {
@@ -57,14 +165,31 @@ const EmailPage = () => {
}, [setHangeul, setTimeLeft]);
const submitHandler = (_: any) => {
- console.log(savedText + email);
- console.log(studentNumber);
- clearInterval(intervalId);
- navigate("/dorm-room");
+
+ const num =
+ studentNumber[0] === "3"
+ ? original_3rd_grade_list.indexOf(json[studentNumber])
+ : Object.keys(json)
+ .filter((x) => x[0] === studentNumber[0])
+ .indexOf(studentNumber);
+
+ const correctEmail = `gbs.s2${(
+ 5 - parseInt(studentNumber[0])
+ ).toString()}00${(num + 1).toString().padStart(2, "0")}@ggh.goe.go.kr`;
+
+ console.log(correctEmail);
+
+ if (true) {
+ navigate("/dorm-room");
+ localStorage.setItem("email", correctEmail);
+ clearInterval(intervalId);
+ } else {
+ notice({ type: "ERROR", message: "그게 아닐 텐데" });
+ }
};
return (
-
+
클리어 타임: {secondsToMMSS(123)}
*/}
+
+
+ );
+ }
+
+ function Earth() {
+ return (
+
+ );
+ }
+
+ function Sun() {
+ return (
+
+ );
+ }
+
+ function Moon() {
+ return (
+
+ );
+ }
+
+ //times
+ function DayButton() {
+ return (
+ + {Now_Day} +
+ ); + } + + function DayText() { + return ( ++ Day +
+ ); + } + + function MonthButton() { + return ( ++ {-Now_Month} +
+ ); + } + + function MonthText() { + return ( ++ Month +
+ ); + } + + function YearButton() { + return ( ++ {Now_Year} +
+ ); + } + + function YearText() { + return ( ++ Year +
+ ); + } + + function MOverAll() { + MOver3(); + Rotate_CSS_Day = parseInt(rootStyles.getPropertyValue("--rotate")); + Rotate_CSS_Month = parseInt(rootStyles.getPropertyValue("--rotate2")); + + setNow_Month( + `${ + Math.floor(Rotate_CSS_Month / -360) % 12 !== 0 + ? Math.floor(Rotate_CSS_Month / -360) % 12 + : -12 + }` + ); + setNow_Day( + `${ + Math.floor(Rotate_CSS_Day / -360) % 31 !== 0 + ? Math.floor(Rotate_CSS_Day / -360) % 31 + : 31 + }` + ); + if (Moon_Spin_Power > 1 && Earth_Spin_Power < -1) { + setMoon_Spin_Power(Moon_Spin_Power - 1); + document.documentElement.style.setProperty( + "--rotate2", + `${Rotate_CSS_Month + Moon_Spin_Power / Rotate_Times2}deg` + ); + setEarth_Spin_Power(Earth_Spin_Power + 1); + document.documentElement.style.setProperty( + "--rotate", + `${Rotate_CSS_Day + Earth_Spin_Power / Rotate_Times1}deg` + ); + } else if (Moon_Spin_Power <= 1 && Earth_Spin_Power >= -1) { + setMoon_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate2", + `${Rotate_CSS_Month + Moon_Spin_Power / Rotate_Times2}deg` + ); + setEarth_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate", + `${Rotate_CSS_Day + Earth_Spin_Power / Rotate_Times1}deg` + ); + } else if (Moon_Spin_Power > 1 && Earth_Spin_Power >= -1) { + setMoon_Spin_Power(Moon_Spin_Power - 1); + document.documentElement.style.setProperty( + "--rotate2", + `${Rotate_CSS_Month + Moon_Spin_Power / Rotate_Times2}deg` + ); + setEarth_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate", + `${Rotate_CSS_Day + Earth_Spin_Power / Rotate_Times1}deg` + ); + } else { + setMoon_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate2", + `${Rotate_CSS_Month + Moon_Spin_Power / Rotate_Times2}deg` + ); + setEarth_Spin_Power(Earth_Spin_Power + 1); + document.documentElement.style.setProperty( + "--rotate", + `${Rotate_CSS_Day + Earth_Spin_Power / Rotate_Times1}deg` + ); + } + } + + function MOver3() { + Rotate_CSS_Year = parseInt(rootStyles.getPropertyValue("--rotate3")); + setNow_Year( + `${Math.floor( + Math.floor(Rotate_CSS_Year / 360) % 200 === 0 + ? 1924 + : ((Rotate_CSS_Year / 360) % 200) + 1924 + )}` + ); + + if (Sun_Spin_Power > 1) { + setSun_Spin_Power(Sun_Spin_Power - 1); + document.documentElement.style.setProperty( + "--rotate3", + `${Rotate_CSS_Year + Sun_Spin_Power / Rotate_Times3}deg` + ); + } else { + setSun_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate3", + `${Rotate_CSS_Year + Sun_Spin_Power / Rotate_Times3}deg` + ); + } + } + + //month + function MOver2() { + Rotate_CSS_Month = parseInt(rootStyles.getPropertyValue("--rotate2")); + setNow_Month( + `${Math.floor( + Math.floor(Rotate_CSS_Month / -360) % 12 !== 0 + ? Math.floor(Rotate_CSS_Month / -360) % 12 + : -12 + )}` + ); + + if (Moon_Spin_Power > 1) { + setMoon_Spin_Power(Moon_Spin_Power - 1); + document.documentElement.style.setProperty( + "--rotate2", + `${Rotate_CSS_Month + Moon_Spin_Power / Rotate_Times2}deg` + ); + } else { + setMoon_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate2", + `${Rotate_CSS_Month + Moon_Spin_Power / Rotate_Times2}deg` + ); + } + } + + //Day + function MOver() { + Rotate_CSS_Day = parseInt(rootStyles.getPropertyValue("--rotate")); + setNow_Day( + `${Math.floor( + Math.floor(Rotate_CSS_Day / -360) % 31 !== 0 + ? Math.floor(Rotate_CSS_Day / -360) % 31 + : 31 + )}` + ); + + if (Earth_Spin_Power < -1) { + setEarth_Spin_Power(Earth_Spin_Power + 1); + document.documentElement.style.setProperty( + "--rotate", + `${Rotate_CSS_Day + Earth_Spin_Power / Rotate_Times1}deg` + ); + } else { + setEarth_Spin_Power(0); + document.documentElement.style.setProperty( + "--rotate", + `${Rotate_CSS_Day + Earth_Spin_Power / Rotate_Times1}deg` + ); + } + } + + function UnClickCircle() { + return ; + } + + function CircleDay() { + return ( + + ); + } + + function CircleMonth() { + return ( + + ); + } + + function CircleYear() { + return ( + + ); + } + + //set + + function Times() { + return ( +
+
+ );
+ }
+
+ function submitHandler() {
+ notice({ type: "SUCCESS", message: "생일 입력 성공!" });
+ navigate(nextLink);
+ }
return (
-
+
+
+ 넘어가기
+
+ + 태양은 연도, 달은 월, 지구는 일을 변경합니다 +
+ Tip: 달은 달 궤도 사이에 마우스를 놓으면 이동합니다! + +
+ 
+ 기숙사 호실
+
+
Email
@@ -94,7 +219,9 @@ const EmailPage = () => {
- 문자에 마우스를 가져다 대면 글자가 입력됩니다!
+ 문자에 마우스를 가져다 대면 글자가 입력됩니다!
+
+ 다이얼을 돌려 전화번호를 입력하세요! 이 번호를 바탕으로 선물이 전송될 예정이니 신중히 입력해 주세요~
+ 문자에 마우스를 가져다 대면 글자가 입력됩니다! gbs.s******@ggh.goe.go.kr
+ 형식으로 입력해 주세요!
+
개발자의 힌트: {timeLeft}초 안에 글자가 섞입니다!
+개발자의 게으름으로 인해 백스페이스 버튼이 없사오니 실수가 나면
diff --git a/src/pages/first_page.module.scss b/src/pages/first_page.module.scss
index a3967a9..dc51ee0 100644
--- a/src/pages/first_page.module.scss
+++ b/src/pages/first_page.module.scss
@@ -1,11 +1,9 @@
.index {
background-color: var(--main-color);
- padding: 4rem;
+ padding: 2rem 0;
main {
- margin: 2rem auto;
- padding: 0 1rem;
- min-height: calc(100vh - 8rem);
+ height: 100%;
width: min(100%, 45rem);
}
@@ -14,7 +12,35 @@
display: flex;
align-items: center;
flex-direction: column;
+ justify-content: center;
gap: 2rem;
+ padding-bottom: 2rem;
+
+ img {
+ width: 25%;
+ }
+
+ h1 {
+ span {
+ font-family: "Playfair Display";
+ font-weight: bold;
+ font-style: italic;
+ font-size: 2rem;
+ }
+
+ font-size: 2rem;
+ margin: 0;
+ }
+
+ .yakgwan {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+ em {
+ // text-decoration: line-through;
+ font-weight: bold;
+ }
.control {
background-color: white;
@@ -27,28 +53,21 @@
align-items: center;
}
- .yakgwan {
- font-size: 1.25rem;
- }
-
- em {
- text-decoration: line-through;
- }
-
button {
background-color: var(--color-light);
}
- .underbar {
- text-decoration: underline;
+ .fakeclick {
+ font-weight: bold;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
}
.red {
color: red;
}
-
- img {
- width: 25%;
- }
}
}
diff --git a/src/pages/first_page.tsx b/src/pages/first_page.tsx
index 0900772..17ff28f 100644
--- a/src/pages/first_page.tsx
+++ b/src/pages/first_page.tsx
@@ -1,13 +1,10 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
import classes from "./first_page.module.scss";
-import { useNavigate } from "react-router-dom";
-import GlobalContext from "../components/context/context";
+import FirstPageModal from "../components/first_page_modal";
const FirstPage = () => {
const [agree, setAgree] = useState
-
- SADA Interface
- [약관]
-
-
- 1. 해당 전화번호는 광고성 목적으로 이용되며, 설문 작성일
- 이후로부터 1일 이내에 전화가 올 수 있습니다.
-
-
- 2. 설문에서 입력받은 모든 개인정보는 추첨 이외의 목적으로
- 사용되며, 상업적 목적으로 이용될 수 있습니다.{" "}
-
-
- 3. 1주일이 지나도 개인정보는 파기되지 않습니다.
+ <>
+
+
);
};
diff --git a/src/pages/last_page.module.scss b/src/pages/last_page.module.scss
index de786e3..86f60d0 100644
--- a/src/pages/last_page.module.scss
+++ b/src/pages/last_page.module.scss
@@ -1,12 +1,3 @@
-.list {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- li {
- padding: 1rem;
- border-radius: 1rem;
- box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
- display: flex;
- justify-content: space-between;
- }
+.id {
+ margin-bottom: 1rem;
}
diff --git a/src/pages/last_page.tsx b/src/pages/last_page.tsx
index 0b9d16d..c8577d9 100644
--- a/src/pages/last_page.tsx
+++ b/src/pages/last_page.tsx
@@ -1,41 +1,94 @@
+import { useContext, useEffect, useState } from "react";
import classes from "./last_page.module.scss";
+import GlobalContext from "../components/context/context";
+import { useNotification } from "../components/notification/NotificationProvider";
-const json: any = require("../components/context/score.json");
+const LastPage = () => {
+ const [id, setId] = useState("");
+ const { stopTime, goBack } = useContext(GlobalContext);
+ const [isSent, setIsSent] = useState(false);
-const sortDictionaryByValue = (dict: any) => {
- // Convert dictionary to an array of [key, value] pairs
- const items = Object.entries(dict);
+ const { studentNumber } = useContext(GlobalContext);
- // Sort the array based on the value
- items.sort((a, b) => (a[1] as number) - (b[1] as number));
- console.log(items);
+ const notice = useNotification();
- return items;
-};
+ useEffect(() => {
+ stopTime();
-const secondsToMMSS = (seconds: number) => {
- // Calculate the minutes and remaining seconds
- const minutes = Math.floor(seconds / 60);
- const remainingSeconds = seconds % 60;
+ return () => {
+ goBack();
+ };
+ }, [stopTime, goBack]);
- // Pad the remaining seconds with a leading zero if necessary
- const paddedSeconds = remainingSeconds.toString().padStart(2, "0");
+ const disable =
+ localStorage.getItem("phone-number") === null ||
+ localStorage.getItem("name") === null ||
+ localStorage.getItem("email") === null;
- // Return the formatted time
- return `${minutes}:${paddedSeconds}`;
-};
+ const submitHandler = async () => {
+ const time = localStorage.getItem("time");
+ const name = localStorage.getItem("name");
+ let phoneNumber = localStorage.getItem("phone-number");
+ const email = localStorage.getItem("email");
+
+ // console.log(phoneNumber);
+
+ phoneNumber = phoneNumber!.split("-").join("");
+
+ let reward;
+
+ if (parseInt(time!) >= 0 && parseInt(time!) <= 300) {
+ reward = 500;
+ } else if (parseInt(time!) > 300 && parseInt(time!) <= 600) {
+ reward = 400;
+ } else {
+ reward = 300;
+ }
+
+ if (studentNumber === "") {
+ console.log(
+ `https://sada.ziho.kr/coin/register?id=${id}&studentid=0&name=${name}&phone=${phoneNumber}&email=${email}`
+ );
+ fetch(
+ `https://sada.ziho.kr/coin/register?id=${id}&studentid=0&name=${name}&phone=${phoneNumber}&email=${email}`
+ )
+ .then(() => {
+ fetch(`https://sada.ziho.kr/coin/add/${id}/${name}/${reward}`);
+ notice({ type: "SUCCESS", message: "SADA코인 개설 완료!" });
+ setIsSent(true);
+ })
+ .catch(() => notice({ type: "ERROR", message: "SADA코인 개설 실패" }));
+ } else {
+ fetch(
+ `https://sada.ziho.kr/coin/register?id=${id}&studentid=${studentNumber}&name=${name}&phone=${phoneNumber}&email=${email}`
+ )
+ .then(() => {
+ fetch(`https://sada.ziho.kr/coin/add/${id}/${name}/${reward}`);
+ notice({ type: "SUCCESS", message: "SADA코인 개설 완료!" });
+ setIsSent(true);
+ })
+ .catch(() => notice({ type: "ERROR", message: "SADA코인 개설 실패" }));
+ }
+
+ localStorage.clear();
+ };
-const LastPage = () => {
return (
-
+
+
+
+ setShow(true)}>여기
+ {"를 "}
+ 눌러 다음 페이지로
+ 넘어가세요
+
+
+
+
+
+ 끔찍한 UI 챌린지!
+
+ [약관]
+
+
+
+
+ {}}
+ />
-
-
- 개인정보 수집에 동의합니까?
- {}}
- />
-
-
-
- 여기를{" "}
- 눌러 다음 페이지로
- 넘어가세요
-
-
- {sortDictionaryByValue(Object(json)).map((item) => (
-
+
-
- 이름을 입력하세요
-
-
- 바구니에 글자를 담아보아요.
- 글자 순서는 상관없어요.
- 같은 글자는 두 번 다시 나타나지 않아요.
- 글자를 놓쳤다면... 안타까운 거죠
-
-
-
- {blockList.map(block => (
-
- {block.char}
-
- ))}
-
-
-
- ![basket]({"./basket.png"})
-
-
- 이름을 입력하세요
+
+
+
+
+
+
+
+ 자신의 이름에 포함된 글자를 바구니에 순서 상관없이 담아보아요!
+
+
+ 바구니에는 글자 하나만 넣을 수 있어요!
+
+ 바구니의 입력 버튼을 눌러 바구니에 담은 글자를 이름에 추가하세요!
+
+ 모든 글자를 추가하셨다면 '이름 글자 섞기' 버튼을 눌러 이름을 맞춰
+ 보세요!
+
+ {blockList.map((block) => (
+ {
+ const relativeDistance =
+ block.left -
+ mouseX +
+ 16 +
+ (window.innerWidth > 720 ? (window.innerWidth - 720) / 2 : 0);
+ if (relativeDistance >= -65 && relativeDistance <= 65) {
+ setBasketChar(block.char);
+ }
+ setBlockList((prev) => prev.filter((b) => b.id !== block.id));
+ }}
+ >
+ {block.char}
+
+ ))}
+
+
+
+
+
+
+ {basketChar !== null ? basketChar : "_"}
+
+
+
+
+
+ Email
+
+
+ 당신의 Email: {savedText}
+ {email}
+
+
+
+
+
+
+
+ 개발자의 힌트: {timeLeft}초 안에 글자가 섞입니다!
+
+ +개발자의 게으름으로 인해 백스페이스 버튼이 없사오니 실수가 나면
+ '지우기' 버튼을 통해 모든 텍스트를 지우셔야 합니다^^
+
+ {Hangeul.split("").map((e) => (
+
+ ))}
+
+
+
+
+
+
+ 이름을 입력하세요
+
+
+
+
+
+
+
+
+ 자신의 이름에 포함된 글자를 바구니에 순서 상관없이 담아보아요!
+
+
+ 바구니에는 글자 하나만 넣을 수 있어요!
+
+ 바구니의 입력 버튼을 눌러 바구니에 담은 글자를 이름에 추가하세요!
+
+ 모든 글자를 추가하셨다면 '이름 글자 섞기' 버튼을 눌러 이름을 맞춰
+ 보세요!
+
+ {blockList.map((block) => (
+ {
+ const relativeDistance =
+ block.left -
+ mouseX +
+ 16 +
+ (window.innerWidth > 720 ? (window.innerWidth - 720) / 2 : 0);
+ if (relativeDistance >= -65 && relativeDistance <= 65) {
+ setBasketChar(block.char);
+ }
+ setBlockList((prev) => prev.filter((b) => b.id !== block.id));
+ }}
+ >
+ {block.char}
+
+ ))}
+
+
+
+
+ ![basket]({"../basket.png"})
+
+ {basketChar !== null ? basketChar : "_"}
+
+
+
+
+
+ 전화번호
+
+
다이얼 속의 번호는 1.5초에 하나씩 자동으로 감소하고, 손으로
+ 다이얼을 돌려 전화번호와 유사하게 숫자를 맞추세요!
+
다음 (+) 버튼으로 전화번호를 맞춰 정확한 순간 '넘어가기'
+ 버튼을 누르세요!
+
+
+ 친절하게도 첫 다이얼은 +82 10으로 맞춰져 있네요~
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 정확한 타이밍을 맞춰 버튼을 누르세요!
+
+
+