design: 희과담 페이지 반응형 구현

src/components/desired/DesiredSubjectSection.tsx

@@ -43,7 +43,7 @@ export default function DesiredSubjectSection({
   return (
     <section
       className={cls(
-        "flex flex-col gap-y-4 relative duration-500 ease-in-out origin-top",
+        "flex flex-col gap-y-4 relative duration-300 ease-in-out origin-top",
         visible ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
       )}
     >

src/components/notice/NoriceSection1.tsx

@@ -46,7 +46,7 @@ export default function NoticeSection1() {
                 <td
                   className={[
                     openIndexList[index] ? "border-[1px]" : "",
-                    " transition-all duration-500 ease-in-out",
+                    " transition-all duration-300 ease-in-out",
                   ].join(" ")}
                 >
                   <div

src/components/sugang/SubjectSearchSection.tsx

@@ -7,7 +7,7 @@ import { MdOutlineRadioButtonUnchecked } from "react-icons/md";
 import { readExcelData } from "@/utils/excel";
 import { filterData } from "@/utils/filter";
 import { SubjectSearchResult } from "@/components/sugang/SubjectSearchResult";
-import { useState } from "react";
+import {useEffect, useState} from 'react';
 import useAlert from "@/stores/alert";
 import { cls } from "@/utils/util";
 
@@ -27,7 +27,7 @@ export default function SubjectSearchSection({
   return (
     <section
       className={cls(
-        "flex flex-col gap-y-4 text-nowrap duration-500 ease-in-out origin-top",
+        "flex flex-col gap-y-4 text-nowrap duration-300 ease-in-out origin-top",
         visible ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
       )}
     >
@@ -125,7 +125,7 @@ function SubjectFilterMenu() {
         <tr className="h-40">
           <SubjectLabel label="검색방법" />
           <td
-            className="px-12 items-start flex-col sm:flex-row flex gap-x-16 sm:items-center min-h-40"
+            className="px-12 md:items-start md:flex-col flex gap-x-16 items-center min-h-40"
             colSpan={3}
           >
             <div

src/components/sugang/SugangSearchBar.tsx

@@ -6,15 +6,19 @@ import useLoading from "@/stores/loading";
 import { readExcelData } from "@/utils/excel";
 import { generateRandomDelay } from "@/utils/util";
 import { usePathname } from "next/navigation";
-import { useRef } from "react";
+import {useEffect, useRef} from 'react';
 
 export default function SugangSearchBar() {
   const pathname = usePathname();
   const { storedValue, setValue } = useLocalStorage(pathname.slice(1), []);
   const { setIsLoading } = useLoading();
   const courseCodeRef = useRef<HTMLInputElement>(null);
   const courseRoomIdRef = useRef<HTMLInputElement>(null);
-  const { setMessage } = useAlert();
+  const { setMessage, reset } = useAlert();
+
+    useEffect(() => {
+        reset();
+    }, []);
 
   const onSubmitInput = async () => {
     const data = await readExcelData("/sugang-data-20240124.xlsx");

src/stores/alert.ts

@@ -13,12 +13,14 @@ interface Alert {
     type: "register" | "remove" | "none" | "normal" | "duplicate",
     data: AlertData | undefined
   ) => void;
+  reset: () => void;
 }
 
 const useAlert = create<Alert>((set) => ({
   type: "normal",
   data: undefined,
   setMessage: (type, data) => set({ type, data }),
+    reset: () => set({ type: "normal", data: undefined }),
 }));
 
 export default useAlert;