Refactor: Comment 리팩토링

Author: gustn99

src/components/Comment/index.tsx

@@ -1,32 +1,28 @@
-import { StyledText } from '../Text/StyledText';
-import { CommentLayout, SendContainer, CommentTextarea, SendImg } from './styles';
-import Send from '../../assets/default/send-comment.svg';
+import { StyledText } from '@components/Text/StyledText';
+import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles';
+import send from '@assets/default/send-comment.svg';
 import React, { useEffect, useRef, useState } from 'react';
 import { CommentProps } from './dto';
 
-const Comment: React.FC<CommentProps> = ({ content, sendComment, isModal }) => {
+const Comment: React.FC<CommentProps> = ({ content, sendComment, isModal = false }) => {
 	const [comment, setComment] = useState('');
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-	// textarea 높이 조정 함수
+	// textarea 높이 조정
 	const adjustTextareaHeight = () => {
 		if (textareaRef.current) {
 			textareaRef.current.style.height = '1.2rem'; // 초기 높이 설정
 			textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; // 스크롤 높이에 맞춰 재조정
 		}
 	};
 
-	useEffect(() => {
-		adjustTextareaHeight();
-	}, [comment]); // comment가 변경될 때만 높이 재조정
-
-	const handleChangeComment = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+	const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		if (e.target.value.length <= 100) {
 			setComment(e.target.value);
 		}
 	};
 
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+	const handleEnterKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
 		if (comment === '') {
 			e.preventDefault();
 			return;
@@ -48,18 +44,25 @@ const Comment: React.FC<CommentProps> = ({ content, sendComment, isModal }) => {
 		}
 	};
 
+	// comment가 변경될 때만 높이 재조정
+	useEffect(() => {
+		adjustTextareaHeight();
+	}, [comment]);
+
 	return (
 		<CommentLayout $isModal={isModal}>
-			<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 1.5 }}>{content}</StyledText>
+			<StyledText $textTheme={{ style: 'body1-regular' }}>{content}</StyledText>
 			<SendContainer>
 				<CommentTextarea
 					ref={textareaRef}
 					value={comment}
-					onChange={handleChangeComment}
-					onKeyDown={handleKeyDown}
+					onChange={handleCommentChange}
+					onKeyDown={handleEnterKeyDown}
 					maxLength={100}
 				/>
-				<SendImg src={Send} onClick={handleSendButtonClick} />
+				<SendButton onClick={handleSendButtonClick}>
+					<img src={send} alt="메시지 전송 아이콘" />
+				</SendButton>
 			</SendContainer>
 		</CommentLayout>
 	);

src/components/Comment/styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const CommentLayout = styled.div<{ $isModal: boolean | undefined }>`
+export const CommentLayout = styled.div<{ $isModal: boolean }>`
 	margin: 1.38rem auto 1.25rem auto;
 	width: 100%;
 	display: flex;
@@ -34,9 +34,11 @@ export const CommentTextarea = styled.textarea`
 	line-height: 1.2rem;
 `;
 
-export const SendImg = styled.img`
+export const SendButton = styled.button`
 	width: 2.5rem;
 	height: 2.5rem;
-	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	margin-right: 0.62rem;
 `;