프론트엔드 통합 (React, Angular)

npm create vite@latest collaborative-code-editor-frontend -- --template react-ts
cd collaborative-code-editor-frontend
npm install
npm install axios react-router socket.io-client monaco-editor @monaco-editor/react

import axios from 'axios';

// 배포할 때는 .env 파일의 VITE_API_URL로 백엔드 주소를 바꿉니다.
export const API_URL: string = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';

const api = axios.create({ baseURL: API_URL });

// 요청마다 localStorage의 토큰을 Authorization 헤더에 붙입니다.
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 로그인 요청이 아닌 요청이 401을 받으면 토큰을 지우고 로그인 화면으로 보냅니다.
api.interceptors.response.use(
  (response) => response,
  (error: unknown) => {
    if (
      axios.isAxiosError(error) &&
      error.response?.status === 401 &&
      error.config?.url !== '/auth/login'
    ) {
      localStorage.removeItem('accessToken');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  },
);

// Nest의 오류 응답은 message가 문자열이거나, DTO 검증 오류일 때 문자열 배열입니다.
export function getErrorMessage(error: unknown, fallback: string): string {
  if (axios.isAxiosError<{ message?: string | string[] }>(error)) {
    const message = error.response?.data?.message;
    if (Array.isArray(message)) return message.join(', ');
    if (message) return message;
  }
  return fallback;
}

export default api;

import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
import api from '../api/axiosInstance';

export interface UserProfile {
  id: string;
  email: string;
  nickname: string | null;
  createdAt: string;
  updatedAt: string;
}

interface AuthContextValue {
  user: UserProfile | null;
  isAuthenticated: boolean;
  loading: boolean;
  login: (token: string) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextValue | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<UserProfile | null>(null);
  // 저장된 토큰이 있으면 프로필을 확인할 때까지 로딩 상태로 시작합니다.
  const [loading, setLoading] = useState(() => localStorage.getItem('accessToken') !== null);

  useEffect(() => {
    if (!localStorage.getItem('accessToken')) return;
    api
      .get<UserProfile>('/auth/profile')
      .then(({ data }) => setUser(data))
      .catch(() => {
        localStorage.removeItem('accessToken');
        setUser(null);
      })
      .finally(() => setLoading(false));
  }, []);

  const login = async (token: string) => {
    localStorage.setItem('accessToken', token);
    try {
      // 프로필 조회가 성공한 뒤에만 로그인 상태가 됩니다.
      const { data } = await api.get<UserProfile>('/auth/profile');
      setUser(data);
    } catch (error) {
      localStorage.removeItem('accessToken');
      throw error;
    }
  };

  const logout = () => {
    localStorage.removeItem('accessToken');
    setUser(null);
  };

  return (
    <AuthContext value={{ user, isAuthenticated: user !== null, loading, login, logout }}>
      {children}
    </AuthContext>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

import type { ReactNode } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router';
import { AuthProvider, useAuth } from './context/AuthContext';
import EditorPage from './pages/EditorPage';
import LoginPage from './pages/LoginPage';
import ProjectsPage from './pages/ProjectsPage';
import RegisterPage from './pages/RegisterPage';

// 로그인하지 않았으면 로그인 화면으로 보냅니다.
function PrivateRoute({ children }: { children: ReactNode }) {
  const { isAuthenticated, loading } = useAuth();
  if (loading) return <p>Loading...</p>;
  return isAuthenticated ? children : <Navigate to="/login" replace />;
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
          <Route path="/" element={<PrivateRoute><ProjectsPage /></PrivateRoute>} />
          <Route
            path="/project/:projectId"
            element={<PrivateRoute><EditorPage /></PrivateRoute>}
          />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}

import { useState } from 'react';
import { Link, useNavigate } from 'react-router';
import api, { getErrorMessage } from '../api/axiosInstance';
import { useAuth } from '../context/AuthContext';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const { login } = useAuth();
  const navigate = useNavigate();

  const submit = async () => {
    setSubmitting(true);
    setError('');
    try {
      const { data } = await api.post<{ accessToken: string }>('/auth/login', { email, password });
      await login(data.accessToken);
      await navigate('/');
    } catch (err) {
      setError(getErrorMessage(err, 'Login failed'));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <main>
      <h2>Login</h2>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          void submit();
        }}
      >
        <label>
          Email
          <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
        </label>
        <label>
          Password
          <input
            type="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            required
          />
        </label>
        <button type="submit" disabled={submitting}>Login</button>
      </form>
      {error && <p role="alert">{error}</p>}
      <p>
        No account yet? <Link to="/register">Register here</Link>
      </p>
    </main>
  );
}

import { useState } from 'react';
import { Link, useNavigate } from 'react-router';
import api, { getErrorMessage } from '../api/axiosInstance';

export default function RegisterPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const navigate = useNavigate();

  const submit = async () => {
    setSubmitting(true);
    setError('');
    try {
      // 닉네임은 선택 값이므로 비워 두면 보내지 않습니다.
      await api.post('/auth/register', { email, password, ...(nickname ? { nickname } : {}) });
      await navigate('/login');
    } catch (err) {
      setError(getErrorMessage(err, 'Registration failed'));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <main>
      <h2>Register</h2>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          void submit();
        }}
      >
        <label>
          Email
          <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
        </label>
        <label>
          Password
          <input
            type="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            minLength={6}
            required
          />
        </label>
        <label>
          Nickname
          <input value={nickname} onChange={(event) => setNickname(event.target.value)} />
        </label>
        <button type="submit" disabled={submitting}>Register</button>
      </form>
      {error && <p role="alert">{error}</p>}
      <p>
        Already registered? <Link to="/login">Log in</Link>
      </p>
    </main>
  );
}