diff --git a/public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-B.woff2 b/public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-B.woff2 new file mode 100644 index 00000000..367e885a Binary files /dev/null and b/public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-B.woff2 differ diff --git a/public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-R.woff2 b/public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-R.woff2 new file mode 100644 index 00000000..bf8de10a Binary files /dev/null and b/public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-R.woff2 differ diff --git a/public/fonts/nexon/NexonLv1GothicOTF-B.woff b/public/fonts/nexon/NexonLv1GothicOTF-B.woff new file mode 100644 index 00000000..b67a1f1f Binary files /dev/null and b/public/fonts/nexon/NexonLv1GothicOTF-B.woff differ diff --git a/public/fonts/nexon/NexonLv1GothicOTF-R.woff b/public/fonts/nexon/NexonLv1GothicOTF-R.woff new file mode 100644 index 00000000..b948f930 Binary files /dev/null and b/public/fonts/nexon/NexonLv1GothicOTF-R.woff differ diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index c159138b..5438c29a 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -1,4 +1,5 @@ "use client"; +import Button from "@/app/components/button/default/Button"; import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; import { useLogin } from "@/hooks/queries/auth/useLogin"; import { type LoginSchema, loginSchema } from "@/schemas/authSchema"; @@ -6,26 +7,56 @@ import { zodResolver } from "@hookform/resolvers/zod"; import Image from "next/image"; import Link from "next/link"; import { useForm } from "react-hook-form"; +import { UserRole, userRoles } from "@/constants/userRoles"; export default function LoginPage() { + // 로그인 훅과 로딩 상태 관리 const { login, isPending } = useLogin(); + + // 폼 유효성 검사 및 상태 관리 const { register, handleSubmit, formState: { errors }, + setValue, } = useForm({ resolver: zodResolver(loginSchema), }); + // 일반 로그인 제출 핸들러 const onSubmit = (data: LoginSchema) => { login(data); }; + // 테스트 계정 로그인 핸들러 - 폼 유효성 검사 통과 + const handleTestLogin = (role: UserRole) => { + const testCredentials = { + // 지원자 테스트 계정 정보 + [userRoles.APPLICANT]: { + email: process.env.NEXT_PUBLIC_TEST_APPLICANT_ID as string, + password: process.env.NEXT_PUBLIC_TEST_APPLICANT_PASSWORD as string, + }, + // 사장님 테스트 계정 정보 + [userRoles.OWNER]: { + email: process.env.NEXT_PUBLIC_TEST_OWNER_ID as string, + password: process.env.NEXT_PUBLIC_TEST_OWNER_PASSWORD as string, + }, + }; + + // setValue를 통해 폼 값을 직접 설정 + const credentials = testCredentials[role]; + setValue("email", credentials.email); + setValue("password", credentials.password); + + // 설정된 값으로 폼 제출 + handleSubmit((data) => login(data))(); + }; + return (
-

로그인

+
로그인

아직 계정이 없으신가요?{" "} @@ -55,14 +86,10 @@ export default function LoginPage() {

-
- +
@@ -85,6 +112,33 @@ export default function LoginPage() { 카카오 로그인
+
+
+ 테스트 계정으로 로그인하기 +
+
+
+ + +
diff --git a/src/app/(auth)/signup/applicant/page.tsx b/src/app/(auth)/signup/applicant/page.tsx index 6b6b606a..80929c34 100644 --- a/src/app/(auth)/signup/applicant/page.tsx +++ b/src/app/(auth)/signup/applicant/page.tsx @@ -8,6 +8,7 @@ import Link from "next/link"; import { useForm } from "react-hook-form"; import Image from "next/image"; import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; +import Button from "@/app/components/button/default/Button"; export default function ApplicantSignupPage() { const { signup, isPending } = useSignup(); @@ -32,7 +33,7 @@ export default function ApplicantSignupPage() {
-

지원자 회원가입

+
지원자 회원가입

이미 계정이 있으신가요?{" "} @@ -98,14 +99,10 @@ export default function ApplicantSignupPage() { {errors.phoneNumber &&

{errors.phoneNumber.message}

}
-
- +
diff --git a/src/app/(auth)/signup/owner/page.tsx b/src/app/(auth)/signup/owner/page.tsx index 1eb89131..2ec13431 100644 --- a/src/app/(auth)/signup/owner/page.tsx +++ b/src/app/(auth)/signup/owner/page.tsx @@ -8,6 +8,7 @@ import Link from "next/link"; import { useForm } from "react-hook-form"; import Image from "next/image"; import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner"; +import Button from "@/app/components/button/default/Button"; export default function OwnerSignupPage() { const { signup, isPending } = useSignup(); @@ -34,7 +35,7 @@ export default function OwnerSignupPage() {
-

사장님 회원가입

+
사장님 회원가입

이미 계정이 있으신가요?{" "} @@ -120,14 +121,10 @@ export default function OwnerSignupPage() { {errors.location &&

{errors.location.message}

}
-
- +
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 4e1290ce..c2955774 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -4,6 +4,7 @@ import { useEffect, useState, useRef } from "react"; import Link from "next/link"; import Image from "next/image"; import { useUser } from "@/hooks/queries/user/me/useUser"; +import LinkBtn from "../components/button/default/LinkBtn"; export default function Home() { const [visibleSections, setVisibleSections] = useState(new Set()); @@ -16,16 +17,27 @@ export default function Home() { observer.current = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - if (entry.isIntersecting) { - const element = entry.target as HTMLElement; - const id = element.dataset.id ?? ""; // 기본값 설정 - if (id) { + const element = entry.target as HTMLElement; + const id = element.dataset.id ?? ""; + if (id) { + if (entry.isIntersecting) { + // 요소가 보일 때 애니메이션 적용 setVisibleSections((prev) => new Set(prev).add(id)); + } else { + // 요소가 보이지 않을 때 애니메이션 제거 + setVisibleSections((prev) => { + const newSet = new Set(prev); + newSet.delete(id); + return newSet; + }); } } }); }, - { threshold: 0.5 } + { + threshold: 0.2, // 임계값을 낮춰서 더 일찍 감지 + rootMargin: "50px", // 여유 공간 추가 + } ); // 감시할 요소 선택 및 등록 @@ -59,11 +71,9 @@ export default function Home() { 한 곳에서 관리하는 알바 구인 플랫폼

{user ? ( - -

- 알바 둘러보기 -

- + + 알바 둘러보기 + ) : (

diff --git a/src/app/(pages)/mypage/components/FilterBar/index.tsx b/src/app/(pages)/mypage/components/FilterBar/index.tsx index 13e0bd74..9966ccbc 100644 --- a/src/app/(pages)/mypage/components/FilterBar/index.tsx +++ b/src/app/(pages)/mypage/components/FilterBar/index.tsx @@ -50,14 +50,14 @@ export default function FilterBar() {

{/* 마이페이지 섹션 */}
-

마이페이지

+
마이페이지
{/* sm, md에서는 케밥 메뉴, lg 이상에서는 버튼 */}
- -
diff --git a/src/app/(pages)/mypage/components/sections/PostsSection.tsx b/src/app/(pages)/mypage/components/sections/PostsSection.tsx index b24a8769..491a38e2 100644 --- a/src/app/(pages)/mypage/components/sections/PostsSection.tsx +++ b/src/app/(pages)/mypage/components/sections/PostsSection.tsx @@ -66,17 +66,6 @@ export default function PostsSection() { return (
- {/* 정렬 옵션 섹션 */} -
-
-
-
- -
-
-
-
- {/* 메인 콘텐츠 영역 */}
{!data?.pages?.[0]?.data?.length ? ( diff --git a/src/app/components/button/default/Button.tsx b/src/app/components/button/default/Button.tsx index 9d39aa88..c43acfdb 100644 --- a/src/app/components/button/default/Button.tsx +++ b/src/app/components/button/default/Button.tsx @@ -6,7 +6,7 @@ interface ButtonProps extends ButtonHTMLAttributes { variant?: "solid" | "outlined"; width?: "xs" | "sm" | "md" | "lg"; radius?: "lg" | "full"; - color?: "orange" | "gray"; + color?: "orange" | "gray" | "lime"; icon?: ReactNode; } /** @@ -47,6 +47,12 @@ const Button = ({ outlined: "border-2 border-grayscale-200 text-grayscale-900 hover:border-grayscale-300 hover:bg-grayscale-50 focus:ring-1 focus:ring-grayscale-200 focus:outline-none disabled:border-grayscale-100 disabled:text-grayscale-100 disabled:cursor-not-allowed disabled:hover:bg-transparent", }, + lime: { + solid: + "bg-lime-600 text-white hover:bg-lime-700 focus:ring-1 focus:ring-lime-500 focus:outline-none disabled:bg-lime-300 disabled:cursor-not-allowed", + outlined: + "border-2 border-lime-600 text-lime-600 hover:border-lime-700 hover:text-lime-700 focus:ring-1 focus:ring-lime-500 focus:outline-none disabled:border-lime-300 disabled:text-lime-300 disabled:cursor-not-allowed disabled:hover:bg-transparent", + }, }; const widths = { diff --git a/src/app/components/button/default/LinkBtn.tsx b/src/app/components/button/default/LinkBtn.tsx new file mode 100644 index 00000000..7f0f6b30 --- /dev/null +++ b/src/app/components/button/default/LinkBtn.tsx @@ -0,0 +1,162 @@ +"use client"; +import React from "react"; +import Link from "next/link"; +import { cn } from "@/lib/tailwindUtil"; + +interface LinkBtnProps { + href: string; + className?: string; + variant?: "solid" | "outlined"; + width?: "xs" | "sm" | "md" | "lg" | ResponsiveWidth; + radius?: "lg" | "full"; + color?: "orange" | "gray" | "lime"; + icon?: React.ReactNode; + disabled?: boolean; + children: React.ReactNode; + fontSize?: "xs" | "sm" | "base" | "lg" | ResponsiveFontSize; + onClick?: (event: React.MouseEvent) => void; +} + +// 반응형 width 타입 추가 +type ResponsiveWidth = { + mobile?: "xs" | "sm" | "md" | "lg"; + tablet?: "xs" | "sm" | "md" | "lg"; + desktop?: "xs" | "sm" | "md" | "lg"; +}; + +// 반응형 폰트 사이즈 타입 추가 +type ResponsiveFontSize = { + mobile?: "xs" | "sm" | "base" | "lg"; + tablet?: "xs" | "sm" | "base" | "lg"; + desktop?: "xs" | "sm" | "base" | "lg"; +}; + +/** + * 링크 버튼 컴포넌트 + * @param href - 이동할 경로 + * @param variant - 버튼 스타일 solid | outlined + * @param width - 버튼 너비 xs | sm | md | lg + * @param radius - 버튼 모서리 둥글기 lg | full + * @param color - 버튼 색상 orange | gray | lime + * @param disabled - 비활성화 여부 + * @param icon - 버튼 내 아이콘 + * @param children - 버튼 내용 + * @returns 링크 버튼 컴포넌트 + */ +const LinkBtn = ({ + href, + className = "", + variant = "solid", + width = "md", + radius = "lg", + color = "orange", + icon, + disabled = false, + children, + fontSize = "base", + onClick, +}: LinkBtnProps) => { + const baseStyles = "inline-flex items-center justify-center transition-colors font-medium h-12"; + + const colorStyles = { + orange: { + solid: + "bg-primary-orange-300 text-white hover:bg-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:bg-grayscale-100 disabled:pointer-events-none", + outlined: + "border-2 border-primary-orange-300 text-primary-orange-300 hover:border-primary-orange-200 hover:text-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:border-grayscale-100 disabled:text-grayscale-100 disabled:pointer-events-none disabled:hover:bg-transparent", + }, + gray: { + solid: + "bg-grayscale-100 text-grayscale-900 hover:bg-grayscale-200 focus:ring-1 focus:ring-grayscale-200 focus:outline-none disabled:bg-grayscale-50 disabled:pointer-events-none", + outlined: + "border-2 border-grayscale-200 text-grayscale-900 hover:border-grayscale-300 hover:bg-grayscale-50 focus:ring-1 focus:ring-grayscale-200 focus:outline-none disabled:border-grayscale-100 disabled:text-grayscale-100 disabled:pointer-events-none disabled:hover:bg-transparent", + }, + lime: { + solid: + "bg-lime-600 text-white hover:bg-lime-700 focus:ring-1 focus:ring-lime-500 focus:outline-none disabled:bg-lime-300 disabled:pointer-events-none", + outlined: + "border-2 border-lime-600 text-lime-600 hover:border-lime-700 hover:text-lime-700 focus:ring-1 focus:ring-lime-500 focus:outline-none disabled:border-lime-300 disabled:text-lime-300 disabled:pointer-events-none disabled:hover:bg-transparent", + }, + }; + + const widths = { + xs: "w-[60px] md:w-[80px]", + sm: "w-[120px] md:w-[160px]", + md: "w-[160px] lg:w-[200px]", + lg: "w-[200px] xl:w-[240px]", + }; + + const radiuses = { + lg: "rounded-lg", + full: "rounded-full", + }; + + const fontSizes = { + xs: "text-xs", + sm: "text-sm", + base: "text-base", + lg: "text-lg", + }; + + const getWidthClass = (width: LinkBtnProps["width"]) => { + if (typeof width === "string") { + return widths[width]; + } + + return cn( + width?.mobile && widths[width.mobile], + width?.tablet && `md:${widths[width.tablet]}`, + width?.desktop && `lg:${widths[width.desktop]}` + ); + }; + + const getFontSizeClass = (fontSize: LinkBtnProps["fontSize"]) => { + if (typeof fontSize === "string") { + return fontSizes[fontSize]; + } + + return cn( + fontSize?.mobile && fontSizes[fontSize.mobile], + fontSize?.tablet && `md:${fontSizes[fontSize.tablet]}`, + fontSize?.desktop && `lg:${fontSizes[fontSize.desktop]}` + ); + }; + + if (disabled) { + return ( + + {icon && {icon}} + {children} + + ); + } + + return ( + + {icon && {icon}} + {children} + + ); +}; + +export default LinkBtn; diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx index 869561be..ccbd476e 100644 --- a/src/app/components/layout/Header.tsx +++ b/src/app/components/layout/Header.tsx @@ -2,26 +2,36 @@ import Image from "next/image"; import Link from "next/link"; -import { usePathname, useRouter } from "next/navigation"; +import { usePathname } from "next/navigation"; import { cn } from "@/lib/tailwindUtil"; import { useLogout } from "@/hooks/queries/auth/useLogout"; import { useState } from "react"; import { toast } from "react-hot-toast"; import { useUser } from "@/hooks/queries/user/me/useUser"; +import LinkBtn from "../button/default/LinkBtn"; +import { useRouter } from "next/navigation"; export default function Header() { const { logout } = useLogout(); const { user, isLoading } = useUser(); const pathname = usePathname(); - const router = useRouter(); const [isSideMenuOpen, setIsSideMenuOpen] = useState(false); + const router = useRouter(); // 인증이 필요없는 공개 경로들 - const handleLogout = async () => { - logout(); - toast.success("로그아웃되었습니다!"); - setIsSideMenuOpen(false); - router.push("/login"); + const handleLogout = (e: React.MouseEvent) => { + e.preventDefault(); + try { + logout(); + toast.success("로그아웃되었습니다!"); + setIsSideMenuOpen(false); + setTimeout(() => { + router.push("/login"); + }, 100); + } catch (error) { + console.error("로그아웃 실패:", error); + toast.error("로그아웃에 실패했습니다."); + } }; const getLinkClassName = (path: string) => { @@ -37,7 +47,6 @@ export default function Header() { "fixed left-0 right-0 top-0 z-40 border-b border-b-line-100 bg-lime-100 -tracking-widest md:tracking-normal"; const navStyle = "mx-auto flex h-16 min-w-[327px] items-center justify-between px-6 max-w-screen-xl "; const menuStyle = "ml-4 flex h-16 items-center gap-4 md:ml-8 md:gap-6 lg:ml-[46px]"; - const buttonStyle = "rounded-lg border-2 px-2 py-1 text-sm md:px-3 md:py-1.5 md:text-base lg:px-4 lg:py-2"; const skeletonStyle = "w-16 animate-pulse bg-lime-200"; // 로딩 시간이 1초 이상일 때만 스켈레톤 UI 표시 if (isLoading) { @@ -107,26 +116,44 @@ export default function Header() { {!user ? ( <>
  • - 로그인 - +
  • - 회원가입 - +
    • ) : ( @@ -146,7 +173,7 @@ export default function Header() { {/* 사이드바 */}
    @@ -163,22 +190,36 @@ export default function Header() {
    {user && ( - <> - + setIsSideMenuOpen(false)} > 마이페이지 - - - + +
    )}
    diff --git a/src/app/components/layout/forms/SearchSection.tsx b/src/app/components/layout/forms/SearchSection.tsx index 332bda1b..2c74e1cb 100644 --- a/src/app/components/layout/forms/SearchSection.tsx +++ b/src/app/components/layout/forms/SearchSection.tsx @@ -31,7 +31,7 @@ export default function SearchSection({ pathname }: { pathname: string }) { onChange={(e: React.ChangeEvent) => setKeyword(e.target.value)} className="text:lg lg:text:xl h-[52px] w-full border-none bg-background-200 hover:bg-background-300" /> -
    diff --git a/src/app/components/modal/modals/form/ChangePasswordModal.tsx b/src/app/components/modal/modals/form/ChangePasswordModal.tsx index 73100aa1..f4872449 100644 --- a/src/app/components/modal/modals/form/ChangePasswordModal.tsx +++ b/src/app/components/modal/modals/form/ChangePasswordModal.tsx @@ -121,17 +121,25 @@ const ChangePasswordModal = ({ isOpen, onClose, className }: ChangePasswordModal
    -
    diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx index 1069f093..ef58a211 100644 --- a/src/app/components/modal/modals/form/EditMyProfileModal.tsx +++ b/src/app/components/modal/modals/form/EditMyProfileModal.tsx @@ -169,20 +169,24 @@ const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalPr
    diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx index 556f5897..256e8381 100644 --- a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx +++ b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx @@ -207,14 +207,21 @@ const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileM
    -
    diff --git a/src/app/fonts.ts b/src/app/fonts.ts new file mode 100644 index 00000000..7524d5c2 --- /dev/null +++ b/src/app/fonts.ts @@ -0,0 +1,38 @@ +// app/fonts.ts +import localFont from "next/font/local"; + +// 학교안심 둥근미소 +export const hakgyoFont = localFont({ + src: [ + { + path: "../../public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-R.woff2", + weight: "400", + style: "normal", + }, + { + path: "../../public/fonts/hakgyo/HakgyoansimDunggeunmisoTTF-B.woff2", + weight: "700", + style: "normal", + }, + ], + variable: "--font-hakgyo", + display: "swap", +}); + +// 넥슨 Lv.1 고딕 +export const nexonFont = localFont({ + src: [ + { + path: "../../public/fonts/nexon/NexonLv1GothicOTF-R.woff", + weight: "400", + style: "normal", + }, + { + path: "../../public/fonts/nexon/NexonLv1GothicOTF-B.woff", + weight: "700", + style: "normal", + }, + ], + variable: "--font-nexon", + display: "swap", +}); diff --git a/src/app/globals.css b/src/app/globals.css index 5728264f..7fa44c3c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,43 +1,12 @@ +/* globals.css */ @tailwind base; @tailwind components; @tailwind utilities; -/* 학교안심 둥근미소 R */ -@font-face { - font-family: "HakgyoansimDunggeunmisoTTF-R"; - src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2") format("woff2"); - font-weight: 400; -} - -/* 학교안심 둥근미소 B */ -@font-face { - font-family: "HakgyoansimDunggeunmisoTTF-B"; - src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2") format("woff2"); - font-weight: 700; -} - -/* 넥슨 폰트 */ -@font-face { - font-family: "NEXON Lv1 Gothic OTF"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "NEXON Lv1 Gothic OTF"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff") - format("woff"); - font-weight: 700; - font-style: normal; - font-display: swap; -} - /* 기본적인 스타일을 정의 */ @layer base { body { - @apply font-nexon; + font-family: var(--font-nexon); } } * { @@ -59,23 +28,23 @@ li { /* 재사용 가능한 컴포넌트 스타일을 정의 */ @layer components { .font-school-regular { - font-family: "HakgyoansimDunggeunmisoTTF-R", sans-serif; + font-family: var(--font-hakgyo); font-weight: 400; } .font-school-bold { - font-family: "HakgyoansimDunggeunmisoTTF-B", sans-serif; + font-family: var(--font-hakgyo); font-weight: 700; } .font-nexon-light { - font-family: "NEXON Lv1 Gothic OTF Light", sans-serif; + font-family: var(--font-nexon); font-weight: 300; } .font-nexon-regular { - font-family: "NEXON Lv1 Gothic OTF Regular", sans-serif; + font-family: var(--font-nexon); font-weight: 400; } .font-nexon-bold { - font-family: "NEXON Lv1 Gothic OTF Bold", sans-serif; + font-family: var(--font-nexon); font-weight: 700; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5f2aefdd..1d710d8f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,12 +5,13 @@ import Header from "./components/layout/Header"; import "./globals.css"; import { metadata } from "./metadata"; import { viewport } from "./viewport"; +import { hakgyoFont, nexonFont } from "./fonts"; export { metadata, viewport }; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - +
    diff --git a/src/constants/userRoles.ts b/src/constants/userRoles.ts index 819d282b..35512635 100644 --- a/src/constants/userRoles.ts +++ b/src/constants/userRoles.ts @@ -2,3 +2,5 @@ export const userRoles = { OWNER: "OWNER", APPLICANT: "APPLICANT", } as const; + +export type UserRole = (typeof userRoles)[keyof typeof userRoles]; diff --git a/tailwind.config.ts b/tailwind.config.ts index 002749dc..bddc6eff 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -56,8 +56,8 @@ const config: Config = { }, }, fontFamily: { - nexon: ["NEXON Lv1 Gothic OTF", "sans-serif"], - school: ["HakgyoansimDunggeunmisoTTF-R", "HakgyoansimDunggeunmisoTTF-B", "sans-serif"], + nexon: ["var(--font-nexon)", "sans-serif"], + hakgyo: ["var(--font-hakgyo)", "sans-serif"], sans: ["Pretendard", "sans-serif"], }, },