feat: add member list in setting

web/src/pages/Account.tsx

@@ -1,21 +1,21 @@
 import { Button } from "@mui/joy";
 import { useState } from "react";
-import { useAppSelector } from "../stores";
+import useUserStore from "../stores/v1/user";
 import ChangePasswordDialog from "../components/ChangePasswordDialog";
 import EditUserinfoDialog from "../components/EditUserinfoDialog";
 
 const Account: React.FC = () => {
-  const user = useAppSelector((state) => state.user).user as User;
+  const currentUser = useUserStore().getCurrentUser();
   const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
   const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
 
   return (
     <>
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
-        <p className="text-3xl my-2">{user.nickname}</p>
+        <p className="text-3xl my-2">{currentUser.nickname}</p>
         <p className="leading-8 flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>
-          {user.email}
+          {currentUser.email}
         </p>
         <div className="flex flex-row justify-start items-center gap-2">
           <Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>

web/src/pages/Home.tsx

@@ -2,6 +2,7 @@ import { Button, Tab, TabList, Tabs } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
+import useUserStore from "../stores/v1/user";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import ShortcutListView from "../components/ShortcutListView";
@@ -13,13 +14,14 @@ interface State {
 
 const Home: React.FC = () => {
   const loadingState = useLoading();
+  const currentUser = useUserStore().getCurrentUser();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
-  const user = useAppSelector((state) => state.user).user as User;
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
   });
   const [selectedFilter, setSelectFilter] = useState<"ALL" | "PRIVATE">("ALL");
-  const filteredShortcutList = selectedFilter === "ALL" ? shortcutList : shortcutList.filter((shortcut) => shortcut.creatorId === user.id);
+  const filteredShortcutList =
+    selectedFilter === "ALL" ? shortcutList : shortcutList.filter((shortcut) => shortcut.creatorId === currentUser.id);
 
   useEffect(() => {
     Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => {

web/src/pages/Setting.tsx

@@ -1,15 +1,21 @@
-import { useAppSelector } from "../stores";
+import useUserStore from "../stores/v1/user";
 import AccountSection from "../components/setting/AccountSection";
 import WorkspaceSection from "../components/setting/WorkspaceSection";
+import UserSection from "../components/setting/UserSection";
 
 const Setting: React.FC = () => {
-  const user = useAppSelector((state) => state.user).user as User;
-  const isAdmin = user.role === "ADMIN";
+  const currentUser = useUserStore().getCurrentUser();
+  const isAdmin = currentUser.role === "ADMIN";
 
   return (
     <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
       <AccountSection />
-      {isAdmin && <WorkspaceSection />}
+      {isAdmin && (
+        <>
+          <UserSection />
+          <WorkspaceSection />
+        </>
+      )}
     </div>
   );
 };

web/src/pages/SignIn.tsx

@@ -3,12 +3,13 @@ import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import * as api from "../helpers/api";
-import { userService } from "../services";
 import { useAppSelector } from "../stores";
 import useLoading from "../hooks/useLoading";
+import useUserStore from "../stores/v1/user";
 
 const SignIn: React.FC = () => {
   const navigate = useNavigate();
+  const userStore = useUserStore();
   const {
     workspaceProfile: { disallowSignUp },
   } = useAppSelector((state) => state.global);
@@ -18,7 +19,7 @@ const SignIn: React.FC = () => {
   const allowConfirm = email.length > 0 && password.length > 0;
 
   useEffect(() => {
-    userService.doSignOut();
+    api.signout();
   }, []);
 
   const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -39,7 +40,7 @@ const SignIn: React.FC = () => {
     try {
       actionBtnLoadingState.setLoading();
       await api.signin(email, password);
-      const user = await userService.doSignIn();
+      const user = await userStore.fetchCurrentUser();
       if (user) {
         navigate("/", {
           replace: true,

web/src/pages/SignUp.tsx

@@ -3,11 +3,16 @@ import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import * as api from "../helpers/api";
-import { userService } from "../services";
+import { globalService } from "../services";
 import useLoading from "../hooks/useLoading";
+import useUserStore from "../stores/v1/user";
 
 const SignUp: React.FC = () => {
   const navigate = useNavigate();
+  const userStore = useUserStore();
+  const {
+    workspaceProfile: { disallowSignUp },
+  } = globalService.getState();
   const [email, setEmail] = useState("");
   const [nickname, setNickname] = useState("");
   const [password, setPassword] = useState("");
@@ -15,7 +20,15 @@ const SignUp: React.FC = () => {
   const allowConfirm = email.length > 0 && nickname.length > 0 && password.length > 0;
 
   useEffect(() => {
-    userService.doSignOut();
+    if (disallowSignUp) {
+      return navigate("/auth", {
+        replace: true,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    api.signout();
   }, []);
 
   const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -41,7 +54,7 @@ const SignUp: React.FC = () => {
     try {
       actionBtnLoadingState.setLoading();
       await api.signup(email, nickname, password);
-      const user = await userService.doSignIn();
+      const user = await userStore.fetchCurrentUser();
       if (user) {
         navigate("/", {
           replace: true,