diff --git a/src/app/admin/(block)/block-menu.tsx b/src/app/admin/(block)/block-menu.tsx
index 90735648..6e5a1289 100644
--- a/src/app/admin/(block)/block-menu.tsx
+++ b/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">
diff --git a/src/app/admin/(block)/calendar/components/schedule-list.tsx b/src/app/admin/(block)/calendar/components/schedule-list.tsx
index 40a66f2d..3b8b5530 100644
--- a/src/app/admin/(block)/calendar/components/schedule-list.tsx
+++ b/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>
   );
 }
diff --git a/src/app/admin/(block)/divider/components/divider-preview.tsx b/src/app/admin/(block)/divider/components/divider-preview.tsx
index dd8d1f6e..1603774b 100644
--- a/src/app/admin/(block)/divider/components/divider-preview.tsx
+++ b/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} />;
   }
diff --git a/src/app/admin/(block)/event/components/event-form.tsx b/src/app/admin/(block)/event/components/event-form.tsx
index 91118ccc..c6d22f01 100644
--- a/src/app/admin/(block)/event/components/event-form.tsx
+++ b/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";
 
diff --git a/src/app/admin/(block)/event/components/event-preview.tsx b/src/app/admin/(block)/event/components/event-preview.tsx
index 5ad312a4..5cecd378 100644
--- a/src/app/admin/(block)/event/components/event-preview.tsx
+++ b/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",
diff --git a/src/app/admin/(block)/image/components/image-box.tsx b/src/app/admin/(block)/image/components/image-box.tsx
index bd3823b6..b42a5899 100644
--- a/src/app/admin/(block)/image/components/image-box.tsx
+++ b/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>
   );
 };
