Next.js의 프로젝트를 구성할 때 나만의 기준

📦example
 ┣ 📂api
 ┃ ┗ 📂auth
 ┃ ┃ ┣ 📜constants.ts
 ┃ ┃ ┣ 📜requests.ts
 ┃ ┃ ┣ 📜queries.ts
 ┃ ┃ ┗ 📜types.ts
 ┣ 📂app
 ┃ ┣ 📂(auth)
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂sign-up
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📜layout.tsx
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂components
 ┃ ┣ 📂FullScreen
 ┃ ┃ ┣ 📂parts
 ┃ ┃ ┃ ┗ 📜Body.tsx
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┣ 📜types.ts
 ┃ ┃ ┗ 📜utils.ts
 ┃ ┣ 📂MultiStepForm
 ┃ ┃ ┣ 📂contexts
 ┃ ┃ ┃ ┗ 📜MultiStepContext.ts
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┃ ┗ 📜useMultiStepContext.ts
 ┃ ┃ ┣ 📂parts
 ┃ ┃ ┃ ┗ 📜FormContent.tsx
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜types.ts
 ┃ ┗ 📜index.tsx
 ┣ 📂lib
 ┃ ┣ 📜axios.ts
 ┃ ┗ 📜query-client.ts
 ┣ 📂providers
 ┃ ┣ 📜AuthProvider.tsx
 ┃ ┣ 📜QueryProvider.tsx
 ┃ ┗ 📜auth-ready-context.ts
 ┣ 📂styles
 ┃ ┣ 📂fonts
 ┃ ┃ ┣ 📜PretendardJPVariable.woff2
 ┃ ┃ ┣ 📜PretendardVariable.woff2
 ┃ ┃ ┗ 📜index.ts
 ┃ ┗ 📜globals.css
 ┣ 📜.env.local
 ┣ 📜.gitignore
 ┣ 📜AGENTS.md
 ┣ 📜CLAUDE.
 ┣ 📜.
 ┣ 📜eslint..
 ┣ 📜next-env..
 ┣ 📜next..
 ┣ 📜package.
 ┣ 📜postcss..
 ┗ 📜yarn.

📂api
 ┣ 📂auth
 ┃ ┣ 📜constants.ts   // 공통 상수 (BaseURL, enum 등)
 ┃ ┣ 📜types.ts       // 요청·응답 타입
 ┃ ┣ 📜requests.ts    // 순수 요청단 (Axios만)
 ┃ ┗ 📜queries.ts     // 서버 상태 관리 (TanStack Query)

// api/auth/requests.ts
import { api, setAccessToken } from "@/lib/axios";
import { AUTH_BASE } from "./constants";
import type { AuthLoginRequest, AuthLoginResponse } from "./types";

// POST /api/v1/web/auth/login — 이메일 로그인
export async function loginWithEmail(body: AuthLoginRequest) {
  const { data } = await api.post<AuthLoginResponse>(`${AUTH_BASE}/login`, body);
  setAccessToken(data.session.access_token);
  return data;
}

// GET /api/v1/web/auth/me — 현재 로그인 사용자 조회
export async function getMyInfo(): Promise<AuthMyInfoResponse | null> {
  const { data } = await api.get<AuthMyInfoResponse>(`${AUTH_BASE}/me`);
  return data;
}

// api/auth/queries.ts
import {
  queryOptions,
  useMutation,
  useQuery,
  useQueryClient,
} from "@tanstack/react-query";
import { getMyInfo, loginWithEmail } from "./requests";

// 1) 쿼리 키 팩토리
export const authKeys = {
  all: ["auth"] as const,
  me: () => [...authKeys.all, "me"] as const,
};

// 2) queryOptions — 유저 정보는 login/logout/refresh로만 갱신하므로 자동 refetch 금지
export const myInfoQueryOptions = queryOptions({
  queryKey: authKeys.me(),
  queryFn: getMyInfo,
  staleTime: Infinity,
});

