Skip to content

Commit

Permalink
Merge pull request #88 from Clubber2024/feat/footer_qna
Browse files Browse the repository at this point in the history
Feat/footer qna
  • Loading branch information
Kangyeeun0 authored Aug 19, 2024
2 parents b369bfc + 56de45a commit 7ced2ff
Show file tree
Hide file tree
Showing 9 changed files with 281 additions and 22 deletions.
2 changes: 1 addition & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -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

Binary file added public/footer/insta.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 />} />
Expand Down Expand Up @@ -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>
)}
Expand Down
39 changes: 39 additions & 0 deletions src/component/QnA/QnA.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
137 changes: 137 additions & 0 deletions src/component/QnA/QnA.module.css
Original file line number Diff line number Diff line change
@@ -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; */
}
}
19 changes: 4 additions & 15 deletions src/component/admin/EditPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down
28 changes: 22 additions & 6 deletions src/component/layout/Footer.jsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}

Expand Down
61 changes: 61 additions & 0 deletions src/component/layout/Footer.module.css
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions src/pages/QnAPage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import QnA from '../component/QnA/QnA';

export default function QnAPage() {
return (
<>
<QnA />
</>
);
}

0 comments on commit 7ced2ff

Please sign in to comment.