Feat/footer qna

.env

@@ -1,3 +1,3 @@
 REACT_APP_BASE_URL="http://13.125.141.171:8080" 
-
+REACT_APP_BASE_LOGO_URL=https://clubber-bucket.s3.ap-northeast-2.amazonaws.com/logo/soongsil_default.png
 

src/App.jsx

@@ -24,6 +24,7 @@ import PendingList from './component/admin/pending/PendingList';
 import Layout from './component/admin/component/Layout';
 import ClubReviews from './component/admin/ClubReviews';
 import RecruitPage from './pages/RecruitPage';
+import QnAPage from './pages/QnAPage';
 import NoticeList from './component/main/NoticeList';
 import NoticePage from './pages/NoticePage';
 
@@ -60,12 +61,17 @@ function App() {
                         <Route path="/bookmark" element={<BookMarkPage />} />
                         <Route path="/user/reviews" element={<MyReview />} />
                         <Route path="/recruit" element={<RecruitPage />} />
+
+                        <Route path="/qna" element={<QnAPage />} />
+
+
                         <Route path="/admin" element={<AdminMenu />} />
                         <Route path="/admin/edit/:clubId" element={<EditPage />} />
                         <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                         <Route path="/admin/mypage/pending" element={<PendingList />} />
                         {/* <Route path="/admin" element={<Layout />}>
                             <Route index element={<AdminMenu />} />
+
                             <Route path="/admin/edit/:clubId" element={<EditPage />} />
                             <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                             <Route path="/admin/mypage/pending" element={<PendingList />} />
@@ -101,7 +107,9 @@ function App() {
                         <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                         <Route path="/admin/mypage/pending" element={<PendingList />} />
                         <Route path="/recruit" element={<RecruitPage />} />
+                        <Route path="/qna" element={<QnAPage />} />
                     </Routes>
+
                     <Footer />
                 </BrowserRouter>
             )}

src/component/QnA/QnA.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { customAxios } from '../../config/axios-config';
+import styles from './QnA.module.css';
+
+export default function QnA() {
+    const [faqData, setFaqData] = useState([]);
+
+    const getFaQData = async () => {
+        try {
+            const res = await customAxios.get(`/v1/faqs`);
+            //console.log(res.data.data);
+            setFaqData(res.data.data);
+        } catch (error) {
+            console.error('error:', error);
+        }
+    };
+
+    useEffect(() => {
+        getFaQData();
+    });
+
+    return (
+        <div className={styles.qna_div}>
+            <p className={styles.qna_title}>문의사항</p>
+            <p className={styles.faq_title}>자주 묻는 질문</p>
+
+            <div className={styles.faq_container} key={faqData.code}>
+                {faqData?.map((item) => (
+                    <div className={styles.faq_rectangle}>
+                        <p className={styles.faq_Q}>Q</p>
+                        <p className={styles.faq_question}>{item.question}</p>
+                    </div>
+                ))}
+            </div>
+
+            <p className={styles.faq_title}>Q&A</p>
+        </div>
+    );
+}

src/component/QnA/QnA.module.css

@@ -0,0 +1,137 @@
+@media screen and (min-width: 768px) {
+    .qna_div {
+        margin-left: 10%;
+    }
+
+    .qna_title {
+        font-family: Noto Sans;
+        font-size: 26px;
+        font-weight: 700;
+        line-height: 35.41px;
+        text-align: center;
+        color: #202123;
+        margin-top: 47px;
+    }
+
+    .faq_title {
+        font-family: Noto Sans;
+        font-size: 26px;
+        font-weight: 700;
+        line-height: 35.41px;
+        text-align: left;
+        color: #202123;
+        margin-top: 65px;
+    }
+
+    .faq_container {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 50px;
+    }
+
+    .faq_rectangle {
+        width: 285px;
+        height: 97px;
+        border-radius: 20px;
+        background: #ffffff;
+        border: 1px solid #9c9c9c4d;
+        box-shadow: 0px 0px 2px 1px #0000000d;
+        margin-top: 36px;
+        margin-right: 20px;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .faq_Q {
+        font-family: Plus Jakarta Sans;
+        font-size: 20px;
+        font-weight: 700;
+        line-height: 25.2px;
+        text-align: left;
+        color: #202123;
+        margin-left: 20px;
+        margin-top: 20px;
+        margin-right: 8px;
+        /* display: contents; */
+    }
+
+    .faq_question {
+        font-family: Noto Sans KR;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 26.06px;
+        text-align: left;
+        margin-top: 20px;
+        color: #202123;
+        /* display: contents; */
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .qna_div {
+        margin-left: 10%;
+    }
+
+    .qna_title {
+        font-family: Noto Sans;
+        font-size: 26px;
+        font-weight: 700;
+        line-height: 35.41px;
+        text-align: center;
+        color: #202123;
+        margin-top: 47px;
+    }
+
+    .faq_title {
+        font-family: Noto Sans;
+        font-size: 26px;
+        font-weight: 700;
+        line-height: 35.41px;
+        text-align: left;
+        color: #202123;
+        margin-top: 65px;
+    }
+
+    .faq_container {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 50px;
+    }
+
+    .faq_rectangle {
+        width: 285px;
+        height: 97px;
+        border-radius: 20px;
+        background: #ffffff;
+        border: 1px solid #9c9c9c4d;
+        box-shadow: 0px 0px 2px 1px #0000000d;
+        margin-top: 36px;
+        margin-right: 20px;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .faq_Q {
+        font-family: Plus Jakarta Sans;
+        font-size: 20px;
+        font-weight: 700;
+        line-height: 25.2px;
+        text-align: left;
+        color: #202123;
+        margin-left: 20px;
+        margin-top: 20px;
+        margin-right: 8px;
+        /* display: contents; */
+    }
+
+    .faq_question {
+        font-family: Noto Sans KR;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 26.06px;
+        text-align: left;
+        margin-top: 20px;
+        color: #202123;
+        /* display: contents; */
+    }
+}

src/component/admin/EditPage.jsx

@@ -12,6 +12,9 @@ export default function EditPage() {
     const [imageFile, setImageFile] = useState(null);
     const [imageUrl, setImageUrl] = useState('');
     const [imagePreview, setImagePreview] = useState('');
+    const baseLogoUrl = process.env.REACT_APP_BASE_LOGO_URL;
+
+    console.log('bb', baseLogoUrl);
 
     const getAdminClub = async () => {
         try {
@@ -152,21 +155,7 @@ export default function EditPage() {
         if (!imageUrl) return;
 
         try {
-            // presigned URL을 가져오는 API 호출
-            const { data } = await customAxios.get('/v1/images/club/logo', {
-                headers: {
-                    Authorization: `Bearer ${accessToken}`,
-                },
-                params: {
-                    key: `${imageUrl.split('/').pop()}`,
-                    //action: 'deleteObject',
-                },
-            });
-
-            // 이미지 파일을 presigned URL로 삭제
-            await customAxios.delete(data.url);
-
-            setImageUrl(null);
+            setImageUrl(baseLogoUrl);
             alert('이미지 삭제가 완료되었습니다.');
         } catch (error) {
             console.error('이미지 삭제 실패:', error);

src/component/layout/Footer.jsx

@@ -1,16 +1,32 @@
 import React from 'react';
 //import { Link } from 'react-router-dom';
 import styles from './Footer.module.css';
+import { LinkItem } from '../branch/BranchCentral';
 
 function Footer() {
     return (
-        <div className={styles.footer}>
-            <div className={styles.footer_content}>
-                <p className={styles.text_ContactUs}>contact us</p>
-                <br />
-                <p className={styles.p}>instagram:@clubber phone-number:010-1234-5678 email: [email protected]</p>
+        <>
+            <div className={styles.font_container}>
+                <p className={styles.font}>이용약관ㅣ</p>
+                <p className={styles.font}>개인정보처리방침ㅣ</p>
+                <p className={styles.font}>운영정책ㅣ</p>
+                <p className={styles.font}>공지사항ㅣ</p>
+                <LinkItem to={'/qna'}>
+                    <p className={styles.font}>FAQ</p>
+                </LinkItem>
             </div>
-        </div>
+            <div className={styles.footer}>
+                <div className={styles.footer_content}>
+                    <div className={styles.circle_insta}>
+                        <a href="https://www.instagram.com/clubber_ssu/">
+                            <img src={'/footer/insta.png'} alt="insta" className={styles.footer_insta} />
+                        </a>
+                    </div>
+                    <p className={styles.p}>상호 : (주)클로버 | 대표자명 : 클러버</p>
+                    <br />
+                </div>
+            </div>
+        </>
     );
 }
 

src/component/layout/Footer.module.css

@@ -1,4 +1,20 @@
 @media screen and (min-width: 769px) {
+    .font_container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        padding-top: 13px;
+        margin-bottom: 13px;
+        border-top: 4px solid var(--Main-Color, #7bc8e0);
+    }
+    .font {
+        font-family: Noto Sans;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 19.07px;
+        text-align: left;
+        color: #646464;
+    }
     .footer {
         background-color: #9c9c9c26;
         position: relative;
@@ -10,6 +26,20 @@
         padding: 10px;
     }
 
+    .circle_insta {
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        background: #ffffff;
+        margin: auto;
+    }
+
+    .footer_insta {
+        width: 23.28px;
+        height: 23.28px;
+        margin-top: 8px;
+    }
+
     .p {
         font-family: Noto Sans KR;
         font-size: 13px;
@@ -27,6 +57,22 @@
     }
 }
 @media screen and (max-width: 769px) {
+    .font_container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        padding-top: 13px;
+        margin-bottom: 13px;
+        border-top: 4px solid var(--Main-Color, #7bc8e0);
+    }
+    .font {
+        font-family: Noto Sans;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 19.07px;
+        text-align: left;
+        color: #646464;
+    }
     .footer {
         background-color: #9c9c9c26;
         position: relative;
@@ -38,6 +84,21 @@
         padding: 0px;
     }
 
+    .circle_insta {
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        background: #ffffff;
+        margin: auto;
+        margin-top: 10px;
+    }
+
+    .footer_insta {
+        width: 23.28px;
+        height: 23.28px;
+        margin-top: 8px;
+    }
+
     .p {
         font-family: Noto Sans KR;
         font-size: 11px;

src/pages/QnAPage.jsx

@@ -0,0 +1,9 @@
+import QnA from '../component/QnA/QnA';
+
+export default function QnAPage() {
+    return (
+        <>
+            <QnA />
+        </>
+    );
+}