forked from LikeLion-at-DGU/2024_fall_festival_front
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of https://github.com/LikeLion-at-DGU/2024_fal…
…l_festival_front into feature/LikeLion-at-DGU#27
- Loading branch information
Showing
23 changed files
with
445 additions
and
230 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import * as S from "./Styled"; | ||
| import X from "../../assets/images/X.svg"; | ||
|
|
||
| export const Modal = ({ onClose }) => { | ||
| const handleReviewClick = () => { | ||
| window.location.href = "https://naver.me/5mIX3maX"; | ||
| }; | ||
| return ( | ||
| <S.ModalWrapper> | ||
| <S.ModalContent> | ||
| <S.CloseButton onClick={onClose}> | ||
| <img src={X} alt="닫기" /> | ||
| </S.CloseButton> | ||
| <S.ModalHeader> | ||
| 2024 동국대학교 가을축제 부스 서비스 | ||
| <span className="B"> 부스끼리</span> | ||
| </S.ModalHeader> | ||
| <S.ModalLine /> {/* 선 추가 */} | ||
| <S.ModalText> | ||
| 서비스 이용은 어떠셨나요? | ||
| <br /> | ||
| <span className="Bold"> | ||
| 사이트 경험에 대한 후기를 남겨주세요! | ||
| </span> | ||
| </S.ModalText> | ||
| <S.ButtonWrapper> | ||
| <S.ReviewButton onClick={handleReviewClick}> | ||
| 후기 남기러 가기 | ||
| </S.ReviewButton> | ||
| <S.LaterButton onClick={onClose}> | ||
| 나중에 진행하기 | ||
| </S.LaterButton> | ||
| </S.ButtonWrapper> | ||
| </S.ModalContent> | ||
| </S.ModalWrapper> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import styled from "styled-components"; | ||
| export const ModalWrapper = styled.div` | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| z-index: 999; | ||
| `; | ||
|
|
||
| export const ModalContent = styled.div` | ||
| background-color: white; | ||
| border-radius: 10px; | ||
| padding: 20px; | ||
| width: 80%; | ||
| max-width: 400px; /* 모달 최대 너비 */ | ||
| height: 200px; | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
| text-align: center; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| `; | ||
|
|
||
| export const ModalHeader = styled.h2` | ||
| color: var(--, #5f5f5f); | ||
| text-align: center; | ||
| font-size: 13px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: 15px; /* 150% */ | ||
| .B { | ||
| color: var(--, #5f5f5f); | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: 15px; | ||
| } | ||
| `; | ||
|
|
||
| export const ModalLine = styled.hr` | ||
| width: 100%; | ||
| border: none; | ||
| border-top: 1px solid #ccc; | ||
| margin: 20px 0; | ||
| `; | ||
|
|
||
| export const ModalText = styled.p` | ||
| font-size: 14px; | ||
| margin: 0; | ||
| line-height: 1.5; | ||
| font-weight: 400; | ||
| color: var(--, #000); | ||
| .Bold { | ||
| font-weight: 700; | ||
| } | ||
| `; | ||
|
|
||
| export const ButtonWrapper = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-top: 25px; | ||
| gap: 10px; | ||
| `; | ||
|
|
||
| export const ReviewButton = styled.button` | ||
| display: flex; | ||
| width: 45%; | ||
| height: 26px; | ||
| padding: 4px 10px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| flex-shrink: 0; | ||
| border-radius: 10px; | ||
| background: #ff9957; | ||
| color: #fff; | ||
| font-size: 12px; | ||
| `; | ||
|
|
||
| export const LaterButton = styled.button` | ||
| display: flex; | ||
| width: 45%; | ||
| height: 26px; | ||
| padding: 4px 10px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| flex-shrink: 0; | ||
| border-radius: 10px; | ||
| background: #efefef; | ||
| color: var(--, #5f5f5f); | ||
| font-size: 12px; | ||
| `; | ||
|
|
||
| export const CloseButton = styled.button` | ||
| position: absolute; | ||
| top: 10px; | ||
| right: 10px; | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| img { | ||
| width: 15px; | ||
| height: 15px; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| 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 ( | ||
| <> | ||
| <S.SearchContainer> | ||
| <S.SearchInput | ||
| type="text" | ||
| placeholder="전체 부스명 or 운영주체 검색" | ||
| value={searchWord} | ||
| onChange={handleInput} | ||
| /> | ||
| <S.SearchButton onClick={handleSearch}> | ||
| <S.SearchIcon src={searchIcon} alt="검색 이미지" /> | ||
| </S.SearchButton> | ||
| </S.SearchContainer> | ||
| {/* {message && <p>{message}</p>} */} | ||
| </> | ||
|
|
||
| ); | ||
| }; | ||
|
|
||
| export default SearchBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| 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; | ||
| `; | ||
|
|
||
| export const SearchInput = styled.input` | ||
| width: 100%; | ||
| padding: 10px; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 12px; | ||
| color: #5F5F5F; | ||
| `; | ||
|
|
||
| export const SearchButton = styled.button` | ||
| cursor: pointer; | ||
| padding-top: 3px; | ||
| padding-right: 5px; | ||
| `; | ||
|
|
||
| export const SearchIcon = styled.img` | ||
| width: 12px; | ||
| height: 12px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.