Merge pull request #41 from happbob/feat/OD-3

Refactor: any 타입 변수 및 속성 명시적으로 수정

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/components/BottomSheetMenu/dto.ts

@@ -1,7 +1,7 @@
 // SheetItemWithDivider에서 사용되는 Items 배열 요소
 export interface SheetItemDto {
 	text: string;
-	action: () => any;
+	action: () => void;
 	icon?: string; // svg를 import하여 값으로 사용
 }
 

src/components/Cards/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/pagination';
@@ -13,9 +13,9 @@ interface CardsProps {
 }
 
 const Cards: React.FC<CardsProps> = ({ onRemoveMatching }) => {
-  const swiperRef = useRef<any>(null); // Swiper 인스턴스 참조
-  const [relationships, setRelationships] = useState<Relationship[]>([]); // 매칭 요청 데이터를 상태로 관리
-  const [slidesVisibility, setSlidesVisibility] = useState<boolean[]>([]); // 각 슬라이드의 가시성을 관리
+	const swiperRef = useRef<SwiperRef | null>(null); // Swiper 인스턴스 참조
+	const [relationships, setRelationships] = useState<Relationship[]>([]); // 매칭 요청 데이터를 상태로 관리
+	const [slidesVisibility, setSlidesVisibility] = useState<boolean[]>([]); // 각 슬라이드의 가시성을 관리
 
   const fetchData = async () => {
     try {

src/components/Comment/index.tsx

@@ -2,7 +2,7 @@ import { StyledText } from '../Text/StyledText';
 import theme from '../../styles/theme';
 import { CommentLayout, SendContainer, CommentTextarea, SendImg } from './styles';
 import Send from '/Send.svg';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { CommentProps } from './dto';
 
 const Comment: React.FC<CommentProps> = ({ content, sendComment }) => {
@@ -17,7 +17,7 @@ const Comment: React.FC<CommentProps> = ({ content, sendComment }) => {
 		}
 	}, [comment]);
 
-	const onChangeComment = (e: any) => {
+	const onChangeComment = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		if (e.target.value.length >= 100) {
 			return;
 		} else {
@@ -26,14 +26,14 @@ const Comment: React.FC<CommentProps> = ({ content, sendComment }) => {
 	};
 
 	// textarea에서 enter 입력 시 실행
-	const onKeyDown = (e: any): void => {
+	const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
 		if (comment === '') {
 			e.preventDefault();
 			return;
 		}
 		if (e.key === 'Enter' && !e.shiftKey) {
 			e.preventDefault();
-			sendComment(e.target.value);
+			sendComment(e.currentTarget.value);
 			setComment('');
 		}
 	};

src/pages/Chats/ChatRoom/ChatBox/index.tsx

@@ -34,7 +34,7 @@ const ChatBox: React.FC = () => {
 		}
 	}, []);
 
-	const onChangeMessage = (e: any): void => {
+	const onChangeMessage = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
 		setNewMessage(e.target.value);
 	};
 	const sendNewMessage = (): void => {
@@ -49,7 +49,7 @@ const ChatBox: React.FC = () => {
 		}
 	};
 
-	const onKeyDown = (e: any): void => {
+	const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
 		if (e.key === 'Enter' && !e.shiftKey) {
 			e.preventDefault();
 			sendNewMessage();

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);