From 17fe52a9936ec88b45daf0cffd1b07a308f9c2b0 Mon Sep 17 00:00:00 2001
From: Kangyeeun0 <kangyeeun55@gmail.com>
Date: Mon, 19 Aug 2024 15:34:42 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=ED=91=B8=ED=84=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20faq=20=EC=B4=88=EA=B8=B0=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                   |   2 +-
 public/footer/insta.png                | Bin 0 -> 2728 bytes
 src/App.jsx                            |   3 ++
 src/component/QnA/QnA.jsx              |  39 +++++++++++++++
 src/component/QnA/QnA.module.css       |  66 +++++++++++++++++++++++++
 src/component/admin/EditPage.jsx       |  19 ++-----
 src/component/layout/Footer.jsx        |  28 ++++++++---
 src/component/layout/Footer.module.css |  46 +++++++++++++++++
 src/pages/QnAPage.jsx                  |   9 ++++
 9 files changed, 190 insertions(+), 22 deletions(-)
 create mode 100644 public/footer/insta.png
 create mode 100644 src/component/QnA/QnA.jsx
 create mode 100644 src/component/QnA/QnA.module.css
 create mode 100644 src/pages/QnAPage.jsx

diff --git a/.env b/.env
index 848a311..9dcff20 100644
--- a/.env
+++ b/.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
 
diff --git a/public/footer/insta.png b/public/footer/insta.png
new file mode 100644
index 0000000000000000000000000000000000000000..20f80039b39c6c6c2cda8da1a1ef15050ea1fbc9
GIT binary patch
literal 2728
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

literal 0
HcmV?d00001

diff --git a/src/App.jsx b/src/App.jsx
index c011561..0e2a276 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,6 +24,7 @@ import Layout from './component/admin/component/Layout';
 import ClubReviews from './component/admin/ClubReviews';
 import NoticePage from './component/main/NoticePage';
 import RecruitPage from './pages/RecruitPage';
+import QnAPage from './pages/QnAPage';
 
 function App() {
     const isPc = useMediaQuery({
@@ -64,6 +65,7 @@ function App() {
                             <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                             <Route path="/admin/mypage/pending" element={<PendingList />} />
                         </Route>
+                        <Route path="/qna" element={<QnAPage />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>
@@ -95,6 +97,7 @@ function App() {
                         <Route path="/admin/mypage/pending" element={<PendingList />} />
                         <Route path="/recruit" element={<RecruitPage />} />
                     </Routes>
+                    <Route path="/qna" element={<QnAPage />} />
                     <Footer />
                 </BrowserRouter>
             )}
diff --git a/src/component/QnA/QnA.jsx b/src/component/QnA/QnA.jsx
new file mode 100644
index 0000000..cb0efb7
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/component/QnA/QnA.module.css b/src/component/QnA/QnA.module.css
new file mode 100644
index 0000000..564afd6
--- /dev/null
+++ b/src/component/QnA/QnA.module.css
@@ -0,0 +1,66 @@
+.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; */
+}
diff --git a/src/component/admin/EditPage.jsx b/src/component/admin/EditPage.jsx
index f5366be..4f638c3 100644
--- a/src/component/admin/EditPage.jsx
+++ b/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);
diff --git a/src/component/layout/Footer.jsx b/src/component/layout/Footer.jsx
index 2cb6427..f2b1d01 100644
--- a/src/component/layout/Footer.jsx
+++ b/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: clubber@gmail.com</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>
+        </>
     );
 }
 
diff --git a/src/component/layout/Footer.module.css b/src/component/layout/Footer.module.css
index ef73eac..636bd2f 100644
--- a/src/component/layout/Footer.module.css
+++ b/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;
diff --git a/src/pages/QnAPage.jsx b/src/pages/QnAPage.jsx
new file mode 100644
index 0000000..6993bc5
--- /dev/null
+++ b/src/pages/QnAPage.jsx
@@ -0,0 +1,9 @@
+import QnA from '../component/QnA/QnA';
+
+export default function QnAPage() {
+    return (
+        <>
+            <QnA />
+        </>
+    );
+}

From 3ab9cef8ebc1c75434b18c8db127c6b250576f03 Mon Sep 17 00:00:00 2001
From: Kangyeeun0 <kangyeeun55@gmail.com>
Date: Mon, 19 Aug 2024 15:43:10 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=ED=91=B8=ED=84=B0=20=EC=9D=B8?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EB=A1=9C=EA=B3=A0=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                            |   6 +-
 src/component/QnA/QnA.module.css       | 187 +++++++++++++++++--------
 src/component/layout/Footer.module.css |  15 ++
 3 files changed, 147 insertions(+), 61 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 0e2a276..4fd2a0c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -58,14 +58,13 @@ 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={<Layout />}>
                             <Route index element={<AdminPage />} />
                             <Route path="/admin/edit/:clubId" element={<EditPage />} />
                             <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                             <Route path="/admin/mypage/pending" element={<PendingList />} />
                         </Route>
-                        <Route path="/qna" element={<QnAPage />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>
@@ -96,8 +95,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>
-                    <Route path="/qna" element={<QnAPage />} />
+
                     <Footer />
                 </BrowserRouter>
             )}
diff --git a/src/component/QnA/QnA.module.css b/src/component/QnA/QnA.module.css
index 564afd6..38116cc 100644
--- a/src/component/QnA/QnA.module.css
+++ b/src/component/QnA/QnA.module.css
@@ -1,66 +1,137 @@
-.qna_div {
-    margin-left: 10%;
-}
+@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;
-}
+    .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_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_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_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_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; */
+    }
 }
 
-.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; */
+    }
 }
diff --git a/src/component/layout/Footer.module.css b/src/component/layout/Footer.module.css
index 636bd2f..452f6e5 100644
--- a/src/component/layout/Footer.module.css
+++ b/src/component/layout/Footer.module.css
@@ -84,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;