프론트엔드 애플리케이션 개발

mkdir -p packages/client && cd packages/client
npm create vite@latest . -- --template react-ts
npm install
npm install --save-exact [email protected] [email protected] [email protected]

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: { port: 3000, strictPort: true },
});

VITE_API_BASE_URL=http://localhost:4100

export interface PublicUserDto {
  id: number;
  email: string;
  name: string;
}

export interface CreateUserDto {
  email: string;
  password: string;
  name: string;
}

export type LoginCredentials = Pick<CreateUserDto, "email" | "password">;

export interface LoginResponseDto {
  accessToken: string;
}

export type { CreateUserDto, LoginCredentials, LoginResponseDto, PublicUserDto } from "./interfaces/user";

import axios from "axios";

const configuredUrl = import.meta.env.VITE_API_BASE_URL;
if (typeof configuredUrl !== "string" || configuredUrl.trim() === "") {
  throw new Error(".env의 VITE_API_BASE_URL을 확인해 주세요.");
}

const apiUrl = new URL(configuredUrl.trim());
if (apiUrl.protocol !== "http:" && apiUrl.protocol !== "https:") {
  throw new Error("API 주소는 http 또는 https URL이어야 합니다.");
}

export const apiClient = axios.create({
  baseURL: apiUrl.href.replace(/\/$/, ""),
  timeout: 5000,
});

import axios from "axios";
import type { CreateUserDto, LoginCredentials, LoginResponseDto, PublicUserDto } from "@shared/index";
import { apiClient } from "./apiClient";

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}

function parsePublicUser(value: unknown): PublicUserDto {
  if (
    !isRecord(value) ||
    typeof value.id !== "number" || !Number.isSafeInteger(value.id) || value.id <= 0 ||
    typeof value.email !== "string" || typeof value.name !== "string"
  ) {
    throw new Error("사용자 응답의 id, email, name을 확인해 주세요.");
  }
  return { id: value.id, email: value.email, name: value.name };
}

function parseLogin(value: unknown): LoginResponseDto {
  if (!isRecord(value) || typeof value.accessToken !== "string" || value.accessToken.trim() === "") {
    throw new Error("로그인 응답의 accessToken을 확인해 주세요.");
  }
  return { accessToken: value.accessToken };
}

export function isUnauthorized(error: unknown): boolean {
  return axios.isAxiosError(error) && error.response?.status === 401;
}

export function requestErrorMessage(error: unknown): string {
  if (axios.isAxiosError(error)) {
    if (!error.response) {
      return "서버 연결을 확인해 주세요. API 주소, 서버 상태, CORS를 먼저 확인합니다.";
    }
    const data: unknown = error.response.data;
    if (isRecord(data)) {
      if (typeof data.message === "string") return data.message;
      if (Array.isArray(data.message)) {
        const messages = data.message.filter((value): value is string => typeof value === "string");
        if (messages.length > 0) return messages.join(" ");
      }
    }
    return `요청이 거절되었습니다. HTTP ${error.response.status} 응답을 확인해 주세요.`;
  }
  return error instanceof Error ? error.message : "응답을 확인하지 못했습니다.";
}

export const authService = {
  async register(payload: CreateUserDto): Promise<PublicUserDto> {
    const response = await apiClient.post<unknown>("/auth/register", payload);
    return parsePublicUser(response.data);
  },

  async login(credentials: LoginCredentials): Promise<string> {
    const response = await apiClient.post<unknown>("/auth/login", credentials);
    return parseLogin(response.data).accessToken;
  },

  async getProfile(token: string): Promise<PublicUserDto> {
    const response = await apiClient.get<unknown>("/auth/profile", {
      headers: { Authorization: `Bearer ${token}` },
    });
    return parsePublicUser(response.data);
  },
};

import { create } from "zustand";
import type { LoginCredentials, PublicUserDto } from "@shared/index";
import { authService, isUnauthorized, requestErrorMessage } from "../services/authService";

type SessionStatus = "checking" | "anonymous" | "authenticated" | "error";

interface AuthState {
  user: PublicUserDto | null;
  token: string | null;
  status: SessionStatus;
  error: string | null;
  login: (credentials: LoginCredentials) => Promise<boolean>;
  fetchUser: () => Promise<void>;
  logout: () => void;
}

const savedToken = localStorage.getItem("token");
let requestVersion = 0;