// 3) 훅 — 컴포넌트는 이 훅만 가져다 쓴다
export function useMyInfoQuery() {
  return useQuery(myInfoQueryOptions);
}

export function useEmailLoginMutation() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: loginWithEmail, // ← requests.ts의 순수 함수를 그대로 주입
    onSuccess: (data) => (queryClient, data),
  });
}

authKeys.all   // ["auth"]
authKeys.me()  // ["auth", "me"]

// 다른 도메인은 최상위 키만 다르게 두면 끝
export const userKeys = {
  all: ["user"] as const, // ← "auth"와 겹치지 않으니 격리된다
  detail: (id: string) => [...userKeys.all, "detail", id] as const,
};

📂app
 ┣ 📂(auth)
 ┃ ┣ 📂login
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂sign-up
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┗ 📜layout.tsx      // login·sign-up 공통 레이아웃
 ┣ 📜favicon.ico
 ┣ 📜layout.tsx        // 루트 레이아웃 (html/body, Provider, 폰트)
 ┗ 📜page.tsx          // 홈 (/)

// app/layout.tsx
import "@/styles/globals.css";
import { pretendard, pretendardJP } from "@/styles/fonts";
import { AuthProvider } from "@/providers/AuthProvider";
import { QueryProvider } from "@/providers/QueryProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={`${pretendard.variable} ${pretendardJP.variable} h-full antialiased`}>
      <body className="min-h-full flex flex-col">
        <QueryProvider>
          <AuthProvider>{children}</AuthProvider>
        </QueryProvider>
      </body>
    </html>
  );
}

// app/(auth)/layout.tsx
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <main className="flex flex-1 items-center justify-center px-4 py-12">
      <div className="w-full max-w-sm">{children}</div>
    </main>
  );
}

// app/page.tsx
import { redirect } from "next/navigation";
import { UserInfoCard } from "@/components/UserInfoCard";

export default async function Home({
  searchParams,
}: {
  searchParams: Promise<{ error?: string | string[] }>;
}) {
  // OAuth 실패 시 백엔드가 이 페이지로 ?error=<코드>를 붙여 돌려보낸다
  const { error } = await searchParams;
  const oauthError = Array.isArray(error) ? error[0] : error;
  if (oauthError) {
    redirect(`/login?error=${encodeURIComponent(oauthError)}`);
  }

  return (
    <main className="flex flex-1 flex-col items-center justify-center gap-6 px-4 py-12">
      <h1 className="text-2xl font-bold">IInfo DX</h1>
      <UserInfoCard />
    </main>
  );
}

📂components
 ┣ 📂FullScreen
 ┃ ┣ 📂parts // 특정 컴포넌트 내 보조 컴포넌트
 ┃ ┃ ┗ 📜Body.tsx
 ┃ ┣ 📜index.tsx // 컴포넌트의 메인
 ┃ ┣ 📜types.ts // 컴포넌트 내부 타입
 ┃ ┗ 📜utils.ts // 컴포넌트 내부 유틸 함수 (인증 분기 등)
 ┗ 📂MultiStepForm
   ┣ 📂contexts // 특정 컴포넌트 내부에서만 사용하는 Context
   ┃ ┗ 📜MultiStepContext.ts
   ┣ 📂hooks // 특정 컴포넌트에서만 사용하는 Hooks
   ┃ ┗ 📜useMultiStepContext.ts
   ┣ 📂parts
   ┃ ┗ 📜FormContent.tsx
   ┣ 📜index.tsx
   ┗ 📜types.ts

