로그인 구현

src/routes/(fullscreen)/login/+page.svelte

@@ -1,6 +1,18 @@
 <script lang="ts">
   import { Button, TextButton } from "$lib/components/buttons";
   import { TextInput } from "$lib/components/inputs";
+  import { requestLogin } from "./service";
+
+  let email = $state("");
+  let password = $state("");
+
+  const login = async () => {
+    // TODO: Validation
+
+    const ok = await requestLogin(email, password);
+
+    // TODO: Action
+  };
 </script>
 
 <svelte:head>
@@ -14,13 +26,13 @@
       <p>서비스를 이용하려면 로그인을 해야해요.</p>
     </div>
     <div class="mt-4 flex flex-col gap-y-2">
-      <TextInput placeholder="이메일" />
-      <TextInput placeholder="비밀번호" type="password" />
+      <TextInput bind:value={email} placeholder="이메일" />
+      <TextInput bind:value={password} placeholder="비밀번호" type="password" />
     </div>
   </div>
   <div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2">
     <div class="w-full">
-      <Button>로그인</Button>
+      <Button onclick={login}>로그인</Button>
     </div>
     <div class="w-fit">
       <TextButton>계정이 없어요</TextButton>

src/routes/(fullscreen)/login/service.ts

@@ -0,0 +1,21 @@
+import { callAPI } from "$lib/hooks";
+import { accessToken } from "$lib/stores/auth";
+
+export const requestLogin = async (email: string, password: string) => {
+  const res = await callAPI("/api/auth/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) {
+    return false;
+  }
+
+  const data = await res.json();
+  const token = data.accessToken as string;
+
+  accessToken.set(token);
+  return true;
+};