diff --git a/src/assets/fonts/NanumSquareRoundOTFB.otf b/src/assets/fonts/NanumSquareRoundOTFB.otf new file mode 100644 index 0000000..b8db7ee Binary files /dev/null and b/src/assets/fonts/NanumSquareRoundOTFB.otf differ diff --git a/src/assets/images/userLocation.svg b/src/assets/images/userLocation.svg new file mode 100644 index 0000000..4cf8f44 --- /dev/null +++ b/src/assets/images/userLocation.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/Developers.svg b/src/assets/img/Developers.svg new file mode 100644 index 0000000..bd045d4 --- /dev/null +++ b/src/assets/img/Developers.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/github.svg b/src/assets/img/github.svg new file mode 100644 index 0000000..6d31fbb --- /dev/null +++ b/src/assets/img/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/instagram.svg b/src/assets/img/instagram.svg new file mode 100644 index 0000000..f814dcb --- /dev/null +++ b/src/assets/img/instagram.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/about/Footer.jsx b/src/components/about/Footer.jsx new file mode 100644 index 0000000..1dfcd6e --- /dev/null +++ b/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( + + +

Copyright ⓒ 2024. 동국대학교 멋쟁이사자처럼 All rights reserved.

+ + + + + + + + + + + + ) + +} + +export default Footer; \ No newline at end of file diff --git a/src/components/about/FooterStyle.js b/src/components/about/FooterStyle.js new file mode 100644 index 0000000..614b935 --- /dev/null +++ b/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; + } +` \ No newline at end of file diff --git a/src/components/about/Review/styled.js b/src/components/about/Review/styled.js index 8c56f39..7ff3451 100644 --- a/src/components/about/Review/styled.js +++ b/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']}; diff --git a/src/components/common/BoothDetail/BoothDetail.jsx b/src/components/common/BoothDetail/BoothDetail.jsx index ce1af0c..c06ac32 100644 --- a/src/components/common/BoothDetail/BoothDetail.jsx +++ b/src/components/common/BoothDetail/BoothDetail.jsx @@ -116,11 +116,12 @@ export const BoothDetail = ({ onClose, booth_id, boothInfo }) => { - - MoveonTabling(boothDetailData.insta_link)} - > + {boothInfo.is_reservable === true && ( + MoveonTabling(boothDetailData.insta_link)} + > + )} ); }; diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx index f518087..d500a99 100644 --- a/src/components/searchBar/SearchBar.jsx +++ b/src/components/searchBar/SearchBar.jsx @@ -1,64 +1,53 @@ import React, { useState } from "react"; -import axios from "axios"; import * as S from "./SearchBarStyle"; -import searchIcon from "../../assets/images/searchIcon.svg"; - -const SearchBar = () => { - const [searchWord, setSearch] = useState(""); - const [message, setMessage] = useState(""); //결과 확인 출력용 추후 삭제!! - - const handleInput = (e) => { - setSearch(e.target.value); - }; - - const handleSearch = async () => { - try { - //우선 임시로 링크 걸어뒀습니다. - const response = await axios.get(`${import.meta.env.VITE_API_BASE_URL}/api/v1/booth/`, { - params: { - //필요하면 필터링 - }, - }); - - const data = response.data; - console.log("받아온 데이터:", data); - - //검색어와 부스 name or host가 일치하는 항목 불러오기 - const filteredData = data.filter((booth) => - booth.name.includes(searchWord) || booth.host.includes(searchWord) - ); - - if (filteredData.length > 0) { - const boothIds = filteredData.map(booth => booth.id); - console.log("필터링된 데이터:", filteredData); - console.log("필터링된 부스 ID들:", boothIds); //부스 id 여기 있어유 - setMessage(""); //검색 결과 있으면 해당 결과 출력 - } else { - setMessage("검색 결과가 없습니다."); - } - } catch (err) { - console.error("데이터를 가져오는 중 오류 발생:", err); - setMessage("데이터를 가져오는 중 오류가 발생했습니다."); - } - }; - - return ( - <> - - - - - - - {/* {message &&

{message}

} */} - - +import searchIcon from "../../assets/images/searchIcon.svg"; +import { useBoothData } from "../../hook/useBooth"; // boothpage.jsx와 동일한 방식으로 데이터 훅 사용 + +export const SearchBar = () => { + const [searchWord, setSearchWord] = useState(""); // 검색어 입력 상태 관리 + + const handleInput = (e) => { + setSearchWord(e.target.value); + }; + + // BoothPage.jsx에서 사용한 API 데이터 훅을 활용 + const { boothData } = useBoothData({ + day: undefined, // 날짜는 검색 기능에서 제외 + category: undefined, // 카테고리 필터는 제외 + location: undefined, // 위치 필터는 제외 + is_night: undefined, // 시간 필터는 제외 + is_reservable: undefined, + }); + + // 검색어를 통해 부스 데이터를 필터링 + const handleSearch = () => { + if (!searchWord) return; + + const filteredData = boothData?.filter( + (booth) => + booth.name.includes(searchWord) || booth.host.includes(searchWord) ); + + if (filteredData?.length > 0) { + console.log("검색 결과:", filteredData); + } else { + console.log("검색 결과가 없습니다."); + } + }; + + return ( + + + + + + + ); }; export default SearchBar; diff --git a/src/components/searchBar/SearchBarStyle.js b/src/components/searchBar/SearchBarStyle.js index 01c04d5..1f19076 100644 --- a/src/components/searchBar/SearchBarStyle.js +++ b/src/components/searchBar/SearchBarStyle.js @@ -1,32 +1,34 @@ import styled from "styled-components"; export const SearchContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 90%; - margin: 10px auto; - padding: 3px 10px; - border: 1px solid #DDDDDD; - border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + width: 90%; + margin: 10px auto; + padding: 3px 10px; + border: 1px solid #dddddd; + border-radius: 10px; + height: 35px; + color: #5f5f5f; `; export const SearchInput = styled.input` - width: 100%; - padding: 10px; - border: none; - outline: none; - font-size: 12px; - color: #5F5F5F; + width: 100%; + height: 100%; + padding: 10px; + border: none; + outline: none; + font-size: 12px; `; export const SearchButton = styled.button` - cursor: pointer; - padding-top: 3px; - padding-right: 5px; + cursor: pointer; + padding-top: 3px; + padding-right: 5px; `; export const SearchIcon = styled.img` - width: 12px; - height: 12px; + width: 14px; + height: 14px; `; diff --git a/src/pages/about/AboutPage.jsx b/src/pages/about/AboutPage.jsx index 53f5394..34d310a 100644 --- a/src/pages/about/AboutPage.jsx +++ b/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 ( < TopBar /> - +