Merge pull request #138 from Chaem03/feature/#27

[Fix]#27 - 카카오맵 relayout 설정 및 동대 인스타 링크 변경
LikeLion-at-DGU · Oct 6, 2024 · 407fea2 · 407fea2
2 parents 2dc597d + e5b90cc
commit 407fea2
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 74 deletions.
diff --git a/src/components/about/Footer.jsx b/src/components/about/Footer.jsx
@@ -1,55 +1,55 @@
-import { useNavigate } from 'react-router-dom';
-import { Review } from "@components/about/Review/Review"
+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 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(
-        <F.Footer>
-            <Review />
-            <p id='copy'>Copyright ⓒ 2024. 동국대학교 멋쟁이사자처럼 All rights reserved.</p>
-
-            <F.ButtonBar>
-
-                <button onClick={goToGithub}>
-                <img src={github} />
-                <span>Github</span>
-                </button>
-
-                <button onClick={goToAboutPage}>
-                <img src={Develop} />
-                <span> Developers</span>
-                </button>
-
-                <button onClick={goToInstagram}>
-                <img src={insta} />
-                <span>  Instagram</span>
-                </button>
-            </F.ButtonBar>
-
-        </F.Footer>
-    )
-
-}
-
-export default 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_dongguk/", "_blank"); // 새로운 탭에서 Instagram 열기
+  };
+
+  return (
+    <F.Footer>
+      <Review />
+      <p id="copy">
+        Copyright ⓒ 2024. 동국대학교 멋쟁이사자처럼 All rights reserved.
+      </p>
+
+      <F.ButtonBar>
+        <button onClick={goToGithub}>
+          <img src={github} />
+          <span>Github</span>
+        </button>
+
+        <button onClick={goToAboutPage}>
+          <img src={Develop} />
+          <span> Developers</span>
+        </button>
+
+        <button onClick={goToInstagram}>
+          <img src={insta} />
+          <span> Instagram</span>
+        </button>
+      </F.ButtonBar>
+    </F.Footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/common/BoothDetail/BoothDetail.jsx b/src/components/common/BoothDetail/BoothDetail.jsx
@@ -82,6 +82,8 @@ export const BoothDetail = ({ onClose, booth_id, boothInfo }) => {
           <S.Details>
             {Detailtitle.map((title, index) => {
               if (index === 5 && !boothDetailData.insta_id) return null;
+              if (index === 3 && !boothDetailData.entrace_fee === 0)
+                return null;
               return (
                 <div className="InfoWrapper" key={index}>
                   <div className="InfoContainer">
@@ -94,7 +96,7 @@ export const BoothDetail = ({ onClose, booth_id, boothInfo }) => {
                             if (index === 5 && boothDetailData.insta_id) {
                               // 인스타그램 ID인 경우
                               window.open(
-                                `https://instagram.com/${boothDetailData.insta_id}`,
+                                `${boothDetailData.insta_link}`,
                                 "_blank"
                               ); // 새 탭에서 열기
                             }
@@ -113,7 +115,9 @@ export const BoothDetail = ({ onClose, booth_id, boothInfo }) => {
                               0,
                               5
                             )} ~ ${boothDetailData.end_time.slice(0, 5)}`}
-                          {index === 3 && boothDetailData.entrace_fee}
+                          {index === 3 && boothDetailData.entrace_fee > 0
+                            ? boothDetailData.entrace_fee
+                            : null}
                           {index === 4 && boothDetailData.menus}
                           {index === 5 && boothDetailData.insta_id}
                         </S.DetailContext>

diff --git a/src/components/topBar/TopBar.jsx b/src/components/topBar/TopBar.jsx
@@ -23,10 +23,10 @@ export const TopBar = ({ openModal }) => {
 
         randomLeaves.push({
           src: leaf,
-          size: size,
-          left: `${left}%`,
-          duration: `${duration}s`,
-          delay: `${delay}s`,
+          $size: size,
+          $left: `${left}%`,
+          $duration: `${duration}s`,
+          $delay: `${delay}s`,
           key: `${index}-${i}`,
         });
       }

diff --git a/src/components/topBar/styled.js b/src/components/topBar/styled.js
@@ -53,24 +53,24 @@ export const Background = styled.div`
   align-items: center;
   position: relative;
   overflow: hidden;
-  background: linear-gradient(180deg, #FFEFE3 0%, #FFF 100%);
+  background: linear-gradient(180deg, #ffefe3 0%, #fff 100%);
 `;
 
 export const MainText = styled.div`
-  color: #FFBA85;
+  color: #ffba85;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
 `;
-
 export const Leaves = styled.img`
   position: absolute;
   top: -50px;
-  left: ${(props) => props.left};
-  width: ${(props) => props.size}px;
+  left: ${(props) => props.$left}; // transient prop로 변경
+  width: ${(props) => props.$size}px; // props 사용 시에도 transient로 변경
   height: auto;
   opacity: 1;
 
-  animation: ${fallAnimation} ${(props) => props.duration} ease-in-out ${(props) => props.delay} infinite;
+  animation: ${fallAnimation} ${(props) => props.$duration} ease-in-out
+    ${(props) => props.$delay} infinite;
 `;
diff --git a/src/pages/booth/BoothPage.jsx b/src/pages/booth/BoothPage.jsx
@@ -352,6 +352,15 @@ export const BoothPage = () => {
     }
   }, [isBoothListOpen, selectBooth, highlightedBooth]);
 
+  useEffect(() => {
+    if (mapRef.current) {
+      // 부스 리스트의 상태가 변경되었을 때
+      setTimeout(() => {
+        mapRef.current.relayout(); // 맵의 레이아웃을 다시 그립니다.
+      }, 0); // 맵 레이아웃 업데이트를 비동기적으로 수행
+    }
+  }, [isBoothListOpen]);
+
   useEffect(() => {
     let watchId;
     let userMarker = null;
@@ -410,7 +419,7 @@ export const BoothPage = () => {
   }, [mapRef.current, followUser]);
 
   useEffect(() => {
-    if (userLocation && mapRef.current) {
+    if (userLocation && mapRef.current && followUser) {
       mapRef.current.relayout();
       setTimeout(() => {
         const userPosition = new window.kakao.maps.LatLng(

diff --git a/src/pages/booth/Styled.js b/src/pages/booth/Styled.js
@@ -51,17 +51,16 @@ export const MainWrapper = styled.section`
   align-items: center;
   position: relative;
   background-color: white;
-  height: 100vh;
+  /* height: 100vh; */
 `;
 
 // 날짜 토글
 export const Header = styled.div`
   display: flex;
   position: absolute;
-  z-index: 10;
+  z-index: 3;
+  left: 8px;
   flex-direction: column;
-  align-items: center;
-  width: 100%;
 `;
 export const CurrentLocationButton = styled.div`
   display: flex;
@@ -73,11 +72,8 @@ export const CurrentLocationButton = styled.div`
 
 export const DateSelector = styled.div`
   display: flex;
-  align-items: center;
   justify-content: flex-start;
   padding: 0.5rem 1rem;
-
-  width: 100%;
 `;
 
 // DateButton 컴포넌트
@@ -138,8 +134,7 @@ display: flex;
 export const MapPlaceholder = styled.div`
   width: 100%;
   height: ${({ $isBoothListOpen }) =>
-
-    $isBoothListOpen ? "calc(100vh - 580px)" : "calc(100vh - 120px)"};
+    $isBoothListOpen ? "calc(100vh - 400px)" : "calc(100vh)"};
 
   background-color: #e0e0e0;
   display: flex;
@@ -238,7 +233,7 @@ export const Dropdown = styled.ul`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 62px;
+  width: 66px;
   transform: translateX(-0.5px);
   background-color: inherit;
   border: 0.95px solid ${({ theme }) => theme.colors.confirmButton};