diff --git a/src/components/user/comment/CommentLayout.tsx b/src/components/user/comment/CommentLayout.tsx index 14ac08fe..055d3ec5 100644 --- a/src/components/user/comment/CommentLayout.tsx +++ b/src/components/user/comment/CommentLayout.tsx @@ -3,10 +3,6 @@ import CommentInput from './commentInput/CommentInput'; import LoadingSpinner from '../../common/loadingSpinner/LoadingSpinner'; import useGetComment from '../../../hooks/user/CommentHooks/useGetComment'; import CommentComponentLayout from './commentComponent/CommentComponentLayout'; -import Avatar from '../../common/avatar/Avatar'; -import { useMyProfileInfo } from '../../../hooks/user/useMyInfo'; -import { formatImgPath } from '../../../util/formatImgPath'; -import DefaultImg from '../../../assets/defaultImg.png'; interface CommentLayoutProps { projectId: number; @@ -19,15 +15,8 @@ const CommentLayout = ({ createrId, loginUserId, }: CommentLayoutProps) => { - const { myData } = useMyProfileInfo(); const { getCommentList, isLoading, isFetching } = useGetComment(projectId); - const profileImg = myData?.profileImg - ? `${import.meta.env.VITE_APP_IMAGE_CDN_URL}/${formatImgPath( - myData.profileImg - )}?w=86&h=86&fit=crop&crop=entropy&auto=format,enhance&q=60` - : DefaultImg; - if (!getCommentList) { return ( @@ -48,7 +37,6 @@ const CommentLayout = ({ - diff --git a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts index a53dee1a..c7f6a584 100644 --- a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts +++ b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts @@ -55,8 +55,11 @@ export const ReplyContent = styled.p` `; export const ReplyInput = styled.div` - width: 100%; - margin-left: 15px; + display: flex; + flex: 1; + width: 94%; + margin-left: 50px; + margin-top: 10px; margin-bottom: 10px; `; diff --git a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx index f07942d0..69cccde1 100644 --- a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx +++ b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx @@ -89,18 +89,17 @@ const CommentComponent = ({ 댓글 달기 )} - - {activateId === item.id && !onReplyMessage && ( - - - - )} + {activateId === item.id && !onReplyMessage && ( + + + + )} ); }; diff --git a/src/components/user/comment/commentInput/CommentInput.tsx b/src/components/user/comment/commentInput/CommentInput.tsx index 94f07d1d..91b1faab 100644 --- a/src/components/user/comment/commentInput/CommentInput.tsx +++ b/src/components/user/comment/commentInput/CommentInput.tsx @@ -6,6 +6,10 @@ import usePostReply from '../../../../hooks/user/CommentHooks/usePostReply'; import usePatchReply from '../../../../hooks/user/CommentHooks/usePatchReply'; import usePostComment from '../../../../hooks/user/CommentHooks/usePostComment'; import usePutComment from '../../../../hooks/user/CommentHooks/usePutComment'; +import { useMyProfileInfo } from '../../../../hooks/user/useMyInfo'; +import { formatImgPath } from '../../../../util/formatImgPath'; +import Avatar from '../../../common/avatar/Avatar'; +import DefaultImg from '../../../../assets/defaultImg.png'; type FormValue = { commentInput: string; @@ -38,7 +42,7 @@ const CommentInput = ({ register, setValue, } = useForm(); - + const { myData } = useMyProfileInfo(); const { isFocused, handleFocus, handleClick } = useInputFocus(); const { createComment } = usePostComment(projectId); const { changeComment } = usePutComment(projectId, commentId); @@ -47,6 +51,12 @@ const CommentInput = ({ const hasInput = Boolean(watch('commentInput', '')); + const profileImg = myData?.profileImg + ? `${import.meta.env.VITE_APP_IMAGE_CDN_URL}/${formatImgPath( + myData.profileImg + )}?w=86&h=86&fit=crop&crop=entropy&auto=format,enhance&q=60` + : DefaultImg; + const handleSubmit = (data: { commentInput: string }) => { if (reply) { if (activateEditMode) { @@ -75,6 +85,7 @@ const CommentInput = ({ return ( +