✨ Implement sign in

package.json

@@ -12,6 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.3",
     "axios": "^1.5.1",
     "classnames": "^2.3.1",
     "lz-string": "^1.5.0",
@@ -20,6 +21,7 @@
     "react-copy-to-clipboard": "^5.0.3",
     "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.49.2",
     "react-query": "^3.39.3",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.2.0",

src/api/endpoints/auth.ts

@@ -0,0 +1,18 @@
+import { auth, syncroom } from "@/common/axios";
+
+export const login = async (username: string, password: string) => {
+  const {
+    data: { key },
+  } = await auth.post<{
+    key: string;
+  }>("/login", { username, password });
+
+  const credentials = await syncroom.get<{
+    token: string;
+    refreshToken: string;
+  }>("/token", {
+    params: { key },
+  });
+
+  return credentials.data;
+};

src/api/hooks/auth.ts

@@ -0,0 +1,15 @@
+import { useMutation } from "react-query";
+import { login } from "@/api/endpoints/auth";
+
+export const useAuth = () =>
+  useMutation<
+    {
+      token: string;
+      refreshToken: string;
+    },
+    unknown,
+    {
+      username: string;
+      password: string;
+    }
+  >(({ username, password }) => login(username, password));

src/common/axios/auth.ts

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const auth = axios.create({
+  baseURL: "https://auth.syncroom.link/api",
+});

src/common/axios/index.ts

@@ -0,0 +1,2 @@
+export * from "./auth";
+export * from "./syncroom";

src/common/axios/syncroom.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+import { useAuthStore } from "@/store/auth";
+
+const syncroom = axios.create({
+  baseURL: "https://webapi.syncroom.appservice.yamaha.com/comm",
+});
+
+syncroom.interceptors.request.use(config => {
+  const { token } = useAuthStore.getState();
+  config.headers["Authorization"] = token;
+  return config;
+});
+
+export { syncroom };

src/components/pages/SignInPage.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAuthStore } from "@/store/auth";
+import { useAuth } from "@/api/hooks/auth";
+
+const signInSchema = z.object({
+  username: z.string().email(),
+  password: z.string().min(1),
+});
+
+export const SignInPage: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid, errors, isSubmitting },
+  } = useForm<{
+    username: string;
+    password: string;
+  }>({ mode: "onTouched", resolver: zodResolver(signInSchema) });
+  const setTokens = useAuthStore(state => state.setTokens);
+  const { mutateAsync, data, isLoading } = useAuth();
+
+  const onSubmit = handleSubmit(data => mutateAsync(data));
+
+  useEffect(() => {
+    if (data) setTokens(data);
+  }, [data, setTokens]);
+
+  return (
+    <main>
+      <h1>Login</h1>
+
+      <form onSubmit={onSubmit}>
+        <input type="text" {...register("username")} />
+        {errors.username && <span>이메일 주소를 입력해 주세요</span>}
+        <input type="password" {...register("password")} />
+        {errors.password && <span>비밀번호를 입력해 주세요</span>}
+        <input type="submit" value="로그인" disabled={!isValid} />
+        {isLoading && <span>로딩중...</span>}
+        {isSubmitting && <span>제출중...</span>}
+      </form>
+    </main>
+  );
+};

src/components/pages/index.ts

@@ -0,0 +1 @@
+export * from "./SignInPage";

src/main.tsx

@@ -22,6 +22,8 @@ import Modal from "./components/Modal";
 import Sidebar from "./components/Sidebar";
 import { QueryClient, QueryClientProvider } from "react-query";
 
+import { SignInPage } from "@/components/pages";
+
 const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
 
 const queryClient = new QueryClient();
@@ -33,6 +35,7 @@ ReactDOM.render(
         <Router>
           <Switch>
             <Route exact path="/" component={Home} />
+            <Route path="/login" component={SignInPage} />
             <Route path="/join" component={Join} />
             <Route path="/notice" component={Notice} />
             <Route path="/buymeacoffee" component={Donate} />

src/store/auth.ts

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+interface AuthStore {
+  token?: string;
+  refreshToken?: string;
+  setTokens: (credentials: { token: string; refreshToken: string }) => void;
+  refreshTokens: () => void;
+}
+
+export const useAuthStore = create(
+  persist<AuthStore>(
+    set => ({
+      token: undefined,
+      refreshToken: undefined,
+      setTokens: tokens => set(tokens),
+      refreshTokens: () => {
+        /* TODO */
+      },
+    }),
+    { name: "auth", storage: createJSONStorage(() => localStorage) },
+  ),
+);

yarn.lock

@@ -1539,6 +1539,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@hookform/resolvers@^3.3.3":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.3.tgz#a90c786e5564e58a029d157347e1f2965d02e64f"
+  integrity sha512-bOMxKkSD3zWcS11TKoUQ8O0ZqKslFohvUsPKSrdCHiuEuMjRo/u3cq9YRJD/+xtNGYup++XD2LkjhegP5XENiw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@@ -9859,6 +9864,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-hook-form@^7.49.2:
+  version "7.49.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.49.2.tgz#6fb2742e1308020f26cb1915c7012b6c07b11ade"
+  integrity sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"