diff --git a/src/app/informations/(detail)/[category]/[id]/page.tsx b/src/app/informations/(detail)/[category]/[id]/page.tsx index 0bfe7271..ba4f4ec0 100644 --- a/src/app/informations/(detail)/[category]/[id]/page.tsx +++ b/src/app/informations/(detail)/[category]/[id]/page.tsx @@ -1,7 +1,9 @@ +import InformationViewer from "@/components/informations/InformationViewer"; +import PagePath from "@/components/informations/PagePath"; import RecommendationList from "@/components/informations/RecommendationList"; +import InformationViewerSkeleton from "@/components/skeleton/informations/InformationViewerSkeleton"; import RecommendationListSkeleton from "@/components/skeleton/informations/RecommendationListSkeleton"; import { CATEGORY_TEXT } from "@/constants/informations/category"; -import InformationViewerContainer from "@/containers/informations/InformationViewerContainer"; import { Suspense } from "react"; type MyProps = { @@ -36,7 +38,10 @@ export default function page({ params: { category, id } }: MyProps) { return (
- + + }> + + }> diff --git a/src/app/informations/list/[category]/page.tsx b/src/app/informations/list/[category]/page.tsx index 920a6916..a23dbc77 100644 --- a/src/app/informations/list/[category]/page.tsx +++ b/src/app/informations/list/[category]/page.tsx @@ -1,7 +1,7 @@ -import CategoryLinks from "@/components/informations/CategoryLinks"; +import InformationList from "@/components/informations/InformationList"; import InformationListSkeleton from "@/components/skeleton/informations/InformationListSkeleton"; import { CATEGORY_TEXT } from "@/constants/informations/category"; -import InformationListContainer from "@/containers/informations/InformationListContainer"; +import CategoryListContainer from "@/containers/informations/CategoryListContainer"; import { Suspense } from "react"; type MyProps = { @@ -19,19 +19,12 @@ export async function generateMetadata({ params: { category } }: MyProps) { export default function page({ params, searchParams }: MyProps) { return (
- - - } - > - + + }> +
); diff --git a/src/app/informations/list/layout.tsx b/src/app/informations/list/layout.tsx index 9e81a21f..3a9e6fed 100644 --- a/src/app/informations/list/layout.tsx +++ b/src/app/informations/list/layout.tsx @@ -1,6 +1,6 @@ +import TopList from "@/components/common/TopList"; import TopListSkeleton from "@/components/skeleton/common/TopListSkeleton"; import BannerContainer from "@/containers/common/BannerContainer"; -import TopListContainer from "@/containers/informations/TopListContainer"; import { Suspense } from "react"; export default function RootLayout({ @@ -12,7 +12,7 @@ export default function RootLayout({
}> - + {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx index ca6caf7b..4481a596 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 ( -
+
- - {/* TODO: async 사용 시 마우스 스크롤 문제 */} - }> - - - }> - - + + }> + + + + + }> + + +
); } diff --git a/src/components/home/BestInformationList.tsx b/src/components/home/BestInformationList.tsx index f87d05ea..bcba641d 100644 --- a/src/components/home/BestInformationList.tsx +++ b/src/components/home/BestInformationList.tsx @@ -1,13 +1,7 @@ -import { useDragScrollType } from "@/hooks/useDragScroll"; import InformationItem from "../common/InformationItem"; -import Link from "next/link"; -type MyProps = { - scrollHook: useDragScrollType; -}; - -const BestInformationList = ({ scrollHook }: MyProps) => { - //await new Promise((resolve) => setTimeout(resolve, 1000)); +const BestInformationList = async () => { + await new Promise((resolve) => setTimeout(resolve, 1000)); // TODO const data: { @@ -48,60 +42,16 @@ const BestInformationList = ({ scrollHook }: MyProps) => { ]; return ( -
-
-
-
-

-

{"고민을 덜어줄,"}

-

- BEST 여행 정보 -

-

- - 전체보기 - -
-

- 솔리투어에서 인기 여행 정보를 확인해보세요! -

-
- - 전체보기 - -
-
{ - e.preventDefault(); - scrollHook.onDragStart(e); - }} - onMouseMove={scrollHook.onDragMove} - onMouseUp={scrollHook.onDragEnd} - onMouseLeave={scrollHook.onDragEnd} - onTouchStart={scrollHook.onTouchStart} - onTouchMove={scrollHook.onTouchMove} - onTouchEnd={scrollHook.onTouchEnd} - > -
- {data.map((post, index) => ( - - ))} -
-
+
+ {data.map((post, index) => ( + + ))}
); }; diff --git a/src/components/home/ListTemplate.tsx b/src/components/home/ListTemplate.tsx new file mode 100644 index 00000000..f69c241e --- /dev/null +++ b/src/components/home/ListTemplate.tsx @@ -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 ( +
+
+
+
+

+

{titles[0]}

+

+ {titles[1]} {titles[2]} +

+

+ + 전체보기 + +
+

{description}

+
+ + 전체보기 + +
+
{ + e.preventDefault(); + scrollHook.onDragStart(e); + }} + onMouseMove={scrollHook.onDragMove} + onMouseUp={scrollHook.onDragEnd} + onMouseLeave={scrollHook.onDragEnd} + onTouchStart={scrollHook.onTouchStart} + onTouchMove={scrollHook.onTouchMove} + onTouchEnd={scrollHook.onTouchEnd} + > + {children} +
+
+ ); +}; + +export default ListTemplate; diff --git a/src/components/home/NewMeetingList.tsx b/src/components/home/NewMeetingList.tsx index 79ef4c51..3c35a514 100644 --- a/src/components/home/NewMeetingList.tsx +++ b/src/components/home/NewMeetingList.tsx @@ -1,12 +1,8 @@ -import { useDragScrollType } from "@/hooks/useDragScroll"; import MeetingItem from "../common/MeetingItem"; -import Link from "next/link"; -type MyProps = { - scrollHook: useDragScrollType; -}; +const NewMeetingList = async () => { + await new Promise((resolve) => setTimeout(resolve, 1000)); -const NewMeetingList = ({ scrollHook }: MyProps) => { // TODO const data: { category: string; @@ -109,69 +105,25 @@ const NewMeetingList = ({ scrollHook }: MyProps) => { ]; return ( -
-
-
-
-

-

{"새로움을 발견할,"}

-

- NEW 모임 -

-

- - 전체보기 - -
-

- 솔리투어에서 새로운 사람들과 최신 모임을 찾아보세요! -

-
- - 전체보기 - -
-
{ - e.preventDefault(); - scrollHook.onDragStart(e); - }} - onMouseMove={scrollHook.onDragMove} - onMouseUp={scrollHook.onDragEnd} - onMouseLeave={scrollHook.onDragEnd} - onTouchStart={scrollHook.onTouchStart} - onTouchMove={scrollHook.onTouchMove} - onTouchEnd={scrollHook.onTouchEnd} - > -
- {data.map((post, index) => ( - - ))} -
-
+
+ {data.map((post, index) => ( + + ))}
); }; diff --git a/src/components/home/TabList.tsx b/src/components/home/TabList.tsx index 95b41788..3d63b13c 100644 --- a/src/components/home/TabList.tsx +++ b/src/components/home/TabList.tsx @@ -3,7 +3,7 @@ import Link from "next/link"; const TabList = () => { return ( -
+
void; + openModal: () => void; +}; + +const CategoryList = ({ + category, + subCategory, + isModal, + closeModal, + openModal, +}: MyProps) => { + return ( +
+ {isModal && } + +
+ +
+
+ +
+
+ + +
+
+
+
+ ); +}; + +export default CategoryList; diff --git a/src/components/informations/ImageViewer.tsx b/src/components/informations/ImageViewer.tsx new file mode 100644 index 00000000..f517e41c --- /dev/null +++ b/src/components/informations/ImageViewer.tsx @@ -0,0 +1,65 @@ +import { useDragScrollType } from "@/hooks/useDragScroll"; +import Image from "next/image"; + +type MyProps = { + images: string[]; + mainImageIndex: number; + scrollHook: useDragScrollType; + setMainImageIndex: (index: number) => void; +}; + +const ImageViewer = ({ + images, + mainImageIndex, + scrollHook, + setMainImageIndex, +}: MyProps) => { + return ( +
+
+ {"/background"} +
+
{ + e.preventDefault(); + scrollHook.onDragStart(e); + }} + onMouseMove={scrollHook.onDragMove} + onMouseUp={scrollHook.onDragEnd} + onMouseLeave={scrollHook.onDragEnd} + onTouchStart={scrollHook.onTouchStart} + onTouchMove={scrollHook.onTouchMove} + onTouchEnd={scrollHook.onTouchEnd} + > + {images.map((image, index) => ( + {"/background"} { + setMainImageIndex(index); + }} + onTouchEnd={(e) => { + setMainImageIndex(index); + }} + /> + ))} +
+
+ ); +}; + +export default ImageViewer; diff --git a/src/components/informations/InformationList.tsx b/src/components/informations/InformationList.tsx index 0bc79b66..ed9172c0 100644 --- a/src/components/informations/InformationList.tsx +++ b/src/components/informations/InformationList.tsx @@ -1,25 +1,7 @@ -import { IoIosArrowDown } from "react-icons/io"; import Pagination from "../common/Pagination"; import InformationItem from "../common/InformationItem"; -import { VscSettings } from "react-icons/vsc"; -import SubCategoryList from "./SubCategoryList"; -import InformationFilterModal from "./InformationFilterModal"; -type MyProps = { - category: string; - subCategory: string; - isModal: boolean; - closeModal: () => void; - openModal: () => void; -}; - -const InformationList = async ({ - category, - subCategory, - isModal, - closeModal, - openModal, -}: MyProps) => { +const InformationList = async () => { // TODO: API 호출 await new Promise((resolve) => setTimeout(resolve, 1000)); @@ -91,35 +73,7 @@ const InformationList = async ({ ]; return ( -
- {isModal && } -
- -
-
- -
-
- - -
-
-
+
{data.map((value, index) => ( ; - onDragStart: (e: MouseEvent) => void; - onDragMove: (e: MouseEvent) => void; - onDragEnd: (e: MouseEvent) => void; - onTouchStart: (e: TouchEvent) => void; - onTouchMove: (e: TouchEvent) => void; - onTouchEnd: (e: TouchEvent) => void; - setMainImageIndex: (index: number) => void; -}; +import ImageViewerContainer from "@/containers/informations/ImageViewerContainer"; // TODO -const InformationViewer = ({ - category, - id, - mainImageIndex, - listRef, - onDragStart, - onDragMove, - onDragEnd, - onTouchStart, - onTouchMove, - onTouchEnd, - setMainImageIndex, -}: MyProps) => { - //const info = await fetch("") +const InformationViewer = async () => { + await new Promise((resolve) => setTimeout(resolve, 3000)); + const info = { title: "책과 공간이 매력적인 선릉역 테라로사", username: "하몽", @@ -66,7 +39,6 @@ const InformationViewer = ({ return (
-

{info.title}

@@ -104,48 +76,7 @@ const InformationViewer = ({
-
- {"/background"} -
-
{ - e.preventDefault(); - onDragStart(e); - }} - onMouseMove={onDragMove} - onMouseUp={onDragEnd} - onMouseLeave={onDragEnd} - onTouchStart={onTouchStart} - onTouchMove={onTouchMove} - onTouchEnd={onTouchEnd} - > - {info.images.map((image, index) => ( - {"/background"} { - setMainImageIndex(index); - }} - onTouchEnd={(e) => { - setMainImageIndex(index); - }} - /> - ))} -
+
diff --git a/src/components/informations/SubCategoryList.tsx b/src/components/informations/SubCategoryLinks.tsx similarity index 82% rename from src/components/informations/SubCategoryList.tsx rename to src/components/informations/SubCategoryLinks.tsx index 1bd8ac22..f9516631 100644 --- a/src/components/informations/SubCategoryList.tsx +++ b/src/components/informations/SubCategoryLinks.tsx @@ -1,4 +1,3 @@ -import { CATEGORY_TEXT } from "@/constants/informations/category"; import { SUBCATEGORY } from "@/constants/informations/subCategory"; import Link from "next/link"; @@ -7,7 +6,7 @@ type MyProps = { subCategory: string; }; -const SubCategoryList = ({ category, subCategory }: MyProps) => { +const SubCategoryLinks = ({ category, subCategory }: MyProps) => { const subCategories = SUBCATEGORY[category]; return ( @@ -28,4 +27,4 @@ const SubCategoryList = ({ category, subCategory }: MyProps) => { ); }; -export default SubCategoryList; +export default SubCategoryLinks; diff --git a/src/components/skeleton/home/BestInformationListSkeleton.tsx b/src/components/skeleton/home/BestInformationListSkeleton.tsx index 7c9a9680..2adc96a4 100644 --- a/src/components/skeleton/home/BestInformationListSkeleton.tsx +++ b/src/components/skeleton/home/BestInformationListSkeleton.tsx @@ -1,43 +1,11 @@ -import Link from "next/link"; import InformationItemSkeleton from "../common/InformationItemSkeleton"; const BestInformationListSkeleton = () => { return ( -
-
-
-
-

-

{"고민을 덜어줄,"}

-

- BEST 여행 정보 -

-

- - 전체보기 - -
-

- 솔리투어에서 인기 여행 정보를 확인해보세요! -

-
- - 전체보기 - -
-
-
- {[1, 2, 3, 4, 5, 6].map((value) => ( - - ))} -
-
+
+ {[1, 2, 3, 4, 5, 6].map((value) => ( + + ))}
); }; diff --git a/src/components/skeleton/home/NewMeetingListSkeleton.tsx b/src/components/skeleton/home/NewMeetingListSkeleton.tsx index 9228a8b6..cb0a5524 100644 --- a/src/components/skeleton/home/NewMeetingListSkeleton.tsx +++ b/src/components/skeleton/home/NewMeetingListSkeleton.tsx @@ -1,43 +1,11 @@ -import Link from "next/link"; import MeetingItemSkeleton from "../common/MeetingItemSkeleton"; const NewMeetingListSkeleton = () => { return ( -
-
-
-
-

-

{"새로움을 발견할,"}

-

- NEW 모임 -

-

- - 전체보기 - -
-

- 솔리투어에서 새로운 사람들과 최신 모임을 찾아보세요! -

-
- - 전체보기 - -
-
-
- {[1, 2, 3, 4, 5, 6].map((value) => ( - - ))} -
-
+
+ {[1, 2, 3, 4, 5, 6].map((value) => ( + + ))}
); }; diff --git a/src/components/skeleton/informations/InformationListSkeleton.tsx b/src/components/skeleton/informations/InformationListSkeleton.tsx index 9592b98d..c9492397 100644 --- a/src/components/skeleton/informations/InformationListSkeleton.tsx +++ b/src/components/skeleton/informations/InformationListSkeleton.tsx @@ -1,39 +1,9 @@ -import SubCategoryList from "@/components/informations/SubCategoryList"; import InformationItemSkeleton from "../common/InformationItemSkeleton"; import PaginationSkeleton from "../common/PaginationSkeleton"; -type MyProps = { - category: string; - subCategory: string; -}; - -const InformationListSkeleton = ({ category, subCategory }: MyProps) => { +const InformationListSkeleton = () => { return ( -
-
- -
-
- -
-
- - -
-
-
+
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((value) => ( diff --git a/src/components/skeleton/informations/InformationViewerSkeleton.tsx b/src/components/skeleton/informations/InformationViewerSkeleton.tsx new file mode 100644 index 00000000..9374aef5 --- /dev/null +++ b/src/components/skeleton/informations/InformationViewerSkeleton.tsx @@ -0,0 +1,112 @@ +const InformationViewerSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+

+

+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[1, 2, 3, 4].map((value) => ( +
+ ))} +
+
+
+
+
+
+
+
+
+

+

+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[1, 2, 3].map((value) => ( +
+ ))} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default InformationViewerSkeleton; diff --git a/src/containers/home/BestInformationListContainer.tsx b/src/containers/home/BestInformationListContainer.tsx deleted file mode 100644 index 9b88bf7b..00000000 --- a/src/containers/home/BestInformationListContainer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -"use client"; - -import BestInformationList from "@/components/home/BestInformationList"; -import useDragScroll from "@/hooks/useDragScroll"; - -const BestInformationListContainer = () => { - const scrollHook = useDragScroll(); - - return ; -}; - -export default BestInformationListContainer; diff --git a/src/containers/home/ListTemplateContainer.tsx b/src/containers/home/ListTemplateContainer.tsx new file mode 100644 index 00000000..e0332026 --- /dev/null +++ b/src/containers/home/ListTemplateContainer.tsx @@ -0,0 +1,26 @@ +"use client"; + +import ListTemplate from "@/components/home/ListTemplate"; +import useDragScroll from "@/hooks/useDragScroll"; + +type MyProps = { + titles: string[]; + description: string; + children: React.ReactNode; +}; + +const ListTemplateContainer = ({ titles, description, children }: MyProps) => { + const scrollHook = useDragScroll(); + + return ( + + {children} + + ); +}; + +export default ListTemplateContainer; diff --git a/src/containers/home/NewMeetingListContainer.tsx b/src/containers/home/NewMeetingListContainer.tsx deleted file mode 100644 index 19a64d1e..00000000 --- a/src/containers/home/NewMeetingListContainer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -"use client"; - -import NewMeetingList from "@/components/home/NewMeetingList"; -import useDragScroll from "@/hooks/useDragScroll"; - -const NewMeetingListContainer = () => { - const scrollHook = useDragScroll(); - - return ; -}; - -export default NewMeetingListContainer; diff --git a/src/containers/informations/InformationListContainer.tsx b/src/containers/informations/CategoryListContainer.tsx similarity index 63% rename from src/containers/informations/InformationListContainer.tsx rename to src/containers/informations/CategoryListContainer.tsx index 1fc581f5..929ecc08 100644 --- a/src/containers/informations/InformationListContainer.tsx +++ b/src/containers/informations/CategoryListContainer.tsx @@ -1,6 +1,6 @@ "use client"; -import InformationList from "@/components/informations/InformationList"; +import CategoryList from "@/components/informations/CategoryList"; import { useState } from "react"; type MyProps = { @@ -8,11 +8,11 @@ type MyProps = { subCategory: string; }; -const InformationListContainer = ({ category, subCategory }: MyProps) => { +const CategoryListContainer = ({ category, subCategory }: MyProps) => { const [isModal, setIsModal] = useState(false); return ( - { ); }; -export default InformationListContainer; +export default CategoryListContainer; diff --git a/src/containers/informations/ImageViewerContainer.tsx b/src/containers/informations/ImageViewerContainer.tsx new file mode 100644 index 00000000..cd895774 --- /dev/null +++ b/src/containers/informations/ImageViewerContainer.tsx @@ -0,0 +1,25 @@ +"use client"; + +import ImageViewer from "@/components/informations/ImageViewer"; +import useDragScroll from "@/hooks/useDragScroll"; +import { useState } from "react"; + +type MyProps = { + images: string[]; +}; + +const ImageViewerContainer = ({ images }: MyProps) => { + const [mainImageIndex, setMainImageIndex] = useState(0); + const scrollHook = useDragScroll(); + + return ( + + ); +}; + +export default ImageViewerContainer; diff --git a/src/containers/informations/InformationViewerContainer.tsx b/src/containers/informations/InformationViewerContainer.tsx deleted file mode 100644 index 890e30ee..00000000 --- a/src/containers/informations/InformationViewerContainer.tsx +++ /dev/null @@ -1,41 +0,0 @@ -"use client"; - -import InformationViewer from "@/components/informations/InformationViewer"; -import useDragScroll from "@/hooks/useDragScroll"; -import { useState } from "react"; - -type MyProps = { - category: string; - id: number; -}; - -const InformationViewerContainer = ({ category, id }: MyProps) => { - const [mainImageIndex, setMainImageIndex] = useState(0); - const { - listRef, - onDragStart, - onDragMove, - onDragEnd, - onTouchStart, - onTouchMove, - onTouchEnd, - } = useDragScroll(); - - return ( - - ); -}; - -export default InformationViewerContainer; diff --git a/src/containers/informations/TopListContainer.tsx b/src/containers/informations/TopListContainer.tsx deleted file mode 100644 index 6d2ce58d..00000000 --- a/src/containers/informations/TopListContainer.tsx +++ /dev/null @@ -1,13 +0,0 @@ -"use client"; - -import TopList from "@/components/common/TopList"; - -type MyProps = { - category: "여행" | "모임"; -}; - -const TopListContainer = ({ category }: MyProps) => { - return ; -}; - -export default TopListContainer;