From c80edfe2cd39a59f451062291cfd02ef411428bb Mon Sep 17 00:00:00 2001
From: tare <59001439+junghwa1996@users.noreply.github.com>
Date: Sat, 28 Dec 2024 18:06:34 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EC=BD=94=EB=A9=98=ED=8A=B8=20=EC=88=98=EC=A0=95=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EA=B2=B9=EC=B9=A8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/boards.page/CommentForm.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/boards.page/CommentForm.tsx b/components/boards.page/CommentForm.tsx
index 61336e28..a8e9697e 100644
--- a/components/boards.page/CommentForm.tsx
+++ b/components/boards.page/CommentForm.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from '@/components/Button';
+import useCheckMobile from '@/hooks/useCheckMobile';
 
 interface CommentFormProps {
   value: string;
@@ -32,6 +33,8 @@ export default function CommentForm({
     onChange(e);
   };
 
+  const isMobile = useCheckMobile();
+
   return (
     <form
       className="relative h-[133px] w-full rounded-custom bg-gray-100 px-[15px] py-[13px]"
@@ -44,17 +47,25 @@ export default function CommentForm({
         onChange={handleChange}
         placeholder="댓글을 입력해 주세요"
       />
-      <span className="absolute bottom-3 left-[15px] text-14 text-gray-400">
+      <span className="absolute bottom-3 left-[15px] text-14 text-gray-400 mo:text-12">
         {length} / {MAX_LENGTH}
       </span>
-      <div className="absolute bottom-3 right-[15px] flex items-center gap-3">
+      <div className="absolute bottom-3 right-[15px] flex items-center gap-3 mo:gap-1">
         {update && (
-          <Button variant="secondary" onClick={onCancel}>
+          <Button
+            variant="secondary"
+            onClick={onCancel}
+            size={isMobile && update ? 'small' : 'normal'}
+          >
             취소
           </Button>
         )}
-        <Button type="submit" disabled={value.length === 0}>
-          댓글 등록
+        <Button
+          type="submit"
+          disabled={value.length === 0}
+          size={isMobile && update ? 'small' : 'normal'}
+        >
+          {update ? '수정' : '댓글 등록'}
         </Button>
       </div>
     </form>

From 6949ca73a3370dfe10feb3eab0c676beb8264767 Mon Sep 17 00:00:00 2001
From: tare <59001439+junghwa1996@users.noreply.github.com>
Date: Sat, 28 Dec 2024 19:00:35 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20=EC=A0=84=EC=B2=B4=EA=B2=8C?=
 =?UTF-8?q?=EC=8B=9C=EA=B8=80,=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=94=94=ED=85=8C?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Pagination/PaginationButton.tsx | 2 +-
 components/boards.page/BoardCard.tsx       | 2 +-
 components/boards.page/BoardDetailCard.tsx | 2 +-
 components/boards.page/ButtonIcon.tsx      | 4 ++--
 components/boards.page/Comment.tsx         | 6 +++---
 components/boards.page/CommentForm.tsx     | 6 +++---
 pages/boards/[articleId].tsx               | 2 +-
 pages/boards/index.tsx                     | 2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/Pagination/PaginationButton.tsx b/components/Pagination/PaginationButton.tsx
index ee2cd11a..45706386 100644
--- a/components/Pagination/PaginationButton.tsx
+++ b/components/Pagination/PaginationButton.tsx
@@ -22,7 +22,7 @@ export default function PaginationButton({
 }: PaginationButtonProps) {
   return (
     <button
-      className={`${className} flex size-[45px] items-center justify-center rounded-custom bg-background text-18 text-gray-400 shadow-custom dark:shadow-custom-dark mo:size-[40px]`}
+      className={`${className} flex size-[45px] items-center justify-center rounded-custom bg-background text-18 text-gray-400 shadow-custom dark:shadow-custom-dark mo:size-[40px] mo:text-12`}
       onClick={onClick}
       disabled={disabled}
     >
diff --git a/components/boards.page/BoardCard.tsx b/components/boards.page/BoardCard.tsx
index 94c85458..33ac48fd 100644
--- a/components/boards.page/BoardCard.tsx
+++ b/components/boards.page/BoardCard.tsx
@@ -43,7 +43,7 @@ export default function BoardCard({
         <h3 className="mb-[6px] truncate text-18sb mo:mb-0 mo:text-16sb">
           {title}
         </h3>
-        <div className="flex items-center gap-2 text-14 text-gray-300 mo:text-12">
+        <div className="flex items-center gap-2 text-14 text-gray-400 mo:text-12">
           <p>{name}</p>
           <span className="flex-1">
             {updatedAt && dateConversion(updatedAt)}
diff --git a/components/boards.page/BoardDetailCard.tsx b/components/boards.page/BoardDetailCard.tsx
index 479178fa..60e80254 100644
--- a/components/boards.page/BoardDetailCard.tsx
+++ b/components/boards.page/BoardDetailCard.tsx
@@ -108,7 +108,7 @@ export default function BoardDetailCard({
   };
 
   return (
-    <div className="rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5">
+    <div className="rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5 mo:pb-[14px]">
       <header className="mb-[38px] mo:mb-[15px] mo:pb-[11px] ta:mb-[30px] ta:pb-2 tamo:border-b">
         <div className="mb-[30px] flex items-center justify-between mo:mb-[14px]">
           <h1 className="w-full break-all text-32sb mo:text-24sb">
diff --git a/components/boards.page/ButtonIcon.tsx b/components/boards.page/ButtonIcon.tsx
index d2d6b3cb..128c0c04 100644
--- a/components/boards.page/ButtonIcon.tsx
+++ b/components/boards.page/ButtonIcon.tsx
@@ -18,11 +18,11 @@ export default function ButtonIcon({
   type,
 }: ButtonIconProps) {
   return (
-    <button onClick={onClick}>
+    <button onClick={onClick} className="mo:size-[22px]">
       <Image
         src={`/icon/icon-${type}.svg`}
         alt={type === 'write' ? '수정하기' : '삭제하기'}
-        className={`mo:size-5 ${classNames}`}
+        className={`mo:size-[22px] ${classNames}`}
         width={20}
         height={20}
       />
diff --git a/components/boards.page/Comment.tsx b/components/boards.page/Comment.tsx
index a0e8f3b8..6015b53a 100644
--- a/components/boards.page/Comment.tsx
+++ b/components/boards.page/Comment.tsx
@@ -73,11 +73,11 @@ export default function Comment({
         />
       </div>
       <div className="flex-1">
-        <div className="mb-2 flex items-center justify-between mo:mb-[6px]">
-          <span className="text-18sb">{name}</span>
+        <div className="mb-[6px] flex items-center justify-between">
+          <span className="text-18sb mo:text-16sb">{name}</span>
 
           {!isEditing && isOwner && (
-            <div className="flex items-center gap-5">
+            <div className="flex items-center gap-5 mo:gap-[15px]">
               <button onClick={handleUpdateClick}>
                 <Image
                   src="/icon/icon-write.svg"
diff --git a/components/boards.page/CommentForm.tsx b/components/boards.page/CommentForm.tsx
index a8e9697e..b1db8129 100644
--- a/components/boards.page/CommentForm.tsx
+++ b/components/boards.page/CommentForm.tsx
@@ -37,7 +37,7 @@ export default function CommentForm({
 
   return (
     <form
-      className="relative h-[133px] w-full rounded-custom bg-gray-100 px-[15px] py-[13px]"
+      className="relative h-[133px] w-full rounded-custom bg-gray-100 px-[15px] py-[13px] pb-[14px] mo:pl-5 mo:pr-[14px] mo:pt-[16px] ta:pb-[15px] ta:pl-5 ta:pt-5"
       onSubmit={onSubmit}
     >
       <textarea
@@ -47,10 +47,10 @@ export default function CommentForm({
         onChange={handleChange}
         placeholder="댓글을 입력해 주세요"
       />
-      <span className="absolute bottom-3 left-[15px] text-14 text-gray-400 mo:text-12">
+      <span className="absolute bottom-3 left-[15px] text-14 text-gray-300 mo:bottom-4 mo:left-5 mo:text-12">
         {length} / {MAX_LENGTH}
       </span>
-      <div className="absolute bottom-3 right-[15px] flex items-center gap-3 mo:gap-1">
+      <div className="absolute bottom-3 right-[15px] flex items-center gap-3 mo:bottom-[14px] mo:right-[14px] mo:gap-1">
         {update && (
           <Button
             variant="secondary"
diff --git a/pages/boards/[articleId].tsx b/pages/boards/[articleId].tsx
index e78a8cb7..ed3507cc 100644
--- a/pages/boards/[articleId].tsx
+++ b/pages/boards/[articleId].tsx
@@ -209,7 +209,7 @@ export default function BoardsDetails() {
       <Head>
         <title>{boardData.title} - 자유게시판 | wikied</title>
       </Head>
-      <main className="mt-20 py-[50px] mo:py-5 ta:py-10 tamo:mt-[60px]">
+      <main className="mt-20 py-[60px] mo:py-5 ta:py-10 tamo:mt-[60px]">
         <div className="container flex flex-col gap-[60px] ta:px-[60px] pc:max-w-[1095px] tamo:gap-10">
           <BoardDetailCard
             id={boardData.id}
diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx
index a765e876..970c05d1 100644
--- a/pages/boards/index.tsx
+++ b/pages/boards/index.tsx
@@ -157,7 +157,7 @@ export default function Boards({
         {/* 전체 게시글 */}
         <div className={`container ${pxTablet}`}>
           {/* search, dropdown bar */}
-          <div className="mb-5 flex items-center gap-5 mo:mb-[30px] mo:flex-wrap mo:gap-x-[15px]">
+          <div className="mb-5 flex items-center gap-5 mo:mb-4 mo:flex-wrap mo:gap-x-[15px]">
             <div className="flex-1 basis-8/12">
               <SearchInput
                 size="full"