export const useAuthStore = create<AuthState>()((set, get) => ({
  user: null,
  token: savedToken,
  status: savedToken ? "checking" : "anonymous",
  error: null,

  login: async (credentials) => {
    const version = ++requestVersion;
    localStorage.removeItem("token");
    set({ token: null, user: null, status: "checking", error: null });
    let receivedToken = false;
    try {
      const token = await authService.login(credentials);
      receivedToken = true;
      const user = await authService.getProfile(token);
      if (version !== requestVersion) return false;
      localStorage.setItem("token", token);
      set({ token, user, status: "authenticated", error: null });
      return true;
    } catch (error: unknown) {
      if (version !== requestVersion) return false;
      const message = isUnauthorized(error)
        ? receivedToken
          ? "발급받은 토큰을 서버가 받아들이지 않았습니다. 서버의 인증 설정을 확인해 주세요."
          : "이메일 또는 비밀번호를 확인해 주세요."
        : requestErrorMessage(error);
      set({ token: null, user: null, status: "anonymous", error: message });
      return false;
    }
  },

  fetchUser: async () => {
    const token = get().token;
    const version = ++requestVersion;
    if (!token) {
      set({ user: null, status: "anonymous", error: null });
      return;
    }
    set({ user: null, status: "checking", error: null });
    try {
      const user = await authService.getProfile(token);
      if (version !== requestVersion) return;
      set({ user, status: "authenticated", error: null });
    } catch (error: unknown) {
      if (version !== requestVersion) return;
      if (isUnauthorized(error)) {
        localStorage.removeItem("token");
        set({ token: null, user: null, status: "anonymous", error: "다시 로그인해 주세요." });
      } else {
        set({ user: null, status: "error", error: requestErrorMessage(error) });
      }
    }
  },

  logout: () => {
    ++requestVersion;
    localStorage.removeItem("token");
    set({ token: null, user: null, status: "anonymous", error: null });
  },
}));

import { useState } from "react";
import type { FormEvent } from "react";
import { Link } from "react-router";
import { authService, requestErrorMessage } from "../services/authService";

export default function RegisterPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setBusy(true);
    setMessage("");
    setError("");
    try {
      const user = await authService.register({ name, email, password });
      setPassword("");
      setMessage(`${user.email} 계정을 만들었습니다. 이제 로그인해 주세요.`);
    } catch (err: unknown) {
      setError(requestErrorMessage(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <main>
      <h1>회원가입</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="register-name">이름</label>
        <input id="register-name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" required />
        <label htmlFor="register-email">이메일</label>
        <input id="register-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" required />
        <label htmlFor="register-password">비밀번호</label>
        <input id="register-password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" minLength={8} required />
        <button type="submit" disabled={busy}>{busy ? "가입 중…" : "회원가입"}</button>
      </form>
      {message && <p role="status">{message}</p>}
      {error && <p role="alert">{error}</p>}
      <p><Link to="/login">로그인으로 이동</Link></p>
    </main>
  );
}

import { useState } from "react";
import type { FormEvent } from "react";
import { Link, Navigate } from "react-router";
import { useAuthStore } from "../store/authStore";

export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const login = useAuthStore((state) => state.login);
  const status = useAuthStore((state) => state.status);
  const error = useAuthStore((state) => state.error);

  if (status === "authenticated") return <Navigate to="/profile" replace />;

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await login({ email, password });
  }

  return (
    <main>
      <h1>로그인</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="login-email">이메일</label>
        <input id="login-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" required />
        <label htmlFor="login-password">비밀번호</label>
        <input id="login-password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" required />
        <button type="submit" disabled={status === "checking"}>{status === "checking" ? "확인 중…" : "로그인"}</button>
      </form>
      {error && <p role="alert">{error}</p>}
      <p><Link to="/register">회원가입으로 이동</Link></p>
    </main>
  );
}

import { useAuthStore } from "../store/authStore";

export default function UserProfilePage() {
  const user = useAuthStore((state) => state.user);
  const logout = useAuthStore((state) => state.logout);
  if (!user) return null;

  return (
    <main>
      <h1>내 프로필</h1>
      <dl>
        <dt>사용자 번호</dt>
        <dd>{user.id}</dd>
        <dt>이메일</dt>
        <dd>{user.email}</dd>
        <dt>이름</dt>
        <dd>{user.name}</dd>
      </dl>
      <button onClick={logout}>로그아웃</button>
    </main>
  );
}

import { useEffect } from "react";
import type { ReactNode } from "react";
import { BrowserRouter, Link, Navigate, Route, Routes } from "react-router";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import UserProfilePage from "./pages/UserProfilePage";
import { useAuthStore } from "./store/authStore";

function PrivateRoute({ children }: { children: ReactNode }) {
  const status = useAuthStore((state) => state.status);
  const user = useAuthStore((state) => state.user);
  const error = useAuthStore((state) => state.error);
  const fetchUser = useAuthStore((state) => state.fetchUser);
  const logout = useAuthStore((state) => state.logout);

  if (status === "checking") return <p role="status">세션을 확인하고 있습니다.</p>;
  if (status === "error") {
    return (
      <main>
        <h1>프로필을 확인하지 못했습니다</h1>
        <p role="alert">{error}</p>
        <button onClick={() => void fetchUser()}>다시 확인</button>
        <button onClick={logout}>로그아웃</button>
      </main>
    );
  }
  if (status !== "authenticated" || !user) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

export default function App() {
  const fetchUser = useAuthStore((state) => state.fetchUser);
  useEffect(() => {
    void fetchUser();
  }, [fetchUser]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/profile" replace />} />
        <Route path="/register" element={<RegisterPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/profile" element={<PrivateRoute><UserProfilePage /></PrivateRoute>} />
        <Route path="*" element={<main><h1>페이지를 찾을 수 없습니다</h1><Link to="/profile">프로필로 이동</Link></main>} />
      </Routes>
    </BrowserRouter>
  );
}