Merge pull request #530 from sparcs-kaist/dev

Main branch update from Dev branch

src/atoms/loginInfoDetail.ts → src/atoms/loginInfo.ts

@@ -1,6 +1,6 @@
 import { atom } from "recoil";
 
-export type LoginInfoDetailType = {
+export type LoginInfoType = Nullable<{
   agreeOnTermsOfService: boolean;
   ban: boolean;
   email: string;
@@ -15,11 +15,11 @@ export type LoginInfoDetailType = {
   account: string;
   deviceToken: Nullable<string>;
   deviceType: "web" | "app";
-};
+}>;
 
-const loginInfoDetailAtom = atom<Nullable<LoginInfoDetailType>>({
-  key: "loginInfoDetailAtom",
+const loginInfoAtom = atom<LoginInfoType>({
+  key: "loginInfoAtom",
   default: null,
 });
 
-export default loginInfoDetailAtom;
+export default loginInfoAtom;

src/atoms/myRooms.ts

@@ -0,0 +1,16 @@
+import { atom } from "recoil";
+
+export type MyRoomsType = {
+  ongoing: Array<any>; // FIXME: 방의 타입 정의
+  done: Array<any>;
+};
+
+const myRoomsAtom = atom<MyRoomsType>({
+  key: "myRoomsAtom",
+  default: {
+    ongoing: [],
+    done: [],
+  },
+});
+
+export default myRoomsAtom;

src/atoms/notificationOptions.ts

@@ -1,14 +1,14 @@
 import { atom } from "recoil";
 
-export type notificationOptionsType = {
+export type notificationOptionsType = Nullable<{
   advertisement: boolean;
   beforeDepart: boolean;
   chatting: boolean;
   notice: boolean;
   keywords: [string];
-};
+}>;
 
-const notificationOptionsAtom = atom<Nullable<notificationOptionsType>>({
+const notificationOptionsAtom = atom<notificationOptionsType>({
   key: "notificationOptionsAtom",
   default: null,
 });

src/atoms/taxiLocations.ts

@@ -0,0 +1,10 @@
+import { atom } from "recoil";
+
+export type TaxiLocationsType = Array<any>;
+
+const taxiLocationsAtom = atom<TaxiLocationsType>({
+  key: "taxiLocationsAtom",
+  default: [],
+});
+
+export default taxiLocationsAtom;

src/components/AccountSelector.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import regExpTest from "tools/regExpTest";
 import theme from "tools/theme";
 
 import bankNames from "static/bankNames";
@@ -12,20 +11,22 @@ type AccountSelectorProps = {
 };
 
 const AccountSelector = (props: AccountSelectorProps) => {
+  const initializeAccountState = () => {
+    const account = props.accountNumber.split(" ");
+    return [account?.[0] || bankNames[0], account?.[1] || ""];
+  };
+
   const { t } = useTranslation("mypage");
-  const [bankNumber, setBankNumber] = useState("");
-  const [bankName, setBankName] = useState(bankNames[0]);
+  const [bankName, setBankName] = useState(initializeAccountState()[0]);
+  const [bankNumber, setBankNumber] = useState(initializeAccountState()[1]);
 
   useEffect(() => {
     props.setAccountNumber(bankName + " " + bankNumber);
   }, [bankName, bankNumber]);
 
   useEffect(() => {
-    if (regExpTest.account(props.accountNumber)) {
-      const account = props.accountNumber.split(" ");
-      setBankName(account[0]);
-      setBankNumber(account[1]);
-    }
+    setBankName(initializeAccountState()[0]);
+    setBankNumber(initializeAccountState()[1]);
   }, [props.accountNumber]);
 
   const styleTitle: CSS = {

src/components/HeaderBar.tsx

@@ -1,19 +1,21 @@
 import theme from "tools/theme";
 
-const HeaderBar = () => {
-  return (
-    <div
-      style={{
-        background: theme.purple,
-        width: "100%",
-        height: "max(5px, env(safe-area-inset-top))",
-        position: "fixed",
-        top: "0px",
-        left: "0px",
-        zIndex: theme.zIndex_headerBar,
-      }}
-    />
-  );
+type HeaderBarProps = {
+  position?: "fixed" | "absolute";
 };
 
+const HeaderBar = ({ position = "fixed" }: HeaderBarProps) => (
+  <div
+    style={{
+      background: theme.purple,
+      width: "100%",
+      height: "max(5px, env(safe-area-inset-top))",
+      position,
+      top: "0px",
+      left: "0px",
+      zIndex: theme.zIndex_headerBar,
+    }}
+  />
+);
+
 export default HeaderBar;

src/components/Link/LinkLogin.tsx

@@ -0,0 +1,25 @@
+import { useLocation } from "react-router-dom";
+
+import { backServer } from "loadenv";
+
+type LinkLoginProps = {
+  children: React.ReactNode;
+  redirect?: string;
+};
+
+const LinkLogin = ({ children, redirect }: LinkLoginProps) => {
+  const { pathname, search } = useLocation();
+  const redirectPath = redirect || pathname + search;
+  return (
+    <a
+      href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
+        redirectPath
+      )}`}
+      css={{ textDecoration: "none" }}
+    >
+      {children}
+    </a>
+  );
+};
+
+export default LinkLogin;

src/components/Link/LinkLogout.tsx

@@ -0,0 +1,28 @@
+import { useCallback, useRef } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+
+type LinkLogoutProps = {
+  children: React.ReactNode;
+  redirect?: string;
+};
+
+export const useOnClickLogout = (redirect?: string) => {
+  const history = useHistory();
+  const { pathname, search } = useLocation();
+  const redirectPath = redirect || pathname + search;
+  const isClicked = useRef(false);
+
+  return useCallback(async () => {
+    if (isClicked.current) return;
+    isClicked.current = true;
+    history.replace(`/logout?redirect=${encodeURIComponent(redirectPath)}`);
+    isClicked.current = false;
+  }, [history, redirectPath]);
+};
+
+const LinkLogout = ({ children, redirect }: LinkLogoutProps) => {
+  const onClickLogout = useOnClickLogout(redirect);
+  return <div onClick={onClickLogout}>{children}</div>;
+};
+
+export default LinkLogout;

src/pages/Mypage/PopupMembers.jsx → src/components/ModalPopup/ModalCredit.jsx

@@ -60,7 +60,7 @@ Member.propTypes = {
   period: PropTypes.string,
 };
 
-const PopupMembers = (props) => {
+const ModalCredit = (props) => {
   const { t } = useTranslation("mypage");
 
   const styleTitle = {
@@ -95,7 +95,7 @@ const PopupMembers = (props) => {
   return (
     <Modal
       isOpen={props.isOpen}
-      onChangeIsOpen={props.onClose}
+      onChangeIsOpen={props.onChangeIsOpen}
       width={theme.modal_width_large}
       padding="16px 12px 12px"
     >
@@ -127,9 +127,9 @@ const PopupMembers = (props) => {
     </Modal>
   );
 };
-PopupMembers.propTypes = {
+ModalCredit.propTypes = {
   isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
+  onChangeIsOpen: PropTypes.func,
 };
 
-export default PopupMembers;
+export default ModalCredit;