feat :: 코멘트 반영

Team-return · Mar 14, 2024 · 32a9419 · 32a9419
1 parent abcb838
commit 32a9419
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 30 deletions.
diff --git a/src/apis/notice/index.ts b/src/apis/notice/index.ts
@@ -0,0 +1,10 @@
+import { NoticeListResponse } from "./type";
+import { NoticeDetailResponse } from "./type";
+
+export const useGetNoticeList = () => {
+
+};
+
+export const useGetNoticeDetail = () => {
+
+};
diff --git a/src/apis/notice/type.ts b/src/apis/notice/type.ts
@@ -0,0 +1,14 @@
+export interface NoticeListResponse {
+    notices: {
+        notice_id: number;
+        title: string;
+        createAt: string;
+    }[];
+};
+
+export interface NoticeDetailResponse {
+    title: string;
+    content: string;
+    createAt: string;
+    attachments: string[];
+}
diff --git a/src/app/mypage/notice/detail/page.tsx b/src/app/mypage/notice/detail/page.tsx
@@ -1,13 +1,19 @@
+'use client'
+
+import { useGetNoticeDetail } from "@/apis/notice";
+import { useEffect, useState } from "react";
+import AttachedBox from "@/components/notice/AttachedBox";
+
 export default function NoticeDetailPage() {
     return (
         <div className="flex justify-center items-center mt-[100px]">
             <div className="flex flex-col gap-[40px]">
-                <div className="text-[28px] font-[500] text-left">공지사항</div>
+                <h1 className="text-[28px] font-[500] text-left">공지사항</h1>
                 <div className="w-[1151px] h-[494px] overflow-y-auto">
                     <div className="bg-white border-[1px] border-gray rounded-[12px] p-[40px]">
-                        <div className="font-[700] text-[28px]">[중요] 신입생 오리엔테이션 안내</div>
-                        <div className="font-[500] text-[20px] mt-[20px]">2023-12-05</div>
-                        <div className="font-[400] text-[16px] mt-[28px]">
+                        <h1 className="font-[700] text-[28px]">[중요] 신입생 오리엔테이션 안내</h1>
+                        <h2 className="font-[500] text-[20px] mt-[20px]">2023-12-05</h2>
+                        <p className="font-[400] text-[16px] mt-[28px]">
                             신입생 오리엔테이션 책자에 있는 입학전 과제의 양식입니다.
                             첨부파일을 다운받아 사용하시고,
                             영어와 전공은 특별한 양식이 없으니 내용에 맞게 작성하여 학교 홈페이지에 제출하시기 바랍니다.
@@ -35,18 +41,12 @@ export default function NoticeDetailPage() {
                             신입생 오리엔테이션 책자에 있는 입학전 과제의 양식입니다.
                             첨부파일을 다운받아 사용하시고,
                             영어와 전공은 특별한 양식이 없으니 내용에 맞게 작성하여 학교 홈페이지에 제출하시기 바랍니다.
-                        </div>
-                        <div className="flex flex-row w-full h-[108px] mt-[32px] border-t-[2px] border-b-[1px] border-[#135C9D] p-[16px] gap-[20px]">
-                            <div className="font-[500] text-[18px] ">첨부자료</div>
-                            <div className="flex flex-col gap-[4px] justify-center">
-                                <div>2024학년도 신입생 과제.hwp</div>
-                                <div>2024학년도 신입생 과제.hwp</div>
-                                <div>2024학년도 신입생 과제.hwp</div>
-                            </div>
-                        </div>
+                        </p>
+                        <AttachedBox />
                     </div>
                 </div>
             </div>
         </div>
     );
 }
+
diff --git a/src/components/notice/AttachedBox.tsx b/src/components/notice/AttachedBox.tsx
@@ -0,0 +1,12 @@
+export default function AttachedBox () {
+    return (
+        <div className="flex flex-row w-full h-[108px] mt-[32px] border-t-[2px] border-b-[1px] border-[#135C9D] p-[16px] gap-[20px]">
+            <div className="font-[500] text-[18px] ">첨부자료</div>
+            <div className="flex flex-col gap-[4px] justify-center">
+                <div>2024학년도 신입생 과제.hwp</div>
+                <div>2024학년도 신입생 과제.hwp</div>
+                <div>2024학년도 신입생 과제.hwp</div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/notice/NoticeListTable.tsx b/src/components/notice/NoticeListTable.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link"
+
+export default function NoticeListTable () {
+    return (
+        <>
+            <Link href={"/mypage/notice/detail"}>
+                <tbody className="flex justify-center items-center border-collapse">
+                        <tr className="h-[60px] border-b-[0.5px] border-[#7F7F7F]">
+                        <td className="border-none w-[192px] text-[16px] text-[#135C9D] flex justify-center">12</td>
+                        <td className="border-none w-[735px] text-[16px] flex justify-center">[중요] 오리엔테이션날 일정 안내</td>
+                        <td className="border-none w-[192px] text-[16px] flex justify-center">2024-01-16</td>
+                    </tr>
+                </tbody>
+            </Link>
+        </>
+    )
+}
diff --git a/src/components/notice/NoticeLists.tsx b/src/components/notice/NoticeLists.tsx
@@ -1,8 +1,9 @@
 import Pagination from "../common/Pagination"
 import Link from "next/link";
+import NoticeListTable from "./NoticeListTable";
+import { useGetNoticeList } from "@/apis/notice";
 
 export default function NoticeLists() {
-
     return (
         <div className="flex flex-col justify-center items-center mt-[48px] gap-[40px]">
             <table className="flex table-fixed flex-col justify-center items-center">
@@ -13,22 +14,7 @@ export default function NoticeLists() {
                         <th className="w-[192px] text-[16px] px-4 py-2">작성일</th>
                     </tr>
                 </thead>
-                <Link href={"/mypage/notice/detail"}>
-                    <tbody className="flex justify-center items-center border-collapse">
-                        <tr className="h-[60px] border-b-[0.5px] border-[#7F7F7F]">
-                            <td className="border-none w-[192px] text-[16px] text-[#135C9D] flex justify-center">12</td>
-                            <td className="border-none w-[735px] text-[16px] flex justify-center">[중요] 오리엔테이션날 일정 안내</td>
-                            <td className="border-none w-[192px] text-[16px] flex justify-center">2024-01-16</td>
-                        </tr>
-                    </tbody>
-                </Link>
-                <tbody className="flex justify-center items-center border-collapse">
-                    <tr className="h-[60px] border-b-[0.5px] border-[#7F7F7F]">
-                        <td className="border-none w-[192px] text-[16px] text-[#135C9D] flex justify-center">12</td>
-                        <td className="border-none w-[735px] text-[16px] flex justify-center">2024학년도 신입생 건강검진 안내</td>
-                        <td className="border-none w-[192px] text-[16px] flex justify-center">2024-01-16</td>
-                    </tr>
-                </tbody>
+                <NoticeListTable />
             </table>
             <div className="mb-[98px]">
                 <Pagination />