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

[Feature]#27 - 부스 디테일 컴포넌트 구현

src/apis/booth.js

@@ -7,9 +7,20 @@ export const getBoothList = async ({
   is_reservable,
 }) => {
   try {
-    const res = await instance.get(
-      `api/v1/booth/?day=${day}&category=${category}&location=${location}&is_night=${is_night}&is_reservable=${is_reservable}`
-    );
+    // URLSearchParams 객체 생성
+    const params = new URLSearchParams();
+
+    // 파라미터가 존재할 때만 추가
+    if (day) params.append("day", day);
+    if (category) params.append("category", category);
+    if (location) params.append("location", location);
+    if (is_night !== undefined) params.append("is_night", is_night);
+    if (is_reservable !== undefined)
+      params.append("is_reservable", is_reservable);
+
+    // 파라미터들을 포함한 GET 요청
+    const res = await instance.get(`api/v1/booth/?${params.toString()}`);
+    console.log("booth.js에서의 res 값", res);
     return res;
   } catch (err) {
     console.log(err);

src/apis/boothDetail.js

@@ -1,5 +1,5 @@
 import { instance } from "./instance";
-export const getBoothDetail = async ({ booth_id }) => {
+export const getBoothDetail = async (booth_id) => {
   try {
     const res = await instance.get(`api/v1/booth/detail/${booth_id}`);
     return res;

src/components/common/BoothDetail/BoothDetail.jsx

@@ -0,0 +1,108 @@
+import * as S from "./styled";
+import { useState, useRef } from "react";
+import tablingImg from "../../../assets/images/tabling.svg";
+import CancelIcon from "../../../assets/images/X_Icon.svg";
+import { useNavigate } from "react-router-dom";
+import {
+  Detailtitle,
+  BoothDetailData,
+} from "../../../constant/StarDetail/data";
+import { useBoothDetailData } from "../../../hook/useBoothDetail";
+
+export const BoothDetail = ({ onClose, booth_id }) => {
+  const navigate = useNavigate();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const imgWrapperRef = useRef(null);
+  const { boothDetailData } = useBoothDetailData(booth_id);
+  console.log("boothDetail컴포넌트에서 :", boothDetailData);
+  if (!boothDetailData) {
+    return <div>Loading...</div>;
+  }
+  const totalImages = BoothDetailData[0].src.length;
+
+  const handleTouchStart = (e) => {
+    imgWrapperRef.current.startX = e.touches[0].clientX;
+  };
+
+  const handleTouchEnd = (e) => {
+    const endX = e.changedTouches[0].clientX;
+    const difference = imgWrapperRef.current.startX - endX;
+
+    if (difference > 50) {
+      handleNext();
+    } else if (difference < -50) {
+      handlePrev();
+    }
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === 0 ? totalImages - 1 : prevIndex - 1
+    );
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === totalImages - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const MoveonTabling = () => {
+    navigate("/");
+  };
+  //   const DetailData = useBoothDetailData();
+  return (
+    <S.DetailWrapper>
+      <S.DetailContent>
+        <S.NameContainer>
+          <div className="BoothName">{BoothDetailData[0].booth_name}</div>
+          {/* {BoothDetailData[0].id_night===true && } */}
+          <S.tagContainer>
+            <div className="tag">
+              {BoothDetailData[0].is_night ? "밤부스" : "낮부스"}
+            </div>
+            <div className="tag">{BoothDetailData[0].location}</div>
+            <div className="tag">{BoothDetailData[0].category}</div>
+          </S.tagContainer>
+          <S.CloseBtn src={CancelIcon} onClick={onClose} />
+        </S.NameContainer>
+        <S.imgWrapper
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+          ref={imgWrapperRef}
+        >
+          <S.BoothDetailImage
+            src={BoothDetailData[0].src[currentIndex]}
+            alt={BoothDetailData[0].booth_name}
+          />
+          <S.imgCount>
+            {currentIndex + 1}/{totalImages}
+          </S.imgCount>
+        </S.imgWrapper>
+        <S.DetailInfo>
+          <S.Details>
+            {Detailtitle.map((title, index) => (
+              <div className="InfoWrapper" key={index}>
+                <div className="InfoContainer">
+                  <S.DetailTitle>{title}</S.DetailTitle>
+                  <S.DetailContext index={index}>
+                    {index === 0 && BoothDetailData[0].description}
+                    {index === 1 && BoothDetailData[0].operation}
+                    {index === 2 && BoothDetailData[0].time}
+                    {index === 3 && BoothDetailData[0].fee}
+                    {index === 4 && BoothDetailData[0].menu}
+                    {index === 5 && BoothDetailData[0].insta}
+                  </S.DetailContext>
+                </div>
+                {index === 2 && <S.Divider />}
+                {index === 4 && <S.Divider />}
+              </div>
+            ))}
+          </S.Details>
+        </S.DetailInfo>
+      </S.DetailContent>
+
+      <S.tabling src={tablingImg} onClick={MoveonTabling}></S.tabling>
+    </S.DetailWrapper>
+  );
+};

src/components/common/BoothDetail/styled.js

@@ -0,0 +1,177 @@
+import styled, { keyframes } from "styled-components";
+const slideUp = keyframes`
+  0% {
+    transform: translateY(100%);
+
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+export const DetailWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  width: 370px;
+  height: 55%;
+  gap: 20px;
+  background-color: #fff;
+  border-radius: 20px 20px 0px 0px;
+  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.7);
+  z-index: 10;
+
+  animation: ${slideUp} 0.5s ease-out forwards;
+
+  @media (max-width: 375px) {
+    height: 80%;
+  }
+`;
+export const DetailContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  gap: 15px;
+  @media (max-width: 375px) {
+    margin-top: 1rem;
+  }
+`;
+
+export const NameContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 15px;
+  .BoothName {
+    color: #000;
+    text-align: center;
+    ${({ theme }) => theme.fonts.AppleSDGothicNeoB00};
+
+    font-size: 15px;
+  }
+`;
+
+export const tagContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  gap: 5px;
+
+  .tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 16px;
+    border-radius: 5px;
+    padding: 7px;
+    text-align: center;
+    font-family: ${({ theme }) =>
+      theme.fonts.AppleSDGothicNeoL00["font-family"]};
+    font-size: 10px;
+  }
+
+  .tag:nth-child(1) {
+    background-color: #d4eaff;
+    color: #00326d;
+  }
+  .tag:nth-child(2) {
+    background-color: #ffd5d5;
+    color: #f00;
+  }
+  .tag:nth-child(3) {
+    background-color: #ffd9a1;
+    color: #db4200;
+  }
+`;
+export const CloseBtn = styled.img`
+  cursor: pointer;
+  margin-left: auto;
+`;
+export const imgWrapper = styled.div`
+  display: flex;
+  position: relative;
+`;
+export const BoothDetailImage = styled.img`
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+`;
+export const imgCount = styled.div`
+  display: flex;
+  width: 27.463px;
+  height: 15.152px;
+  padding: 7px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 30px;
+  background-color: #fff;
+  z-index: 2;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+`;
+export const DetailInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  .InfoContainer {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+  .InfoWrapper {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+export const DetailTitle = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 20%;
+  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoB00["font-family"]};
+  font-size: 12px;
+`;
+export const DetailContext = styled.div`
+  display: flex;
+  background-color: ${(props) => (props.index === 5 ? "#ffe3e3" : "FFE1DA")};
+  color: ${(props) => (props.index === 5 ? "#ED6308" : "000")};
+
+  border-radius: ${(props) => (props.index === 5 ? "5px" : "0")};
+  padding: ${(props) => (props.index === 5 ? "0.2rem" : "0")};
+
+  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoR00["font-family"]};
+  font-size: 10px;
+`;
+export const Divider = styled.div`
+  display: flex;
+  width: 100%;
+  height: 1px;
+  margin-top: 6px;
+  background-color: #b6b6b6;
+`;
+export const tabling = styled.img`
+  display: flex;
+  width: 90%;
+  padding: 7px 59px 3px 68px;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 5.25px;
+  background: #e9ff99;
+  object-fit: cover;
+  margin-bottom: 10px;
+`;

src/components/performanceP/StarDetail/StarDetail.jsx → src/components/performanceP/StarDetail/StarDeatil.jsx

@@ -1,4 +1,4 @@
-import * as S from "./styled";
+import * as S from "../../common/BoothDetail/styled";
 import CancelIcon from "../../../assets/images/X_Icon.svg";
 import { StarDetailInfo, Detailtitle } from "../../../constant/StarDetail/data";
 export const StarDetail = ({ onClose }) => {