Modify api연결 수정

src/components/BoardPreviewCardList.jsx

@@ -56,8 +56,8 @@ function BoardPreviewCardList({ data }) {
 				onMouseMove={handleMouseMove}
 			>
 				{data &&
-					data.map((item) => (
-						<Card key={item.boardId} onClick={() => navigate(`/board/post/${item.boardId}`)}>
+					data?.result.content.map((item) => (
+						<Card key={item.boardId}>
 							<h3>{item.title}</h3>
 							<p>{item.content}</p>
 						</Card>

src/components/Detail/WebPlayCard.jsx

@@ -22,7 +22,10 @@ function WebPlayCard({ name, posterImageUrl, place, schedule, amateurShowId }) {
 export default WebPlayCard;
 
 const Card = styled.div`
-	width: 362px;
+	flex: 0 0 calc((100% - (12px * 2)) / 3);
+	min-width: calc((100% - (12px * 2)) / 3);
+	box-sizing: border-box;
+
 	aspect-ratio: 1;
 	background: ${({ image }) =>
 		`linear-gradient(180deg, rgba(0, 0, 0, 0) 25.94%, rgba(0, 0, 0, 0.6) 77.94%),

src/components/Masonry.jsx

@@ -21,7 +21,9 @@ function Masonry({ imageData }) {
 							<img src={data?.imageUrl} alt="공연사진" className="pic" />
 							<Text>
 								<p className="title">{data?.amateurShowName}</p>
-								{data?.performerName && <p className="theatre">{data.performerName}</p>}
+								{data?.performerName && (
+									<p className="theatre">{data.performerName}</p>
+								)}
 							</Text>
 						</Item>
 					))}
@@ -43,8 +45,7 @@ const EmptyMessage = styled.div`
 `;
 
 const ImageArea = styled.div`
-	//고정 너비에서 수정 필요
-	column-width: 176px;
+	column-count: 2;
 	column-gap: 11px;
 `;
 

src/components/MasonryWeb.jsx

@@ -3,13 +3,17 @@ import styled from 'styled-components';
 
 function MasonryWeb({ imageData }) {
 	const hasImages = imageData?.length > 0;
-	console.log(imageData);
-
 	const navigate = useNavigate();
 	const goAlbum = (prodId, photoAlbumId) => {
 		if (!photoAlbumId) return;
 		navigate(`/production/album/${prodId}/${photoAlbumId}`);
 	};
+
+	console.log(
+		'중복 체크:',
+		imageData.map((d) => d.photoAlbumId),
+	);
+
 	return (
 		<>
 			{hasImages ? (
@@ -22,8 +26,8 @@ function MasonryWeb({ imageData }) {
 							<img src={data?.imageUrl} alt="공연사진" className="pic" />
 							<Text>
 								<p className="title">{data?.amateurShowName}</p>
-								{data.performerName && (
-									<p className="theatre">{data?.performerName}</p>
+								{data?.performerName && (
+									<p className="theatre">{data.performerName}</p>
 								)}
 							</Text>
 						</Item>

src/components/Notification/Noti.jsx

@@ -1,21 +1,33 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
+import useCustomFetch from '@/utils/hooks/useCustomFetch';
+
 import Board from '@/assets/icons/board-filled.svg?react';
 import Logo from '@/assets/icons/logo.svg?react';
 import Movie from '@/assets/icons/movie-filled.svg?react';
 
-function Noti({ contentId, type, content, when, checked, onClick }) {
+function Noti({ contentId, id, type, content, when, checked }) {
 	const navigate = useNavigate();
 
 	//REPLY(댓글 알림), COMMENT(댓글 알림), HOT(게시글 알림),
 	//AMATEURSHOW(좋아요 한 극단 공연 등록), TICKET(예매완료), REMIND(공연 당일 리마인드)
 
+	const { fetchData } = useCustomFetch();
+	const handleClick = async (noticeId) => {
+		console.log(`[PATCH 요청 시작] ID: ${noticeId}`);
+		try {
+			await fetchData(`/notice/${noticeId}`, 'PATCH');
+		} catch (error) {
+			console.error('알림 읽음 처리 실패', error);
+		}
+	};
+
 	const moveTo = () => {
 		let url = null;
 
 		if (type === 'COMMENT' || type === 'REPLY' || type === 'HOT') {
-			url = `/board/${contentId}`;
+			url = `/board/post/${contentId}`;
 		}
 
 		if (type === 'AMATEURSHOW' || type === 'TICKET' || type === 'REMIND') {
@@ -26,7 +38,14 @@ function Noti({ contentId, type, content, when, checked, onClick }) {
 			navigate(url);
 		}
 	};
-
+
+	const handleContainerClick = async () => {
+		if (!checked) {
+			await handleClick(id);
+		}
+		moveTo();
+	};
+
 	const renderIcon = () => {
 		if (type === 'AMATEURSHOW' || type === 'REMIND' || type === 'TICKET')
 			return <Movie width={16} />;
@@ -58,17 +77,21 @@ function Noti({ contentId, type, content, when, checked, onClick }) {
 		const created = new Date(createdAt);
 		const diffMs = now - created;
 
+		const diffMinutes = Math.floor(diffMs / (1000 * 60));
 		const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
 
+		if (diffMinutes < 60) {
+			return diffMinutes <= 0 ? '방금 전' : `${diffMinutes}분 전`;
+		}
+
 		if (diffHours < 24) {
 			return `${diffHours}시간 전`;
-		} else {
-			return `${created.getMonth() + 1}월 ${created.getDate()}일`;
 		}
+		return `${created.getFullYear()}.${created.getMonth() + 1}.${created.getDate()}`;
 	}
 
 	return (
-		<Container checked={checked} onClick={(onClick, moveTo)}>
+		<Container checked={checked} onClickCapture={handleContainerClick}>
 			<div className="smallTitle">
 				{renderIcon()}
 				<p className="category">{getCategoryLabel()}</p>
@@ -87,6 +110,9 @@ const Container = styled.div`
 	gap: 12px;
 	padding: 16px 20px;
 
+	cursor: pointer;
+	pointer-events: auto;
+
 	background-color: ${({ checked, theme }) =>
 		checked ? theme.colors.grayWhite : theme.colors.pink100};
 

src/components/Notification/NotiComponent.jsx

@@ -1,26 +1,18 @@
 import styled from 'styled-components';
 import { useState } from 'react';
 
+import useCustomFetch from '@/utils/hooks/useCustomFetch';
+
 import Noti from '@/components/Notification/Noti';
 import PillToggleGroup from '@/components/PillToggleGroup';
-import useCustomFetch from '@/utils/hooks/useCustomFetch';
 
 function NotiComponent() {
 	const options = ['전체', '소극장 공연', '추천 공연'];
 
 	const [selectedOption, setSelectedOption] = useState('전체');
 
 	const { data: notiData, error, loading } = useCustomFetch(`/notice`);
-	const { fetchData: markAsRead } = useCustomFetch(null, 'PATCH');
-
-	const handleClick = async (noticeId) => {
-		try {
-			await markAsRead(`/notice/${noticeId}`);
-			location.reload();
-		} catch (error) {
-			console.error('알림 읽음 처리 실패', error);
-		}
-	};
+
 	const filteredNotices = notiData?.result?.items.filter((noti) => {
 		if (selectedOption === '전체') return true;
 		if (selectedOption === '추천 공연') return noti.noticeType === 'AD';
@@ -46,17 +38,18 @@ function NotiComponent() {
 				{filteredNotices?.map((noti) => (
 					<Noti
 						key={noti.id}
+						id={noti.id}
 						type={noti.noticeType}
-						noticeType={noti.noticeType}
 						content={noti.message}
 						contentId={noti.contentId}
 						when={noti.createdAt}
 						checked={noti.isRead}
-						onClick={() => handleClick(noti.id)}
 					/>
 				))}
 
-				{filteredNotices && <ExtraMessage>알림이 없습니다.</ExtraMessage>}
+				{filteredNotices && filteredNotices.length === 0 && (
+					<ExtraMessage>알림이 없습니다.</ExtraMessage>
+				)}
 			</NotiList>
 		</Box>
 	);
@@ -111,11 +104,11 @@ const NotiList = styled.div`
 	display: flex;
 	flex-direction: column;
 
-    gap: 2px;
+	gap: 2px;
 
-    @media (min-width: 768px) 
-        gap: 0px;
-	}	
+	@media (min-width: 768px) {
+		gap: 0px;
+	}
 `;
 
 const ExtraMessage = styled.p`

src/pages/Detail/Detail.jsx

@@ -14,10 +14,10 @@ function Detail() {
 		loading,
 	} = useCustomFetch(`/amateurs/${playId}`);
 
-	console.log('error:', error);
-	console.log('loading:', loading);
-	console.log('SummData:', playData);
-
+	//console.log('error:', error);
+	//console.log('loading:', loading);
+	//console.log('SummData:', playData);
+	
 	if (loading || !playData?.result) {
 		return <EyeRollingSVG />;
 	}

src/pages/Detail/Info.jsx

@@ -15,7 +15,7 @@ import Gallery from './InfoArea/Gallery';
 function Info({ playData }) {
 	const [activeTab, setActiveTab] = useState('perform');
 
-	console.log('InfoData:', playData);
+	//console.log('InfoData:', playData);
 
 	const displayGenre = playData.result.hashtag
 		.split('#')

src/pages/Detail/InfoArea/Gallery.jsx

@@ -5,17 +5,17 @@ import useCustomFetch from '@/utils/hooks/useCustomFetch';
 import Masonry from '@/components/Masonry';
 
 function Gallery(props) {
-	console.log(props.data.result.memberId);
+	//console.log(props.data.result.memberId);
 
 	const {
 		data: picData,
 		error,
 		loading,
 	} = useCustomFetch(`/photoAlbums/member/${props?.data.result.memberId}`);
 
-	console.log('error:', error);
-	console.log('loading:', loading);
-	console.log('data:', picData);
+	//console.log('error:', error);
+	//console.log('loading:', loading);
+	//console.log('data:', picData);
 
 	return (
 		<Container>

src/pages/Detail/InfoArea/Perform.jsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import KakaoMap from '@/components/KakaoMap';
 
 function Perform(props) {
-	console.log('show data:', props);
+	//console.log('show data:', props);
 
 	return (
 		<Container>

src/pages/Detail/Playlist.jsx

@@ -101,28 +101,30 @@ function Playlist() {
 
 						<CarouselWrapper>
 							<CarouselTrack $current={current}>
-								{todayData?.result.map((data, idx) => (
-									<Slide key={data.amateurShowId}>
-										<PlayCard
-											key={data.amateurShowId}
-											name={data.name}
-											place={data.place}
-											posterImageUrl={data.posterImageUrl}
-											schedule={data.schedule}
-											amateurShowId={data.amateurShowId}
-										/>
-									</Slide>
-								))}
+								{todayData &&
+									todayData?.result.content.map((data, idx) => (
+										<Slide key={data.amateurShowId}>
+											<PlayCard
+												key={data.amateurShowId}
+												name={data.name}
+												place={data.place}
+												posterImageUrl={data.posterImageUrl}
+												schedule={data.schedule}
+												amateurShowId={data.amateurShowId}
+											/>
+										</Slide>
+									))}
 							</CarouselTrack>
 						</CarouselWrapper>
 						<IndicatorWrapper>
-							{todayData?.result.map((_, idx) => (
-								<Dot
-									key={idx}
-									className={idx === current ? 'active' : ''}
-									onClick={() => setCurrent(idx)}
-								/>
-							))}
+							{todayData &&
+								todayData?.result.content.map((_, idx) => (
+									<Dot
+										key={idx}
+										className={idx === current ? 'active' : ''}
+										onClick={() => setCurrent(idx)}
+									/>
+								))}
 						</IndicatorWrapper>
 					</MobileCarousel>
 				</Today>
@@ -243,8 +245,20 @@ const Today = styled.div`
 
 const CardWrapper = styled.div`
 	display: flex;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+
 	gap: 32px;
+	width: 100%;
+
+	scroll-behavior: smooth;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	-ms-overflow-style: none;
+	scrollbar-width: none;
 `;
+
 const CarouselWrapper = styled.div`
 	width: 100%;
 	overflow: hidden;

src/pages/gallery/Gallery.jsx

@@ -12,7 +12,7 @@ import GalleryIcon from '@/assets/icons/Gallery.svg?react';
 import useCustomFetch from '@/utils/hooks/useCustomFetch';
 
 function Gallery() {
-	const SIZE = 15;
+	const SIZE = 20;
 	const navigate = useNavigate();
 	const roleToken = sessionStorage.getItem('selectedRole');
 
@@ -75,10 +75,12 @@ function Gallery() {
 			},
 		);
 
-		if (mobileObserverRef.current) {
+		const isMobile = window.innerWidth < 768;
+
+		if (isMobile && mobileObserverRef.current) {
 			observer.observe(mobileObserverRef.current);
 		}
-		if (webObserverRef.current) {
+		if (!isMobile && webObserverRef.current) {
 			observer.observe(webObserverRef.current);
 		}