diff --git a/public/assets/images/placeholder.svg b/public/assets/images/placeholder.svg new file mode 100644 index 00000000..e763910b --- /dev/null +++ b/public/assets/images/placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/admin/components/preview/components/preview.tsx b/src/app/admin/components/preview/components/preview.tsx index 7838daa0..ddfabab5 100644 --- a/src/app/admin/components/preview/components/preview.tsx +++ b/src/app/admin/components/preview/components/preview.tsx @@ -1,18 +1,41 @@ "use client"; -import React, { SetStateAction, useState } from "react"; +import React, { SetStateAction, useEffect, useState } from "react"; import ProfileBox from "@app/admin/components/profile-box"; import BlockList from "@app/components/page/block-list"; +import { Block } from "@/types/apis"; + +import { adminApiInstance } from "../../../../../utils/apis"; interface Props { setIsOpen?: React.Dispatch>; } const Preview = ({ setIsOpen }: Props) => { const [userId, setUserId] = useState(""); + const [blocks, setBlocks] = useState([]); + useEffect(() => { + getBlocks().then(); + }, []); + + async function getBlocks() { + const blockApis = await adminApiInstance; + const response = userId + ? await blockApis.getProfileBlocks(userId) + : await blockApis.getBlocks(); + if (!response) return; + if (response.ok) { + const { data } = await response.json(); + setBlocks(data); + } else { + sessionStorage.removeItem("token"); + // alert("블록 조회 실패"); + } + } + return (
- +
//
); diff --git a/src/app/components/page/block-list.tsx b/src/app/components/page/block-list.tsx index 469fb4fa..362913f6 100644 --- a/src/app/components/page/block-list.tsx +++ b/src/app/components/page/block-list.tsx @@ -27,38 +27,18 @@ const PreviewEvent = dynamic( interface Props { setUserId: React.Dispatch>; setIsOpen?: React.Dispatch>; + blocks: Block[]; } -const BlockList = ({ setIsOpen, setUserId }: Props) => { +const BlockList = ({ setIsOpen, setUserId, blocks }: Props) => { const pathname = usePathname(); const splitPathName = pathname.split("/"); const userId = splitPathName[splitPathName.length - 1]; const isAdmin = pathname.includes("admin"); - const [blocks, setBlocks] = useState([]); + useEffect(() => { setUserId(userId); }, [pathname]); - useEffect(() => { - getBlocks().then(); - }, []); - - async function getBlocks() { - const blockApis = await adminApiInstance; - if (!isAdmin && !userId) return; - console.log(userId); - const response = userId - ? await blockApis.getProfileBlocks(userId) - : await blockApis.getBlocks(); - if (!response) return; - if (response.ok) { - const { data } = await response.json(); - setBlocks(data); - } else { - sessionStorage.removeItem("token"); - // alert("블록 조회 실패"); - } - } - if (!blocks || blocks.length === 0) return ; const setComponentType = (block: Block) => { diff --git a/src/app/home/components/header.tsx b/src/app/home/components/header.tsx new file mode 100644 index 00000000..93912988 --- /dev/null +++ b/src/app/home/components/header.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import Link from "next/link"; + +const Header = () => { + return ( +
+
+
+ + linkle + + +
+
+ + +
+
+
+ ); +}; + +export default Header; diff --git a/src/app/home/components/post-card.tsx b/src/app/home/components/post-card.tsx new file mode 100644 index 00000000..c7c99231 --- /dev/null +++ b/src/app/home/components/post-card.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import Image from "next/image"; +import Link from "next/link"; + +import { User } from "@/types/user"; + +export function PostCard({ userId, name, email }: User) { + return ( + +
+ {"유저 +
+
+

{name}

+

{email}

+
+ {userId} +
+
+ + ); +} diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 6bf88830..c8e4ef19 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,13 +1,13 @@ "use client"; import React, { useEffect, useState } from "react"; -import Image from "next/image"; -import Link from "next/link"; import { User } from "@/types/user"; +import { PostCard } from "@app/home/components/post-card"; +import Header from "@app/home/components/header"; import { mainApiInstance } from "../../utils/apis"; -const Page = () => { +export default function Home() { const [userList, setUserList] = useState(); const getAllUsers = async () => { const mainApis = await mainApiInstance; @@ -26,33 +26,15 @@ const Page = () => { }, []); if (!userList) return
Loading..
; return ( -
- -
    - {userList.map((user, index) => { - return ( -
  • - -
    - {"home -
    -
    -

    {user.name}

    -

    {user.email}

    -
    - -
    • - ); - })} -
-
+
+
+
+
+ {userList.map((post, index) => ( + + ))} +
+
+
); -}; - -export default Page; +}