Merge pull request #131 from LikeLion-at-DGU/develop

🚀 Deploy
LikeLion-at-DGU · Oct 6, 2024 · 8ca83fa · 8ca83fa
2 parents 793bffd + b55c19f
commit 8ca83fa
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 123 deletions.
diff --git a/src/components/common/BoothDetail/BoothDetail.jsx b/src/components/common/BoothDetail/BoothDetail.jsx
@@ -80,41 +80,51 @@ export const BoothDetail = ({ onClose, booth_id, boothInfo }) => {
         </S.imgWrapper>
         <S.DetailInfo>
           <S.Details>
-            {Detailtitle.map((title, index) => (
-              <div className="InfoWrapper" key={index}>
-                <div className="InfoContainer">
-                  <S.DetailTitle>{title}</S.DetailTitle>
-                  <S.DetailContextContainer>
-                    <S.DetailContext
-                      index={index}
-                      onClick={() => {
-                        if (index === 5) {
-                          // 인스타그램 ID인 경우
-                          window.open(
-                            `https://instagram.com/${boothDetailData.insta_id}`,
-                            "_blank"
-                          ); // 새 탭에서 열기
-                        }
-                      }}
-                      style={{ cursor: index === 5 ? "pointer" : "default" }}
-                    >
-                      {index === 0 && boothDetailData.detail_description}
-                      {index === 1 && boothDetailData.host}
-                      {index === 2 &&
-                        `${boothDetailData.start_time.slice(
-                          0,
-                          5
-                        )} ~ ${boothDetailData.end_time.slice(0, 5)}`}
-                      {index === 3 && boothDetailData.entrace_fee}
-                      {index === 4 && boothDetailData.menus}
-                      {index === 5 && boothDetailData.insta_id}
-                    </S.DetailContext>
-                  </S.DetailContextContainer>
+            {Detailtitle.map((title, index) => {
+              if (index === 5 && !boothDetailData.insta_id) return null;
+              return (
+                <div className="InfoWrapper" key={index}>
+                  <div className="InfoContainer">
+                    <S.DetailTitle>{title}</S.DetailTitle>
+                    <S.DetailContextContainer>
+                      {index !== 5 || boothDetailData.insta_id ? (
+                        <S.DetailContext
+                          index={index}
+                          onClick={() => {
+                            if (index === 5 && boothDetailData.insta_id) {
+                              // 인스타그램 ID인 경우
+                              window.open(
+                                `https://instagram.com/${boothDetailData.insta_id}`,
+                                "_blank"
+                              ); // 새 탭에서 열기
+                            }
+                          }}
+                          style={{
+                            cursor:
+                              index === 5 && boothDetailData.insta_id
+                                ? "pointer"
+                                : "default",
+                          }}
+                        >
+                          {index === 0 && boothDetailData.detail_description}
+                          {index === 1 && boothDetailData.host}
+                          {index === 2 &&
+                            `${boothDetailData.start_time.slice(
+                              0,
+                              5
+                            )} ~ ${boothDetailData.end_time.slice(0, 5)}`}
+                          {index === 3 && boothDetailData.entrace_fee}
+                          {index === 4 && boothDetailData.menus}
+                          {index === 5 && boothDetailData.insta_id}
+                        </S.DetailContext>
+                      ) : null}
+                    </S.DetailContextContainer>
+                  </div>
+                  {index === 2 && <S.Divider />}
+                  {index === 4 && <S.Divider />}
                 </div>
-                {index === 2 && <S.Divider />}
-                {index === 4 && <S.Divider />}
-              </div>
-            ))}
+              );
+            })}
           </S.Details>
         </S.DetailInfo>
       </S.DetailContent>

diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx
@@ -3,7 +3,7 @@ import * as S from "./SearchBarStyle";
 import searchIcon from "../../assets/images/searchIcon.svg";
 import { useBoothData } from "../../hook/useBooth"; // boothpage.jsx와 동일한 방식으로 데이터 훅 사용
 
-export const SearchBar = ({ setFilteredData }) => {
+export const SearchBar = ({ setFilteredData, setIsSearchExecuted }) => {
   const [searchWord, setSearchWord] = useState(""); // 검색어 입력 상태 관리
 
   const handleInput = (e) => {
@@ -19,9 +19,15 @@ export const SearchBar = ({ setFilteredData }) => {
   });
 
   const combinedBoothData = [...(boothData1 || []), ...(boothData2 || [])];
+
   // 검색어를 통해 부스 데이터를 필터링
   const handleSearch = () => {
-    if (!searchWord) return;
+    setIsSearchExecuted(true); // 검색이 실행되면 상태를 true로 변경
+
+    if (!searchWord.trim()) {
+      setFilteredData(combinedBoothData); // 모든 부스를 다시 설정
+      return;
+    }
 
     const filteredData = combinedBoothData?.filter(
       (booth) =>
@@ -33,9 +39,10 @@ export const SearchBar = ({ setFilteredData }) => {
       setFilteredData(filteredData);
     } else {
       console.log("검색 결과가 없습니다.");
-      setFilteredData([]);
+      setFilteredData([]); // 검색 결과가 없을 경우 빈 배열로 설정
     }
   };
+
   const handleKeyPress = (e) => {
     if (e.key === "Enter") {
       handleSearch();