✨[Feat] 블록 삭제, profile 메뉴, home ui 수정 #297

src/app/admin/components/block-list-section.tsx

@@ -77,26 +77,13 @@ const BlockListSection = ({ blocks, isAdmin, setBlocks }: Props) => {
               >
                 <BasicBlock
                   key={block.id}
-                  id={block.id}
-                  type={block.type}
-                  title={block.title || "제목 없음"}
-                  sequence={block.sequence}
-                  style={block.style}
-                  subText01={block.subText01}
-                  subText02={block.subText02}
-                  url={block.url}
-                  imgUrl={block.imgUrl}
-                  dateStart={block.dateStart}
-                  dateEnd={block.dateEnd}
-                  openYn={block.openYn}
-                  keepYn={block.keepYn}
-                  dateCreate={block.dateCreate}
-                  dateUpdate={block.dateUpdate}
                   index={index}
                   dragStart={dragStart}
                   dragEnter={dragEnter}
                   drop={drop}
                   isAdmin={isAdmin}
+                  setBlocks={setBlocks}
+                  block={block}
                 />
               </li>
             ))}

src/app/admin/components/home-menu.tsx

@@ -1,32 +1,10 @@
 import React, { useState } from "react";
 import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
 
-import { ClientRoute } from "@config/route";
-import Contour from "@app/admin/(block)/components/contour";
+import UserMenu from "@app/admin/components/user-menu";
 
 const HomeMenu = () => {
   const [isMenuOn, setIsMenuOn] = useState<boolean>(false);
-  const router = useRouter();
-
-  async function handleLogout() {
-    try {
-      // 인증 관련 데이터 제거
-      const response = await fetch("/api/logout", {
-        credentials: "include",
-        method: "POST",
-      });
-      if (response.ok) {
-        alert("로그아웃 되었습니다.");
-        router.push(`/intro`);
-      }
-    } catch (error) {
-      console.error("로그아웃 중 오류 발생:", error);
-      alert("로그아웃 중 오류가 발생했습니다.");
-    }
-  }
-
   return (
     <>
       {isMenuOn && (
@@ -56,47 +34,7 @@ const HomeMenu = () => {
             className="h-4 w-4 sm:h-5 sm:w-5"
           />
         </button>
-        {isMenuOn && (
-          <div id="user-menu" className="relative right-0 top-1">
-            <ul className="absolute right-0 w-max rounded-md border-1 border-gray-200 bg-white px-2 text-sm dark:bg-[var(--background)] dark:text-[var(--foreground)] sm:text-base">
-              <li className="p-1.5 sm:p-2">
-                <Link
-                  href={ClientRoute.ADMIN}
-                  className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
-                >
-                  Admin
-                </Link>
-              </li>
-              <Contour />
-              <li className="p-1.5 sm:p-2">
-                <Link
-                  href={ClientRoute.PROFILE.DETAIL}
-                  className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
-                >
-                  회원 정보 조회
-                </Link>
-              </li>
-              <Contour />
-              <li className="p-1.5 sm:p-2">
-                <button
-                  onClick={handleLogout}
-                  className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
-                >
-                  Logout
-                </button>
-              </li>
-              <Contour />
-              <li className="p-1.5 sm:p-2">
-                <Link
-                  href={ClientRoute.LOGIN}
-                  className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
-                >
-                  Login
-                </Link>
-              </li>
-            </ul>
-          </div>
-        )}
+        {isMenuOn && <UserMenu />}
       </nav>
     </>
   );

src/app/admin/components/profile-box.tsx

@@ -74,7 +74,7 @@ const ProfileBox = ({ userId }: Props) => {
             {userId}
           </span>
         </Link>
-        {!isAdmin && <HomeMenu />}
+        <HomeMenu />
       </div>
     </>
   );

src/app/admin/components/user-menu.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+
+import { ClientRoute } from "@config/route";
+import Contour from "@app/admin/(block)/components/contour";
+
+const UserMenu = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const isAdmin = pathname === "/admin";
+  async function handleLogout() {
+    try {
+      // 인증 관련 데이터 제거
+      const response = await fetch("/api/logout", {
+        credentials: "include",
+        method: "POST",
+      });
+      if (response.ok) {
+        alert("로그아웃 되었습니다.");
+        router.push(`/`);
+      }
+    } catch (error) {
+      console.error("로그아웃 중 오류 발생:", error);
+      alert("로그아웃 중 오류가 발생했습니다.");
+    }
+  }
+  return (
+    <div id="user-menu" className="relative right-0 top-1">
+      <ul className="absolute right-0 w-max rounded-md border-1 border-gray-200 bg-white px-2 text-sm dark:bg-[var(--background)] dark:text-[var(--foreground)] sm:text-base">
+        <li className="p-1.5 sm:p-2">
+          <Link
+            href={isAdmin ? "" : ClientRoute.ADMIN}
+            onClick={() => isAdmin && router.back()}
+            className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+          >
+            {isAdmin ? "Profile Main" : "Admin"}
+          </Link>
+        </li>
+        <Contour />
+        <li className="p-1.5 sm:p-2">
+          <Link
+            href={ClientRoute.PROFILE.DETAIL}
+            className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+          >
+            회원 정보 조회
+          </Link>
+        </li>
+        <Contour />
+        <li className="p-1.5 sm:p-2">
+          <button
+            onClick={handleLogout}
+            className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+          >
+            Logout
+          </button>
+        </li>
+        <Contour />
+        <li className="p-1.5 sm:p-2">
+          <Link
+            href={ClientRoute.LOGIN}
+            className="block w-full rounded-md px-2 py-1 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+          >
+            Login
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default UserMenu;

src/app/home/components/header.tsx

@@ -3,35 +3,26 @@ import Link from "next/link";
 
 const Header = () => {
   return (
-    <header className="bg-background sticky top-0 z-50 w-full border-b">
+    <header className="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 href="#" className="text-sm font-medium hover:text-primary">
               트렌딩
             </Link>
-            <Link
-              href="/latest"
-              className="text-sm font-medium hover:text-primary"
-            >
+            <Link href="#" className="text-sm font-medium hover:text-primary">
               최신
             </Link>
-            <Link
-              href="/feed"
-              className="text-sm font-medium hover:text-primary"
-            >
+            <Link href="#" 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">
+          <select className="bg-background rounded-md border px-2 py-1 text-sm outline-0">
             <option>이번 주</option>
             <option>이번 달</option>
             <option>올해</option>

src/components/basicblock.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { useState } from "react";
+import React, { useState } from "react";
 
 import DivideBlock from "@app/admin/components/divide-block";
 import VideoBlock from "@app/admin/components/video-block";
@@ -11,45 +11,29 @@ import TextBlock from "@app/admin/components/text-block";
 import CalendarBlock from "@app/admin/components/calendar-block";
 import LinkBlock from "@app/admin/components/link-block";
 import ToggleButton from "@components/UI/toggle-button";
+import { Block } from "@/types/apis";
 
-interface Block {
-  id: number;
-  type: number;
-  sequence: number;
-  style: number | null;
-  title: string | null;
-  subText01: string | null;
-  subText02: string | null;
-  url: string;
-  imgUrl: string | null;
-  dateStart: string | null;
-  dateEnd: string | null;
-  openYn: "Y" | "N";
-  keepYn: "Y" | "N";
-  dateCreate: string;
-  dateUpdate: string | null;
+interface Props {
+  block: Block;
   index: number;
-  dragStart: (position: number) => void;
-  dragEnter: (position: number) => void;
+  dragStart: (index: number) => void;
+  dragEnter: (index: number) => void;
   drop: () => void;
   isAdmin: boolean;
+  setBlocks: React.Dispatch<React.SetStateAction<Block[]>>;
 }
+
 export default function BasicBlock({
-  id,
-  type,
-  sequence,
-  style,
-  title,
-  url,
-  imgUrl,
-  dateStart,
-  dateEnd,
+  block,
   index,
   dragStart,
   dragEnter,
   drop,
   isAdmin,
-}: Block) {
+  setBlocks,
+}: Props) {
+  const { id, type, sequence, style, title, url, imgUrl, dateStart, dateEnd } =
+    block;
   const [isOpen, setIsOpen] = useState(false);
 
   function toggleMenu() {
@@ -122,7 +106,6 @@ export default function BasicBlock({
   }
 
   async function deleteHandler() {
-    console.log(id);
     try {
       const response = await fetch(`/api/link/delete`, {
         credentials: "include",
@@ -137,6 +120,7 @@ export default function BasicBlock({
       if (!response.ok) {
         alert("삭제 실패");
       } else {
+        setBlocks((prev) => prev.filter((block) => block.id !== id));
         alert("삭제 성공");
       }
     } catch (error) {

src/config/route.tsx

@@ -8,6 +8,7 @@ export const ClientRoute: ClientRouteType = {
   ADMIN: "/admin", // 관리자 페이지
   MY: "/admin/my", // 개인 페이지
   PROFILE: {
+    DEFAULT: "/profile", // 프로필 페이지
     DETAIL: "/profile/detail", // 프로필 상세 페이지
     EDIT: "/profile/edit", // 프로필 수정 페이지
   },

src/config/types.tsx

@@ -7,6 +7,7 @@ const ClientRouteTypeSchema = z.object({
   ADMIN: z.string(),
   MY: z.string(),
   PROFILE: z.object({
+    DEFAULT: z.string(),
     DETAIL: z.string(),
     EDIT: z.string(),
   }),