[Feat] 댓글, 관리자사전승인, 기업카드, 라디오버튼

[chqkq]

작성자: @github_nickname

체크 리스트

• 적절한 제목으로 수정했나요?
• 상단에 이슈 번호를 기입했나요?
• Target Branch를 올바르게 설정했나요?
• Label을 알맞게 설정했나요?

작업 내역

• 작업한 내용을 간략하게 작성해주세요.

비고

• 참고 사항을 적어주세요. 코드 리뷰하는 사람이 참고해야 하는 내용을 자유로운 형식으로 적을 수 있습니다.

close/resolve/fix #{이슈 번호 기입}

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-bczvxjyvjr.chromatic.com/

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-grjuhbixzu.chromatic.com/

[moony1204]

Pretendard variable 문제일까요 ?? 폰트 색깔 지정 #000 필요한 듯 함

[moony1204]

button:hover일 때 폰트 색상 변경 해주시면 보기 좋을 듯 합니다
commentBox background color도 지정되었으면 합니다
별개로 피그마에서 왼쪽 디자인이 맞는 거지요 ??

[chqkq]

어.. 그러게요 지금 보니까 딱히 표시가 되어있지는 않네요

[moony1204]

폰트 색상 피그마와 맞추기?

[moony1204]

라디오버튼 unclicked일 때의 색상/디자인 clicked 의 색상반전으로도 가능한가용

[moony1204]

사소한 디자인 디테일 위주로 코멘트 남겼습니다

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-snmhlghqjl.chromatic.com/

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-tegmrvxrln.chromatic.com/

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-mskdmpnuuc.chromatic.com/

[sera2222]

수고 많으셨습니다! 수정 요청 몇 가지 드렸으니 확인 부탁드립니다.

[sera2222]

보다 최적화된 이미지 로딩을 위해, img 태그 대신에 next/image에서 Image 컴포넌트를 불러와서 사용하시는 걸 추천드립니다.

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-biomhpwolt.chromatic.com/

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-zmokpottpi.chromatic.com/

[sera2222]

추가로 발견한 수정사항 하나 더 확인해주시면 감사하겠습니다!

[sera2222]

댓글에서 한글을 입력 후 엔터를 눌렀을 때, composition이 완료된 문자열(마지막 문자를 제외한 문자열)이 제출된 이후, 입력 중이었던 마지막 문자도 또 한 번 제출이 되어서, 총 2개의 댓글이 한 번에 입력되고 있습니다.
이 문제를 해결하기 위해서, textarea의 compositionstart, compositionend 이벤트를 활용하여 composition이 진행중인 경우 제출이 되지 않도록(composition이 끝난 경우에만 제출) 처리를 해주시면 좋을 것 같습니다.

자세한 내용은 IME composition 관련하여 찾아보시면 됩니다!

Suggested change

	const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
	setComment(e.target.value);
	};
	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
	if (e.key === "Enter" && !e.shiftKey) {
	e.preventDefault();
	handleSubmit(e);
	}
	};
	const handleSubmit = (e: React.FormEvent) => {
	e.preventDefault();
	if (comment.trim()) {
	if (onSubmit) onSubmit(comment);
	setComments([...comments, { author: "사람", content: comment }]);
	setComment("");
	}
	};
	return (
	<div className={classes.commentBox}>
	<h3 className={classes.commentTitle}>댓글</h3>
	<form onSubmit={handleSubmit}>
	<div className={classes.textareaContainer}>
	<textarea
	className={classes.textarea}
	value={comment}
	onChange={handleChange}
	onKeyDown={handleKeyDown}
	const [isComposing, setIsComposing] = useState(false);
	const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
	setComment(e.target.value);
	};
	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
	if (e.key === "Enter" && !e.shiftKey && !isComposing) {
	e.preventDefault();
	handleSubmit(e);
	}
	};
	const handleSubmit = (e: React.FormEvent) => {
	e.preventDefault();
	if (comment.trim()) {
	if (onSubmit) onSubmit(comment);
	setComments([...comments, { author: "사람", content: comment }]);
	setComment("");
	}
	};
	return (
	<div className={classes.commentBox}>
	<h3 className={classes.commentTitle}>댓글</h3>
	<form onSubmit={handleSubmit}>
	<div className={classes.textareaContainer}>
	<textarea
	className={classes.textarea}
	value={comment}
	onChange={handleChange}
	onKeyDown={handleKeyDown}
	onCompositionStart={() => setIsComposing(true)}
	onCompositionEnd={() => setIsComposing(false)}

[github-actions]

🚀storybook: https://669667110ecf1f847fa21749-bajjurcaws.chromatic.com/

[sera2222]

수고하셨습니다!