// components/FullScreen/index.tsx
import { useNavigation, useRoute } from "@react-navigation/native";
import type { ColorToken } from "@ubittz/native-design-system";
import {
  BottomNavigation,
  useDesignSystem,
  usePopup,
} from "@ubittz/native-design-system";
import React, { cloneElement, useMemo } from "react";
import { KeyboardAvoidingView, Platform, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import Body from "@@/components/FullScreen/parts/Body";
import type { FullScreenProps } from "@@/components/FullScreen/types";
import {
  getAuthScreenNames,
  getTabRoutesLazy,
} from "@@/components/FullScreen/utils";
import { SCREENS } from "@@/router/constants";
import type {
  ,
  ,
}  ;
 { useAppState }  ;
 { cn }  ;

 () {
   { bottom } = ();
   { brandPrimaryBaseLevel } = ();
   brandPrimaryColor =
      ;
   nav = useNavigation<>();
   route = ();

   safeEdges = (
     (navigation ? edges.( e !== ) : edges),
    [navigation, edges],
  );

   navigationItems = (
    
      ().( {
         inactiveIcon = r.!.;
         activeIcon = r.!. ?? r.!.;
         {
          : r.,
          : (inactiveIcon, {
            : ,
          }  <, >),
          : (activeIcon, {
            : brandPrimaryColor,
          }  <, >),
          : r.!.,
        };
      }),
    [brandPrimaryColor],
  );

   { token } = ( state.);
   isAuthenticated = !!token;
   { showPopup, hidePopup } = ();
   currentTab = route.;

    = () => {
     (value === currentTab) ;

     (!isAuthenticated && ().(value)) {
      ({
        : ,
        : [
          {
            : ,
            : ,
            : hidePopup,
          },
          {
            : ,
            :  {
              ();
              nav.(.  );
            },
          },
        ],
      });
      ;
    }

    nav.({
      : ,
      : [{ : value  keyof  }],
    });
  };

   (
    
  );
}

. = ;

  ;

// components/FullScreen/parts/Body.tsx
import React from "react";
import { RefreshControl, ScrollView, View } from "react-native";

import type { FullScreenBodyProps } from "@@/components/FullScreen/types";
import { cn } from "@@/utils/cn";

function Body({
  children,
  className,
  disableScroll,
  refreshing,
  onRefresh,
  ...props
}: FullScreenBodyProps) {
  if (disableScroll) {
    return (
      <View className={cn("flex-1", className)} {...props}>
        {children}
      </View>
    );
  }

  return (
    <ScrollView
      className={cn("flex-1", className)}
      contentContainerStyle={{ flexGrow: 1 }}
      keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={false}
      refreshControl={
         ? (
          <
            = ?? }
            =
          />
        ) : undefined
      }
      {...props}
    >
      {children}
    
  );
}

  ;

// components/FullScreen/types.ts
import type { ReactNode } from "react";
import type { ViewProps } from "react-native";

export type SafeAreaEdge = "top" | "left" | "right" | "bottom";

export interface FullScreenProps extends ViewProps {
  children: ReactNode;
  /** true이면 하단 바텀 네비게이션 표시 */
  navigation?: boolean;
  /** 배경색. 미지정 시 #fff */
  backgroundColor?: string;
  /**
   * safe area 적용할 방향. navigation=true이면 bottom 자동 제외.
   * 가급적 기본값을 사용하고 꼭 필요한 경우에만 명시.
   * AI 에이전트는 이 프롭을 명시하지 말 것.
   */
  edges?: SafeAreaEdge[];
}

export interface FullScreenBodyProps extends ViewProps {
  children: ReactNode;
  /** true이면 ScrollView 대신 일반 View 사용 */
  disableScroll?: boolean;
  /** pull-to-refresh 진행 중 여부 */
  refreshing?: boolean;
  /** pull-to-refresh 콜백 */
  onRefresh?:  ;
}

// components/FullScreen/utils.ts
import { appRoutes } from "@@/router/routes";
import { flattenRoutes, getTabRoutes } from "@@/router/utils";

/**
 * factory를 최초 호출 시 한 번만 실행하고 결과를 캐싱한다.
 * (let 없이 객체 변이로 지연 초기화 구현)
 */
