From 272786e3b5a419426c99dc21f228da47a91fdb6e Mon Sep 17 00:00:00 2001
From: Cho SeungYeon <111514472+layout-SY@users.noreply.github.com>
Date: Mon, 26 May 2025 00:19:22 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EB=8C=93=EA=B8=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20input=20=EA=B8=B8=EC=9D=B4?=
 =?UTF-8?q?=EA=B0=80=20=EC=A7=A7=EC=95=84=EC=A7=80=EB=8A=94=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/comment/CommentLayout.tsx | 12 ------------
 .../CommentComponent.styled.ts                |  7 +++++--
 .../commentComponent/CommentComponent.tsx     | 19 +++++++++----------
 .../comment/commentInput/CommentInput.tsx     | 13 ++++++++++++-
 4 files changed, 26 insertions(+), 25 deletions(-)

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 (
       <S.Container>
@@ -48,7 +37,6 @@ const CommentLayout = ({
       </S.CommentCountsContainer>
 
       <S.CommentInput>
-        <Avatar size='55px' image={profileImg} />
         <CommentInput projectId={projectId} commentId={0} />
       </S.CommentInput>
 
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 = ({
               <S.ReplyContent>댓글 달기</S.ReplyContent>
             </S.ReplyInputButton>
           )}
-
-          {activateId === item.id && !onReplyMessage && (
-            <S.ReplyInput>
-              <CommentInput
-                reply={true}
-                projectId={projectId}
-                commentId={item.id}
-              />
-            </S.ReplyInput>
-          )}
         </S.CommentWrapper>
       </S.Wrapper>
+      {activateId === item.id && !onReplyMessage && (
+        <S.ReplyInput>
+          <CommentInput
+            reply={true}
+            projectId={projectId}
+            commentId={item.id}
+          />
+        </S.ReplyInput>
+      )}
     </S.Container>
   );
 };
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<FormValue>();
-
+  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 (
     <S.InputContainer>
+      <Avatar size={'55px'} image={profileImg} />
       <S.InputWrapper>
         <form
           onSubmit={