diff --git a/src/app/admin/(block)/image/page.tsx b/src/app/admin/(block)/image/page.tsx
index aff506c8..4c1af7b3 100644
--- a/src/app/admin/(block)/image/page.tsx
+++ b/src/app/admin/(block)/image/page.tsx
@@ -137,6 +137,8 @@ const Page = () => {
       {/*/>*/}
       <ImageBox
         selectedImageUrl={selectedImageUrl}
+        connectingUrl={connectingUrl}
+        title={title}
         // handeInputImageClick={handeInputImageClick}
       />
       <FormInput
diff --git a/src/app/admin/components/buttons/circle-button.tsx b/src/app/admin/components/buttons/circle-button.tsx
new file mode 100644
index 00000000..dd7bf099
--- /dev/null
+++ b/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;
diff --git a/src/app/admin/components/preview/components/preview-calendar.tsx b/src/app/admin/components/preview/components/preview-calendar.tsx
new file mode 100644
index 00000000..d060516e
--- /dev/null
+++ b/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;
diff --git a/src/app/admin/components/preview/components/preview-divider.tsx b/src/app/admin/components/preview/components/preview-divider.tsx
new file mode 100644
index 00000000..5897f01a
--- /dev/null
+++ b/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;
diff --git a/src/app/admin/components/preview/components/preview-event.tsx b/src/app/admin/components/preview/components/preview-event.tsx
new file mode 100644
index 00000000..4f449b0c
--- /dev/null
+++ b/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;
diff --git a/src/app/admin/components/preview/components/preview-image.tsx b/src/app/admin/components/preview/components/preview-image.tsx
new file mode 100644
index 00000000..a8aa8cd0
--- /dev/null
+++ b/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;
diff --git a/src/app/admin/components/preview/components/preview-link.tsx b/src/app/admin/components/preview/components/preview-link.tsx
new file mode 100644
index 00000000..0a69f236
--- /dev/null
+++ b/src/app/admin/components/preview/components/preview-link.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Block } from "@app/admin/page";
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
+interface Props {
+  block: Block;
+}
+const PreviewLink = ({ block }: Props) => {
+  const pathname = usePathname();
+  const isAdmin = pathname.includes("admin");
+  const { url, title, imgUrl } = block;
+
+  return (
+    <div
+      className={
+        "relative flex h-20 w-full items-center justify-center overflow-hidden rounded-lg shadow-lg"
+      }
+    >
+      <Link
+        href={!isAdmin ? url : ""}
+        className={`${isAdmin && "cursor-default"}`}
+      >
+        <div
+          className={`absolute left-0 top-0 z-[999] h-full w-full opacity-50 ${imgUrl ? "bg-black" : "bg-slate-333"}`}
+        ></div>
+
+        <div
+          className={`absolute left-1/2 top-1/2 z-[9999] -translate-x-1/2 -translate-y-1/2 transform ${imgUrl ? "text-slate-ccc" : "text-slate-444"} ${isAdmin ? "cursor-default" : "cursor-pointer"}`}
+        >
+          {title || "링크 이동"}
+        </div>
+      </Link>
+
+      {imgUrl ? (
+        <Image src={imgUrl} alt={title || "링크 이미지입니다"} fill />
+      ) : (
+        <span />
+      )}
+    </div>
+  );
+};
+
+export default PreviewLink;
diff --git a/src/app/admin/components/preview/components/preview-text.tsx b/src/app/admin/components/preview/components/preview-text.tsx
new file mode 100644
index 00000000..e118a619
--- /dev/null
+++ b/src/app/admin/components/preview/components/preview-text.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Block } from "@app/admin/page";
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  block: Block;
+}
+const PreviewText = ({ block }: Props) => {
+  const { title } = block;
+  return (
+    <div
+      className={twMerge(
+        "flex w-full items-center justify-center rounded-sm bg-[#F6F6F6] py-2",
+      )}
+    >
+      {title}
+    </div>
+  );
+};
+
+export default PreviewText;
diff --git a/src/app/admin/components/preview/components/preview-video.tsx b/src/app/admin/components/preview/components/preview-video.tsx
new file mode 100644
index 00000000..7d87abe8
--- /dev/null
+++ b/src/app/admin/components/preview/components/preview-video.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Block } from "@app/admin/page";
+
+interface Props {
+  block: Block;
+}
+const PreviewVideo = ({ block }: Props) => {
+  const { url: videoUrl } = block;
+  return (
+    <div className="flex h-[24rem] items-center justify-center overflow-hidden rounded-xl shadow-lg">
+      {videoUrl && (
+        <object type="text/html" data={videoUrl} width="100%" height="100%">
+          <div>동영상 주소를 확인해주세요</div>
+        </object>
+      )}
+    </div>
+  );
+};
+
+export default PreviewVideo;
diff --git a/src/app/admin/components/preview/components/preview.tsx b/src/app/admin/components/preview/components/preview.tsx
new file mode 100644
index 00000000..7a816a72
--- /dev/null
+++ b/src/app/admin/components/preview/components/preview.tsx
@@ -0,0 +1,95 @@
+import React, { SetStateAction, Suspense, useEffect, useState } from "react";
+import ProfileBox from "@app/admin/components/profile-box";
+
+import PreviewLink from "@app/admin/components/preview/components/preview-link";
+import PreviewText from "@app/admin/components/preview/components/preview-text";
+import { Block } from "@app/admin/page";
+import dynamic from "next/dynamic";
+import { adminApiInstance } from "../../../../../utils/apis";
+import { usePathname } from "next/navigation";
+import CircleButton from "@app/admin/components/buttons/circle-button";
+const PreviewImage = dynamic(
+  () => import("@app/admin/components/preview/components/preview-image"),
+);
+const PreviewVideo = dynamic(
+  () => import("@app/admin/components/preview/components/preview-video"),
+);
+const PreviewDivider = dynamic(
+  () => import("@app/admin/components/preview/components/preview-divider"),
+);
+const PreviewCalendar = dynamic(
+  () => import("@app/admin/components/preview/components/preview-calendar"),
+);
+const PreviewEvent = dynamic(
+  () => import("@app/admin/components/preview/components/preview-event"),
+);
+
+interface Props {
+  setIsOpen?: React.Dispatch<SetStateAction<boolean>>;
+}
+const Preview = ({ setIsOpen }: Props) => {
+  const [blocks, setBlocks] = useState<Block[]>([]);
+  const pathname = usePathname();
+  const isAdmin = pathname.includes("admin");
+
+  useEffect(() => {
+    getBlocks().then();
+  }, []);
+
+  async function getBlocks() {
+    const blockApis = await adminApiInstance;
+    const response = await blockApis.getBlocks();
+    if (!response) return;
+    if (response.ok) {
+      const { data } = await response.json();
+      setBlocks(data);
+    } else {
+      sessionStorage.removeItem("token");
+      // alert("블록 조회 실패");
+    }
+  }
+
+  const setComponentType = (block: Block) => {
+    const { type } = block;
+    return {
+      1: <PreviewDivider block={block} />,
+      2: (
+        <Suspense fallback={<p>Loading video...</p>}>
+          <PreviewVideo block={block} />
+        </Suspense>
+      ),
+      3: <PreviewLink block={block} />,
+      4: <PreviewImage block={block} />,
+      5: <PreviewEvent block={block} />,
+      6: <PreviewText block={block} />,
+      7: <PreviewCalendar block={block} />,
+    }[type];
+  };
+  return (
+    // <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">
+    <>
+      <ProfileBox />
+      <ul
+        className={`flex h-full flex-col overflow-scroll ${isAdmin ? "gap-2 p-2" : "gap-4 pt-4"}`}
+      >
+        {blocks.map((block, index) => {
+          return (
+            <li key={`${block.title}${index}`} className="text-slate-666">
+              {setComponentType(block)}
+            </li>
+          );
+        })}
+      </ul>
+      {isAdmin && (
+        <div className={"fixed -bottom-14 left-1/2 -translate-x-1/2"}>
+          <CircleButton
+            text="닫기"
+            onClick={() => setIsOpen && setIsOpen(false)}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Preview;
diff --git a/src/app/admin/components/preview/preview-modal.tsx b/src/app/admin/components/preview/preview-modal.tsx
new file mode 100644
index 00000000..a4f1cb4c
--- /dev/null
+++ b/src/app/admin/components/preview/preview-modal.tsx
@@ -0,0 +1,54 @@
+import React, { SetStateAction, Suspense } from "react";
+import Portal from "@app/components/portal";
+import CircleButton from "@app/admin/components/buttons/circle-button";
+import ProfileBox from "@app/admin/components/profile-box";
+import { Block } from "@app/admin/page";
+import PreviewText from "@app/admin/components/preview/components/preview-text";
+import PreviewLink from "@app/admin/components/preview/components/preview-link";
+import dynamic from "next/dynamic";
+import Preview from "@app/admin/components/preview/components/preview";
+const PreviewImage = dynamic(
+  () => import("@app/admin/components/preview/components/preview-image"),
+);
+const PreviewVideo = dynamic(
+  () => import("@app/admin/components/preview/components/preview-video"),
+);
+const PreviewDivider = dynamic(
+  () => import("@app/admin/components/preview/components/preview-divider"),
+);
+const PreviewCalendar = dynamic(
+  () => import("@app/admin/components/preview/components/preview-calendar"),
+);
+const PreviewEvent = dynamic(
+  () => import("@app/admin/components/preview/components/preview-event"),
+);
+
+interface Props {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<SetStateAction<boolean>>;
+  data: Block[];
+}
+
+const PreviewModal = ({ isOpen, setIsOpen, data }: Props) => {
+  if (!isOpen) return null;
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  console.log(data[data.length - 1]);
+  return (
+    <Portal>
+      <button
+        type="button"
+        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-666"
+      ></button>
+      <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">
+        <Preview setIsOpen={setIsOpen} />
+      </div>
+    </Portal>
+  );
+};
+
+export default PreviewModal;
diff --git a/src/app/admin/components/profile-box.tsx b/src/app/admin/components/profile-box.tsx
new file mode 100644
index 00000000..3a04348c
--- /dev/null
+++ b/src/app/admin/components/profile-box.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+import HomeMenu from "@app/admin/components/home-menu";
+import Link from "next/link";
+import { ClientRoute } from "@config/route";
+import Image from "next/image";
+import { useTheme } from "@components/providers/theme-provider";
+import { usePathname } from "next/navigation";
+
+const ProfileBox = () => {
+  const { theme } = useTheme();
+  const pathname = usePathname();
+  const isAdmin = pathname === "/admin";
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "relative mt-8 flex h-[200px] flex-col items-center justify-center border text-center",
+          theme === "light" ? "bg-slate-100" : "bg-gray-800",
+        )}
+      >
+        <div className="absolute left-3 top-4 h-12 w-12 rounded-[40px] border-2 border-slate-333">
+          <Image
+            src={"/assets/icons/icon_share.png"}
+            alt={"공유 이미지"}
+            fill
+            className="p-2"
+          />
+        </div>
+        <Link href={ClientRoute.PROFILE.DETAIL}>
+          <Image
+            src="/assets/icons/icon_profile.png"
+            alt="profile"
+            width={80}
+            height={20}
+          />
+          <span className="mt-2 font-bold underline">momomoc</span>
+        </Link>
+
+        {!isAdmin && <HomeMenu />}
+      </div>
+    </>
+  );
+};
+
+export default ProfileBox;
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 52c9b850..070a996d 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -13,8 +13,11 @@ import { useEffect, useRef, useState } from "react";
 import { postBlock } from "../../lib/post-block";
 import { adminApiInstance } from "../../utils/apis";
 import { twMerge } from "tailwind-merge";
+import ProfileBox from "@app/admin/components/profile-box";
+import PreviewModal from "@app/admin/components/preview/preview-modal";
+import CircleButton from "@app/admin/components/buttons/circle-button";
 
-interface Block {
+export interface Block {
   id: number;
   type: number;
   sequence: number;
@@ -81,6 +84,7 @@ function Admin() {
   const [showRealTime, setShowRealTime] = useState(0);
   const [isScrollTopVisible, setIsScrollTopVisible] = useState(false);
   const [isBlockMenuOn, setIsBlockMenuOn] = useState<boolean>(false);
+  const [isPreviewOn, setIsPreviewOn] = useState<boolean>(false);
 
   const [blocks, setBlocks] = useState<Block[]>([]);
 
@@ -135,28 +139,13 @@ function Admin() {
       }
     });
   };
-
-  const { theme } = useTheme();
+  const handlePreviewOpen = () => {
+    setIsPreviewOn(true);
+  };
 
   return (
     <div>
-      <div
-        className={twMerge(
-          "relative mt-8 flex h-[200px] flex-col items-center justify-center border text-center",
-          theme === "light" ? "bg-slate-100" : "bg-gray-800",
-        )}
-      >
-        {!isAdmin && <HomeMenu />}
-        <Link href={ClientRoute.PROFILE.DETAIL}>
-          <Image
-            src="/assets/icons/icon_profile.png"
-            alt="profile"
-            width={80}
-            height={20}
-          />
-          <span className="mt-2 font-bold underline">momomoc</span>
-        </Link>
-      </div>
+      <ProfileBox />
       <br />
       <div className="flex w-full rounded border">
         <div className="grid w-8/12 rounded-l border">
@@ -227,17 +216,17 @@ function Admin() {
           />
         ))
       )}
