✨[Feat] home 페이지 작성 #292

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<SetStateAction<boolean>>;
 }
 const Preview = ({ setIsOpen }: Props) => {
   const [userId, setUserId] = useState<string>("");
+  const [blocks, setBlocks] = useState<Block[]>([]);
+  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 (
     <div className="mx-auto max-w-2xl">
       <ProfileBox userId={userId} />
-      <BlockList setIsOpen={setIsOpen} setUserId={setUserId} />
+      <BlockList setIsOpen={setIsOpen} setUserId={setUserId} blocks={blocks} />
     </div>
     // <div className="absolute left-1/2 top-[45%] flex h-3/4 w-[30rem] -translate-x-1/2 -translate-y-1/2 transform flex-col gap-4 rounded-3xl bg-slate-333 p-6">
   );

src/app/components/page/block-list.tsx

@@ -27,38 +27,18 @@ const PreviewEvent = dynamic(
 interface Props {
   setUserId: React.Dispatch<React.SetStateAction<string>>;
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  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<Block[]>([]);
+
   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 <EmptyBlock />;
 
   const setComponentType = (block: Block) => {

src/app/home/components/header.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Link from "next/link";
+
+const Header = () => {
+  return (
+    <header className="bg-background sticky top-0 z-50 w-full border-b">
+      <div className="container flex h-16 items-center justify-between px-4">
+        <div className="flex items-center gap-6">
+          <Link href="/" className="text-xl font-bold">
+            linkle
+          </Link>
+          <nav className="flex items-center gap-4">
+            <Link
+              href="/trending"
+              className="text-sm font-medium hover:text-primary"
+            >
+              트렌딩
+            </Link>
+            <Link
+              href="/latest"
+              className="text-sm font-medium hover:text-primary"
+            >
+              최신
+            </Link>
+            <Link
+              href="/feed"
+              className="text-sm font-medium hover:text-primary"
+            >
+              피드
+            </Link>
+          </nav>
+        </div>
+        <div className="flex items-center gap-4">
+          <select className="bg-background rounded-md border px-2 py-1 text-sm">
+            <option>이번 주</option>
+            <option>이번 달</option>
+            <option>올해</option>
+          </select>
+          <button className="rounded-full p-2 hover:bg-gray-100">||</button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

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 (
+    <Link
+      href={`/profile/${userId}`}
+      className="group block overflow-hidden rounded-lg bg-white shadow-sm transition-shadow hover:shadow-md"
+    >
+      <div className="aspect-[1.91/1] overflow-hidden bg-gray-100">
+        <Image
+          src={`/assets/images/placeholder.svg`}
+          alt={"유저 대표 이미지"}
+          width={400}
+          height={209}
+          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+        />
+      </div>
+      <div className="p-4">
+        <h2 className="mb-2 text-xl font-bold tracking-tight">{name}</h2>
+        <p className="mb-4 line-clamp-2 text-sm text-gray-600">{email}</p>
+        <div className="flex items-center justify-between text-sm text-gray-500">
+          <span>{userId}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}

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<User[]>();
   const getAllUsers = async () => {
     const mainApis = await mainApiInstance;
@@ -26,33 +26,15 @@ const Page = () => {
   }, []);
   if (!userList) return <div>Loading..</div>;
   return (
-    <section>
-      <nav className={"flex h-12 items-center py-4"}>
-        <h1 className={"text-2xl"}>linkle</h1>
-      </nav>
-      <ul className={"grid grid-cols-3 gap-4"}>
-        {userList.map((user, index) => {
-          return (
-            <li key={user.userId} className={"bg-gray-500"}>
-              <Link href={`/profile/${user.userId}`}>
-                <div className={"relative h-[120px] w-full"}>
-                  <Image
-                    src={"/assets/images/home-default.jpg"}
-                    fill={true}
-                    alt={"home 기본 이미지"}
-                  />
-                </div>
-                <div className={"p-4"}>
-                  <h1>{user.name}</h1>
-                  <p>{user.email}</p>
-                </div>
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
+    <div className="bg-background min-h-screen">
+      <Header />
+      <main className="container px-4 py-8">
+        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {userList.map((post, index) => (
+            <PostCard key={index} {...post} />
+          ))}
+        </div>
+      </main>
+    </div>
   );
-};
-
-export default Page;
+}