Feature/#221 QA - 게시글 등록 위키 목록

components/FullCoverSpinner.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import Spinner from './Spinner';
+
+interface Props {
+  children?: ReactNode;
+}
+
+export default function FullCoverSpinner({ children }: Props) {
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-2 bg-[#ffffff66]">
+      <Spinner />
+      <span className="text-14sb text-gray-400">{children}</span>
+    </div>
+  );
+}

components/TextEditor.tsx

@@ -27,7 +27,7 @@ export default function TextEditor({ value = '', onChange }: Props) {
         ['bold', 'italic', 'underline'],
         [{ align: null }, { align: 'center' }, { align: 'right' }],
         [{ list: 'ordered' }, { list: 'bullet' }],
-        ['blockquote', 'link', 'image'],
+        ['blockquote', 'link'],
       ],
     },
   };

components/wikiList.page/ListItem.tsx

@@ -42,14 +42,16 @@ export default function ListItem({ data, onSnackBarClick }: ListItemProps) {
         href={`/wiki/${code}`}
         className="flex gap-8 rounded-full px-9 py-6 mo:gap-5 mo:px-6 mo:py-5"
       >
-        <Image
-          src={image || baseProfileImage}
-          className="size-[85px] self-start rounded-full mo:size-[60px]"
-          width={85}
-          height={85}
-          alt={`${name} 프로필 이미지`}
-          onError={handleError}
-        />
+        <figure className="size-[85px] self-start overflow-hidden rounded-full mo:size-[60px]">
+          <Image
+            src={image || baseProfileImage}
+            className="size-full object-cover"
+            width={85}
+            height={85}
+            alt={`${name} 프로필 이미지`}
+            onError={handleError}
+          />
+        </figure>
         <div className="mr-auto mo:mb-10">
           <h2 className="mb-[14px] text-24sb mo:mb-[10px] mo:text-20sb">
             {name}

pages/addboard/index.tsx

@@ -24,6 +24,7 @@ export default function Addboard() {
   const [content, setContent] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [imageFile, setImageFile] = useState<File | null>(null);
 
   const router = useRouter();
@@ -58,7 +59,8 @@ export default function Addboard() {
         '게시물이 등록되었습니다. 작성된 게시물로 이동 됩니다.',
         async () => {
           await router.push('/boards/' + data.id);
-        }
+        },
+        1000
       );
     },
   });
@@ -86,6 +88,7 @@ export default function Addboard() {
   // 작성 폼 서브밋 함수
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setIsLoading(true);
 
     if (imageFile) {
       formData.append('image', imageFile);
@@ -109,10 +112,11 @@ export default function Addboard() {
               </h1>
               <Button
                 form="write-form"
-                className="w-[140px] mo:w-auto"
+                className="min-w-[140px] mo:w-auto"
                 disabled={submitDisabled}
+                isLoading={isLoading}
               >
-                등록하기
+                {isLoading ? '등록중 입니다.' : '등록하기'}
               </Button>
             </header>
 

pages/wikilist/index.tsx

@@ -11,6 +11,7 @@ import Pagination from '@/components/Pagination/Pagination';
 import SearchInput from '@/components/SearchInput';
 import useSnackBar from '@/hooks/useSanckBar';
 import SnackBar from '@/components/SnackBar';
+import FullCoverSpinner from '@/components/FullCoverSpinner';
 
 // 위키 목록 페이지 프로필 데이터 타입
 export interface ProfileProps {
@@ -112,8 +113,8 @@ export default function WikiList() {
       });
   }, [page, router]);
 
-  // TODO: 로딩 스피너 & 에러 페이지 컴포넌트 추가
-  if (isPending) return <div>Loading...</div>;
+  if (isPending)
+    return <FullCoverSpinner>위키 목록 가져오는 중...</FullCoverSpinner>;
 
   // TODO: 에러 컴포넌트 추가
   if (error) return <div>Error: {error.message}</div>;
@@ -124,10 +125,10 @@ export default function WikiList() {
         <title>위키 목록{name && ` - 검색어 '${name}'`} | wikied</title>
       </Head>
 
-      <div className="container pb-5 pt-20 mo:pt-10">
-        <div className="mt-20 px-20 mo:px-0">
+      <div className="container pb-5 pt-20 mo:pt-10 ta:pt-[60px]">
+        <div className="mt-20 px-20 mo:mt-10 ta:mt-[60px] tamo:px-0">
           <SearchInput
-            size="large"
+            size="full"
             value={searchValue}
             onChange={handleChange}
             onSubmit={handleSubmit}
@@ -154,7 +155,7 @@ export default function WikiList() {
           )}
 
           {hasList && (
-            <div className="my-[120px] flex justify-center mo:my-10">
+            <div className="my-[120px] flex justify-center mo:my-10 ta:my-20">
               <Pagination
                 totalCount={totalCount}
                 currentPage={Number(page)}

tailwind.config.ts

@@ -123,7 +123,7 @@ export default {
       mo: { max: '743px' },
       ta: { min: '744px', max: '1023px' },
       pc: { min: '1024px' },
-      tamo: { max: '1024px' },
+      tamo: { max: '1023px' },
     },
   },
   plugins: [],