+      <PreviewModal
+        isOpen={isPreviewOn}
+        setIsOpen={setIsPreviewOn}
+        data={blocks}
+      />
+      <CircleButton text={"미리보기"} onClick={handlePreviewOpen} />
       {isAdmin && (
         <>
           <div className="mb-5 mt-9 flex w-full items-center justify-between">
-            <div className="flex flex-grow justify-center">
-              <button
-                onClick={updateBlockOrder}
-                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"
-              >
-                미리보기
-              </button>
-            </div>
+            <span className="h-12 w-12"></span>
+            <CircleButton text="순서 업데이트" onClick={updateBlockOrder} />
             <button
               onClick={() => setIsBlockMenuOn(true)}
               className="flex h-12 w-12 items-center justify-center rounded-full bg-orange-500 text-2xl text-white shadow-md hover:bg-orange-600"
diff --git a/src/app/components/Portal.tsx b/src/app/components/portal.tsx
similarity index 100%
rename from src/app/components/Portal.tsx
rename to src/app/components/portal.tsx
diff --git a/src/app/intro/components/basicblock.tsx b/src/app/intro/components/basicblock.tsx
index 98cc5b80..3eb32339 100644
--- a/src/app/intro/components/basicblock.tsx
+++ b/src/app/intro/components/basicblock.tsx
@@ -39,16 +39,10 @@ export default function BasicBlock({
   sequence,
   style,
   title,
-  subText01,
-  subText02,
   url,
   imgUrl,
   dateStart,
   dateEnd,
-  openYn,
-  keepYn,
-  dateCreate,
-  dateUpdate,
   index,
   dragStart,
   dragEnter,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a879e2bb..2dff2997 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,16 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import Admin from "@app/admin/page";
-import { withLogin } from "../utils/with-login";
+import ProfileBox from "@app/admin/components/profile-box";
+import Preview from "@app/admin/components/preview/components/preview";
 
 function Page() {
   useEffect(() => {
     const token = sessionStorage.getItem("token");
   }, []);
 
-  return <Admin />;
+  return <Preview />;
 }
 
 export default Page;