Merge pull request #291 from dreamyPatisiel/dev

fix: comment style 수정

Author: minyoung22222

components/common/comments/CommentHeader.tsx

@@ -39,55 +39,55 @@ export default function CommentHeader({
   const { isMobile } = useMediaQueryContext();
 
   return (
-    <div className='flex justify-between'>
-      <div className={`flex ${isMobile ? 'flex-col gap-2' : 'items-center gap-4'}`}>
-        <span className={`flex ${isMobile ? 'gap-[0.4rem] mb-[1rem]' : ''}`}>
-          {isBestComment && (
-            <Tag
-              color='secondary'
-              status='main'
-              size='basic'
-              content='Best'
-              className={`w-fit font-bold ${isMobile ? '' : 'mr-[1.6rem]'}`}
-            />
-          )}
-          {isCommentAuthor && isMobile && (
+    <div className={`flex ${isMobile ? 'flex-col' : ''}`}>
+      <div className={`${isMobile ? 'flex gap-[0.4rem] mb-[1rem]' : ''}`}>
+        {isBestComment && (
+          <Tag
+            color='secondary'
+            status='main'
+            size='basic'
+            content='Best'
+            className={`w-fit font-bold ${isMobile ? '' : 'mr-[1.6rem]'}`}
+          />
+        )}
+        {isCommentAuthor && isMobile && (
+          <Tag
+            color='secondary'
+            status='line'
+            size='basic'
+            content='내가 썼어요'
+            className='w-fit font-bold'
+          />
+        )}
+      </div>
+
+      <div className='flex justify-between w-full'>
+        <div className={`flex ${isMobile ? 'flex-col gap-2' : 'items-center gap-4'}`}>
+          <span className={`flex items-center`}>
+            {isCommentOfPickAuthor ? (
+              <Image src={writerIcon} alt={'작성자 아이콘'} className='mr-[0.8rem]' />
+            ) : null}
+            <NicknameWithMaskedEmail author={author} maskedEmail={maskedEmail} textSize='p2' />
+          </span>
+          <time className={`p2 text-gray300`}>{formatISOtoDate(createdAt || '')}</time>
+
+          {isCommentAuthor && !isMobile && (
             <Tag
               color='secondary'
               status='line'
-              size='basic'
+              size='small'
               content='내가 썼어요'
               className='w-fit font-bold'
             />
           )}
-        </span>
-
-        <span className={`flex items-center`}>
-          {isCommentOfPickAuthor ? (
-            <Image src={writerIcon} alt={'작성자 아이콘'} className='mr-[0.8rem]' />
-          ) : null}
-          <NicknameWithMaskedEmail author={author} maskedEmail={maskedEmail} textSize='p2' />
-        </span>
-        <time className={`text-gray300 ${isMobile ? '' : 'mx-[1.6rem]'}`}>
-          {formatISOtoDate(createdAt || '')}
-        </time>
+        </div>
 
-        {isCommentAuthor && !isMobile && (
-          <Tag
-            color='secondary'
-            status='line'
-            size='small'
-            content='내가 썼어요'
-            className='w-fit font-bold'
-          />
+        {isDeleted || isEditActived || moreButtonList.length === 0 ? null : (
+          <span className='mr-[1rem]'>
+            <MoreButton moreButtonList={moreButtonList} type='small' />
+          </span>
         )}
       </div>
-
-      {isDeleted || isEditActived || moreButtonList.length === 0 ? null : (
-        <span className='mr-[1rem]'>
-          <MoreButton moreButtonList={moreButtonList} type='small' />
-        </span>
-      )}
     </div>
   );
 }

pages/pickpickpick/[id]/components/Comment.tsx

@@ -272,7 +272,7 @@ export default function Comment({
     <div
       id={`comment-${pickCommentId}`}
       ref={commentRef}
-      className={`flex flex-col gap-[2.4rem] pt-[2.4rem] pb-[3.2rem] px-[1.6rem]
+      className={`flex flex-col gap-[1.6rem] pt-[2.4rem] pb-[3.2rem] px-[1.6rem]
         ${isSubComment && (isMobile ? 'px-[1.6rem]' : 'px-[3.2rem]')}     
         ${commentContainerStyle()}
         ${commentId === String(pickCommentId) ? 'comment-item' : ''}
@@ -309,7 +309,7 @@ export default function Comment({
             parentCommentAuthor={getPickParentCommentAuthor()}
           />
 
-          <div className='mr-0 flex gap-[0.8rem]'>
+          <div className='mr-0 flex gap-[0.8rem] mt-[0.8rem]'>
             <ReplyButton
               isActived={isReplyActived}
               setIsActived={setIsReplyActived}