From f3c166a86deee4d41bb549406936d41f47e30b90 Mon Sep 17 00:00:00 2001
From: jam-jang <jamesjang0622@naver.com>
Date: Fri, 22 Aug 2025 07:53:47 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EC=8B=9C=EC=97=90=EB=A7=8C=20selectedCategory=EB=A5=BC=20?=
 =?UTF-8?q?=EB=8F=99=EA=B8=B0=ED=99=94=ED=95=98=EB=8F=84=EB=A1=9D=20useEff?=
 =?UTF-8?q?ect=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Explore-Page/explore-page.tsx | 47 ++++++++++++++++++-------
 src/pages/Home-Page/home-page.tsx       | 20 +++++++++--
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/pages/Explore-Page/explore-page.tsx b/src/pages/Explore-Page/explore-page.tsx
index b6a87b7..d2f7cb1 100644
--- a/src/pages/Explore-Page/explore-page.tsx
+++ b/src/pages/Explore-Page/explore-page.tsx
@@ -49,11 +49,17 @@ const reverseInterestMap = Object.entries(interestMap).reduce((acc, [label, key]
 const PAGE_SIZE = 10;
 
 export default function ExplorePage() {
-  const [searchParams] = useSearchParams();
+
+  const [searchParams, setSearchParams] = useSearchParams();
   const { setHideNav } = useNav();
 
-  //초기값을 URL 쿼리에서 즉시 가져오도록 수정
-  const initialCategory = searchParams.get('category') ?? '전체';
+  const interestFromQuery = searchParams.get('interest');
+  const categoryFromQuery = searchParams.get('category');
+  const initialCategory =
+    (interestFromQuery && reverseInterestMap[interestFromQuery]) ||
+    categoryFromQuery ||
+    '전체';
+
   const [selectedCategory, setSelectedCategory] = useState(initialCategory);
 
   const [showDeptModal, setShowDeptModal] = useState(false);
@@ -75,12 +81,15 @@ export default function ExplorePage() {
 
   const { ref, inView } = useInView({ threshold: 0 });
 
-  // 쿼리 변화 시에만 상태 동기화 초기 렌더 레이스 방지함
+
   useEffect(() => {
-    const param = searchParams.get('category') ?? '전체';
-    if (param !== selectedCategory) {
-      setSelectedCategory(param);
-    }
+    const interestQ = searchParams.get('interest');
+    const categoryQ = searchParams.get('category');
+    const next =
+      (interestQ && reverseInterestMap[interestQ]) ||
+      categoryQ ||
+      '전체';
+    if (next !== selectedCategory) setSelectedCategory(next);
   }, [searchParams, selectedCategory]);
 
   // 단대 목록
@@ -96,14 +105,28 @@ export default function ExplorePage() {
     setHideNav(showDeptModal || showYearModal);
   }, [showDeptModal, showYearModal, setHideNav]);
 
-  // 공통 파라미터 빌더
+  const applyCategory = useCallback(
+    (label: string) => {
+      setSelectedCategory(label);
+
+      const next = new URLSearchParams(searchParams);
+      next.delete('interest'); 
+      if (label && label !== '전체') next.set('category', label);
+      else next.delete('category');
+
+      setSearchParams(next, { replace: true });
+    },
+    [searchParams, setSearchParams]
+  );
+
   const buildParams = useCallback(
     (p: number): MemberFilterParams => {
+      const interestKey = searchParams.get('interest') || interestMap[selectedCategory];
       const raw = {
         size: PAGE_SIZE,
         page: p,
         sort: sortOrder === '추천순' ? 'recommend' : 'recent',
-        interest: interestMap[selectedCategory],
+        interest: interestKey,
         collegeId: selectedCollegeId === '' ? undefined : Number(selectedCollegeId),
         department: selectedMajor,
         studentNo: selectedYear,
@@ -112,7 +135,7 @@ export default function ExplorePage() {
         Object.entries(raw).filter(([, v]) => v !== '' && v != null)
       ) as unknown as MemberFilterParams;
     },
-    [selectedCategory, sortOrder, selectedCollegeId, selectedMajor, selectedYear]
+    [searchParams, selectedCategory, sortOrder, selectedCollegeId, selectedMajor, selectedYear]
   );
 
   // 페이지 로드 함수
@@ -200,7 +223,7 @@ export default function ExplorePage() {
           key={selectedCategory} 
           categories={categories}
           selectedCategory={selectedCategory}
-          onSelect={setSelectedCategory}
+          onSelect={applyCategory} 
         />
         <div className="flex gap-2 flex-wrap justify-start px-4 mt-4 mb-4">
           <SortDropdown
diff --git a/src/pages/Home-Page/home-page.tsx b/src/pages/Home-Page/home-page.tsx
index 584d64a..7f1462e 100644
--- a/src/pages/Home-Page/home-page.tsx
+++ b/src/pages/Home-Page/home-page.tsx
@@ -22,7 +22,7 @@ import HobbyIcon from '@/assets/icons/extreaactivities.svg?react';
 import SchoolIcon from '@/assets/icons/campus.svg?react';
 import LunchatIcon from '@/assets/icons/lunchat.svg?react';
 import QuestionIcon from '@/assets/icons/question.svg?react';
-import { Autoplay } from 'swiper/modules'; 
+import { Autoplay } from 'swiper/modules';
 import homeBg1 from '@/assets/images/home-bg1.png';
 import homeBg2 from '@/assets/images/home-bg2.png';
 import homeBg3 from '@/assets/images/home-bg3.png';
@@ -49,7 +49,7 @@ export default function HomePage() {
   const { conf, key } = useMentorConfig() as {
     conf: { mentorName: string; mentorSub: string; mentorTitle: string };
     key: SchoolKey;
-  }; 
+  };
 
   const displayName: Record<SchoolKey, string> = {
     한국항공대: '한국항공대학교',
@@ -58,8 +58,22 @@ export default function HomePage() {
     UMC: 'UMC',
   };
 
+  const interestKeyMap: Record<string, string> = {
+    전체: '',
+    교환학생: 'EXCHANGE_STUDENT',
+    '취업/진로': 'EMPLOYMENT_CAREER',
+    고시준비: 'EXAM_PREPARATION',
+    창업: 'STARTUP',
+    학점관리: 'GPA_MANAGEMENT',
+    '외국어 공부': 'FOREIGN_LANGUAGE_STUDY',
+    '취미/여가': 'HOBBY_LEISURE',
+    학교생활: 'SCHOOL_LIFE',
+  };
+
   const handleCategoryClick = (label: string) => {
-    navigate(`/explore?category=${encodeURIComponent(label)}`);
+    const interest = interestKeyMap[label] ?? '';
+    const search = interest ? `?interest=${encodeURIComponent(interest)}` : '';
+    navigate(`/explore${search}`);
   };
 
   // “나와 ‘시간표 · 관심사’가 겹쳐요!” API 호출