Merge pull request #75 from oodd-team/feat/OD-130

[OD-130] 홈 화면 버그 수정

Author: gustn99

src/assets/default/snsIcon/kakao 2.svg

@@ -175,6 +175,7 @@ const OptionsBottomSheet: React.FC<OptionsBottomSheetProps> = ({
 	};
 
 	const handleBackgroundClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		if (e.target === e.currentTarget) {
 			setIsReportBottomSheetOpen(false);
 		}

src/assets/default/snsIcon/naver 2.svg

@@ -120,6 +120,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 
 	// BottomSheet 외부를 클릭할 경우 BottomSheet 닫음
 	const handleBackgroundClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		if (!isDragging && e.target === e.currentTarget) {
 			onCloseBottomSheet();
 		}

src/components/BottomSheet/OptionsBottomSheet/index.tsx

@@ -29,6 +29,7 @@ const CommentBottomSheet: React.FC<CommentBottomSheetProps> = ({
 	};
 
 	const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
 		if (e.target === e.currentTarget) {
 			handleCloseBottomSheet();
 		}

src/components/BottomSheet/index.tsx

@@ -12,6 +12,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 	return (
 		<ConfirmationModalWrapper
 			onClick={(e) => {
+				e.stopPropagation();
 				// Modal 외부를 클릭했을 경우 Modal 닫음
 				if (e.target === e.currentTarget) {
 					onCloseModal();

src/components/CommentBottomSheet/index.tsx

@@ -7,6 +7,7 @@ import XIcon from '../../assets/default/x.svg';
 
 const Modal: React.FC<ModalProps> = ({ isCloseButtonVisible, onClose, content, button }) => {
 	const handleBackgroundClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		if (e.target === e.currentTarget) {
 			onClose();
 		}

src/components/ConfirmationModal/index.tsx

@@ -60,6 +60,10 @@ const NavBar: React.FC = () => {
 	const handleTabClick = (tab: (typeof tabs)[0]) => {
 		setSelectedTab(tab.name);
 		navigate(tab.route);
+		if (tab.name === 'Home') {
+			sessionStorage.setItem('scrollPosition', '0');
+			window.scrollTo({ top: 0, behavior: 'smooth' });
+		}
 	};
 
 	const handleConfirmLogout = () => {

src/components/Modal/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Button, ButtonContainer, HomeLogo, HomeTopBarContainer } from './styles';
 import logo from './../../assets/default/oodd.svg';
 import alarm from '../../assets/default/alarm.svg';
-import myPage from '../../assets/default/my-page.svg';
 
 // Home 페이지의 상단 바입니다. 로고와 알림이 있습니다.
 // TODO: 버튼 클릭 이벤트 처리 필요
@@ -14,9 +13,6 @@ const HomeTopBar: React.FC = () => {
 				<Button>
 					<img src={alarm} alt="알림" />
 				</Button>
-				<Button>
-					<img src={myPage} alt="마이페이지" />
-				</Button>
 			</ButtonContainer>
 		</HomeTopBarContainer>
 	);

src/components/NavBar/index.tsx

@@ -114,22 +114,45 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 		}
 	};
 
-	const handleMoreButtonClick = () => {
+	const handleUserClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		sessionStorage.setItem('scrollPosition', String(window.scrollY));
+		nav(`/users/${feed.user.userId}`);
+	};
+
+	const handleMoreButtonClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		setIsOptionsBottomSheetOpen(true);
 	};
 
-	const handleRejectButtonClick = () => {
+	const handleRejectButtonClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		setIsBlockModalOpen(true);
 	};
 
-	const handleLikeButtonClick = () => {
+	const handleLikeButtonClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		togglePostLikeStatus();
 	};
 
-	const handleMatchingButtonClick = () => {
+	const handleMatchingButtonClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
 		setIsMatchingCommentBottomSheetOpen(true);
 	};
 
+	const handleClickFeed = (e: React.MouseEvent) => {
+		const target = e.target as HTMLElement;
+
+		// 페이지네이션 bullet 클릭 시 이벤트 차단
+		if (target.classList.contains('swiper-pagination-bullet')) {
+			e.stopPropagation();
+		} else {
+			// 그 외에 게시글 상세 조회 페이지로 이동
+			sessionStorage.setItem('scrollPosition', String(window.scrollY));
+			nav(`/post/${feed.postId}`);
+		}
+	};
+
 	// 게시글 옵션(더보기) 바텀시트
 	const optionsBottomSheetProps: OptionsBottomSheetProps = {
 		domain: 'post',
@@ -178,14 +201,14 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 	};
 
 	return (
-		<FeedWrapper>
+		<FeedWrapper onClick={handleClickFeed}>
 			<OptionsBottomSheet {...optionsBottomSheetProps} />
 			{isBlockModalOpen && <Modal {...blockModalProps} />}
 			<CommentBottomSheet {...matchingCommentBottomSheetProps} />
 			{isStatusModalOpen && <Modal {...statusModalProps} />}
 
 			<FeedTop>
-				<Info onClick={() => nav(`/users/${feed.user.userId}`)}>
+				<Info onClick={handleUserClick}>
 					<FeedProfileImgWrapper src={feed.user.profilePictureUrl || defaultProfile} alt="profile" />
 					<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.black}>
 						{feed.user.nickname}
@@ -198,11 +221,7 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 					<img src={more} />
 				</MoreBtn>
 			</FeedTop>
-			<FeedText
-				onClick={() => nav(`/post/${feed.postId}`)}
-				$textTheme={{ style: 'body2-regular' }}
-				color={theme.colors.black}
-			>
+			<FeedText $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
 				{feed.content}
 			</FeedText>
 			<FeedImgBox $src={feed.postImages[0].imageUrl}>
@@ -214,10 +233,16 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 					modules={[Pagination]}
 					className="ootdSwiper"
 				>
-					{feed.postImages.map((postImage, index) => (
-						<SwiperSlide key={index}>
-							<img src={postImage.imageUrl} alt={`${feed.user.nickname}의 피드 이미지`} className="ootd-image-small" />
-						</SwiperSlide>
+					{feed.postImages.map((postImage) => (
+						<>
+							<SwiperSlide key={postImage.imageUrl}>
+								<img
+									src={postImage.imageUrl}
+									alt={`${feed.user.nickname}의 피드 이미지`}
+									className="ootd-image-small"
+								/>
+							</SwiperSlide>
+						</>
 					))}
 				</Swiper>
 				<ReactionWrapper>