feat : IT News 리스트 페이지 UI (#53)

Co-authored-by: 정석호 <[email protected]>

Author: Junseong0112

frontend/zicdding-class.com/app/(test)/test/ITNews/page.tsx

@@ -1,20 +1,18 @@
 'use client';
-import ITNews from '@/app/_components/ITNews';
+import ITNews from '@/app/_components/ITNewsCard';
 
 export default function TestPage() {
   return (
     <ITNews
-      id={1}
+      id="7b205a4d-f17f-4b65-a463-38a270d1ab39"
       title="샘플 IT 뉴스 제목"
       thumbnailSrc="https://via.placeholder.com/300x200"
       type="공모전"
-      date={{
-        start: '2024-01-01',
-        end: '2024-12-31',
-      }}
-      likeCount={15}
-      viewCount={99}
-      commentCount={13}
+      startedDate="2023-04-01"
+      endDate="2023-04-30"
+      likeCnt={15}
+      viewCnt={99}
+      commentCnt={13}
       myLike={false}
     />
   );

frontend/zicdding-class.com/app/_components/ITNews.tsx

@@ -0,0 +1,84 @@
+import { Icon } from '@ui/components/Icon';
+import { Card, CardHeader, CardFooter, CardTitle, CardContent, CardDescription } from '@zicdding-web/ui';
+import { cn } from '@ui/lib/utils';
+import Image from 'next/image';
+import type { MouseEvent } from 'react';
+
+interface Props extends React.ComponentPropsWithRef<typeof Card> {
+  id: string;
+  title: string;
+  thumbnailSrc: string;
+  type: string;
+  startedDate: string;
+  endDate: string;
+  likeCnt: number;
+  viewCnt: number;
+  commentCnt: number;
+  myLike: boolean;
+
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  onClickLike?: (e: MouseEvent<SVGAElement>) => void;
+}
+
+export default function ITNews({
+  id,
+  title,
+  thumbnailSrc,
+  type,
+  startedDate,
+  endDate,
+  likeCnt,
+  viewCnt,
+  commentCnt,
+  myLike,
+  className,
+  onClick,
+  onClickLike,
+  ...rest
+}: Props) {
+  return (
+    <Card className={cn('relative  rounded-[20px] border border-black', className)} onClick={onClick} {...rest}>
+      <CardHeader className="relative w-full pb-56 pt-0 rounded-tl-[20px] rounded-tr-[20px] overflow-hidden">
+        <Image src={thumbnailSrc} alt={title} layout="fill" />
+      </CardHeader>
+      <CardContent className="px-[15px]">
+        <CardDescription className="mt-[10px] px-5 py-1 inline-block text-[14px] text-muted-foreground border bg-gray-300 rounded">
+          {type}
+        </CardDescription>
+        <CardTitle className="mt-[15px] font-semibold text-xl leading-none tracking-tight">{title}</CardTitle>
+        <div className="flex gap-1 mt-[10px] text-sm">
+          <span>기간 :</span>
+          <span className="font-semibold">
+            {startedDate} ~ {endDate}
+          </span>
+        </div>
+      </CardContent>
+      <CardFooter className="mt-[20px] justify-end px-[15px] pb-[15px] pt-0">
+        <ul className="flex items-center justify-end gap-4 text-sm">
+          <li className="flex gap-1">
+            <span>⭐️</span>
+            <span>{likeCnt}</span>
+          </li>
+          <li className="flex gap-1">
+            <span>👁️</span>
+            <span>{viewCnt}</span>
+          </li>
+          <li className="flex gap-1">
+            <span>💬</span>
+            <span>{commentCnt}</span>
+          </li>
+        </ul>
+      </CardFooter>
+      <div className="absolute cursor-pointer top-2 right-2">
+        <Icon
+          name="star"
+          className={myLike ? 'text-yellow-400' : 'text-gray-400'}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClickLike?.(e);
+          }}
+        />
+      </div>
+    </Card>
+  );
+}

frontend/zicdding-class.com/app/_components/ITNewsCard.tsx

@@ -0,0 +1,7 @@
+export default function ItNewsDetailPage() {
+  return (
+    <div>
+      <h1>아이티 뉴스 상세 페이지</h1>
+    </div>
+  );
+}

frontend/zicdding-class.com/app/itnews/[id]/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Tabs } from '@zicdding-web/ui/Tabs';
+
+type TabItem = {
+  title: string;
+  value: string;
+};
+
+interface ItTabsProps {
+  item: TabItem[];
+}
+
+export function ItTabs({ item }: ItTabsProps) {
+  return <Tabs items={item} defaultValue="recent" onChange={(e) => console.log(e)} />;
+}

frontend/zicdding-class.com/app/itnews/_components/ItTabs.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@zicdding-web/ui';
+import { useState } from 'react';
+
+const TypeOptions = [
+  { label: '전체', value: 'all' },
+  { label: '해커톤', value: 'hackathon' },
+  { label: '이벤트', value: 'event' },
+  { label: '공모전', value: 'competition' },
+];
+
+export function TypeButton() {
+  const [selectedType, setSelectedType] = useState<string>('all');
+
+  const handleTypeClick = (type: string) => {
+    setSelectedType(type);
+    console.log(`선택된 타입: ${type}`);
+  };
+
+  return (
+    <div className="flex gap-[30px]">
+      {TypeOptions.map(({ label, value }) => (
+        <Button
+          className={`px-0 text-2xl ${value === selectedType ? 'text-black' : 'text-gray-400'} hover:text-black`}
+          key={value}
+          variant="link"
+          size="lg"
+          onClick={() => handleTypeClick(value)}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
+  );
+}