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/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/InformationViewer.tsx b/src/components/informations/InformationViewer.tsx index 545d49ef..ec0cba47 100644 --- a/src/components/informations/InformationViewer.tsx +++ b/src/components/informations/InformationViewer.tsx @@ -1,41 +1,14 @@ import ItemTag from "./ItemTag"; import Image from "next/image"; -import PagePath from "./PagePath"; -import { MouseEvent, RefObject, TouchEvent } from "react"; import { FaRegHeart } from "react-icons/fa"; import { TiLocation } from "react-icons/ti"; import KakaoMapLinkContainer from "@/containers/common/KakaoMapLinkContainer"; -import { CATEGORY_TEXT } from "@/constants/informations/category"; - -type MyProps = { - category: string; - id: number; - mainImageIndex: number; - listRef: RefObject; - 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/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/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;