function once<T>(factory: () => T): () => T {
  const cache: { computed: boolean; value?: T } = { computed: false };
  return () => {
    if (!cache.computed) {
      cache.value = factory();
      cache.computed = true;
    }
    return cache.value as T;
  };
}

/** AUTHENTICATED 스크린 이름 집합 (지연 계산 + 캐싱) */
export const getAuthScreenNames = once(
  () =>
    new Set(
      flattenRoutes(appRoutes)
        .filter((r) => r.authType === "AUTHENTICATED")
        .map((r) => r.screenName),
    ),
);

/** 탭 네비게이션 라우트 목록 (지연 계산 + 캐싱) */
export  getTabRoutesLazy = ( (appRoutes));

📂MultiStepForm
 ┣ 📂contexts // 이 컴포넌트 안에서만 쓰는 Context
 ┃ ┗ 📜MultiStepContext.ts
 ┣ 📂hooks // 이 컴포넌트 안에서만 쓰는 Hook
 ┃ ┗ 📜useMultiStepContext.ts
 ┣ 📂parts
 ┃ ┗ 📜FormContent.tsx
 ┣ 📜index.tsx
 ┗ 📜types.ts

// components/MultiStepForm/index.tsx
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { Formik } from "formik";
import { useCallback, useRef, useState } from "react";
import { BackHandler } from "react-native";

import MultiStepContext from "@@/components/MultiStepForm/contexts/MultiStepContext";
import FormContent from "@@/components/MultiStepForm/parts/FormContent";
import { MultiStepFormProps } from "@@/components/MultiStepForm/types";

function MultiStepForm<T>({
  headerTitle,
  steps,
  initialValues,
  onSubmit,
}: MultiStepFormProps<T>) {
  const navigation = useNavigation();
  const [currentStep, setCurrentStep] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const onNextPressRef = useRef<(values: T) => void>(() => {});

  const goNext = () => setCurrentStep(currentStep + );
    = () => (currentStep - );

  
  (
    ( {
        = () => {
         (currentStep === ) {
          navigation.();
           ;
        }
        (currentStep - );
         ;
      };

       subscription = .(
        ,
        onBackPress,
      );
        subscription.();
    }, [currentStep]),
  );

   (
    
  );
}

  ;

// components/MultiStepForm/parts/FormContent.tsx
import { useNavigation } from "@react-navigation/native";
import {
  Button,
  Round,
  TopNavigation,
  Typography,
} from "@ubittz/native-design-system";
import { useFormikContext } from "formik";
import { useEffect } from "react";
import { Keyboard, Pressable, ScrollView, View } from "react-native";

import BottomButtonContainer from "@@/components/BottomButtonContainer";
import { useMultiStepContext } from "@@/components/MultiStepForm/hooks/useMultiStepContext";
import { FormContentProps } from "@@/components/MultiStepForm/types";

function FormContent({ headerTitle, steps, currentStep }: FormContentProps) {
  const { handleSubmit, isValid, dirty, validateForm, setErrors, setTouched, values } =
    useFormikContext();
  const { goNext, goPrevious, onNextPress, isLoading } = useMultiStepContext();
  const navigation = useNavigation();

  const  = () => {
    .();
    
     (steps. -  === currentStep) {
      ();
      ;
    }
    
     (steps[currentStep].) {
      onNextPress?.(values);
      ;
    }
    ();
  };

    = () => {
     (currentStep === ) {
      navigation.();
      ;
    }
    ();
  };

  
  ( {
    ({});
    ({});
     timer = ( (), );
      (timer);
  }, [currentStep]);

   (
    
  );
}

  ;

// components/MultiStepForm/contexts/MultiStepContext.ts
import { Context, createContext } from "react";

import { MultiStepContextType } from "@@/components/MultiStepForm/types";

const MultiStepContext: Context<MultiStepContextType<any>> =
  createContext<MultiStepContextType<any>>({
    currentStep: 0,
    goNext: () => {},
    goPrevious: () => {},
    onNextPress: () => {},
    setOnNextPress: () => {},
    isLoading: false,
    setLoading: () => {},
  });

