feat: 메인 새 소식 슬라이드 스크롤 가능하게

wafflestudio · Mar 31, 2024 · 8a2a911 · 8a2a911
1 parent bcd1e33
commit 8a2a911
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 30 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - feat/search
+      - feat/mainPagination
 
 jobs:
   build:

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -4,11 +4,11 @@ import { ReactNode } from 'react';
 
 import DownArrow from '@/public/image/main/down_arrow.svg';
 import RightArrow from '@/public/image/main/right_arrow.svg';
-import SmallRightArrow from '@/public/image/main/small_right_arrow.svg';
 
 import { getMain } from '@/apis/main';
 
 import Header from '@/components/layout/header/Header';
+import NewsSection from '@/components/main/NewsSection';
 import NoticeSection from '@/components/main/NoticeSection';
 
 import { MainImportant, MainNews } from '@/types/main';
@@ -19,21 +19,26 @@ import {
   faculty,
   facultyRecruitment,
   graduateScholarship,
-  news,
   topConferenceList,
   undergraduateScholarship,
 } from '@/utils/segmentNode';
 
+const NEWS_CARD_WIDTH_REM = 13.8;
+
 export default async function MainPage() {
   const data = await getMain();
 
   return (
     <>
       <Header />
       <MainSection />
-      <NewsSection newsList={data.slides} />
+      <NewsSection>
+        {data.slides.map((news) => (
+          <NewsCard news={news} key={news.id} />
+        ))}
+      </NewsSection>
       <ImportantSection importantList={data.importants} />
-      <NoticeSection notice={data.notices} />
+      <NoticeSection allMainNotice={data.notices} />
       <LinkSection />
     </>
   );
@@ -46,31 +51,11 @@ const MainSection = () => (
   </div>
 );
 
-const NewsSection = ({ newsList }: { newsList: MainNews[] }) => {
-  return (
-    <div className="relative bg-neutral-100 pb-[5.5rem] pt-[5rem]">
-      <div className="absolute left-[3.81rem] top-[5rem] flex flex-col gap-2">
-        <h3 className="text-[1.75rem] font-medium text-neutral-950">새 소식</h3>
-        <Link
-          className="flex items-center gap-1 text-base font-normal text-[#E65615]"
-          href={getPath(news)}
-        >
-          더보기 <SmallRightArrow />
-        </Link>
-      </div>
-      <div className="no-scrollbar flex justify-center gap-8">
-        {newsList.slice(0, 4).map((news) => (
-          <NewsCard news={news} key={news.id} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
 const NewsCard = ({ news }: { news: MainNews }) => (
   <Link
     href={`/community/news/${news.id}`}
-    className="flex h-[19rem] w-[13.8rem] flex-col bg-neutral-50 shadow-[0_0_31.9px_0_rgba(0,0,0,0.07)] "
+    style={{ width: `${NEWS_CARD_WIDTH_REM}rem` }}
+    className="flex h-[19rem] shrink-0 flex-col bg-neutral-50 shadow-[0_0_31.9px_0_rgba(0,0,0,0.07)]"
   >
     <div className="relative h-[6.25rem] w-full">
       <Image src={news.imageURL} fill alt="" className="object-cover" />

diff --git a/components/main/NewsSection.tsx b/components/main/NewsSection.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import Link from 'next/link';
+import { ReactNode } from 'react';
+
+import SmallRightArrow from '@/public/image/main/small_right_arrow.svg';
+
+import { getPath } from '@/utils/page';
+import { news } from '@/utils/segmentNode';
+
+export default function NewsSection({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative bg-neutral-100">
+      <div className="absolute left-[3.81rem] top-[5rem] z-10 flex flex-col gap-2">
+        <h3 className="text-[1.75rem] font-medium text-neutral-950">새 소식</h3>
+        <Link
+          className="flex items-center gap-1 text-base font-normal text-[#E65615]"
+          href={getPath(news)}
+        >
+          더보기 <SmallRightArrow />
+        </Link>
+      </div>
+
+      <div className="ml-[12.56rem] flex gap-8 overflow-x-scroll pb-[5.5rem] pr-[7.5rem] pt-[5rem]">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/components/main/NoticeSection.tsx b/components/main/NoticeSection.tsx
@@ -8,8 +8,10 @@ import Plus from '@/public/image/main/plus.svg';
 import { AllMainNotice } from '@/types/main';
 
 import { formatMainNoticeDateStr } from '@/utils/date';
+import { getPath } from '@/utils/page';
+import { notice } from '@/utils/segmentNode';
 
-export default function NoticeSection({ notice }: { notice: AllMainNotice }) {
+export default function NoticeSection({ allMainNotice }: { allMainNotice: AllMainNotice }) {
   const [tag, setTag] = useState<keyof AllMainNotice>('all');
 
   return (
@@ -37,13 +39,13 @@ export default function NoticeSection({ notice }: { notice: AllMainNotice }) {
               대학원
             </NoticeSectionButton>
           </div>
-          <Link className="flex text-base font-normal text-[#E65817]" href="/notice">
+          <Link className="flex text-base font-normal text-[#E65817]" href={getPath(notice)}>
             <Plus /> 더보기
           </Link>
         </div>
 
         <div className="mt-6 flex flex-col gap-4">
-          {notice[tag].map((notice) => (
+          {allMainNotice[tag].map((notice) => (
             <Link
               key={notice.id}
               className="line-clamp-1 flex justify-between text-base font-normal text-white"