{amateurShowName}{quantity}매
-
+
@@ -117,7 +120,12 @@ const Upcoming = () => {
{ticketListMusicals.map((musical) => (
{musical.dday}
- 
+
+
+
+
+
+
- 로그아웃
+ {
+ localStorage.removeItem("userId");
+ localStorage.removeItem("accessToken"); // 토큰도 있다면 같이 삭제
+ navigate("/login"); // 로그인 페이지로 이동
+ }}
+ >
+ 로그아웃
+
navigate('/mypage/account-deletion')}>회원탈퇴
diff --git a/src/pages/mypage/my/LikedMusical.jsx b/src/pages/mypage/my/LikedMusical.jsx
index f51146f..38c850b 100644
--- a/src/pages/mypage/my/LikedMusical.jsx
+++ b/src/pages/mypage/my/LikedMusical.jsx
@@ -16,7 +16,7 @@ function LikedMusical() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- },);
+ },[token]);
console.log(data);
diff --git a/src/pages/mypage/my/MyPosts.jsx b/src/pages/mypage/my/MyPosts.jsx
index 97f8a0f..97a1d5c 100644
--- a/src/pages/mypage/my/MyPosts.jsx
+++ b/src/pages/mypage/my/MyPosts.jsx
@@ -27,7 +27,7 @@ function MyPosts() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- },);
+ },[token]);
console.log(data);
diff --git a/src/pages/mypage/my/ticket/CancelTicket.jsx b/src/pages/mypage/my/ticket/CancelTicket.jsx
index 8ad0442..867fab9 100644
--- a/src/pages/mypage/my/ticket/CancelTicket.jsx
+++ b/src/pages/mypage/my/ticket/CancelTicket.jsx
@@ -46,7 +46,7 @@ function CancelTicket() {
RESERVED: "예매 완료",
EXPIRED: "사용 완료",
CANCEL_AWAIT: "취소 대기중",
- CANCELED: "취소 완료",
+ CANCELED: "예매 취소",
}
@@ -69,7 +69,7 @@ function CancelTicket() {
// API 응답 확인
if (response.ok) {
- // 취소 완료 후 'complete' 페이지로 이동
+ // 예매 취소후 'complete' 페이지로 이동
setLastCanceledTicket({
amateurShowName: amateurShowName,
quantity: quantity,
diff --git a/src/pages/mypage/my/ticket/TicketDetailPage.jsx b/src/pages/mypage/my/ticket/TicketDetailPage.jsx
index 968917f..e876e22 100644
--- a/src/pages/mypage/my/ticket/TicketDetailPage.jsx
+++ b/src/pages/mypage/my/ticket/TicketDetailPage.jsx
@@ -59,7 +59,7 @@ function TicketDetailPage() {
RESERVED: "예매 완료",
EXPIRED: "사용 완료",
CANCEL_AWAIT: "취소 대기중",
- CANCELED: "취소 완료",
+ CANCELED: "예매 취소",
}
diff --git a/src/pages/mypage/my/ticket/TicketList.jsx b/src/pages/mypage/my/ticket/TicketList.jsx
index 6b23415..e0b8243 100644
--- a/src/pages/mypage/my/ticket/TicketList.jsx
+++ b/src/pages/mypage/my/ticket/TicketList.jsx
@@ -19,7 +19,7 @@ const TicketList = ({ status }) => {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- },);
+ }, [token]);
console.log(data);
return (
diff --git a/src/pages/mypage/support/ContactPost.jsx b/src/pages/mypage/support/ContactPost.jsx
index 5e778f5..f441e12 100644
--- a/src/pages/mypage/support/ContactPost.jsx
+++ b/src/pages/mypage/support/ContactPost.jsx
@@ -74,8 +74,8 @@ function ContactPost() {
const comment = {
id: 1,
nickname: '관리자',
- content: '안녕하세요, 고객님. [알라딘] 티켓 결제 관련하여 문의 주셔서 감사합니다. 현재 고객님의 결제 내역을 확인하고 있습니다. 결제가 정상적으로 완료되지 않았거나 오류가 발생했을 경우, 추가로 필요한 조치를 안내드리겠습니다. 결제 상태를 확인하는 데 약간의 시간이 소요될 수 있으니 양해 부탁드립니다. 만약 결제 확인 이메일이나 문자를 아직 받지 못하셨다면, 스팸메일함을 한 번 확인해 주시고, 결제 당시 사용하신 결제 수단의 상세 내역(거래일시, 승인번호 등)을 알려주시면 더욱 빠르게 처리할 수 있습니다. 추가적으로 궁금한 사항이 있으시다면 언제든 말씀해 주세요. 빠르게 확인 후 다시 연락드리겠습니다. 감사합니다.',
- createdAt: '2025-01-15',
+ content: '안녕하세요, 고객님. 문의 주셔서 감사합니다. \n\n현재 확인 중에 있으니 잠시만 기다려 주시길 바랍니다. \n빠른 시일 내에 답변 드릴 수 있도록 최선을 다하겠습니다. \n추가로 궁금하신 사항이 있으시면 언제든지 말씀해주세요. \n\n감사합니다.',
+ createdAt: d?.createdAt?.split('T')[0],
}
const listSize = '?' // comment?.result?.listSize;
@@ -102,15 +102,14 @@ function ContactPost() {
-
{/*댓글 작성부분 - 한 컴포넌트로 묶기 */}
- 답변 {listSize}개
+
-
+
diff --git a/src/pages/mypage/support/SupportContact.jsx b/src/pages/mypage/support/SupportContact.jsx
index f3bf9cb..0bd4f11 100644
--- a/src/pages/mypage/support/SupportContact.jsx
+++ b/src/pages/mypage/support/SupportContact.jsx
@@ -26,7 +26,7 @@ const SupportContact = () => {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
console.log('데이터', data);
const tableHeaders = ["제목", "날짜", "상태"];
diff --git a/src/pages/small-theater/SmallDetail.jsx b/src/pages/small-theater/SmallDetail.jsx
index 283a129..214ba4c 100644
--- a/src/pages/small-theater/SmallDetail.jsx
+++ b/src/pages/small-theater/SmallDetail.jsx
@@ -34,12 +34,12 @@ function SmallDetail() {
// API에서 받아온 데이터를 처리합니다.
const musical = data.result;
const name = musical.name;
- const content = musical.summaries.content || ''; // content가 없으면 빈 문자열로 처리
+ const content = musical.summaryContent || ''; // content가 없으면 빈 문자열로 처리
const [quote, ...descriptionParts] = content.split("\n");
const description = descriptionParts.join("\n").replace(/\n/g, "
"); - const imageUrls = musical.notice.imgUrls; - const poster = musical.posterImgUrl + const imageUrls = musical.noticeImages; + const poster = musical.posterImage; const details = [ { label: "장소", value: musical.place}, { label: "공연 기간", value: musical.schedule }, @@ -54,13 +54,27 @@ function SmallDetail() {
))}
}, // 가격 상세 구현 필요
- { label: "티켓 수", value: "200매 (표가 없을 시 구매 불가)" },
+ { label: "티켓 수", value: musical.totalTicket },
];
return (
<>
{/*빨간배너 */}
+ {poster ? (
+
{name}
{musical.hashtag
@@ -73,6 +87,7 @@ function SmallDetail() {
+
{/* 본문 */}
@@ -102,7 +117,7 @@ function SmallDetail() {
공연시간 정보
{musical.timeInfo}
공지사항
- {musical.notice.content}
+ {musical.noticeContent}
{imageUrls && imageUrls.length > 0 && (
@@ -126,15 +141,13 @@ function SmallDetail() {
export default SmallDetail;
/*빨간배너 */
const BannerContainer = styled.div`
- background: linear-gradient(
- var(--Muit-Red-main, #A00000),
- rgba(160, 0, 0, 0.5)
- ),
- url(${(props) => props.poster}) no-repeat center center / cover;
- width: 1250px;
- height:822px;
- padding: 101px 95px;
position: relative;
+ width: 1440px;
+ height: 1024px;
+ overflow: hidden;
+ &:hover img {
+ transform: scale(1.1);
+ }
`;
const Header = styled.div`
@@ -173,13 +186,22 @@ const Quote = styled.blockquote`
`;
const Description = styled.div`
- color: #FFF;
- width: 870px;
+ width: 740px;
+ height: 380px;
font-family: Pretendard;
font-size: 16px;
- font-style: normal;
- line-height: 30px; /* 156.25% */
-`
+ line-height: 24px;
+ overflow-y: auto;
+ position: relative;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+`;
+
const Tag = styled.li`
display: flex;
width: 120px;
@@ -358,3 +380,31 @@ const DetailImage = styled.div`
height: 888px;
flex-shrink: 0;
`;
+const BannerImage = styled.img`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ position: absolute;
+ top: 108;
+ left: 0;
+ transition: transform 1s ease-in-out;
+`;
+
+const Overlay = styled.div`
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(var(--Muit-Red-main, #A00000), rgba(160, 0, 0, 0.5));
+ z-index: 1;
+ pointer-events: none;
+`;
+const Content = styled.div`
+ position: relative;
+ z-index: 2;
+ padding: 101px 95px;
+ padding-top: 190px;
+ color: #FFF;
+`;
\ No newline at end of file
{musical.name}
@@ -276,6 +284,7 @@ const TicketList = styled.div`
`;
const MusicalItem = styled.div`
+ position: relative;
text-align: left;
font-family: Pretendard;
overflow: hidden;
@@ -325,11 +334,10 @@ const MusicalItem = styled.div`
`;
const DdayBadge = styled.div`
position: absolute;
- top: 100px; /* 기존보다 아래로 이동 */
- left: 70px; /* 기존보다 오른쪽으로 이동 */
-width: 54px;
+ top: 13px; /* 기존보다 아래로 이동 */
+ left: 11px; /* 기존보다 오른쪽으로 이동 */
+width: 35px;
height: 20px;
-flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
@@ -343,4 +351,19 @@ font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
-`;
\ No newline at end of file
+`;
+
+const CardLink = styled(Link)`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+
+`;
+
+const CardWrapper = styled.div`
+&:hover {
+ transform: scale(1.04);
+ transition: transform 0.2s ease;
+}
+`
\ No newline at end of file
diff --git a/src/pages/adminpage/components/TheatreInfo.jsx b/src/pages/adminpage/components/TheatreInfo.jsx
new file mode 100644
index 0000000..da0d005
--- /dev/null
+++ b/src/pages/adminpage/components/TheatreInfo.jsx
@@ -0,0 +1,84 @@
+import styled from "styled-components"
+import location from '../../../assets/icons/location.svg';
+import ChevronRight from '../../../assets/icons/ChevronRight.svg';
+import { useNavigate } from "react-router-dom";
+
+const TheatreInfo = (props) => {
+ const navigate = useNavigate();
+ return (
+
+
+ 
+
+
+ 
+ {props?.data?.musicalName}
+
+
+
+
+
+ )
+}
+
+const Container = styled.div`
+
+`
+const TheaterInfo = styled.div`
+ width: 400px;
+
+ h3{margin:0px;}
+ p{margin: 0px;}
+
+
+ .hr-line{
+ border : 0px;
+ border-top: 1px solid #E6E6E6;
+ margin-bottom: 24px;
+ }
+ .title-B{
+ font-size: 24px;
+ font-weight: 700;
+ }
+
+ .body-M-500{
+ font-size: 16px;
+ font-weight: 500;
+ color: #000000;
+ }
+
+`
+const Text = styled.div`
+ margin-top:25px;
+
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .body-M-400{
+ font-size: 16px;
+ font-weight: 500;
+ color: #919191;
+ }
+
+ .ShowTitle{
+ font-size: 16px;
+ font-weight: 700;
+ color: #000000;
+
+ display: flex;
+ align-items: center;
+ }
+`
+
+const MusicalLink = styled.div`
+ cursor: pointer;
+`
+
+export default TheatreInfo;
\ No newline at end of file
diff --git a/src/pages/adminpage/small-theater/reservation/AdminSmallReserve.jsx b/src/pages/adminpage/small-theater/reservation/AdminSmallReserve.jsx
index 0a5493c..8509d2a 100644
--- a/src/pages/adminpage/small-theater/reservation/AdminSmallReserve.jsx
+++ b/src/pages/adminpage/small-theater/reservation/AdminSmallReserve.jsx
@@ -58,7 +58,7 @@ export default function AdminSmallReserve() {
statusText = "취소 중";
break;
case "CANCELED":
- statusText = "취소 완료";
+ statusText = "예매 취소";
break;
default:
break;
diff --git a/src/pages/adminpage/small-theater/reservation/AdminSmallReserveDetail.jsx b/src/pages/adminpage/small-theater/reservation/AdminSmallReserveDetail.jsx
index 708f597..641fcc2 100644
--- a/src/pages/adminpage/small-theater/reservation/AdminSmallReserveDetail.jsx
+++ b/src/pages/adminpage/small-theater/reservation/AdminSmallReserveDetail.jsx
@@ -32,7 +32,7 @@ function mapStatusToKorean(reservationStatus) {
case "CANCEL_AWAIT":
return "취소 중";
case "CANCELED":
- return "취소 완료";
+ return "예매 취소";
default:
return reservationStatus || "";
}
@@ -47,7 +47,7 @@ function mapKoreanToStatus(koreanString) {
return "EXPIRED";
case "취소 중":
return "CANCEL_AWAIT";
- case "취소 완료":
+ case "예매 취소":
return "CANCELED";
default:
return "";
@@ -242,7 +242,7 @@ export default function AdminSmallReserveDetail() {
-
+
diff --git a/src/pages/adminpage/vision/AdminVisionDetail.jsx b/src/pages/adminpage/vision/AdminVisionDetail.jsx
index 04753d1..762da8a 100644
--- a/src/pages/adminpage/vision/AdminVisionDetail.jsx
+++ b/src/pages/adminpage/vision/AdminVisionDetail.jsx
@@ -1,8 +1,578 @@
+// 샤롯시어터
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import styled from 'styled-components';
+import axios from 'axios';
+import SearchBar_Mock from "../components/SearchBar_Mock";
+import {
+ A_Before,
+ B_Before,
+ C_Before,
+ D_Before,
+ E_Before,
+ F_Before,
+ G_Before,
+ H_Before,
+ I_Before,
+ J_Before,
+ K_Before,
+ L_Before,
+ M_Before,
+ N_Before,
+ O_Before,
+ A_After,
+ B_After,
+ C_After,
+ D_After,
+ E_After,
+ F_After,
+ G_After,
+ H_After,
+ I_After,
+ J_After,
+ K_After,
+ L_After,
+ M_After,
+ N_After,
+ O_After
+} from "../../../assets/theaterSeat/charlotte/charlotteSeat"
+import TheatreInfo from '../components/TheatreInfo';
+const COLOR_WHITE = "#FFFFFF";
+const COLOR_MUIT_RED = "#A00000";
+const COLOR_GRAY_MAINTEXT = "#000000";
+const COLOR_GRAY_UNSELECTED = "#C1C1C1";
+const COLOR_GRAY_SUB = "#919191";
+
+const baseURL = import.meta.env.VITE_APP_SERVER_URL;
+const token_admin = localStorage.getItem("adminToken");
export default function AdminVisionDetail() {
-}
\ No newline at end of file
+ const { placeId } = useParams();
+ const navigate = useNavigate();
+ const [theaterInfo, setTheaterInfo] = useState(null);
+ useEffect(() => {
+ if (placeId) {
+ fetchTheaterDetail(placeId);
+ }
+ }, [placeId]);
+ // 극장 정보 상세 조회 API
+ const fetchTheaterDetail = async (placeId) => {
+ try {
+ const res = await axios.get(`${baseURL}/admin/views/${placeId}`, {
+ headers: {
+ Authorization: `Bearer ${token_admin}`,
+ },
+ });
+ const data = res.data.result || {};
+ const refined = {
+ palceId: data.theatreId,
+ placeName: data.theatreName,
+ address: data.address,
+
+ musicalId: data.musicalId,
+ musicalName: data.musicalName,
+ theatrePic: data.theatrePic,
+ allSeatImg: data.allSeatImg,
+ };
+ setTheaterInfo(refined);
+ } catch (err) {
+ console.error("극장 정보 조회 실패:", err);
+ alert("해당 극장을 조회할 수 없습니다.");
+ navigate("/adminpage/vision");
+ }
+ };
+
+ const [activeFloor, setActiveFloor] = useState(1);
+ const [selectedArea, setSelectedArea] = useState(null);
+ const [selectedSeatData, setSelectedSeatData] = useState(null);
+ const [seatStates, setSeatStates] = useState({
+ A: "Before",
+ B: "Before",
+ C: "Before",
+ D: "Before",
+ E: "Before",
+ F: "Before",
+ G: "Before",
+ H: "Before",
+ I: "Before",
+ J: "Before",
+ K: "Before",
+ L: "Before",
+ M: "Before",
+ N: "Before",
+ O: "Before",
+ });
+const areaImages = {
+ A: { Before: A_Before, After: A_After },
+ B: { Before: B_Before, After: B_After },
+ C: { Before: C_Before, After: C_After },
+ D: { Before: D_Before, After: D_After },
+ E: { Before: E_Before, After: E_After },
+ F: { Before: F_Before, After: F_After },
+ G: { Before: G_Before, After: G_After },
+ H: { Before: H_Before, After: H_After },
+ I: { Before: I_Before, After: I_After },
+ J: { Before: J_Before, After: J_After },
+ K: { Before: K_Before, After: K_After },
+ L: { Before: L_Before, After: L_After },
+ M: { Before: M_Before, After: M_After },
+ N: { Before: N_Before, After: N_After },
+ O: { Before: O_Before, After: O_After },
+};
+const handleFloorToggle = (floor) => {
+ setActiveFloor(floor);
+ setSelectedArea(null);
+ setSelectedSeatData(null);
+ setSeatStates({
+ A: "Before",
+ B: "Before",
+ C: "Before",
+ D: "Before",
+ E: "Before",
+ F: "Before",
+ G: "Before",
+ H: "Before",
+ I: "Before",
+ J: "Before",
+ K: "Before",
+ L: "Before",
+ M: "Before",
+ N: "Before",
+ O: "Before",
+ });
+};
+
+const toggleAreaState = async (area) => {
+ setSeatStates((prevStates) => {
+ const newStates = {};
+ Object.keys(prevStates).forEach((key) => {
+ newStates[key] = key === area ? "After" : "Before";
+ });
+ return newStates;
+ });
+ setSelectedArea(area);
+
+ // 좌석 상세 조회 API
+ try {
+ const response = await axios.get(`${baseURL}/admin/views/${placeId}/section?sectionType=${area}`, {
+ headers: { Authorization: `Bearer ${token_admin}` }
+ });
+ const seatData = response.data?.result;
+ setSelectedSeatData(seatData);
+ } catch (error) {
+ console.error("섹션 정보 조회 실패:", error);
+ alert("해당 섹션을 조회할 수 없습니다.");
+ }
+};
+
+
+
+
+return (
+
+ 시야 관리
+
+
+
+
+
+
+ navigate(`/adminpage/vision`)}>
+ <
+
+ {theaterInfo?.placeName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeFloor === 1 &&
+ ["A", "B", "C", "D", "E", "F", "G", "H", "I"].map((area) => (
+
+ ))}
+
+ {activeFloor === 2 &&
+ ["J", "K", "L", "M", "N", "O"].map((area) => (
+
+ ))}
+
+
+
+ +
+ {selectedSeatData && (
+ {selectedSeatData?.floor}
{selectedSeatData?.seatRange}
+ )}
+
+ 
+
+ {selectedSeatData && (
+ <>
+ 특징
+ {selectedSeatData?.viewDetail}
+
+ )}
+
+
+
+
+
+);
+}
+
+
+/* ---------------- styled components ---------------- */
+
+
+const Container = styled.div`
+ position: relative;
+ width: 1150px;
+ height: 916px;
+ background-color: ${COLOR_WHITE};
+ padding-left: 71px;
+ padding-right: 80px;
+ box-sizing: border-box;
+
+ display: flex;
+ flex-direction: column;
+`;
+
+const Tilte = styled.div`
+ margin-top: 4px;
+ font-family: "Pretendard";
+ font-size: 24px;
+ font-weight: 500;
+ color: ${COLOR_MUIT_RED};
+`;
+
+const SearchSection = styled.div`
+ margin-top: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+const Subtitle = styled.div`
+ margin-top: 30px;
+ font-family: "Pretendard";
+ font-size: 24px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_MAINTEXT};
+`;
+
+const BackButton = styled.button`
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ font-family: "Pretendard";
+ font-size: 24px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_MAINTEXT};
+`;
+
+const Button = styled.div`
+ margin-top: -16px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+`;
+
+const EditButton = styled(Link)`
+ text-decoration: none;
+ text-align: center;
+ font-family: "Pretendard";
+ font-size: 14px;
+ font-weight: 500;
+ color: ${COLOR_MUIT_RED};
+ cursor: pointer;
+ box-sizing: border-box;
+ border: 1px solid ${COLOR_MUIT_RED};
+ border-radius: 3px;
+ background-color: ${COLOR_WHITE};
+ padding: 5px 14px 5px 14px;
+
+ &:hover {
+ background-color: ${COLOR_MUIT_RED};
+ color: ${COLOR_WHITE};
+ }
+ `;
+
+const DetailArea = styled.div`
+ display: flex;
+ gap: 40px;
+ margin-left: -25px;
+ //align-items: flex-start;
+`;
+
+const SeatArea = styled.div`
+ width: 580px;
+ margin-top: 50px;
+
+ .Stage{
+ justify-self: center;
+ margin-left: 12px;
+
+ width: 264px;
+ height: 20px;
+ border-radius: 3.946px;
+ border: 0.789px solid ${COLOR_GRAY_SUB};
+
+ text-align: center;
+ color: #8F8E94;
+ font-family: Pretendard;
+ font-size: 12.628px;
+ font-style: normal;
+ font-weight: 500;
+ }
+ .FloorTag{
+ width: 26px;
+ height: 17px;
+ border-radius: 1.579px;
+ background: ${COLOR_MUIT_RED};
+
+ text-align: center;
+ color: #FFF;
+ font-family: Pretendard;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ }
+ .left-seat-img{
+ justify-self: end;
+ }
+ .center-seat-img{
+ justify-self: center;
+ }
+ .right-seat-img{
+ justify-self: start;
+ }
+`;
+
+const Floor = styled.div`
+ transform: scale(0.78);
+ transform-origin: top left;
+ padding-left: 12px;
+
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 4px;
+
+ img {
+ width: auto;
+ height: auto;
+ object-fit: contain;
+ }
+`;
+
+const SeatInfo = styled.div`
+ width: 400px;
+
+ h3{margin:0px;}
+ p{margin: 0px;}
+
+ .NowShowing{
+ margin-top:25px;
+ display: flex;
+ align-items: center;
+ }
+ .ShowTitle{
+ font-size: 16px;
+ font-weight: 700;
+ color: ${COLOR_GRAY_MAINTEXT};
+ }
+ .hr-line{
+ border : 0px;
+ border-top: 1px solid #E6E6E6;
+ margin-bottom: 24px;
+ }
+ .title-B{
+ font-size: 24px;
+ font-weight: 700;
+ }
+ .body-M-400{
+ font-size: 16px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_SUB};
+ }
+ .body-M-500{
+ font-size: 16px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_MAINTEXT};
+ }
+`;
+
+const AreaBtn = styled.div`
+ display: flex;
+ gap: 8px;
+ margin: 20px 0;
+
+ .FloorBtn {
+ font-size: 14px;
+ color: ${COLOR_GRAY_SUB};
+ text-align: center;
+ font-family: "Pretendard Variable";
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ background: none;
+ border: none;
+
+ cursor: pointer;
+
+ &.active {
+ color: ${COLOR_MUIT_RED};
+ border-bottom: solid 2px;
+ border-radius: 1px;
+ border-color: ${COLOR_MUIT_RED};
+ }
+ }
+`;
+
+const AreaSelector = styled.div`
+ width: 100%;
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ margin: 16px 0;
+
+ .AreaBtn {
+ width: 55px;
+ height: 32px;
+ padding: 3px 15px;
+ border-radius: 3px;
+ background: #fff;
+ border: 1px solid #E6E6E6;
+
+ cursor: pointer;
+
+ color: ${COLOR_GRAY_SUB};
+ text-align: center;
+ /* Body-tiny-md */
+ font-family: "Pretendard Variable";
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+
+ &.active {
+ background: #FFF;
+ color: ${COLOR_MUIT_RED};
+ border-color: ${COLOR_MUIT_RED};
+ }
+ }
+`;
+
+const AreaInfo = styled.div`
+ font-family: "Pretendard";
+ font-size: 16px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_MAINTEXT};
+`;
+
+const SeatView = styled.div`
+ width: 100%;
+ display: flex
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+`;
+
+const ViewImg = styled.div`
+ width: 388px;
+ height: 280px;
+ margin-top: 10px;
+`;
+
+const ViewChar = styled.div`
+ font-family: "Pretendard";
+ font-size: 16px;
+ font-weight: 700;
+ color: ${COLOR_GRAY_MAINTEXT};
+`;
+
+const ViewText = styled.div`
+ margin-top: 8px;
+ font-family: "Pretendard";
+ font-size: 14px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_SUB};
+`;
\ No newline at end of file
diff --git a/src/pages/adminpage/vision/AdminVisionUpdate.jsx b/src/pages/adminpage/vision/AdminVisionUpdate.jsx
new file mode 100644
index 0000000..b166a76
--- /dev/null
+++ b/src/pages/adminpage/vision/AdminVisionUpdate.jsx
@@ -0,0 +1,332 @@
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import axios from 'axios';
+
+import PlusButton from "../../../assets/icons/AddButton.svg";
+
+const COLOR_WHITE = "#FFFFFF";
+const COLOR_MUIT_RED = "#A00000";
+const COLOR_GRAY_MAINTEXT = "#000000";
+const COLOR_GRAY_SUB = "#919191";
+
+const baseURL = import.meta.env.VITE_APP_SERVER_URL;
+const token_admin = localStorage.getItem("adminToken");
+
+export default function AdminVisionUpdate() {
+
+ const { placeId } = useParams();
+ const [sectionData, setSectionData] = useState([]);
+ const [theaterName, setTheaterName] = useState("");
+ useEffect(() => {
+ if (placeId) {
+ fetchSections(placeId);
+ }
+ }, [placeId]);
+ const fetchSections = async (placeId) => {
+ try {
+ const response = await axios.get(`${baseURL}/admin/views/${placeId}/edit`, {
+ headers: { Authorization: `Bearer ${token_admin}` },
+ }
+ );
+ const sections = response.data.result.theatreSections || [];
+ const name = response.data.result.theatreName;
+ setSectionData(sections);
+ setTheaterName(name);
+ } catch (err) {
+ console.error("섹션 정보 조회 실패:", err);
+ alert("섹션 정보를 불러오는 중 오류가 발생했습니다.");
+ }
+ };
+ console.log(theaterName + 1);
+
+ return (
+
+ 시야 관리
+
+
+ 시야 등록
+ 등록하기
+
+
+
+
+ 장소
+ {theaterName}
+
+
+
+
+
+ 공연장 전체 사진
+ 검색 페이지 검색 결과로 사용됩니다.
+
+ 수정
+
+
+
+
+
+
+
+ 칸
+ 층
+ 좌석
+ 특징
+ 사진
+
+
+
+ {sectionData.map((section, idx) => (
+
+ {section.sectionType}
+ {section.floor}
+ {section.seatRange}
+ {section.viewDetail}
+
+ {section.isViewPic ? (
+ 수정
+ ) : (
+ 미등록
+ )}
+
+
+ ))}
+ {/* 마지막 행 */}
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ );
+}
+
+
+/* ---------------- styled components ---------------- */
+
+
+const Container = styled.div`
+ position: relative;
+ width: 1150px;
+ height: 916px;
+ background-color: ${COLOR_WHITE};
+ padding-left: 71px;
+ padding-right: 131px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+`;
+
+const Tilte = styled.div`
+ font-family: "Pretendard";
+ font-size: 24px;
+ font-weight: 500;
+ color: ${COLOR_MUIT_RED};
+ margin-top: 4px;
+`;
+
+const SubTitleLine = styled.div`
+ margin-top: 64px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+
+ hr {
+ position: absolute;
+ top: 48px;
+ left: 2px;
+ border: none;
+ border-top: 1px solid #E6E6E6;
+ width: 99%;
+ }
+`;
+
+const SubTitle = styled.div`
+ font-family: "Pretendard";
+ font-size: 24px;
+ font-weight: 700;
+ color: ${COLOR_GRAY_MAINTEXT};
+`;
+
+const ApplyButton = styled.button`
+ width: 72px;
+ height: 28px;
+ font-family: "Pretendard";
+ font-size: 14px;
+ font-weight: 500;
+ color: ${COLOR_WHITE};
+ border: 1px solid ${COLOR_MUIT_RED};
+ border-radius: 2px;
+ background-color: ${COLOR_MUIT_RED};
+ cursor: pointer;
+`;
+
+const Place = styled.div`
+ margin-top: 50px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+
+ hr {
+ position: absolute;
+ top: 24px;
+ left: 100px;
+ border: none;
+ border-top: 1px solid #E6E6E6;
+ width: 607px;
+ }
+`;
+
+const PlaceTitle = styled.div`
+ width: 80px;
+ font-family: "Pretendard";
+ font-size: 16px;
+ font-weight: 700;
+ color: ${COLOR_GRAY_MAINTEXT};
+
+`;
+
+const PlaceText = styled.div`
+ font-family: "Pretendard";
+ font-size: 16px;
+ font-weight: 500;
+ color: ${COLOR_GRAY_MAINTEXT};
+`;
+
+////// Table ///////
+
+const TableContainer = styled.div`
+ width: 100%;
+ margin-top: 20px;
+ font-family: "Pretendard";
+`;
+
+const TabHeader = styled.div`
+ margin-top: 28px;
+ display: flex;
+ font-size: 16px;
+ font-weight: 500;
+ height: 45px;
+`;
+
+const HeaderCol1 = styled.div`
+ color: #8F8E94;
+ box-sizing: border-box;
+ border-top: 1px solid #8F8E94;
+ border-bottom: 1px solid #8F8E94;
+ padding-top: 11px;
+ padding-left: 16px;
+ width: 140px;
+`;
+
+const HeaderCol2 = styled.div`
+ color: #424242;
+ box-sizing: border-box;
+ border: 1px solid #8F8E94;
+ padding-top: 11px;
+ padding-left: 20px;
+ width: 744px;
+`;
+
+const HeaderCol3 = styled.div`
+ box-sizing: border-box;
+ border-top: 1px solid #8F8E94;
+ border-bottom: 1px solid #8F8E94;
+ padding-top: 11px;
+ padding-left: 20px;
+ width: 69px;
+`;
+
+const UpdateButton = styled.button`
+ background-color: #D9D9D9;
+ border: 1px solid #D9D9D9;
+ cursor: pointer;
+ width: 40px;
+ height: 20px;
+ font-size: 10px;
+ font-weight: 500;
+ color: #555555;
+
+ &:hover {
+ border-color: #A00000;
+ color: #A00000;
+}
+`;
+
+const ScrollWrapper = styled.div`
+ margin-top: 24px;
+ max-height: 400px;
+ overflow-y: auto; // 스크롤
+ width: 958px;
+ padding-right: 10px;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: ${COLOR_WHITE};
+ border-radius: 6px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #d9d9d9;
+ border-radius: 6px;
+ }
+ &::-webkit-scrollbar-thumb:hover {
+ background-color: #a0a0a0;
+ }
+`;
+
+const StyledTable = styled.table`
+ width: 100%;
+ border-collapse: collapse;
+
+ thead tr {
+ background-color: ${COLOR_WHITE};
+ border-left: 1px solid #FFFFFF;
+ border-right: 1px solid #FFFFFF;
+ }
+ th,
+ td {
+ border: 1px solid #8F8E94;
+ padding: 8px;
+ text-align: center;
+ font-size: 16px;
+ color: #424242;
+ }
+`;
+
+const UploadButton = styled.button`
+ background-color: ${COLOR_MUIT_RED};
+ border: 1px solid ${COLOR_MUIT_RED};
+ cursor: pointer;
+ width: 40px;
+ height: 20px;
+ font-size: 10px;
+ font-weight: 500;
+ color: ${COLOR_WHITE};
+
+ &:hover {
+ border-color: ${COLOR_WHITE};
+ color: ${COLOR_MUIT_RED};
+}
+`;
+
+const AddButton = styled.button`
+ border: none;
+ background-color: transparent;
+ cursor: pointer;
+`;
\ No newline at end of file
diff --git a/src/pages/board/post/AnonymousPost.jsx b/src/pages/board/post/AnonymousPost.jsx
index 366cdd2..45e0bdb 100644
--- a/src/pages/board/post/AnonymousPost.jsx
+++ b/src/pages/board/post/AnonymousPost.jsx
@@ -31,17 +31,21 @@ function AnonymousPost() {
// 게시글 데이터
// const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
const token = localStorage.getItem("accessToken");
- console.log(token);
+ // console.log(token);
const url = `/posts/${postId}`;
+
const { data, error, loading } = useFetch(url, {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
console.log('데이터', data);
+
const [isButtonLiked, setIsButtonLiked] = useState(data?.result?.isLiked);
const [likeCount, setLikeCount] = useState(data?.result?.likeCount);
+ const [isWrited, setIsWrited] = useState(false);
+ const [isDeleted, setIsDeleted] = useState(false);
useEffect(() => {
if (data?.result?.isLiked !== undefined) {
@@ -58,7 +62,16 @@ function AnonymousPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
+
+ useEffect(() => {
+ if (isWrited||isDeleted) {
+ setTimeout(() => {
+ window.location.reload();
+ }, 50);
+ }
+ }, [isWrited, isDeleted]);
+
console.log("코멘트 데이터:", comment);
console.log("에러:", commentError);
console.log("로딩:", commentLoading);
@@ -156,10 +169,10 @@ function AnonymousPost() {
-
+
{comment?.result?.comments?.map((data) => (
-
))}
diff --git a/src/pages/board/post/FoundPost.jsx b/src/pages/board/post/FoundPost.jsx
index 9c56bce..72bc811 100644
--- a/src/pages/board/post/FoundPost.jsx
+++ b/src/pages/board/post/FoundPost.jsx
@@ -8,7 +8,8 @@ import Info from "../../../components/detail/Info";
import { useNavigate, useParams } from "react-router-dom";
import useFetch from "../../../hooks/useFetch";
import PostMenu from "../../../components/post/PostMenu";
-
+import { useState } from "react";
+import { useEffect } from "react";
// const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
const token = localStorage.getItem("accessToken");
console.log(token);
@@ -25,8 +26,11 @@ function FoundPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
console.log('데이터', data);
+
+ const [isWrited, setIsWrited] = useState(false);
+ const [isDeleted, setIsDeleted] = useState(false);
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
const { data: comment, error: commentError, loading: commentLoading } = useFetch(
@@ -35,7 +39,15 @@ function FoundPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
+
+ useEffect(() => {
+ if (isWrited||isDeleted) {
+ setTimeout(() => {
+ window.location.reload();
+ }, 50);
+ }
+ }, [isWrited, isDeleted]);
console.log("코멘트 데이터:", comment);
console.log("에러:", commentError);
console.log("로딩:", commentLoading);
@@ -96,10 +108,10 @@ function FoundPost() {
{/*댓글 작성부분 - 한 컴포넌트로 묶기 */}
댓글 {commentCount}개
-
+
{comment?.result?.comments?.map((data) => (
-
))}
diff --git a/src/pages/board/post/ItemPost.jsx b/src/pages/board/post/ItemPost.jsx
index cbdf41f..5e98e11 100644
--- a/src/pages/board/post/ItemPost.jsx
+++ b/src/pages/board/post/ItemPost.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
import styled from "styled-components";
import itemImg from "../../../assets/images/lost-item-1.png";
import CommentInputArea from "../../../components/post/CommentInputArea";
@@ -10,7 +10,6 @@ import useFetch from "../../../hooks/useFetch";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { BsThreeDotsVertical } from "react-icons/bs";
-
// const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
const token = localStorage.getItem("accessToken");
console.log(token);
@@ -36,9 +35,12 @@ function ItemPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
console.log('데이터', data);
+ const [isWrited, setIsWrited] = useState(false);
+ const [isDeleted, setIsDeleted] = useState(false);
+
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
const { data: comment, error: commentError, loading: commentLoading } = useFetch(
`/comments/${postId}?page=0&size=20`,
@@ -46,7 +48,17 @@ function ItemPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
+
+
+ useEffect(() => {
+ if (isWrited||isDeleted) {
+ setTimeout(() => {
+ window.location.reload();
+ }, 50);
+ }
+ }, [isWrited, isDeleted]);
+
console.log("코멘트 데이터:", comment);
console.log("에러:", commentError);
console.log("로딩:", commentLoading);
@@ -108,10 +120,10 @@ function ItemPost() {
{/*댓글 작성부분 - 한 컴포넌트로 묶기 */}
댓글 {commentCount}개
-
+
{comment?.result?.comments?.map((data) => (
-
))}
diff --git a/src/pages/board/post/ReviewPost.jsx b/src/pages/board/post/ReviewPost.jsx
index bfc3aa6..72738ef 100644
--- a/src/pages/board/post/ReviewPost.jsx
+++ b/src/pages/board/post/ReviewPost.jsx
@@ -9,6 +9,7 @@ import { RatingStars } from "../../../components/detail/RatingStars";
import { useNavigate, useParams } from "react-router-dom";
import useFetch from "../../../hooks/useFetch";
import PostMenu from "../../../components/post/PostMenu";
+import { useState, useEffect } from "react";
// const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
const token = localStorage.getItem("accessToken");
console.log(token);
@@ -22,9 +23,12 @@ function ReviewPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
console.log('데이터', data);
+ const [isWrited, setIsWrited] = useState(false);
+ const [isDeleted, setIsDeleted] = useState(false);
+
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
const { data: comment, error: commentError, loading: commentLoading } = useFetch(
`/comments/${postId}?page=0&size=20`,
@@ -32,7 +36,16 @@ function ReviewPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
+
+ useEffect(() => {
+ if (isWrited||isDeleted) {
+ setTimeout(() => {
+ window.location.reload();
+ }, 50);
+ }
+ }, [isWrited, isDeleted]);
+
console.log("코멘트 데이터:", comment);
console.log("에러:", commentError);
console.log("로딩:", commentLoading);
@@ -97,10 +110,10 @@ function ReviewPost() {
{/*댓글 작성부분 - 한 컴포넌트로 묶기 */}
댓글 {commentCount}개
-
+
{comment?.result?.comments?.map((data) => (
-
))}
diff --git a/src/pages/board/post/SeatsPost.jsx b/src/pages/board/post/SeatsPost.jsx
index 47e2913..061566c 100644
--- a/src/pages/board/post/SeatsPost.jsx
+++ b/src/pages/board/post/SeatsPost.jsx
@@ -10,6 +10,7 @@ import { useParams } from "react-router-dom";
import useFetch from "../../../hooks/useFetch";
import PostMenu from "../../../components/post/PostMenu";
// const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
+import { useState, useEffect } from "react";
const token = localStorage.getItem("accessToken");
console.log(token);
function ReviewPost() {
@@ -21,8 +22,11 @@ function ReviewPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
console.log('데이터', data);
+
+ const [isWrited, setIsWrited] = useState(false);
+ const [isDeleted, setIsDeleted] = useState(false);
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
const { data: comment, error: commentError, loading: commentLoading } = useFetch(
@@ -31,7 +35,17 @@ function ReviewPost() {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
- });
+ }, [token]);
+
+ useEffect(() => {
+ if (isWrited||isDeleted) {
+ setTimeout(() => {
+ window.location.reload();
+ }, 50);
+ }
+ }, [isWrited, isDeleted]);
+
+
console.log("코멘트 데이터:", comment);
console.log("에러:", commentError);
console.log("로딩:", commentLoading);
@@ -87,10 +101,10 @@ function ReviewPost() {
{/*댓글 작성부분 - 한 컴포넌트로 묶기 */}
댓글 {commentCount}개
-
+
{comment?.result?.comments?.map((data) => (
-
))}
diff --git a/src/pages/detail/MainContent.jsx b/src/pages/detail/MainContent.jsx
index ba0c037..4e7fcc2 100644
--- a/src/pages/detail/MainContent.jsx
+++ b/src/pages/detail/MainContent.jsx
@@ -72,10 +72,9 @@ function MainContent({data,loading, error}) {
musicalId={musical.id}
/>
-
+
- {score}
diff --git a/src/pages/detail/subpages/Casts.jsx b/src/pages/detail/subpages/Casts.jsx
index 9d3192f..cca85e8 100644
--- a/src/pages/detail/subpages/Casts.jsx
+++ b/src/pages/detail/subpages/Casts.jsx
@@ -19,33 +19,33 @@ function CastsDetail() {
console.log('캐스팅 데이터', data?.result);
return (
-
<>
- {data?.result?.map((role) => (
-
-
- {role?.actorList?.map((actor) => (
-
-
- 
- {
-
-
- }
-
-
- ))}
-
-
- ))}
-
-
-
+ {data?.result?.length === 0 ? (
+
+
+ {role?.actorList?.map((actor) => (
+
+
+
+
+
+
+
+ ))}
+
+
+ ))
+ )}
+
);
+
}
export default CastsDetail;
@@ -99,4 +99,5 @@ const ActorsWrapper = styled.div`
display:flex;
flex-direction: row;
gap: 40px;
+max-width: 800px;
`
\ No newline at end of file
diff --git a/src/pages/detail/subpages/Performance.jsx b/src/pages/detail/subpages/Performance.jsx
index ad9c730..daf624b 100644
--- a/src/pages/detail/subpages/Performance.jsx
+++ b/src/pages/detail/subpages/Performance.jsx
@@ -8,10 +8,19 @@ function Performance({ data }) {
return (
<>
- 
+ {data?.result?.desImgUrl[0] ? (
+
+ ) : (
+
{props?.data?.placeName}
+{props?.data?.address}
+ +현재 공연
+ {navigate(`/detail/${props?.data?.musicalId}`)}}> ++
+
+
+ {["A", "B", "C", "D", "E", "F", "G", "H", "I"].map((area) => (
+ 
+ ))}
+
+
+ {["J", "K", "L", "M", "N", "O"].map((area) => (
+
+ ))}
+
+
+
+ STAGE
+ 1층
+2층
++ +
{selectedSeatData?.seatRange}
+
+
반별 test용으로 별점을 4.6 고정으로 해둠
- {role?.roleName}
- -{actor?.realName}
- 캐스팅 정보가 없습니다.
+ ) : ( + data?.result?.map((role) => ( +{role?.roleName}
+ +{actor?.realName}
+
+ {data?.result?.desImgUrl[0] ? (
+
+ ) : (
+ 공연정보가 없습니다.
+ )
+ }
);
}
export default Performance;
+
+const Img = styled.img`
+ max-width: 800px;
+`
\ No newline at end of file
diff --git a/src/pages/mypage/MyPage.jsx b/src/pages/mypage/MyPage.jsx
index ec9ffb7..8b2bc7b 100644
--- a/src/pages/mypage/MyPage.jsx
+++ b/src/pages/mypage/MyPage.jsx
@@ -81,7 +81,15 @@ function MyPage() {
/>
{/*댓글 작성부분 - 한 컴포넌트로 묶기 */}
"); - const imageUrls = musical.notice.imgUrls; - const poster = musical.posterImgUrl + const imageUrls = musical.noticeImages; + const poster = musical.posterImage; const details = [ { label: "장소", value: musical.place}, { label: "공연 기간", value: musical.schedule }, @@ -54,13 +54,27 @@ function SmallDetail() {