FE-38 ♻️ 내 에피그램 목록 조회 코드 리팩토링

epigram5-9 · Jul 30, 2024 · 9040e42 · 9040e42
1 parent cb04816
commit 9040e42
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 92 deletions.
diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx
@@ -2,32 +2,14 @@ import { useEffect, useState } from 'react';
 import useGetEpigrams from '@/hooks/useGetEpigrams';
 import MyEpigrams from '@/user/ui-content/MyEpigrams';
 import Image from 'next/image';
-import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
-import NONE_EPI from '../../../public/none-epi.svg';
+import { EpigramsResponse } from '@/types/epigram.types';
 import spinner from '../../../public/spinner.svg';
 
 interface MyContentProps {
   userId: number;
 }
 
-interface Epigram {
-  writerId: number;
-  id: number;
-  likeCount: number;
-  tags: { id: number; name: string }[];
-  referenceUrl: string;
-  referenceTitle: string;
-  author: string;
-  content: string;
-}
-
-interface EpigramsResponse {
-  totalCount: number;
-  nextCursor: number | null;
-  list: Epigram[];
-}
-
 export default function MyContent({ userId }: MyContentProps) {
   const limit = 3;
   const [cursor, setCursor] = useState(0);
@@ -53,7 +35,7 @@ export default function MyContent({ userId }: MyContentProps) {
     }
   }, [data]);
 
-  const handleMoreLoad = () => {
+  const handleMoreEpigramLoad = () => {
     if (epigrams.nextCursor !== null) {
       setCursor(epigrams.nextCursor);
       setIsLoadingMore(true);
@@ -75,45 +57,15 @@ export default function MyContent({ userId }: MyContentProps) {
     <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] gap-12'>
       <div className='inline-flex gap-6'>
         <button type='button' className='text-black-600 font-semibold text-2xl'>
-          내 에피그램({epigrams?.totalCount})
+          내 에피그램({epigrams.totalCount})
         </button>
         <button type='button' className='text-neutral-400 font-semibold text-2xl'>
           내 댓글(0)
         </button>
       </div>
       <div className='w-full py-[36px]'>
         <div className='flex flex-col gap-[48px]'>
-          {epigrams.totalCount > 0 ? (
-            <>
-              {epigrams.list.map((epi) => {
-                const epigram = {
-                  epigramId: epi.id,
-                  content: epi.content,
-                  author: epi.author,
-                  tags: epi.tags,
-                };
-                return <MyEpigrams key={epi.id} epigram={epigram} />;
-              })}
-              {epigrams.totalCount > epigrams.list.length && (
-                <div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
-                  <Button className='text-slate-400 border border-slate-300 rounded-[100px] py-[12px] px-[20px]' onClick={handleMoreLoad}>
-                    + 더보기
-                  </Button>
-                </div>
-              )}
-            </>
-          ) : (
-            <div className='flex flex-col gap-4 justify-center items-center'>
-              <Image src={NONE_EPI} alt='돋보기아이콘' width={144} height={144} />
-              <div className='flex flex-col gap-[48px] justify-center items-center'>
-                <div className='text-center'>
-                  <p>아직 작성한 에피그램이 없어요!</p>
-                  <p>에피그램을 작성하고 감정을 공유해보세요.</p>
-                </div>
-                <Button className='px-[18px] py-3 rounded-[100px] border border-neutral-200 justify-center items-center gap-1'>에피그램 만들기</Button>
-              </div>
-            </div>
-          )}
+          <MyEpigrams epigrams={epigrams.list} totalCount={epigrams.totalCount} onMoreEpigramLoad={handleMoreEpigramLoad} />
           {isLoadingMore && (
             <div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
               <Image src={spinner} alt='로딩중' width={200} height={200} />

diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts
@@ -22,3 +22,20 @@ export interface PatchCommentRequest {
   isPrivate: boolean;
   content: string;
 }
+
+export interface Epigram {
+  writerId: number;
+  id: number;
+  likeCount: number;
+  tags: { id: number; name: string }[];
+  referenceUrl: string;
+  referenceTitle: string;
+  author: string;
+  content: string;
+}
+
+export interface EpigramsResponse {
+  totalCount: number;
+  nextCursor: number | null;
+  list: Epigram[];
+}
diff --git a/src/user/ui-content/MyEpigrams.tsx b/src/user/ui-content/MyEpigrams.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button';
+import { Epigram } from '@/types/epigram.types';
+import NONE_EPI from '../../../public/none-epi.svg';
 
-// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
-// xs ~ 2xl 으로 정의했습니다.
 const sizeStyles = {
   xs: 'w-[286px] max-h-[132px]',
   sm: 'sm:w-[312px] sm:max-h-[152px]',
@@ -18,50 +20,63 @@ const textSizeStyles = {
   xl: 'xl:text-2xl',
 };
 
-interface Tag {
-  name: string;
-  id: number;
-}
-
 interface MyEpigramProps {
-  epigram: {
-    epigramId: number;
-    content: string;
-    author: string;
-    tags: Tag[];
-  };
+  epigrams: Epigram[];
+  totalCount: number;
+  onMoreEpigramLoad: () => void;
 }
 
-function MyEpigrams({ epigram }: MyEpigramProps) {
-  return (
-    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl}}`}>
-      <div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
-        {/* eslint-disable-next-line */}
-        <div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
-        <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
-          <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
-            <div
-              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl}} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
-            >
-              {epigram.content}
-            </div>
-            <div
-              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl}} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
-            >
-              - {epigram.author} -
+function MyEpigrams({ epigrams, totalCount, onMoreEpigramLoad }: MyEpigramProps) {
+  return totalCount > 0 ? (
+    <div className='flex flex-col gap-[48px]'>
+      {epigrams.map((epigram) => (
+        <div key={epigram.id} className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl}`}>
+          <div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
+            <div className='absolute inset-0 bg-stripes w-full h-full'></div>
+            <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
+              <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
+                <div
+                  className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
+                >
+                  {epigram.content}
+                </div>
+                <div
+                  className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
+                >
+                  - {epigram.author} -
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div className='justify-start items-start gap-2 inline-flex'>
-        {epigram.tags.map((tag) => (
-          <div
-            key={tag.id}
-            className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl}]} text-slate-400 font-normal font-iropkeBatang leading-normal`}
-          >
-            #{tag.name}
+          <div className='justify-start items-start gap-2 inline-flex'>
+            {epigram.tags.map((tag) => (
+              <div
+                key={tag.id}
+                className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+              >
+                #{tag.name}
+              </div>
+            ))}
           </div>
-        ))}
+        </div>
+      ))}
+      {totalCount > epigrams.length && (
+        <div className='w-full flex items-center justify-center'>
+          <Button className='text-slate-400 border border-slate-300 rounded-[100px] py-[12px] px-[20px]' onClick={onMoreEpigramLoad}>
+            + 더보기
+          </Button>
+        </div>
+      )}
+    </div>
+  ) : (
+    <div className='flex flex-col gap-4 justify-center items-center'>
+      <Image src={NONE_EPI} alt='돋보기아이콘' width={144} height={144} />
+      <div className='flex flex-col gap-[48px] justify-center items-center'>
+        <div className='text-center'>
+          <p>아직 작성한 에피그램이 없어요!</p>
+          <p>에피그램을 작성하고 감정을 공유해보세요.</p>
+        </div>
+        <Button className='px-[18px] py-3 rounded-[100px] border border-neutral-200 justify-center items-center gap-1'>에피그램 만들기</Button>
       </div>
     </div>
   );