Merge pull request #307 from manNomi/feat/typography

feat : typography , critical css 수정

Author: manNomi

package-lock.json

@@ -7,7 +7,7 @@
   },
   "scripts": {
     "dev": "next dev",
-    "build": "next build && node scripts/critical-css.js",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -28,7 +28,7 @@
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "beasties": "^0.2.0",
+    "critters": "^0.0.23",
     "firebase": "^10.7.2",
     "firebase-admin": "^12.0.0",
     "js-cookie": "^3.0.5",

package.json

@@ -14,8 +14,8 @@ const FindLastYearScoreBar = () => {
         <div className="flex items-center gap-4">
           <IconGraduationCap />
           <div className="flex flex-col">
-            <span className="text-xs font-normal leading-normal text-k-800">작년 합격 점수가 궁금하신가요?</span>
-            <span className="text-sm font-semibold leading-normal text-k-800">작년도 합격 점수 확인하러 가기</span>
+            <span className="typo-regular-4 text-k-800">작년 합격 점수가 궁금하신가요?</span>
+            <span className="typo-sb-9 text-k-800">작년도 합격 점수 확인하러 가기</span>
           </div>
         </div>
       </div>

scripts/critical-css.js

@@ -19,10 +19,10 @@ const NewsSection = ({ newsList }: NewsSectionProps) => {
 
   return (
     <div ref={sectionRef} className="mt-6 pl-5">
-      <div className="mb-2.5 flex items-center gap-1.5 font-serif text-base font-semibold text-k-700">
+      <div className="mb-2.5 flex items-center gap-1.5 font-serif typo-sb-7 text-k-700">
         솔커에서 맛보는 소식
         <IconLoveLetter />
-        {/* <Link href="/news" className="ml-auto text-sm font-normal text-k-500">
+        {/* <Link href="/news" className="ml-auto typo-regular-2 text-k-500">
           더보기
           <span className="ml-1 inline-block">
             <IconDirectionRight />
@@ -55,8 +55,8 @@ const NewsSection = ({ newsList }: NewsSectionProps) => {
                   height={90}
                 />
                 <div className="mr-5 flex flex-col gap-0.5">
-                  <div className="text-serif text-sm font-semibold leading-normal text-k-700">{news.title}</div>
-                  <div className="font-serif text-xs font-normal leading-normal text-k-500">{news.description}</div>
+                  <div className="text-serif typo-sb-9 text-k-700">{news.title}</div>
+                  <div className="font-serif typo-regular-4 text-k-500">{news.description}</div>
                 </div>
               </div>
             </Link>

src/app/(home)/_ui/FindLastYearScoreBar/index.tsx

@@ -47,7 +47,7 @@ const PopularUniversityCard = ({
             }
           />
         </div>
-        <div className="absolute bottom-[9px] left-[10px] z-10 text-sm font-semibold leading-[160%] tracking-[0.15px] text-white">
+        <div className="absolute bottom-[9px] left-[10px] z-10 typo-sb-9 tracking-[0.15px] text-white">
           {university.koreanName}
         </div>
       </div>

src/app/(home)/_ui/NewsSection/index.tsx

@@ -29,9 +29,9 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
-        <span className="text-lg font-semibold leading-snug text-k-700">전체 학교 리스트</span>
+        <span className="typo-sb-5 text-k-700">전체 학교 리스트</span>
         <Link href="/university">
-          <span className="flex items-center gap-1 text-sm font-semibold text-k-500">
+          <span className="flex items-center gap-1 typo-sb-9 text-k-500">
             더보기
             <IconDirectionRight className="h-4 w-4" />
           </span>

src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx

@@ -37,19 +37,22 @@ const HomePage = async () => {
       <FindLastYearScoreBar />
       <div className="flex flex-col gap-2.5 px-5 py-3.5">
         <div className="flex gap-2">
-          <Link className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#F0F5FF] p-2.5" href="/university/search">
+          <Link
+            className="h-26 bg-bg-accent-blue flex flex-1 flex-col gap-2 rounded-lg p-2.5"
+            href="/university/search"
+          >
             <div className="flex flex-col">
-              <span className="text-sm font-bold text-secondary">학교 검색하기</span>
-              <span className="text-xs font-medium leading-tight text-k-700">모든 학교 목록을 확인해보세요</span>
+              <span className="typo-bold-5 text-secondary">학교 검색하기</span>
+              <span className="typo-medium-4 text-k-700">모든 학교 목록을 확인해보세요</span>
             </div>
             <div className="flex justify-end">
               <IconMagnifyingGlass />
             </div>
           </Link>
-          <Link className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#EBF8FF] p-2.5" href="/university/score">
+          <Link className="h-26 bg-bg-accent-sky flex flex-1 flex-col gap-2 rounded-lg p-2.5" href="/university/score">
             <div className="flex flex-col">
-              <span className="text-sm font-bold text-sub-a">성적 입력하기</span>
-              <span className="text-xs font-medium leading-tight text-k-700">성적을 입력해보세요</span>
+              <span className="typo-bold-5 text-sub-a">성적 입력하기</span>
+              <span className="typo-medium-4 text-k-700">성적을 입력해보세요</span>
             </div>
             <div className="flex justify-end">
               <IconPaper />
@@ -58,24 +61,24 @@ const HomePage = async () => {
         </div>
         <div className="flex gap-2">
           <Link
-            className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#FFF3E5] p-2.5"
+            className="h-26 bg-bg-accent-orange flex flex-1 flex-col gap-2 rounded-lg p-2.5"
             href="/university/application/apply"
           >
             <div className="flex flex-col">
-              <span className="text-sm font-bold text-[#FF7300]">학교 지원하기</span>
-              <span className="text-xs font-medium leading-tight text-k-700">학교를 지원해주세요</span>
+              <span className="typo-bold-5 text-accent-custom-orange">학교 지원하기</span>
+              <span className="typo-medium-4 text-k-700">학교를 지원해주세요</span>
             </div>
             <div className="flex justify-end">
               <IconMuseum />
             </div>
           </Link>
           <Link
-            className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#E9F7EC] p-2.5"
+            className="h-26 bg-bg-accent-green flex flex-1 flex-col gap-2 rounded-lg p-2.5"
             href="/university/application"
           >
             <div className="flex flex-col">
-              <span className="text-sm font-bold text-[#15A861]">지원자 현황 확인</span>
-              <span className="text-xs font-medium leading-tight text-k-700">경쟁률을 바로 분석해드려요</span>
+              <span className="typo-bold-5 text-accent-custom-green">지원자 현황 확인</span>
+              <span className="typo-medium-4 text-k-700">경쟁률을 바로 분석해드려요</span>
             </div>
             <div className="flex justify-end">
               <IconIdCard />
@@ -85,9 +88,7 @@ const HomePage = async () => {
       </div>
 
       <div className="border-t-[5px] border-k-50 py-5 pl-5">
-        <div className="mb-2 flex items-center gap-1.5 font-serif text-base font-semibold text-k-700">
-          실시간 인기있는 파견학교
-        </div>
+        <div className="typo-sb-7 mb-2 flex items-center gap-1.5 font-serif text-k-700">실시간 인기있는 파견학교</div>
         <PopularUniversitySection universities={recommendedUniversities} />
       </div>
 

src/app/(home)/_ui/UniversityList/index.tsx

@@ -50,14 +50,14 @@ const ColorsPage = () => {
   return (
     <div className="w-full">
       <div className="p-8">
-        <h1 className="mb-6 text-2xl font-bold">디자인 시스템 색상 팔레트</h1>
+        <h1 className="mb-6 typo-bold-1">디자인 시스템 색상 팔레트</h1>
         <div className="space-y-4">
           {colors.map((row, rowIndex) => (
             <div key={rowIndex} className="flex space-x-4">
               {row.map((color, colIndex) => (
                 <div key={colIndex} className="text-center">
                   <div className={`mx-auto h-16 w-16 ${color.class} rounded`} />
-                  <p className="mt-2 text-sm">{color.name}</p>
+                  <p className="mt-2 typo-regular-2">{color.name}</p>
                 </div>
               ))}
             </div>

src/app/(home)/page.tsx

@@ -48,7 +48,7 @@ const CommunityRegionSelector = ({ curRegion, setCurRegion, regionChoices }: Com
     <div className="pb-3.5 pl-5 pt-5">
       <div className="inline-block" ref={dropdownRef}>
         <button className="flex items-center gap-1" onClick={toggleDropdown} aria-label="게시판 변경">
-          <div className="font-serif text-2xl font-semibold leading-normal">{curRegion}</div>
+          <div className="typo-sb-2">{curRegion}</div>
           <div>
             <IconExpandMoreFilled />
           </div>