💄 [WV-24] design : news card 컴포넌트 생성

app/(menu)/media/highlight/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>page입니다</div>;
+}

app/(menu)/media/news/page.tsx

@@ -0,0 +1,14 @@
+import NewsCard from "@/components/media/news-card";
+
+export default function page() {
+  return (
+    <div>
+      <NewsCard
+        title="2024 kt wiz 73승 기념뱃지 수령"
+        content="감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. 국회가 재적의원 과반수의 찬성으로 계엄의 해제를 요구한 때에는 대통령은 이를 해제하여야 한다. 이 헌법시행 당시의 대법원장과 대법원판사가 아닌 법관은 제1항 단서의 규정에 불구하고 이 헌법에 의하여 임명된 것으로 본다. 명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다."
+        date={new Date("2024-12-25")}
+        views={99}
+      />
+    </div>
+  );
+}

app/(menu)/media/story/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>page입니다</div>;
+}

assets/icons/@index.ts

@@ -0,0 +1,8 @@
+export { default as Calendar } from "./icon_calendar.svg";
+export { default as Facebook } from "./icon_facebook.png";
+export { default as Instargram } from "./icon_instagram.png";
+export { default as Naver } from "./icon_naver.png";
+export { default as Ticket } from "./icon_ticket.png";
+export { default as User } from "./icon_user.png";
+export { default as Youtube } from "./icon_youtube.png";
+export { default as Views } from "./icon_views.svg";

assets/images/@index.ts

@@ -0,0 +1,33 @@
+export { default as post_bg_web } from "./2024_post_bg_web.png";
+export { default as defeat } from "./image_defeat.png";
+export { default as draw } from "./image_draw.png";
+export { default as win } from "./image_win.png";
+export { default as logo_HH } from "./logo_HH.png";
+export { default as logo_HT } from "./logo_HT.png";
+export { default as logo_KT } from "./logo_KT.png";
+export { default as logo_LG } from "./logo_LG.png";
+export { default as logo_LT } from "./logo_LT.png";
+export { default as logo_NC } from "./logo_NC.png";
+export { default as logo_OB } from "./logo_OB.png";
+export { default as logo_SK } from "./logo_SK.png";
+export { default as logo_SS } from "./logo_SS.png";
+export { default as logo_WO } from "./logo_WO.png";
+export { default as logo_ktwports } from "./logo_ktsports.png";
+export { default as ktwiz } from "./logo_ktwiz.png";
+export { default as ktwiz_en } from "./logo_ktwiz_en.svg";
+export { default as ktwiz_kr } from "./logo_ktwiz_kr.svg";
+export { default as lgtwins } from "./logo_lgtwins.png";
+export { default as gallery } from "./main_title_gallery.png";
+export { default as schedule } from "./main_title_schedule.png";
+export { default as main_title_video } from "./main_title_video.png";
+export { default as map_img } from "./map_img.png";
+export { default as reservation } from "./parking_reservation.png";
+export { default as player } from "./player_EomSangBaek.jpg";
+export { default as schedule_video } from "./schedule_video.png";
+export { default as submenu_bg } from "./submenu_bg.png";
+export { default as about_img1 } from "./team_about_img1.png";
+export { default as about_img2 } from "./team_about_img2.png";
+export { default as about_img3 } from "./team_about_img3.png";
+export { default as about_img4 } from "./team_about_img4.png";
+export { default as ranking } from "./team_ranking.png";
+export { default as wiz_park } from "./wiz_park.jpg";

components/media/news-card.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import exampleImage from "@/assets/images/team_about_img3.png";
+import { Calendar, Views } from "@/assets/icons/@index";
+import { format } from "date-fns";
+
+const NewsCard = ({ title, content, date, views }: NewsCardProps) => {
+  return (
+    <div className=" h-[200px] flex p-4 gap-2 w-full border-b border-b-ELSE-B7">
+      <div className="justify-center content-center w-[320px] h-[170px]">
+        <Image src={exampleImage} width={300} height={160} alt="example" />
+      </div>
+      <div className="flex-1  h-[170px] flex flex-col justify-between">
+        <div className="flex flex-col gap-3">
+          <p className="text-xl font-bold">[안내] {title}</p>
+          <p className="line-clamp-3 text-l text-ELSE-7374">{content}</p>
+        </div>
+        <div className="flex gap-3 ">
+          <div className="flex gap-1">
+            <Image src={Calendar} width={24} height={24} alt="calendar" />
+            <div className="text-ELSE-7374">{format(date, "yyyy.MM.dd")}</div>
+          </div>
+          <div className="flex gap-1">
+            <Image src={Views} width={24} height={24} alt="calendar" />
+            <div className="text-ELSE-7374"> 조회수 : {views}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default NewsCard;

components/media/type.d.ts

@@ -0,0 +1,6 @@
+type NewsCardProps = {
+  title: string;
+  content: string;
+  date: Date;
+  views: number;
+};