Merge pull request #221 from manNomi/refactor/home-code-spliting

Refactor/home code spliting

Author: manNomi

src/app/_home/_ui/PopularUniversitySection/index.tsx

@@ -27,7 +27,9 @@ const PopularUniversitySection = ({ universities }: PopularUniversitySectionProp
                   alt={`${university.koreanName || "대학교"} 배경 이미지`}
                   priority={index < 3} // 상위 3개는 우선 로딩
                   loading={index >= 3 ? "lazy" : "eager"}
-                  fetchPriority={index < 3 ? "high" : "auto"}
+                  fetchPriority={index === 0 ? "high" : index < 3 ? "high" : "auto"}
+                  sizes="153px"
+                  unoptimized={false}
                 />
               </div>
               <div className="absolute bottom-[9px] left-[10px] z-10 text-sm font-semibold leading-[160%] tracking-[0.15px] text-white">

src/app/_home/index.tsx

@@ -4,23 +4,18 @@ import Link from "next/link";
 import FindLastYearScoreBar from "./_ui/FindLastYearScoreBar";
 import NewsSectionSkeleton from "./_ui/NewsSection/skeleton";
 import PopularUniversitySection from "./_ui/PopularUniversitySection";
-import UniversityListSkeleton from "./_ui/UniversityList/skeleton";
+import UniversityList from "./_ui/UniversityList";
 
 import getRecommendedUniversity from "@/api/university/server/getRecommendedUniversity";
 import { getAllRegionsUniversityList } from "@/api/university/server/getSearchUniversityList";
 import { fetchAllNews } from "@/lib/firebaseNews";
 import { IconIdCard, IconMagnifyingGlass, IconMuseum, IconPaper } from "@/public/svgs/home";
 
-const NewsSection = dynamic(() => import("./_ui/NewsSection"), {
+const NewsSectionDynamic = dynamic(() => import("./_ui/NewsSection"), {
   ssr: false,
   loading: () => <NewsSectionSkeleton />,
 });
 
-const UniversityListDynamic = dynamic(() => import("./_ui/UniversityList"), {
-  ssr: false,
-  loading: () => <UniversityListSkeleton />,
-});
-
 const Home = async () => {
   const newsList = await fetchAllNews();
   const { data } = await getRecommendedUniversity();
@@ -82,10 +77,10 @@ const Home = async () => {
       </div>
 
       <div className="p-5">
-        <UniversityListDynamic allRegionsUniversityList={allRegionsUniversityList} />
+        <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
       </div>
 
-      <NewsSection newsList={newsList} />
+      <NewsSectionDynamic newsList={newsList} />
     </>
   );
 };

src/app/community/[boardCode]/PostWriteButton.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect, useState } from "react";
 
-import styles from "./post-write-button.module.css";
-
 import { IconObjectsAndTools } from "@/public/svgs";
 
 type PostWriteButtonProps = {
@@ -30,9 +28,16 @@ const PostWriteButton = ({ onClick }: PostWriteButtonProps) => {
   }, [lastScrollY]);
 
   return (
-    <div className={`${styles["button-wrapper"]} ${isVisible ? styles["button-visible"] : styles["button-hidden"]}`}>
-      <button className={styles.button} onClick={onClick} type="button" aria-label="글쓰기">
-        <div className={styles.icon}>
+    <div
+      className={`fixed bottom-16 flex w-full max-w-[600px] flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
+    >
+      <button
+        className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-[0px_4px_30px_rgba(0,0,0,0.15)]"
+        onClick={onClick}
+        type="button"
+        aria-label="글쓰기"
+      >
+        <div className="absolute -top-2 flex items-center justify-center">
           <IconObjectsAndTools />
         </div>
       </button>

src/app/community/[boardCode]/post-write-button.module.css

@@ -54,8 +54,8 @@ declare global {
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
+  maximumScale: 5,
+  userScalable: true,
 };
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (

src/app/layout.tsx

@@ -2,7 +2,6 @@ import { Metadata } from "next";
 import Link from "next/link";
 
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
-import tabStyles from "@/components/ui/Tab/tab.module.css";
 
 import GpaSubmitForm from "./GpaSubmitForm";
 
@@ -36,15 +35,18 @@ const Tab = ({ color }: TabProps) => {
   };
   const combinedColor = { ...defaultColor, ...color };
   return (
-    <div className={tabStyles.tabContainer}>
+    <div className="flex h-9 w-full cursor-pointer flex-row text-sm font-medium">
       <Link
         href="/score/submit/language-test"
         style={{ color: combinedColor.deactiveBtnFont }}
-        className={tabStyles.tabButton}
+        className="flex w-full items-center justify-center bg-white"
       >
         <div>공인어학</div>
       </Link>
-      <span style={{ color: combinedColor.activeBtnFont }} className={tabStyles.tabButtonActive}>
+      <span
+        style={{ color: combinedColor.activeBtnFont }}
+        className="flex w-full items-center justify-center border-b-2 border-secondary bg-white"
+      >
         <div>학점</div>
       </span>
     </div>

src/app/score/submit/gpa/page.tsx

@@ -2,7 +2,6 @@ import { Metadata } from "next";
 import Link from "next/link";
 
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
-import tabStyles from "@/components/ui/Tab/tab.module.css";
 
 import LanguageTestSubmitForm from "./LanguageTestSubmitForm";
 
@@ -36,11 +35,18 @@ const Tab = ({ color }: TabProps) => {
   };
   const combinedColor = { ...defaultColor, ...color };
   return (
-    <div className={tabStyles.tabContainer}>
-      <span style={{ color: combinedColor.activeBtnFont }} className={tabStyles.tabButtonActive}>
+    <div className="flex h-9 w-full cursor-pointer flex-row text-sm font-medium">
+      <span
+        style={{ color: combinedColor.activeBtnFont }}
+        className="flex w-full items-center justify-center border-b-2 border-secondary bg-white"
+      >
         <div>공인어학</div>
       </span>
-      <Link href="/score/submit/gpa" style={{ color: combinedColor.deactiveBtnFont }} className={tabStyles.tabButton}>
+      <Link
+        href="/score/submit/gpa"
+        style={{ color: combinedColor.deactiveBtnFont }}
+        className="flex w-full items-center justify-center bg-white"
+      >
         <div>학점</div>
       </Link>
     </div>

src/app/score/submit/language-test/page.tsx

@@ -12,7 +12,7 @@ type BlockToggleBtnProps = {
 
 const BlockToggleBtn = ({
   children,
-  className,
+  className = "",
   style,
   backgroundColor,
   textColor,
@@ -21,34 +21,24 @@ const BlockToggleBtn = ({
   onClick,
   isToggled = true,
 }: BlockToggleBtnProps) => {
-  let defaultStyle = {
-    backgroundColor: backgroundColor || "var(--primary-1, #6F90D1)",
-    color: textColor || "white",
+  // CSS 변수 대신 Tailwind 클래스 사용
+  const baseClasses =
+    "w-full h-11 border-none rounded-lg cursor-pointer transition-all duration-500 font-medium text-base font-serif";
+  const enabledClasses = isToggled ? "bg-primary text-white" : "bg-gray-200 text-gray-500";
 
-    width: "100%",
-    height: "44px",
-    border: "none",
-    borderRadius: "8px",
-    cursor: "pointer",
-    transition: "background-color 0.5s, color 0.5s",
-
-    fontFamily: "Pretendard",
-    fontSize: "16px",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "normal",
+  const customStyles = {
+    backgroundColor: isToggled ? backgroundColor : disableBackgroundColor,
+    color: isToggled ? textColor : disableTextColor,
+    ...style,
   };
 
-  if (!isToggled) {
-    defaultStyle = {
-      ...defaultStyle,
-      backgroundColor: disableBackgroundColor || "#EDEDED",
-      color: disableTextColor || "#888",
-    };
-  }
-
   return (
-    <button className={className} style={{ ...defaultStyle, ...style }} onClick={onClick} type="button">
+    <button
+      className={`${baseClasses} ${enabledClasses} ${className}`}
+      style={customStyles}
+      onClick={onClick}
+      type="button"
+    >
       {children}
     </button>
   );

src/components/button/BlockToggleBtn.tsx

@@ -1,9 +1,10 @@
 import dynamic from "next/dynamic";
 import React from "react";
 
+import BottomNavigation from "./ui/BottomNavigation";
 import ServerModal from "./ui/ServerModal";
 
-const BottomNavigation = dynamic(() => import("./ui/BottomNavigation"), { ssr: false, loading: () => null });
+// const BottomNavigationDynamic = dynamic(() => import("./ui/BottomNavigation"), { ssr: false, loading: () => null });
 const ClientModal = dynamic(() => import("./ui/ClientModal"), { ssr: false, loading: () => null });
 
 type LayoutProps = {