✨[Feat] basicblock 컴포넌트 세부 내용 작성 및 api 연결작업 #14

src/app/(intro)/components/basicblock.tsx

@@ -3,6 +3,13 @@
 import Image from "next/image";
 import ToggleButton from "./UI/toggle-button";
 import { useState } from "react";
+import DivideBlock from "@app/admin/components/divide-block";
+import VideoBlock from "@app/admin/components/video-block";
+import LinkBlock from "@app/admin/components/link-block";
+import ImageBlock from "@app/admin/components/image-block";
+import EventBlock from "@app/admin/components/event-block";
+import TextBlock from "@app/admin/components/text-block";
+import CalendarBlock from "@app/admin/components/calendar-block";
 
 interface Block {
   id: number;
@@ -92,6 +99,28 @@ export default function BasicBlock({
         return "해당없음";
     }
   }
+  function renderComponent(type: number) {
+    switch (type) {
+      case 1:
+        return <DivideBlock />;
+      case 2:
+        return <VideoBlock />;
+      case 3:
+        return (
+          <LinkBlock url={url} style={style} imgUrl={imgUrl} title={title} />
+        );
+      case 4:
+        return <ImageBlock />;
+      case 5:
+        return <EventBlock />;
+      case 6:
+        return <TextBlock />;
+      case 7:
+        return <CalendarBlock />;
+      default:
+        return <></>;
+    }
+  }
 
   async function deleteHandler() {
     const token = sessionStorage.getItem("token");
@@ -211,8 +240,7 @@ export default function BasicBlock({
               </button>
             </div>
           </div>
-          <div className="h-[80px]"></div>
-          <div className="h-[32px]"></div>
+          {renderComponent(type)}
         </div>
       </div>
       <br></br>

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

@@ -0,0 +1,3 @@
+export default function CalendarBlock() {
+  return <></>;
+}

src/app/admin/components/divide-block.tsx

@@ -0,0 +1,3 @@
+export default function DivideBlock() {
+  return <></>;
+}

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

@@ -0,0 +1,3 @@
+export default function EventBlock() {
+  return <></>;
+}

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

@@ -0,0 +1,3 @@
+export default function ImageBlock() {
+  return <></>;
+}

src/app/admin/components/link-block-sub/type-four.tsx

@@ -0,0 +1,17 @@
+import { twMerge } from "tailwind-merge";
+
+interface LinkBlockProps {
+  url: string;
+  style: number | null;
+  imgUrl: string | null;
+  title: string | null;
+}
+
+export default function TypeFour({
+  url,
+  style,
+  imgUrl,
+  title,
+}: LinkBlockProps) {
+  return <></>;
+}

src/app/admin/components/link-block-sub/type-one.tsx

@@ -0,0 +1,17 @@
+interface LinkBlockProps {
+  url: string;
+  style: number | null;
+  imgUrl: string | null;
+  title: string | null;
+}
+
+export default function TypeOne({ url, style, imgUrl, title }: LinkBlockProps) {
+  return (
+    <>
+      <div className="ml-[85px] flex h-[86px] w-[530px] cursor-pointer items-center justify-center rounded-lg border bg-white shadow-md">
+        <p className="text-2xl font-bold">{title}</p>
+      </div>
+    </>
+  );
+}
+//simple

src/app/admin/components/link-block-sub/type-three.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+
+interface LinkBlockProps {
+  url: string;
+  style: number | null;
+  imgUrl: string | null;
+  title: string | null;
+}
+
+export default function TypeThree({
+  url,
+  style,
+  imgUrl,
+  title,
+}: LinkBlockProps) {
+  return (
+    <>
+      <div className="ml-[180px] flex h-[84px] w-[320px] flex-col items-center justify-start gap-[14px] rounded-xl bg-white drop-shadow-md">
+        <div className="relative h-[63px] w-full flex-grow-[3] overflow-hidden rounded-t-xl bg-gray-300">
+          <Image
+            src={imgUrl == null ? "없음" : imgUrl}
+            alt={`미리보기`}
+            fill
+            style={{ objectFit: "cover" }}
+            className="rounded-t-xl"
+          />
+        </div>
+        <p className="flex-grow-[1] font-bold">{title}</p>
+      </div>
+    </>
+  );
+}
+
+//card

src/app/admin/components/link-block-sub/type-two.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+
+interface LinkBlockProps {
+  url: string;
+  style: number | null;
+  imgUrl: string | null;
+  title: string | null;
+}
+
+export default function TypeTwo({ url, style, imgUrl, title }: LinkBlockProps) {
+  return (
+    <>
+      <div className="ml-[85px] flex h-[86px] w-[530px] items-center rounded-lg bg-white shadow-md">
+        <div className="flex w-full items-center">
+          <div className="ml-[6px] flex w-1/5 justify-start">
+            <Image
+              src={imgUrl == null ? "없음" : imgUrl}
+              alt={`미리보기`}
+              width={75}
+              height={75}
+              className="h-[75px] w-[75px] rounded-lg bg-gray-300 object-cover"
+            />
+          </div>
+          <div className="mr-[37px] flex w-4/5 items-center justify-center">
+            <p className="text-xl font-bold">{title}</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+//섬네일

src/app/admin/components/link-block.tsx

@@ -0,0 +1,59 @@
+import Image from "next/image";
+import TypeOne from "./link-block-sub/type-one";
+import TypeTwo from "./link-block-sub/type-two";
+import TypeThree from "./link-block-sub/type-three";
+import TypeFour from "./link-block-sub/type-four";
+
+interface LinkBlockProps {
+  url: string;
+  style: number | null;
+  imgUrl: string | null;
+  title: string | null;
+}
+
+export default function LinkBlock({
+  url,
+  style,
+  imgUrl,
+  title,
+}: LinkBlockProps) {
+  function renderComponent(style: number) {
+    switch (style) {
+      case 1:
+        return (
+          <TypeOne url={url} style={style} imgUrl={imgUrl} title={title} />
+        );
+      case 2:
+        return (
+          <TypeTwo url={url} style={style} imgUrl={imgUrl} title={title} />
+        );
+      case 3:
+        return (
+          <TypeThree url={url} style={style} imgUrl={imgUrl} title={title} />
+        );
+      case 4:
+        return (
+          <TypeFour url={url} style={style} imgUrl={imgUrl} title={title} />
+        );
+      default:
+        return <></>;
+    }
+  }
+
+  return <>{style == null ? null : renderComponent(style)}</>;
+}
+
+{
+  /* <div className="flex h-[500px] w-[500px] flex-col items-center justify-start gap-[14px] rounded-xl bg-white drop-shadow-md">
+  <div className="relative h-[450px] w-full overflow-hidden rounded-t-xl bg-gray-300">
+    <Image
+      src={imgUrl}
+      alt="미리보기"
+      fill
+      style={{ objectFit: "cover" }}
+      className="rounded-t-xl"
+    />
+  </div>
+  <p>{title}</p>
+</div>; */
+}

src/app/admin/components/text-block.tsx

@@ -0,0 +1,3 @@
+export default function TextBlock() {
+  return <></>;
+}

src/app/admin/components/video-block.tsx

@@ -0,0 +1,7 @@
+export default function VideoBlock() {
+  return (
+    <>
+      <div>d</div>
+    </>
+  );
+}

src/app/admin/page.tsx

@@ -6,6 +6,7 @@ import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { ClientRoute } from "@config/route";
 import EmptyBlock from "@app/(intro)/components/UI/empty-block";
+import VideoBlock from "./components/video-block";
 
 interface Block {
   id: number;

src/app/link/page.tsx

@@ -0,0 +1,101 @@
+export default function LinkPage() {
+  return (
+    <>
+      <article className="mx-auto my-14 w-[800px]">
+        <header>
+          <h1 className="pageName">블록 링크</h1>
+        </header>
+
+        {/* 스타일 */}
+        <section className="mt-8 flex flex-col items-center justify-center gap-9">
+          <div className="flex h-32 w-full items-center justify-center rounded-sm bg-[#F6F6F6]">
+            <div className="flex h-[86px] w-[600px] items-center rounded-lg bg-white">
+              <div className="flex w-full items-center">
+                <div className="ml-[6px] flex w-1/5 justify-start">
+                  <img
+                    src="#"
+                    alt="link-icon"
+                    className="h-[75px] w-[75px] rounded-lg bg-gray-300"
+                  />
+                </div>
+                <div className="mr-[37px] flex w-4/5 items-center justify-center">
+                  <p>타이틀을 입력해주세요</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="w-full">
+            <h3 className="title">
+              스타일 <span className="text-red-500">*</span>
+            </h3>
+            {/* item * 4 */}
+            <div>
+              <div className="boarder rounded border-[#F6F6F6]">
+                {/* style type img */}
+              </div>
+              <p className="mt-2">썸네일</p>
+            </div>
+          </div>
+        </section>
+
+        <div className="my-6 border-t-2 border-[#F6F6F6]"></div>
+
+        {/* Info */}
+        <section>
+          <form action="" className="flex flex-col gap-6">
+            <div>
+              <label className="title" htmlFor="linked-url">
+                연결할 주소 <span className="text-red-500">*</span>
+              </label>
+              <input type="text" id="linked-url" />
+            </div>
+
+            <div className="mt-2">
+              <label className="title mb-1 block">
+                이미지 <span className="text-red-500">*</span>
+              </label>
+
+              <div className="flex items-center justify-start">
+                <input type="file" id="file-upload" className="hidden" />
+                <label
+                  htmlFor="file-upload"
+                  className="flex h-[94px] w-[94px] cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-gray-200 hover:bg-gray-300"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-8 w-8 text-gray-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 4v16m8-8H4"
+                    />
+                  </svg>
+                </label>
+
+                <div className="ml-3 text-sm text-gray-500">
+                  <p>이미지를 직접 끌어오거나</p>
+                  <p>파일을 선택하여 업로드해주세요</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="my-2 h-3 w-full bg-gray-200"></div>
+
+            <button
+              type="submit"
+              className="h-11 w-full rounded bg-primary-100 text-primary-200"
+            >
+              추가 완료
+            </button>
+          </form>
+        </section>
+      </article>
+    </>
+  );
+}

src/app/login/page.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { Metadata } from "next";
 import { useState } from "react";
-//metadata
 
 export default function Login() {
   const [userId, setUserId] = useState("");
@@ -11,16 +9,19 @@ export default function Login() {
   async function handleLogin(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     try {
-      const response = await fetch("http://43.201.21.97:3002/api/login", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/api/login`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userId: userId,
+            password: password,
+          }),
         },
-        body: JSON.stringify({
-          userId: userId,
-          password: password,
-        }),
-      });
+      );
       const infor = await response.json();
       if (response.ok) {
         alert("성공");