✨[Feat] admin - 미리보기 모달 및 레이지 로딩 적용, 메인 페이지 #215

src/app/admin/(block)/block-menu.tsx

@@ -2,7 +2,7 @@ import React, { SetStateAction } from "react";
 import { blockTypes } from "@config/block_types";
 import Link from "next/link";
 import Image from "next/image";
-import Portal from "@app/components/Portal";
+import Portal from "@app/components/portal";
 import Contour from "@app/admin/(block)/components/contour";
 import { usePathname } from "next/navigation";
 
@@ -32,7 +32,7 @@ const BlockMenu = ({ isOpen, setIsOpen }: Props) => {
     <Portal>
       <button
         type="button"
-        onClick={() => setIsOpen(false)}
+        onClick={handleClose}
         className="flex h-screen w-screen cursor-default items-center justify-center before:relative before:h-screen before:w-screen before:bg-slate-333 before:opacity-25"
       ></button>
       <div className="absolute left-1/2 top-1/2 flex w-[700px] -translate-x-1/2 -translate-y-1/2 transform flex-col gap-4 rounded-xl bg-slate-333 p-6">

src/app/admin/(block)/calendar/components/schedule-list.tsx

@@ -1,9 +1,9 @@
 import Image from "next/image";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { BsCalendarXFill } from "react-icons/bs";
 
-interface Schedule {
+export interface Schedule {
   id: number;
   title: string;
   url: string;
@@ -61,15 +61,17 @@ function EmptyState({ message }: { message: React.ReactNode }) {
   );
 }
 
-function ScheduleItem({
+export function ScheduleItem({
   schedule,
   onDelete,
 }: {
   schedule: Schedule;
-  onDelete: (id: number) => void;
+  onDelete?: (id: number) => void;
 }) {
   const router = useRouter();
   const status = getScheduleStatus(schedule);
+  const pathname = usePathname();
+  const isCalendarPage = pathname.includes("/admin/calendar");
 
   const handleEdit = () => {
     router.push(`/admin/calendar/manage?mode=edit&id=${schedule.id}`);
@@ -96,28 +98,30 @@ function ScheduleItem({
             }}
           />
         </div>
-        <div className="ml-4 flex-grow">
+        <div className="ml-4 flex flex-grow flex-col">
           <div className="text-sm text-gray-500">
             {formatDate(schedule.dateStart)} ~ {formatDate(schedule.dateEnd)}
           </div>
           <div className="group mt-2 font-semibold">{schedule.title}</div>
         </div>
-        <div className="flex flex-col space-y-2">
-          <button
-            className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold"
-            onClick={handleEdit}
-          >
-            수정
-          </button>
-          <button
-            className="rounded-lg bg-[var(--primary-100)] px-3 py-2 text-sm font-semibold text-[var(--primary)]"
-            onClick={() => onDelete(schedule.id)}
-          >
-            삭제
-          </button>
-        </div>
+        {isCalendarPage && (
+          <div className="flex flex-col space-y-2">
+            <button
+              className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold"
+              onClick={handleEdit}
+            >
+              수정
+            </button>
+            <button
+              className="rounded-lg bg-[var(--primary-100)] px-3 py-2 text-sm font-semibold text-[var(--primary)]"
+              onClick={() => onDelete && onDelete(schedule.id)}
+            >
+              삭제
+            </button>
+          </div>
+        )}
       </div>
-      <hr className="my-4 border-t border-gray-200" />
+      {isCalendarPage && <hr className="my-4 border-t border-gray-200" />}
     </div>
   );
 }

src/app/admin/(block)/divider/components/divider-preview.tsx

@@ -10,21 +10,12 @@ interface DividerContentProps {
   type: DividerType;
 }
 
-const DividerContent = ({ type }: DividerContentProps) => {
+export const DividerContent = ({ type }: DividerContentProps) => {
   const commonClasses = "flex h-12 items-center justify-center";
 
   switch (type) {
     case "Space":
       return <div className={commonClasses} />;
-    case "Dashed":
-    case "Solid":
-      return (
-        <div className={commonClasses}>
-          <div
-            className={`w-full border-t ${type === "Dashed" ? "border-dashed" : "border-solid"}`}
-          />
-        </div>
-      );
     case "Point":
       return <div className={commonClasses}>· · ·</div>;
     case "Zigzag":
@@ -38,6 +29,15 @@ const DividerContent = ({ type }: DividerContentProps) => {
           />
         </div>
       );
+    case "Dashed":
+    case "Solid":
+      return (
+        <div className={commonClasses}>
+          <div
+            className={`w-full border-t ${type === "Dashed" ? "border-dashed" : "border-solid"}`}
+          />
+        </div>
+      );
     default:
       return <div className={commonClasses} />;
   }

src/app/admin/(block)/event/components/event-form.tsx

@@ -8,7 +8,6 @@ import ButtonBox from "../../components/buttons/button-box";
 import AddButton from "../../components/buttons/add-button";
 import FormInput from "../../components/form-input";
 import { useRouter, useSearchParams } from "next/navigation";
-import { getSequence } from "lib/get-sequence";
 import "react-datepicker/dist/react-datepicker.css";
 import { adminApiInstance } from "../../../../../utils/apis";
 

src/app/admin/(block)/event/components/event-preview.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { IoIosArrowDown } from "react-icons/io";
 import { twMerge } from "tailwind-merge";
+import { usePathname } from "next/navigation";
 
 export default function EventPreview({
   title,
@@ -24,6 +25,8 @@ export default function EventPreview({
   const [isTitleOverflowing, setIsTitleOverflowing] = useState<boolean>(false); // 타이틀 텍스트 넘침 여부
   const descriptionRef = useRef<HTMLParagraphElement>(null);
   const titleRef = useRef<HTMLParagraphElement>(null);
+  const pathname = usePathname();
+  const isEvent = pathname.includes("event");
 
   const calculateTimeLeft = () => {
     if (endDate && endTime) {
@@ -88,7 +91,13 @@ export default function EventPreview({
     }
   };
   return (
-    <div className="flex w-full items-center justify-center rounded-sm bg-[#F6F6F6] py-[35px]">
+    <div
+      className={twMerge(
+        "flex w-full items-center justify-center bg-[#F6F6F6]",
+        isEvent && "py-[35px]",
+        isEvent ? "rounded-sm" : "rounded-xl",
+      )}
+    >
       <div
         className={twMerge(
           "flex w-[500px] flex-col items-center justify-between gap-5 overflow-hidden rounded-2xl bg-white drop-shadow-md transition-all duration-500",

src/app/admin/(block)/image/components/image-box.tsx

@@ -1,37 +1,50 @@
 import React from "react";
 import Image from "next/image";
 import ErrorBoundary from "@app/intro/components/error-boundary";
+import Link from "next/link";
 
 interface Props {
   // handeInputImageClick: () => void;
   selectedImageUrl: string;
+  connectingUrl?: string;
+  title: string | null;
 }
 
-const ImageBox = ({ selectedImageUrl }: Props) => {
+const ImageBox = ({ selectedImageUrl, connectingUrl, title }: Props) => {
   return (
-    <div className="relative overflow-hidden rounded shadow-lg">
-      {/*<button*/}
-      {/*  onClick={handeInputImageClick}*/}
-      {/*  className="absolute right-2 top-2 rounded-3xl bg-orange-600 p-2"*/}
-      {/*>*/}
-      {/*  <Image*/}
-      {/*    src="/assets/icons/icon_pencil.png"*/}
-      {/*    alt="연필 아이콘"*/}
-      {/*    width={24}*/}
-      {/*    height={24}*/}
-      {/*  />*/}
-      {/*</button>*/}
-      <div className="h-[40rem] w-[30rem]">
-        <Image
-          src={
-            selectedImageUrl
-              ? selectedImageUrl
-              : "/assets/images/image_block_default.png"
-          }
-          alt="이미지 URL을 확인해주세요"
-          fill
-        />
+    <div className={"overflow-hidden rounded shadow-lg"}>
+      <div>
+        {/*<button*/}
+        {/*  onClick={handeInputImageClick}*/}
+        {/*  className="absolute right-2 top-2 rounded-3xl bg-orange-600 p-2"*/}
+        {/*>*/}
+        {/*  <Image*/}
+        {/*    src="/assets/icons/icon_pencil.png"*/}
+        {/*    alt="연필 아이콘"*/}
+        {/*    width={24}*/}
+        {/*    height={24}*/}
+        {/*  />*/}
+        {/*</button>*/}
+        <Link
+          href={connectingUrl || ""}
+          className={`${!connectingUrl && "cursor-default"}`}
+        >
+          <div className="relative h-[20rem] w-full">
+            <Image
+              src={
+                selectedImageUrl
+                  ? selectedImageUrl
+                  : "/assets/images/image_block_default.png"
+              }
+              alt="이미지 URL을 확인해주세요"
+              fill
+            />
+          </div>
+        </Link>
       </div>
+      {title && (
+        <div className={"flex items-center justify-center py-2"}>{title}</div>
+      )}
     </div>
   );
 };

src/app/admin/(block)/image/page.tsx

@@ -137,6 +137,8 @@ const Page = () => {
       {/*/>*/}
       <ImageBox
         selectedImageUrl={selectedImageUrl}
+        connectingUrl={connectingUrl}
+        title={title}
         // handeInputImageClick={handeInputImageClick}
       />
       <FormInput

src/app/admin/components/buttons/circle-button.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Props {
+  text: string;
+  onClick: () => void;
+}
+const CircleButton = ({ text, onClick }: Props) => {
+  return (
+    <div className="flex flex-grow justify-center">
+      <button
+        onClick={onClick}
+        className="rounded-full border bg-white px-6 py-2 font-bold text-gray-600 shadow-xl hover:bg-gray-100 hover:text-gray-800"
+      >
+        {text}
+      </button>
+    </div>
+  );
+};
+
+export default CircleButton;

src/app/admin/components/preview/components/preview-calendar.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Block } from "@app/admin/page";
+import { ScheduleItem } from "@app/admin/(block)/calendar/components/schedule-list";
+
+// interface Schedule {
+//   id: number;
+//   title: string;
+//   url: string;
+//   dateStart: string;
+//   dateEnd: string;
+// }
+
+interface Props {
+  block: Block;
+}
+const PreviewCalendar = ({ block }: Props) => {
+  const { id, title: subject, url, dateStart: start, dateEnd: end } = block;
+  const title = subject as string;
+  const dateStart = start as string;
+  const dateEnd = end as string;
+  const schedule = { id, title, url, dateStart, dateEnd };
+  return (
+    <div className={"shadow-xl"}>
+      <ScheduleItem schedule={schedule} />
+    </div>
+  );
+};
+
+export default PreviewCalendar;

src/app/admin/components/preview/components/preview-divider.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import { Block } from "@app/admin/page";
+import { DividerType } from "@app/admin/(block)/divider/types";
+import { DividerContent } from "@app/admin/(block)/divider/components/divider-preview";
+
+interface Props {
+  block: Block;
+}
+
+const PreviewDivider = ({ block }: Props) => {
+  const [selectedDivider, setSelectedDivider] = useState<DividerType>("Space");
+  const { style } = block;
+
+  useEffect(() => {
+    if (!style) return;
+    setSelectedDivider(getDividerStyle(style));
+  }, [block]);
+
+  const getDividerStyle = (type: number): DividerType => {
+    const styles: Record<number, DividerType> = {
+      1: "Space",
+      2: "Dashed",
+      3: "Solid",
+      4: "Point",
+      5: "Zigzag",
+    };
+    return styles[type] || "Space";
+  };
+  return (
+    <div>
+      <DividerContent type={selectedDivider} />
+    </div>
+  );
+};
+
+export default PreviewDivider;

src/app/admin/components/preview/components/preview-event.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Block } from "@app/admin/page";
+import EventPreview from "@app/admin/(block)/event/components/event-preview";
+
+interface Props {
+  block: Block;
+}
+const PreviewEvent = ({ block }: Props) => {
+  const { title: subject, subText01, dateStart: start, dateEnd: end } = block;
+  const title = subject as string;
+  const description = subText01 as string;
+  const dateStart = new Date(start as string);
+  const dateEnd = new Date(end as string);
+
+  return (
+    <EventPreview
+      title={title}
+      description={description}
+      startDate={dateStart}
+      endDate={dateEnd}
+      startTime={dateStart}
+      endTime={dateEnd}
+    />
+  );
+};
+
+export default PreviewEvent;

src/app/admin/components/preview/components/preview-image.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Block } from "@app/admin/page";
+import ImageBox from "@app/admin/(block)/image/components/image-box";
+
+interface Props {
+  block: Block;
+}
+const PreviewImage = ({ block }: Props) => {
+  const { imgUrl, url, title } = block;
+  return (
+    <div className={"h-3/4 w-full"}>
+      <ImageBox
+        selectedImageUrl={imgUrl as string}
+        connectingUrl={url}
+        title={title}
+      />
+    </div>
+  );
+};
+
+export default PreviewImage;