Skip to content

쿼리 변경 시에만 selectedCategory를 동기화하도록 useEffect 조정 #191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jam-jang merged 2 commits into from
Aug 21, 2025
Merged

쿼리 변경 시에만 selectedCategory를 동기화하도록 useEffect 조정 #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3c166a
쿼리 변경 시에만 selectedCategory를 동기화하도록 useEffect 조정
jam-jang Aug 21, 2025
0f1eb48
Merge remote-tracking branch 'origin/develop' into fix/explore-page-u…
jam-jang Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 35 additions & 12 deletions src/pages/Explore-Page/explore-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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]);

// 단대 목록
Expand All @@ -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,
Expand All @@ -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]
);

// 페이지 로드 함수
Expand Down Expand Up @@ -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
Expand Down
20 changes: 17 additions & 3 deletions src/pages/Home-Page/home-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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> = {
한국항공대: '한국항공대학교',
Expand All @@ -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 호출
Expand Down