feat: add auth slice

sparcs-kaist · Nov 24, 2023 · 2354d9f · 2354d9f
1 parent 1babb58
commit 2354d9f
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 6 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -102,7 +102,10 @@
         "prefer": "type-imports"
       }
     ],
-    "arrow-body-style": ["warn"]
+    "arrow-body-style": ["warn"],
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "some": [ "nesting", "id" ]
+    }]
   },
   "settings": {
     "import/parsers": {

diff --git a/src/components/Auth/Auth.tsx b/src/components/Auth/Auth.tsx
@@ -0,0 +1,77 @@
+import { type ChangeEvent, useState } from "react";
+import { useAppDispatch, useAppSelector } from "@/types";
+import { type RootState } from "@/redux/store";
+import { Board } from "@/components/Board";
+import { loginThunk } from "@/redux/auth/loginThunk";
+import style from "./Auth.module.scss";
+
+export const AuthPage = () => {
+  const [deviceId, setDeviceId] = useState("");
+  const [pin, setPin] = useState("");
+
+  const isLoggedIn = useAppSelector(
+    (state: RootState) => state.auth.isLoggedIn,
+  );
+
+  const onDeviceIdChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setDeviceId(e.target.value);
+  };
+
+  const onPinChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPin(e.target.value);
+  };
+
+  const dispatch = useAppDispatch();
+
+  const onSubmitHandler = () => {
+    dispatch(loginThunk(deviceId, pin));
+    setDeviceId("");
+    setPin("");
+  };
+
+  if (isLoggedIn) {
+    return <Board />;
+  }
+
+  return (
+    <div className={style.modalWrapper}>
+      <div className={style.modalContainer}>
+        <h1 className={style.modalTitle}> Zabo Board Login</h1>
+        <br />
+        <p className={style.modalContent}>
+          Zabo Board 서비스를 이용하기 위해서는 등록된 device Id와 PIN을
+          입력하세요.
+          <br />
+          Zabo Board 서비스를 등록하기 위해서는 zabo.sparcs.org 채널톡으로
+          문의해주세요.
+        </p>
+        <div className={style.form}>
+          <label className={style.input}>
+            device Id
+            <input
+              className={style.input}
+              name="deviceId"
+              onChange={onDeviceIdChange}
+            />
+          </label>
+          <label className={style.input}>
+            PIN
+            <input
+              className={style.input}
+              type="password"
+              name="PIN"
+              onChange={onPinChange}
+            />
+          </label>
+        </div>
+        <button
+          type="submit"
+          className={style.submit}
+          onClick={onSubmitHandler}
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useInterval } from "@/hooks";
-import { moveToNext, type ZaboListState } from "@/redux/zabos/zaboSlice";
+import { moveToNext } from "@/redux/zabos/zaboSlice";
 import { fetchZaboThunk } from "@/redux/zabos/fetchZaboThunk";
 import { useAppSelector, useAppDispatch, type ZaboJson } from "@/types";
 import { Zabo } from "@/components/Zabo";
@@ -9,12 +9,14 @@ import { Background } from "@/components/Background";
 import { Qr } from "@/components/Qr";
 import { Logo } from "@/components/Logo";
 import { TRANSITION_INTERVAL } from "@/config";
+import { type RootState } from "@/redux/store";
+
 import style from "./Board.module.scss";
 
 export const Board = () => {
-  const zaboList = useAppSelector((state: ZaboListState) => state.zaboList);
+  const zaboList = useAppSelector((state: RootState) => state.zabo.zaboList);
   const leftOverZaboLength = useAppSelector(
-    (state: ZaboListState) => state.leftoverLength,
+    (state: RootState) => state.zabo.leftoverLength,
   );
 
   const dispatch = useAppDispatch();

diff --git a/src/redux/auth/authSlice.ts b/src/redux/auth/authSlice.ts
@@ -0,0 +1,23 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface AuthState {
+  isLoggedIn: boolean;
+}
+
+const initialState: AuthState = {
+  isLoggedIn: false,
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setIsLoggedIn: (state, action) => {
+      state.isLoggedIn = action.payload;
+    },
+  },
+});
+
+export const { setIsLoggedIn } = authSlice.actions;
+
+export const authReducer = authSlice.reducer;
diff --git a/src/redux/auth/loginThunk.ts b/src/redux/auth/loginThunk.ts
@@ -0,0 +1,16 @@
+import { type AppDispatch } from "@/redux/store";
+import { setIsLoggedIn } from "./authSlice";
+
+// send device id and pin to server and get session cookie
+export const loginThunk =
+  (deviceId: string, pin: string) => async (dispatch: AppDispatch) => {
+    // request zabo board login and get response
+    console.log(deviceId);
+    console.log(pin);
+
+    // mock api request time
+    setTimeout(() => {}, 1000);
+
+    // if success, then set zabo store's isLogin to true
+    dispatch(setIsLoggedIn(true));
+  };
diff --git a/src/redux/rootReducer.ts b/src/redux/rootReducer.ts
@@ -0,0 +1,13 @@
+import { combineReducers } from "@reduxjs/toolkit";
+import { type ZaboListState, zaboReducer } from "./zabos/zaboSlice";
+import { type AuthState, authReducer } from "./auth/authSlice";
+
+export interface RootState {
+  zabo: ZaboListState;
+  auth: AuthState;
+}
+
+export const rootReducer = combineReducers({
+  zabo: zaboReducer,
+  auth: authReducer,
+});
diff --git a/src/redux/store.ts b/src/redux/store.ts
@@ -1,8 +1,8 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { zaboReducer } from "./zabos/zaboSlice";
+import { rootReducer } from "./rootReducer";
 
 export const store = configureStore({
-  reducer: zaboReducer,
+  reducer: rootReducer,
 });
 
 // Infer the `RootState` and `AppDispatch` types from the store itself