Merge pull request #111 from iam-hyo/feature/#41

src/components/about/Footer.jsx

@@ -0,0 +1,55 @@
+import { useNavigate } from 'react-router-dom';
+import { Review } from "@components/about/Review/Review"
+// import github from "@assets/img/github.svg"
+import github from '../../assets/img/github.svg'
+import Develop from '../../assets/img/Developers.svg'
+import insta from '../../assets/img/instagram.svg'
+import * as F from './FooterStyle';
+import * as S from "@pages/about/AboutPage.styled";
+
+
+
+const Footer = () => {
+    const navigate = useNavigate();
+
+    const goToAboutPage = () => {
+        navigate('/about');
+    }
+
+    const goToGithub = () => {
+        window.open('https://github.com/LikeLion-at-DGU/2024_fall_festival_front', '_blank'); // 새로운 탭에서 GitHub 열기
+    };
+
+    const goToInstagram = () => {
+        window.open('https://www.instagram.com/likelion.official/', '_blank'); // 새로운 탭에서 Instagram 열기
+    };
+
+    return(
+        <F.Footer>
+            <Review />
+            <p id='copy'>Copyright ⓒ 2024. 동국대학교 멋쟁이사자처럼 All rights reserved.</p>
+
+            <F.ButtonBar>
+
+                <button onClick={goToGithub}>
+                <img src={github} />
+                <span>Github</span>
+                </button>
+
+                <button onClick={goToAboutPage}>
+                <img src={Develop} />
+                <span> Developers</span>
+                </button>
+
+                <button onClick={goToInstagram}>
+                <img src={insta} />
+                <span>  Instagram</span>
+                </button>
+            </F.ButtonBar>
+
+        </F.Footer>
+    )
+
+}
+
+export default Footer;

src/components/about/FooterStyle.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Footer = styled.div`
+    display: flex;
+    flex-direction: column;
+    
+*{
+    /* border: 1px solid black; */
+}
+
+#copy{
+    text-align: center;
+    color: rgba(0, 0, 0, 0.35);
+    padding: 10px 0;
+}
+`
+
+export const ButtonBar = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: 15px;
+    margin: 10px 0;
+
+    @media (max-width: 370px) {
+        flex-direction: column;
+    }
+
+    button{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        gap: 3px;
+
+        padding: 3px 8px;
+        border-radius: 10px;
+        border: 0.5px solid #BFBFBF;
+        background: #FFF;
+    }
+
+    span{
+        height: 100%;
+        text-align: center;
+        line-height: 1.8;
+    }
+
+    img{
+        width: 24px;
+        height: 24px;
+        object-fit: cover;
+    }
+`

src/components/about/Review/styled.js

@@ -7,17 +7,18 @@ export const MainWrapper = styled.div`
   align-items: center;
   justify-content:center;
   gap: 20px; 
-  margin-top:50px; 
+  margin-top:30px; 
 `;
 
 export const MentPlusLink = styled.div`
   display:flex;
   flex-direction:column;
   gap:7px;
-  margin-bottom:30px;
+  margin-bottom: 15px;
   align-items: center;
   justify-content:center;
 `;
+
 export const MainMent = styled.div`
   color: #000;
   font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoUL00['font-family']};

src/pages/about/AboutPage.jsx

@@ -3,13 +3,15 @@ import { AboutCard } from "@components/about/AboutCard/AboutCard";
 import { LikeLionLink } from "@components/about/LikeLionLink/LikeLionLink";
 import { Review } from "@components/about/Review/Review";
 import { TopBar } from "@components/topBar/TopBar";
+import Footer from "@components/about/Footer";
+
 export const AboutPage = () => {
   return (
     <S.MainWrapper>
       < TopBar />
       <LikeLionLink />
       <AboutCard />
-      <Review />
+      <Footer />
     </S.MainWrapper>
   );
 };

src/pages/booth/BoothPage.jsx

@@ -11,6 +11,7 @@ import nonselect_GI from "../../assets/images/nonselect_GI.png";
 import nonselect_JU from "../../assets/images/nonselect_JU.png";
 import select_GI from "../../assets/images/select_GI.png";
 import select_JU from "../../assets/images/select_JU.png";
+import Footer from "../../components/about/Footer";
 
 export const BoothPage = () => {
   // 모달 상태 추가
@@ -554,9 +555,9 @@ export const BoothPage = () => {
             ) : (
               <S.NoBooth>현재 운영중인 부스가 없어요!</S.NoBooth>
             )}
+            <Footer/>
           </S.BoothList>
         </S.BoothListWrapper>
-
         {/* 선택한 부스 디테일 */}
         {selectBooth && (
           <>