export default MultiStepContext;

// components/MultiStepForm/hooks/useMultiStepContext.ts
import { useContext, useEffect } from "react";

import MultiStepContext from "@@/components/MultiStepForm/contexts/MultiStepContext";
import { useMultiStepContextProps } from "@@/components/MultiStepForm/types";

export function useMultiStepContext<T>({
  onNextPress,
}: useMultiStepContextProps<T> = {}) {
  const context = useContext(MultiStepContext);

  useEffect(() => {
    if (onNextPress !== undefined) {
      context.setOnNextPress(onNextPress);
    }
  }, [onNextPress]);

  return context;
}

// components/MultiStepForm/types.ts
import { FormikValues } from "formik";
import { Schema } from "yup";

export interface MultiStepFormStep {
  title: string;
  description: string;
  component: React.ReactNode;
  schema?: Schema;
  preventDefaultNext?: boolean;
}

export interface MultiStepFormProps<T> {
  headerTitle: string;
  steps: MultiStepFormStep[];
  initialValues: FormikValues & T;
  onSubmit: (values: T) => void;
}

export interface FormContentProps {
  headerTitle: string;
  steps: MultiStepFormStep[];
  currentStep: number;
  setCurrentStep: (step: number) => void;
}

export interface <T> {
  : ;
  :  ;
  :  ;
  :  ;
  :  ;
  : ;
  :  ;
}

  useMultiStepContextProps<T> {
  ?:  ;
}

📂lib
 ┣ 📜axios.ts         // 공유 HTTP 인스턴스 + 401 자동 복구
 ┗ 📜query-client.ts  // 서버/브라우저용 QueryClient 팩토리

// lib/axios.ts
export const API_BASE_URL =
  process.env.NEXT_PUBLIC_API_URL ?? "<http://localhost:8000>";

export const api = axios.create({
  baseURL: API_BASE_URL,
  withCredentials: true, // 세션 쿠키를 모든 요청에 포함
  headers: { "Content-Type": "application/json" },
});

// /me 등 HTTPBearer 보호 엔드포인트용 access token (메모리 보관).
// 새로고침으로 사라지면 401 → refresh 인터셉터가 쿠키로 재발급받아 복구한다.
let accessToken: string | null = null;

export function setAccessToken(token: string | null) {
  accessToken = token;
}
export function getAccessToken() {
  return accessToken;
}

api.interceptors.request.use((config) => {
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
});

// lib/axios.ts
// 동시 다발 401에 대해 refresh 요청을 한 번만 보내기 위한 공유 프로미스
let refreshPromise: Promise<unknown> | null = null;

api.interceptors.response.use(
  (response) => response,
  async (error: AxiosError) => {
    const original = error.config as
      | (InternalAxiosRequestConfig & { _retried?: boolean })
      | undefined;

    const isAuthAttempt =
      original?.url === REFRESH_URL ||
      original?.url?.startsWith(LOGIN_URL_PREFIX);

    // 401이면 쿠키 기반 세션 갱신 후 원 요청을 1회 재시도한다.
    // 로그인/갱신 요청 자체의 401은 자격 증명 오류이므로 그대로 전파한다.
    if (
      error.response?.status === 401 &&
      original &&
      !original._retried &&
      !isAuthAttempt
    ) {
      refreshPromise ??= api
        .post<AuthRefreshResponse>(REFRESH_URL)
        .then((response) => setAccessToken(response.data.session.access_token))
        .finally( {
          refreshPromise = ;
        });

       {
         refreshPromise;
      }  {
         .(error);
      }

      original. = ;
       (original);
    }

     .(error);
  },
);

