Refactor: BottomSheetPrpos 제너릭 타입으로 수정 & 관련 코드 수정

Author: gustn99

src/components/BottomSheet/dto.ts

@@ -1,8 +1,8 @@
-export interface BottomSheetProps {
+export interface BottomSheetProps<T = any> {
 	isOpenBottomSheet: boolean; // BottomSheet state
-	isHandlerVisible?: boolean; // 핸들러 여부 설정
-	Component: React.ComponentType<any>; // BottomSheet 내부에 전달할 컴포넌트
-	componentProps?: any; // props가 있는 경우 객체 형태로 전달
+	isHandlerVisible?: boolean; // 핸들러 가시성 설정(기본값 true)
+	Component: React.ComponentType<T>; // BottomSheet 내부에 전달할 컴포넌트
+	componentProps?: T; // props가 있는 경우 객체 형태로 전달
 	onCloseBottomSheet: () => void; // BottomSheet을 닫는 함수
 	initialTab?: 'likes' | 'comments'; // 추가: initialTab 속성
 }

src/pages/Chats/ChatRoom/index.tsx

@@ -211,7 +211,7 @@ const ChatRoom: React.FC = () => {
 		},
 	};
 
-	const kebabMenuBottomSheet: BottomSheetProps = {
+	const kebabMenuBottomSheet: BottomSheetProps<BottomSheetMenuProps> = {
 		isOpenBottomSheet: isOpenMenu,
 		isHandlerVisible: true,
 		Component: BottomSheetMenu,

src/pages/Home/BottomSheets/HeartBottomSheet.tsx

@@ -46,7 +46,7 @@ const HeartBottomSheet: React.FC = () => {
 		},
 	};
 
-	const heartBottomSheet: BottomSheetProps = {
+	const heartBottomSheet: BottomSheetProps<CommentProps> = {
 		isOpenBottomSheet: isOpenHeartBottomSheet,
 		Component: Comment,
 		componentProps: requestCommentProps,

src/pages/Home/BottomSheets/MeatballBottomSheet.tsx

@@ -35,7 +35,7 @@ const MeatballBottomSheet: React.FC = () => {
 		marginBottom: '3.125rem',
 	};
 
-	const meatballBottomSheet: BottomSheetProps = {
+	const meatballBottomSheet: BottomSheetProps<BottomSheetMenuProps> = {
 		isOpenBottomSheet: isOpenMeatballBottomSheet,
 		Component: BottomSheetMenu,
 		componentProps: meatballBottomSheetMenuProps,

src/pages/Home/BottomSheets/PostCommentBottomSheet.tsx

@@ -46,7 +46,7 @@ const PostCommentBottomSheet: React.FC = () => {
 		},
 	};
 
-	const postCommentBottomSheet: BottomSheetProps = {
+	const postCommentBottomSheet: BottomSheetProps<CommentProps> = {
 		isOpenBottomSheet: isOpenPostCommentBottomSheet,
 		Component: Comment,
 		componentProps: postCommentProps,

src/pages/Home/BottomSheets/ReportBottomSheet.tsx

@@ -95,7 +95,6 @@ const ReportBottomSheet: React.FC = () => {
 				)}
 			</div>
 		),
-		componentProps: reportBottomSheetMenuProps,
 		onCloseBottomSheet: () => {
 			setIsOpenReportBottomSheet(false);
 			setShowInput(false);

src/pages/MyPost/index.tsx

@@ -145,6 +145,7 @@ const MyPost: React.FC = () => {
 	const bottomSheetProps: BottomSheetProps = {
 		isOpenBottomSheet: isBottomSheetOpen,
 		isHandlerVisible: true,
+		// TODO: 컴포넌트 분리에 따라 BottomSheetProps 제너릭 타입 추후 수정
 		Component: () => {
 			if (activeTab === 'menu') {
 				return <BottomSheetMenu {...bottomSheetMenuProps} />;

src/pages/Mypage/index.tsx

@@ -64,7 +64,7 @@ const MyPage: React.FC = () => {
 		marginBottom: '50px',
 	};
 
-	const bottomSheetProps: BottomSheetProps = {
+	const bottomSheetProps: BottomSheetProps<BottomSheetMenuProps> = {
 		isOpenBottomSheet: isBottomSheetOpen,
 		isHandlerVisible: true,
 		Component: BottomSheetMenu,

src/pages/Post/index.tsx

@@ -169,7 +169,7 @@ const Post: React.FC = () => {
 		marginBottom: '3.125rem',
 	};
 
-	const bottomSheetProps: BottomSheetProps = {
+	const bottomSheetProps: BottomSheetProps<BottomSheetMenuProps> = {
 		isOpenBottomSheet: isOpenBottomSheet,
 		isHandlerVisible: true,
 		Component: BottomSheetMenu,
@@ -185,7 +185,7 @@ const Post: React.FC = () => {
 		sendComment: sendComment, // API 함수 전달
 	};
 
-	const commentSheetProps: BottomSheetProps = {
+	const commentSheetProps: BottomSheetProps<CommentProps> = {
 		isOpenBottomSheet: isCommentModalOpen,
 		isHandlerVisible: true,
 		Component: Comment,

src/pages/Upload/PostUploadModal/index.tsx

@@ -26,7 +26,7 @@ import pin from '../../../assets/Upload/pin.svg';
 import next from '../../../assets/Upload/next.svg';
 import next_up from '../../../assets/Upload/next_up.svg';
 import { PostUploadModalProps, ClothingInfo } from '../dto';
-import { Styletag, Post } from './dto';
+import { Styletag, Post, SearchBottomSheetProps } from './dto';
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import { storage } from '../firebaseConfig';
 import request, { BaseResponse } from '../../../apis/core';
@@ -90,7 +90,7 @@ const PostUploadModal: React.FC<PostUploadModalProps> = ({
 		setClothingInfos(deletedClothingInfo);
 	};
 
-	const bottomSheetProps: BottomSheetProps = {
+	const bottomSheetProps: BottomSheetProps<SearchBottomSheetProps> = {
 		isOpenBottomSheet: isSearchBottomSheetOpen,
 		isHandlerVisible: false,
 		Component: SearchBottomSheetContent,
@@ -124,11 +124,13 @@ const PostUploadModal: React.FC<PostUploadModalProps> = ({
 		console.log(2);
 		const storageRef = ref(storage, `ootd/images/${Date.now()}`);
 		console.log(3);
-		await uploadBytes(storageRef, blob).then(()=>{
-			console.log("success")
-		}).catch((error)=>{
-			console.log(JSON.stringify(error))
-		});
+		await uploadBytes(storageRef, blob)
+			.then(() => {
+				console.log('success');
+			})
+			.catch((error) => {
+				console.log(JSON.stringify(error));
+			});
 		console.log(4);
 		return getDownloadURL(storageRef);
 	};