-
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.
Merge pull request #87 from TripInfoWeb/dev_skeleton
Feature: 메인 & 정보 페이지 Skeleton 구현
- Loading branch information
Showing
24 changed files
with
443 additions
and
474 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
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,25 +1,33 @@ | ||
| import BestInformationList from "@/components/home/BestInformationList"; | ||
| import NewMeetingList from "@/components/home/NewMeetingList"; | ||
| import TabList from "@/components/home/TabList"; | ||
| import BestInformationListSkeleton from "@/components/skeleton/home/BestInformationListSkeleton"; | ||
| import NewMeetingListSkeleton from "@/components/skeleton/home/NewMeetingListSkeleton"; | ||
| import BestInformationListContainer from "@/containers/home/BestInformationListContainer"; | ||
| import HomeCarouselContainer from "@/containers/home/HomeCarouselContainer"; | ||
| import NewMeetingListContainer from "@/containers/home/NewMeetingListContainer"; | ||
| import ListTemplateContainer from "@/containers/home/ListTemplateContainer"; | ||
| import { Suspense } from "react"; | ||
|
|
||
| // todo | ||
| export default function Home() { | ||
| return ( | ||
| <div className="flex flex-col items-center"> | ||
| <div className="mb-20 flex flex-col items-center gap-20"> | ||
| <HomeCarouselContainer /> | ||
| <TabList /> | ||
|
|
||
| {/* TODO: async 사용 시 마우스 스크롤 문제 */} | ||
| <Suspense fallback={<BestInformationListSkeleton />}> | ||
| <BestInformationListContainer /> | ||
| </Suspense> | ||
| <Suspense fallback={<NewMeetingListSkeleton />}> | ||
| <NewMeetingListContainer /> | ||
| </Suspense> | ||
| <ListTemplateContainer | ||
| titles={["고민을 덜어줄,", "BEST", "여행 정보"]} | ||
| description={"솔리투어에서 인기 여행 정보를 확인해보세요!"} | ||
| > | ||
| <Suspense fallback={<BestInformationListSkeleton />}> | ||
| <BestInformationList /> | ||
| </Suspense> | ||
| </ListTemplateContainer> | ||
| <ListTemplateContainer | ||
| titles={["새로움을 발견할,", "NEW", "모임"]} | ||
| description={"솔리투어에서 새로운 사람들과 최신 모임을 찾아보세요!"} | ||
| > | ||
| <Suspense fallback={<NewMeetingListSkeleton />}> | ||
| <NewMeetingList /> | ||
| </Suspense> | ||
| </ListTemplateContainer> | ||
| </div> | ||
| ); | ||
| } |
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,64 @@ | ||
| import { useDragScrollType } from "@/hooks/useDragScroll"; | ||
| import Link from "next/link"; | ||
|
|
||
| type MyProps = { | ||
| titles: string[]; | ||
| description: string; | ||
| scrollHook: useDragScrollType; | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| const ListTemplate = ({ | ||
| titles, | ||
| description, | ||
| scrollHook, | ||
| children, | ||
| }: MyProps) => { | ||
| return ( | ||
| <div className="flex w-[60rem] flex-col max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]"> | ||
| <div className="flex flex-row items-center justify-between max-[744px]:justify-center"> | ||
| <div className="flex flex-col gap-2 max-[744px]:w-full"> | ||
| <div className="flex flex-row items-center justify-between gap-1"> | ||
| <h2 className="flex flex-row items-center gap-2 text-2xl font-bold text-black max-[744px]:flex-col max-[744px]:items-start max-[744px]:gap-0"> | ||
| <p>{titles[0]}</p> | ||
| <p> | ||
| <span className="text-main">{titles[1]}</span> {titles[2]} | ||
| </p> | ||
| </h2> | ||
| <Link | ||
| className="hidden h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-[0.0625rem] border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:flex" | ||
| href="/informations/list/restaurant?subCategory=all" | ||
| > | ||
| 전체보기 | ||
| </Link> | ||
| </div> | ||
| <p className="text-sm font-medium text-gray1">{description}</p> | ||
| </div> | ||
| <Link | ||
| className="flex h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-[0.0625rem] border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:hidden" | ||
| href="/informations/list/restaurant?subCategory=all" | ||
| > | ||
| 전체보기 | ||
| </Link> | ||
| </div> | ||
| <div | ||
| className="overflow-x-auto" | ||
| ref={scrollHook.listRef} | ||
| onMouseDown={(e) => { | ||
| e.preventDefault(); | ||
| scrollHook.onDragStart(e); | ||
| }} | ||
| onMouseMove={scrollHook.onDragMove} | ||
| onMouseUp={scrollHook.onDragEnd} | ||
| onMouseLeave={scrollHook.onDragEnd} | ||
| onTouchStart={scrollHook.onTouchStart} | ||
| onTouchMove={scrollHook.onTouchMove} | ||
| onTouchEnd={scrollHook.onTouchEnd} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ListTemplate; |
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
Oops, something went wrong.