// lib/query-client.ts
function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
        // 4xx는 재시도해도 결과가 같으므로 중단한다.
        // (401은 axios 인터셉터가 refresh 후 1회 재시도까지 마친 최종 실패)
        retry: (failureCount, error) => {
          if (isAxiosError(error) && error.response && error.response.status < 500) {
            return false;
          }
          return failureCount < 3;
        },
      },
      dehydrate: {
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) || query.state.status === "pending",
      },
    },
  });
}

// lib/query-client.ts
let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (environmentManager.isServer()) {
    // 서버: 요청마다 항상 새 클라이언트
    return makeQueryClient();
  } else {
    // 브라우저: 최초 1회만 만들고 이후엔 그 인스턴스를 재사용
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

📂providers
 ┣ 📜QueryProvider.tsx      // QueryClient를 트리에 주입
 ┣ 📜AuthProvider.tsx       // 랜딩 시 세션 1회 복원
 ┗ 📜auth-ready-context.ts  // 부트스트랩 완료 여부 컨텍스트

// app/layout.tsx (다시 보기)
<QueryProvider>
  <AuthProvider>{children}</AuthProvider>
</QueryProvider>

// providers/QueryProvider.tsx
"use client";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { getQueryClient } from "@/lib/query-client";

export function QueryProvider({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

// providers/AuthProvider.tsx
"use client";
/*
랜딩 시 세션을 한 번 복원한다.
access token은 메모리에만 있어 새로고침하면 사라지므로, httpOnly refresh
쿠키로 /refresh를 1회 호출해 토큰을 되살리고 그 응답의 user로 me 캐시를 seed한다.
→ /me를 따로 조회하지 않아 랜딩 요청이 3회(/me→refresh→/me)에서 1회로 준다.
*/
export function AuthProvider({ children }: { children: ReactNode }) {
  const queryClient = useQueryClient();
  // 마운트 시 메모리에 이미 토큰이 있으면(로그인 직후 client 네비게이션) 곧바로 ready.
  const [ready, setReady] = useState(() => getAccessToken() !== null);

  useEffect(() => {
    if (ready) return;

    let active = true;
    refreshSession()
      .then((data) => seedMyInfo(queryClient, data))
      .catch(() =>
        // refresh 실패(쿠키 없음/만료) = 미로그인 확정
        queryClient.setQueryData<AuthMyInfoResponse | null>(authKeys.me(), null),
      )
      .finally(() => {
        if (active) setReady(true);
      });

    return () => {
      active = false;
    };
  }, [ready, queryClient]);

  return (
    < =>
      {children}
    
  );
}

// providers/auth-ready-context.ts
"use client";
import { createContext, useContext } from "react";

/*
부트스트랩 완료 여부 컨텍스트를 별도 모듈로 분리한다 —
AuthProvider와 api/auth/requests가 서로를 import하는 순환 의존을 끊기 위함.
- false: 세션 복원(/refresh) 진행 중 — me 쿼리 비활성
- true : me 캐시가 채워짐(로그인=user 객체 / 미로그인=null)
*/
export const AuthReadyContext = createContext(false);

export const useAuthReady = () => useContext(AuthReadyContext);

📂styles
 ┣ 📂fonts
 ┃ ┣ 📜PretendardJPVariable.woff2
 ┃ ┣ 📜PretendardVariable.woff2
 ┃ ┗ 📜index.ts       // localFont 선언 → CSS 변수로 노출
 ┗ 📜globals.css      // Tailwind 진입점 + 디자인 토큰

/* styles/globals.css */
@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-pretendard), var(--font-pretendard-jp), sans-serif;
}

// styles/fonts/index.ts
import localFont from "next/font/local";

export const pretendard = localFont({
  src: "./PretendardVariable.woff2",
  display: "swap",
  weight: "45 920",
  variable: "--font-pretendard",
});

export const pretendardJP = localFont({
  src: "./PretendardJPVariable.woff2",
  display: "swap",
  weight: "45 920",
  variable: "--font-pretendard-jp",
});

// app/layout.tsx (다시 보기)
<html className={`${pretendard.variable} ${pretendardJP.variable} ...`}>