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

# packages/client에서 실행
npm create vite@latest . -- --template react-ts
npm install
npm install axios zustand react-router

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 {
  PublicUserDto,
  CreateUserDto,
  LoginCredentials,
  LoginResponseDto,
} from './interfaces/user';

{
  "baseUrl": ".",
  "paths": {
    "@shared/*": ["../shared/src/*"]
  }
}

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 (error: unknown) {
      setError(requestErrorMessage(error));
    } finally {
      setBusy(false);
    }
  }

  return (
    <main>
      <h1>회원가입</h1>
      <form onSubmit={handleSubmit}>
        <p>
          <label htmlFor="register-name">이름</label>
          <input id="register-name" value={name} onChange={(e) => setName(e.target.value)}
            autoComplete="name" required />
        </p>
        <p>
          <label htmlFor="register-email">이메일</label>
          <input id="register-email" type="email" value={email}
            onChange={(e) => setEmail(e.target.value)} autoComplete="email" required />
        </p>
        <p>
          <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 />
        </p>
        <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}>
        <p>
          <label htmlFor="login-email">이메일</label>
          <input id="login-email" type="email" value={email}
            onChange={(e) => setEmail(e.target.value)} autoComplete="email" required />
        </p>
        <p>
          <label htmlFor="login-password">비밀번호</label>
          <input id="login-password" type="password" value={password}
            onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" required />
        </p>
        <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>
  );
}