-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 세미나 페이지 리팩토링 * 리뷰 반영 * 리뷰 반영
- Loading branch information
Showing
6 changed files
with
152 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,64 @@ | ||
| 'use client'; | ||
|
|
||
| import { useCallback, useEffect, useState } from 'react'; | ||
| import useSWR from 'swr'; | ||
|
|
||
| import { getMockSeminarPosts } from '@/apis/seminar'; | ||
|
|
||
| import Pagination from '@/components/common/Pagination'; | ||
| import PageLayout from '@/components/layout/pageLayout/PageLayout'; | ||
| import SeminarSearchBar from '@/components/seminar/SearchBar'; | ||
| import SeminarRow from '@/components/seminar/SeminarRow'; | ||
| import SeminarYear from '@/components/seminar/SeminarYear'; | ||
|
|
||
| import { useCustomSearchParams } from '@/hooks/useCustomSearchParams'; | ||
|
|
||
| import { seminar } from '@/types/page'; | ||
| import { GETSeminarPostsResponse, SimpleSeminarPost } from '@/types/post'; | ||
|
|
||
| const postsCountPerPage = 10; | ||
|
|
||
| interface SeminarListWithYear extends SimpleSeminarPost { | ||
| year?: number; | ||
| } | ||
|
|
||
| export default function SeminarPage() { | ||
| const { page, keyword, setSearchParams } = useCustomSearchParams(); | ||
| const [totalPostsCount, setTotalPostsCount] = useState(0); | ||
| const [posts, setPosts] = useState<SeminarListWithYear[]>([]); | ||
|
|
||
| const setCurrentPage = (pageNum: number) => { | ||
| setSearchParams({ purpose: 'navigation', page: pageNum }); | ||
| }; | ||
|
|
||
| const fetchPost = useCallback(async () => { | ||
| const res = await getMockSeminarPosts({ | ||
| keyword: keyword === null ? undefined : keyword, | ||
| page: page, | ||
| }); | ||
|
|
||
| const postsWithYear: SeminarListWithYear[] = []; | ||
|
|
||
| res.seminarList.forEach((post) => { | ||
| const postYear = new Date(post.date).getFullYear(); | ||
|
|
||
| if (post.isLast) { | ||
| postsWithYear.push({ | ||
| ...post, | ||
| year: postYear, | ||
| }); | ||
| } else { | ||
| postsWithYear.push({ | ||
| ...post, | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| setTotalPostsCount(res.total); | ||
| setPosts(postsWithYear); | ||
| }, [keyword, page]); | ||
|
|
||
| useEffect(() => { | ||
| fetchPost(); | ||
| }, [fetchPost]); | ||
| const { data, isLoading, error } = useSWR( | ||
| { url: '/seminar', params: { keyword, page } }, | ||
| getMockSeminarPosts, | ||
| ); | ||
|
|
||
| return ( | ||
| <PageLayout titleType="big" titleMargin="mb-6"> | ||
| <div className="flex flex-row items-center gap-6"> | ||
| <h3 className="text-neutral-700 font-yoon text-md font-bold w-7 text-center leading-[1.2rem]"> | ||
| 검색 | ||
| </h3> | ||
| <SeminarSearchBar setSearchParams={setSearchParams} /> | ||
| </div> | ||
| <div className="flex flex-col mt-10 mb-8"> | ||
| {posts.map((post, i) => ( | ||
| <div key={post.year}> | ||
| {post.isLast && ( | ||
| <div className={`border-b-[1px] border-neutral-500 ${i !== 0 ? 'mt-12' : null}`}> | ||
| <h3 className="text-neutral-700 font-noto text-[1.25rem] font-bold pb-[.69rem] w-[4.5rem] text-center leading-7"> | ||
| {post.year} | ||
| </h3> | ||
| </div> | ||
| )} | ||
| <SeminarRow | ||
| title={post.title} | ||
| host={post.host} | ||
| company={post.company} | ||
| date={new Date(post.date)} | ||
| location={post.location} | ||
| imageURL={post.imageURL} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <Pagination | ||
| totalPostsCount={totalPostsCount} | ||
| postsCountPerPage={postsCountPerPage} | ||
| currentPage={page} | ||
| setCurrentPage={setCurrentPage} | ||
| /> | ||
| </PageLayout> | ||
| data && ( | ||
| <PageLayout titleType="big" titleMargin="mb-6"> | ||
| <div className="flex flex-row items-center gap-6"> | ||
| <h3 className="text-neutral-700 font-yoon text-md font-bold w-7 text-center leading-[1.2rem]"> | ||
| 검색 | ||
| </h3> | ||
| <SeminarSearchBar setSearchParams={setSearchParams} /> | ||
| </div> | ||
| <div className="flex flex-col mt-10 mb-8 border-neutral-200 border-b-[1px]"> | ||
| {data.searchList.map((post, index) => ( | ||
| <div key={post.id}> | ||
| {post.isYearLast && <SeminarYear index={index} startDate={post.startDate} />} | ||
| <SeminarRow | ||
| id={post.id} | ||
| title={post.title} | ||
| host={post.name} | ||
| company={post.affiliation} | ||
| date={new Date(post.startDate)} | ||
| location={post.location} | ||
| imageURL={post.imageURL} | ||
| isYearLast={post.isYearLast} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <Pagination | ||
| totalPostsCount={data.total} | ||
| postsCountPerPage={postsCountPerPage} | ||
| currentPage={page} | ||
| setCurrentPage={setCurrentPage} | ||
| /> | ||
| </PageLayout> | ||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| export interface SeminarYearProps { | ||
| index: number; | ||
| startDate: string; | ||
| } | ||
|
|
||
| export default function SeminarYear({ index, startDate }: SeminarYearProps) { | ||
| const seminarYear = new Date(startDate).getFullYear(); | ||
| return ( | ||
| <div className={`border-b-[1px] border-neutral-500 ${index !== 0 ? 'mt-12' : null}`}> | ||
| <h3 className="text-neutral-700 font-noto text-[1.25rem] font-bold pb-[.69rem] w-[4.5rem] text-center leading-7"> | ||
| {seminarYear} | ||
| </h3> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.