Feature/#263 boards page boards components style 디테일 체크

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}
     >

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)}

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">

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}
       />

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"

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,9 +33,11 @@ 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]"
+      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
@@ -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-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">
+      <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" 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>

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}

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"