💄[WV-44] design : create-bi-page 추가

app/(menu)/ktwiz/bi/page.tsx

@@ -1,3 +1,29 @@
+import { Bi_Symbol_items } from "@/components/ktwiz/bi/bi-items";
+
 export default function page() {
-  return <div>page입니다</div>;
+  return (
+    <div className="pt-5">
+      <div className="flex items-center">
+        <div className=" w-1 h-7 bg-ELSE-EC0 mr-2"></div>
+        <p className="text-3xl">심볼마크</p>
+      </div>
+      <p className="py-6">
+        kt wiz는 구단명의 이니셜을 상징화한 &apos;이니셜 심볼&apos;과
+        <br />
+        그림을 정상화한 &apos;이미지 심볼&apos; 두 개의 심볼마크를 동시에
+        사용합니다.
+      </p>
+
+      <div className="pb-10">
+        <iframe
+          width="100%"
+          height="450"
+          src="https://www.youtube.com/embed/LR0BPPUXzsc"
+          title="kt wiz 심볼 탄생 스토리"
+          allow="fullscreen"
+        ></iframe>
+      </div>
+      <Bi_Symbol_items />
+    </div>
+  );
 }

assets/images/@index.ts

@@ -38,7 +38,6 @@ export { default as CarouselImage7 } from "./photos07.jpg";
 export { default as CarouselImage8 } from "./photos08.jpg";
 export { default as CarouselImage9 } from "./photos09.jpg";
 export { default as CarouselImage10 } from "./photos10.jpg";
-
 export { default as Parking_img } from "./parking_img.png";
 export { default as policy_img } from "./policy_img.jpg";
 export { default as Sponsor_bccard_img } from "./sponsor_bccard.gif";
@@ -66,6 +65,10 @@ export { default as iksan_stadium6 } from "./iksan_stadium6.png";
 export { default as iksan_stadium7 } from "./iksan_stadium7.png";
 export { default as iksan_stadium8 } from "./iksan_stadium8.png";
 export { default as iksan_stadium9 } from "./iksan_stadium9.png";
+export { default as bi_Image_symbol_black } from "./bi_Image_symbol_black.png";
+export { default as bi_Image_symbol_white } from "./bi_Image_symbol_white.png";
+export { default as bi_Initial_symbol_white } from "./bi_Initial_symbol_white.png";
+export { default as bi_Initial_symbol_black } from "./bi_Initial_symbol_black.png";
 export { default as ranking_score } from "./ranking_score.png";
 export { default as parking_banner } from "./parking_banner.png";
 export { default as wallpaper_img } from "./wallpaper_img.png";

components/ktwiz/bi/bi-items.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+
+import { symbolData } from "@/constants/bi-data";
+
+export const Bi_Symbol_items = () => {
+  return (
+    <div className="pt-5">
+      {symbolData.map((symbol) => (
+        <div key={symbol.id}>
+          <div>
+            <div className="flex items-center">
+              <div className="w-1 h-7 bg-ELSE-EC0 mr-2"></div>
+              <p className="text-3xl">{symbol.title}</p>
+            </div>
+            <p className="py-6">{symbol.description}</p>
+          </div>
+
+          <div className="flex justify-between border-ELSE-11">
+            {symbol.images.map((image) => (
+              <div key={image.id} className="flex flex-col items-center">
+                <Image
+                  src={image.src}
+                  width="540"
+                  height="200"
+                  alt={image.alt}
+                />
+                <a
+                  className="bg-ELSE-EC0 py-5 text-SYSTEM-white w-48 h-10 rounded-md flex items-center justify-center z-10 mt-4"
+                  href={image.downloadUrl}
+                  download
+                >
+                  <button>이미지 다운로드</button>
+                </a>
+              </div>
+            ))}
+          </div>
+
+          {symbol.id === 1 && <div className="pt-5" />}
+        </div>
+      ))}
+    </div>
+  );
+};

constants/bi-data.ts

@@ -0,0 +1,49 @@
+import {
+  bi_Image_symbol_black,
+  bi_Image_symbol_white,
+  bi_Initial_symbol_white,
+  bi_Initial_symbol_black,
+} from "@/assets/images/@index";
+
+export const symbolData = [
+  {
+    id: 1,
+    title: "Initial symbol",
+    description:
+      "이니셜 심볼은 k와 w 두 글자를 이용하여 강력한 만법 문장이 연상 되도록 디자인 하였고, 전통과 현대적 감각의 조화를 고려하였습니다. 강인함과 파워를 표현합니다.",
+    images: [
+      {
+        id: "initial-white",
+        src: bi_Initial_symbol_white,
+        alt: "Initial_symbol_white",
+        downloadUrl: "/bi_Initial_symbol_white.png",
+      },
+      {
+        id: "initial-black",
+        src: bi_Initial_symbol_black,
+        alt: "Initial_symbol_black",
+        downloadUrl: "/bi_Initial_symbol_black.png",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "Image symbol",
+    description:
+      "이미지 심볼은 전형적인 마법사 이미지에서 탈피하여 현대적인 마법사의 모습을 새롭게 창조했습니다. 신속한 기동력과 유연함을 표현합니다.",
+    images: [
+      {
+        id: "image-white",
+        src: bi_Image_symbol_white,
+        alt: "Image_symbol_white",
+        downloadUrl: "/bi_Image_symbol_white.png",
+      },
+      {
+        id: "image-black",
+        src: bi_Image_symbol_black,
+        alt: "Image_symbol_black",
+        downloadUrl: "/bi_Image_symbol_black.png",
+      },
+    ],
+  },
+];