Merge pull request #50 from GDSC-DGU/feature/timeline

[✨Feature] Footer 최종, 타임라인 카드 반응형 수정

src/components/layout/footer/Footer.tsx

@@ -1,6 +1,5 @@
-'use client';
 import React from 'react';
-import RightArrowIcon from 'public/svg/icons/common/right_arrow.svg';
+import CreatorLinkButton from "@/components/timeline/button/CreatorLinkButton";
 
 /**
  * @description
@@ -9,37 +8,29 @@ import RightArrowIcon from 'public/svg/icons/common/right_arrow.svg';
  * @returns {JSX.Element} Footer
  * @since 2024.04.26
  */
-
 const Footer = () => {
-  const handlePress = () => {
-    console.log('Arrow clicked');
-  };
-
   return (
-    <footer className="w-full py-10 bg-mono_900 flex desktop:pl-80 tablet:pl-20 pl-10">
-      <div className="flex justify-start items-start w-full gap-10">
-        <div>
-          <h1 className="F1">About Us</h1>
-          <p className="F2">Final Update 2023.10.02</p>
-          <div className="flex items-center">
-            <p className="F2">제작자 소개</p>
-            <button onClick={handlePress} className="ml-2 mt-[-2px]">
-              <RightArrowIcon />
-            </button>
-          </div>
-          <div className="mt-4">
-            <p className="F3">Copyright © GDSC DGU</p>
-          </div>
-        </div>
-        <div>
-          <h1 className="F1">Contact</h1>
-          <div className="contact-item">
-            <p className="F2 label-width">이메일</p>
-            <p className="F2">[email protected]</p>
+    <footer className="w-full py-10 bg-mono_900 flex justify-center">
+      <div className="max-w-[1200px] w-full desktop:px-10 tablet:px-10 px-4">
+        <div className="flex flex-col tablet:flex-row items-start tablet:items-center gap-10">
+          <div>
+            <h1 className="F1">About Us</h1>
+            <p className="F2">Final Update 2023.10.02</p>
+            <CreatorLinkButton />
+            <div className="mt-4">
+              <p className="F3">Copyright © GDSC DGU</p>
+            </div>
           </div>
-          <div className="contact-item">
-            <p className="F2 label-width">주소</p>
-            <p className="F2">서울특별시 중구 필동로1길 30</p>
+          <div>
+            <h1 className="F1">Contact</h1>
+            <div className="contact-item">
+              <p className="F2 label-width">이메일</p>
+              <p className="F2">[email protected]</p>
+            </div>
+            <div className="contact-item">
+              <p className="F2 label-width">주소</p>
+              <p className="F2">서울특별시 중구 필동로1길 30</p>
+            </div>
           </div>
         </div>
       </div>

src/components/timeline/button/CreatorLinkButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import RightArrowIcon from 'public/svg/icons/common/right_arrow.svg';
+
+/**
+ * @description
+ * Component for clickable link with RightArrowIcon
+ * @returns {JSX.Element} CreatorLink
+ * @since 2024.05.26
+ */
+const CreatorLinkButton = () => {
+    return (
+        <div className="flex items-center">
+          <a href="https://github.com/GDSC-DGU/gdsc-dgu" target="_blank" rel="noopener noreferrer" className="flex items-center">
+            <p className="F2" style={{ marginBottom: '-3px', marginRight: '8px', display: 'flex', alignItems: 'center' }}>제작자 소개</p>
+            <RightArrowIcon style={{ width: '10px', height: '10px' }}/>
+          </a>
+        </div>
+      );
+};
+
+export default CreatorLinkButton;

src/components/timeline/part/TimelineMonthlyPart.tsx

@@ -24,9 +24,11 @@ const TimelineMonthlyPart: React.FC<TimelineMonthlyPartProps> = ({ timelineData
     <>
       {Object.entries(groupedData).map(([date, cards]) => (
         <div key={date} className="mx-auto my-10 animate-fadeIn">
+                  <div className="grid grid-cols-1 desktop:grid-cols-2 gap-4">
           <DateHeader date={date} />
           <hr className="border-t-[1px] border-mono_700 my-1" />
           <TimelineMonthlyCardSection timelineData={cards} />
+          </div>
         </div>
       ))}
     </>