@@ -110,15 +148,15 @@ function Home() {
return (
@@ -188,4 +226,8 @@ function UniversityCard({ university }: { university: University }) {
);
}
+function getRegionParam(value: string | null): Region | undefined {
+ return REGION_OPTIONS.some((region) => region.value === value) ? (value as Region) : undefined;
+}
+
export default Home;
diff --git a/apps/web/src/pages/RegisterClub/index.tsx b/apps/web/src/pages/RegisterClub/index.tsx
new file mode 100644
index 0000000..48b5051
--- /dev/null
+++ b/apps/web/src/pages/RegisterClub/index.tsx
@@ -0,0 +1,56 @@
+import EditClub from '@/assets/edit-club-detail.png';
+import NewClub from '@/assets/new-club.png';
+import Register from '@/assets/register-club.png';
+export default function RegisterClub() {
+ const registerClubCards = [
+ {
+ image: EditClub,
+ imageAlt: '동아리 정보 수정',
+ title: '동아리 정보 수정',
+ description: '이미 KONECT에 등록된 동아리의 소개, 사진, 상세정보를 추가하거나 수정할 수 있어요',
+ target: '대상 : 동아리 회장, 임원진',
+ },
+ {
+ image: NewClub,
+ imageAlt: '신규 동아리 등록',
+ title: '신규 동아리 등록',
+ description: '아직 KONECT에 등록되지 않은 동아리의 기본 정보와 소개 정보를 제출할 수 있어요.',
+ target: '대상 : 미등록된 동아리의 관계자',
+ },
+ {
+ image: Register,
+ imageAlt: '학교 동아리 목록 등록',
+ title: '학교 동아리 목록 등록',
+ description: '총동 / 학생회 담당자가 학교 단위의 동아리 목록과 기본 정보를 한 번에 전달할 수 있어요.',
+ target: '대상 : 총동아리 연합회 / 학생회 담당자',
+ },
+ ];
+ return (
+
+
+
+
+ 동아리 정보 등록/수정
+
+
+ 작성자 유형에 따라 필요한 항목이 다릅니다. 현재 상황에 맞는 항목을 선택해주세요.
+
+
+
+ {registerClubCards.map((card) => (
+
+

+
+
{card.title}
+ {card.description}
+ {card.target}
+
+
+ ))}
+
+
+ );
+}
diff --git a/apps/web/src/pages/UniversityClubList/index.tsx b/apps/web/src/pages/UniversityClubList/index.tsx
index cb12ca5..5e5cc95 100644
--- a/apps/web/src/pages/UniversityClubList/index.tsx
+++ b/apps/web/src/pages/UniversityClubList/index.tsx
@@ -5,14 +5,17 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
import { Link, Navigate, useParams, useSearchParams } from 'react-router-dom';
import { isClubCategory, type ClubCategory } from '@/apis/common/club';
+import type { Region } from '@/apis/home/entity';
import type { UniversityClub, UniversityClubListRequestParams } from '@/apis/universityClub/entity';
import { universityClubQueries } from '@/apis/universityClub/queries';
import SearchIcon from '@/assets/svg/search-icon.svg';
import Breadcrumb from '@/components/Breadcrumb';
import UniversityClubSidebar from '@/components/UniversityClubSidebar';
import { CATEGORY_TEXT_COLORS } from '@/constants/club';
+import useResetScroll from '@/utils/hooks/useResetScroll';
const PAGE_LIMIT = 12;
+const HOME_UNIVERSITY_SECTION = 'universities';
function UniversityClubList() {
const { universityId } = useParams();
@@ -32,6 +35,8 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
const [searchKeyword, setSearchKeyword] = useState(query);
const observerRef = useRef
(null);
+ useResetScroll(universityId);
+
const updateSearchQuery = useDebouncedCallback((value: string) => {
updateListSearchParams(setSearchParams, { query: value.trim() });
});
@@ -49,7 +54,7 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useSuspenseInfiniteQuery(
universityClubQueries.infiniteList(universityId, requestParams)
);
- const [{ university, totalCount, categories }] = data.pages;
+ const [{ university, categories }] = data.pages;
const clubs = data.pages.flatMap((pageData) => pageData.clubs);
const handleSearchKeywordChange = (event: ChangeEvent) => {
@@ -88,10 +93,16 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
return (
-
+
-
+
@@ -106,29 +117,27 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
-
-
+
+ handleCategoryChange()}
+ />
+ {categories.map((category) => (
handleCategoryChange()}
+ key={category.category}
+ label={category.categoryName}
+ count={category.count}
+ isSelected={category.category === selectedCategory}
+ onClick={() => handleCategoryChange(category.category)}
/>
- {categories.map((category) => (
- handleCategoryChange(category.category)}
- />
- ))}
-
+ ))}
-
+
선택한 대학의 동아리를 확인해보세요. 관심 있는 동아리의 소개를 살펴볼 수 있어요.
@@ -224,6 +233,16 @@ function getCategoryParam(value: string | null): ClubCategory | undefined {
return undefined;
}
+function getHomeUniversitySectionPath(region: Region) {
+ const params = new URLSearchParams({ section: HOME_UNIVERSITY_SECTION });
+
+ if (region !== 'UNKNOWN') {
+ params.set('region', region);
+ }
+
+ return `/?${params.toString()}`;
+}
+
function updateListSearchParams(
setSearchParams: ReturnType
[1],
next: { query?: string; category?: ClubCategory }
diff --git a/apps/web/src/utils/hooks/useResetScroll.ts b/apps/web/src/utils/hooks/useResetScroll.ts
new file mode 100644
index 0000000..304d1b3
--- /dev/null
+++ b/apps/web/src/utils/hooks/useResetScroll.ts
@@ -0,0 +1,9 @@
+import { useLayoutEffect } from 'react';
+
+export function useResetScroll(resetKey?: unknown) {
+ useLayoutEffect(() => {
+ window.scrollTo({ top: 0, left: 0 });
+ }, [resetKey]);
+}
+
+export default useResetScroll;