refactor(web): inline simple single-use custom hooks

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

@@ -1,17 +1,38 @@
 "use client";
 
 import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
 import Image from "@/components/ui/FallbackImage";
 import { IconLoveLetter } from "@/public/svgs/home";
 import type { News } from "@/types/news";
-import useSectionHandler from "./_hooks/useSectionHadnler";
 
 export type NewsSectionProps = {
   newsList: News[];
 };
 
 const NewsSection = ({ newsList }: NewsSectionProps) => {
-  const { sectionRef, visible } = useSectionHandler();
+  const [visible, setVisible] = useState<boolean>(false);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!sectionRef.current) return;
+
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      {
+        rootMargin: "0px",
+        threshold: 0,
+      },
+    );
+
+    observer.observe(sectionRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <div ref={sectionRef} className="mt-6 pl-5">

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

@@ -1,22 +1,30 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import ButtonTab from "@/components/ui/ButtonTab";
 import UniversityCards from "@/components/university/UniversityCards";
 import { IconDirectionRight } from "@/public/svgs/mentor";
 
 import { type AllRegionsUniversityList, type ListUniversity, RegionEnumExtend } from "@/types/university";
-import useRegionHandler from "./_hooks/useRegionHandler";
 
 interface UniversityListProps {
   allRegionsUniversityList: AllRegionsUniversityList;
 }
 
 const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
-  const { region, handleRegionChange } = useRegionHandler();
+  const [region, setRegion] = useState<RegionEnumExtend | null>(RegionEnumExtend.ALL);
   const choices = Object.values(RegionEnumExtend);
+  const handleRegionChange = (newRegion: RegionEnumExtend | null) => {
+    setRegion(newRegion);
+  };
+
+  useEffect(() => {
+    if (region === null) {
+      setRegion(RegionEnumExtend.ALL);
+    }
+  }, [region]);
 
   const universities: ListUniversity[] = useMemo(
     () => allRegionsUniversityList[region || RegionEnumExtend.ALL] ?? [],

apps/web/src/app/login/LoginContent.tsx

@@ -3,15 +3,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { usePostEmailAuth } from "@/apis/Auth";
 import { toast } from "@/lib/zustand/useToastStore";
 import { IconSolidConnectionFullBlackLogo } from "@/public/svgs";
 import { IconAppleLogo, IconEmailIcon, IconKakaoLogo } from "@/public/svgs/auth";
 import { appleLogin, kakaoLogin } from "@/utils/authUtils";
-import useInputHandler from "./_hooks/useInputHandler";
 
 // Zod 스키마 정의
 const loginSchema = z.object({
@@ -28,9 +27,14 @@ const LoginContent = () => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const hasShownCommunityOnlyToast = useRef(false);
+  const [showPasswordField, setShowPasswordField] = useState(false);
 
   const { mutate: postEmailAuth, isPending } = usePostEmailAuth();
-  const { showPasswordField, handleEmailChange } = useInputHandler();
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.trim();
+    setShowPasswordField(value.length > 0);
+  };
 
   const {
     register,

apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/_ui/MentorArticle/index.tsx

@@ -1,18 +1,36 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { useDeleteArticleLike, usePostArticleLike } from "@/apis/news";
 import Image from "@/components/ui/FallbackImage";
 import { IconLikeFill, IconLikeNotFill } from "@/public/svgs/mentor";
 import type { Article } from "@/types/news";
 import { convertUploadedImageUrl } from "@/utils/fileUtils";
-import useLikeToggle from "./_hooks/useLikeToggle";
 
 interface MentorArticleProps {
   article: Article;
   mentorId: number;
 }
 
 const MentorArticle = ({ article, mentorId }: MentorArticleProps) => {
-  const { isLiked, handleToggleLike } = useLikeToggle(article.id, mentorId, article.isLiked);
+  const { mutate: postArticleLike } = usePostArticleLike(mentorId);
+  const { mutate: deleteArticleLike } = useDeleteArticleLike(mentorId);
+  const [isLiked, setIsLiked] = useState<boolean>(article.isLiked ?? false);
+
+  const handleToggleLike = () => {
+    if (!isLiked) {
+      postArticleLike(article.id);
+    } else {
+      deleteArticleLike(article.id);
+    }
+  };
+
+  useEffect(() => {
+    if (article.isLiked !== undefined) {
+      setIsLiked(article.isLiked);
+    }
+  }, [article.isLiked]);
+
   const thumbnailUrl = convertUploadedImageUrl(article.thumbnailUrl);
   return (
     <div key={article.description} className="overflow-hidden">

apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx

@@ -1,17 +1,37 @@
 "use client";
 
-import { useGetMentorList } from "@/apis/mentor";
+import { useEffect, useRef, useState } from "react";
+import { useGetMentorList, usePrefetchMentorList } from "@/apis/mentor";
 
 import MentorCard from "@/components/mentor/MentorCard";
 import EmptySdwBCards from "@/components/ui/EmptySdwBCards";
 import FloatingUpBtn from "@/components/ui/FloatingUpBtn";
 import { FilterTab } from "@/types/mentor";
 import useInfinityScroll from "@/utils/useInfinityScroll";
-import usePrefetchMentorFindTab from "./_hooks/usePrefetchMentorFindTab";
-import useSelectedTab from "./_hooks/useSelectedTab";
 
 const MentorFindSection = () => {
-  const { listRef, selectedTab, handleSelectTab } = useSelectedTab();
+  const [selectedTab, setSelectedTab] = useState<FilterTab>(FilterTab.ALL);
+  const listRef = useRef<HTMLDivElement>(null);
+  const { prefetchMentorList } = usePrefetchMentorList();
+
+  const handleSelectTab = (tab: FilterTab) => {
+    setSelectedTab(tab);
+    if (listRef.current) {
+      listRef.current.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  useEffect(() => {
+    const prefetchAllTabs = () => {
+      const tabsToPrefetch = Object.values(FilterTab).filter((tab) => tab !== FilterTab.ALL);
+      tabsToPrefetch.forEach((tab) => {
+        prefetchMentorList(tab);
+      });
+    };
+
+    const timer = setTimeout(prefetchAllTabs, 1000);
+    return () => clearTimeout(timer);
+  }, [prefetchMentorList]);
 
   const {
     data: mentorList = [],
@@ -21,7 +41,6 @@ const MentorFindSection = () => {
     region: selectedTab !== FilterTab.ALL ? selectedTab : "",
   });
   const { lastElementRef } = useInfinityScroll({ fetchNextPage, hasNextPage });
-  usePrefetchMentorFindTab();
 
   return (
     <div className="px-4">