refactor: 인기명언 컴포넌트 내 중복 컴포넌트 추상화

src/app/(quotes)/quotes/populars/layout.tsx

@@ -0,0 +1,17 @@
+import BackMoveButton from '@/components/UI/common/button/BackMoveButton'
+
+import { Metadata } from "next"
+
+export const metadata:Metadata= {
+    title:'실시간 인기명언',
+    description:'조회수가 높은 명언목록 100개를 실시간으로 조회하여 보여주는 페이지입니다.'
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="overflow-hidden min-h-[40vh]">
+      <BackMoveButton />
+      {children}
+    </section>
+  )
+}

src/app/(quotes)/quotes/populars/page.tsx

@@ -1,11 +1,10 @@
+"use client"
 
+import ReplaceMessageCard from "@/components/UI/common/card/ReplaceMessageCard"
 import PopularQuoteContainer from "@/components/UI/quote/container/PopularQuoteContainer"
-import { Metadata } from "next"
+import { useSwrFetch } from "@/utils/swr"
+import { toast } from "react-toastify"
 
-export const metadata:Metadata= {
-    title:'실시간 인기명언',
-    description:'조회수가 높은 명언목록 100개를 실시간으로 조회하여 보여주는 페이지입니다.'
-}
 
 export interface QuoteType {
     quote_id: number
@@ -17,8 +16,21 @@ export interface QuoteType {
 }
 export default function PopularQuotesPage() {
 
-    return (
-            <PopularQuoteContainer />
+    const url = '/api/quotes/populars'
+    const { data, mutate,isLoading, error } = useSwrFetch(url, 15000)
+    const { quotes } = data || { quotes: null }
 
+    async function onReload() {
+        toast.promise(mutate(), {
+            pending: '새로운 데이터를 불러오는 중입니다.',
+            success: '최신 데이터로 갱신되었습니다.',
+            error: '서버 문제로 데이터 조회에 실패하였습니다.'
+        })
+    }
+    if(isLoading) return <ReplaceMessageCard childern="데이터를 불러오는 중입니다."/>
+    if(error) return <ReplaceMessageCard childern="데이터를 불러오는 중 문제가 발생하였습니다."/>
+    if(quotes?.lengt<1) return <ReplaceMessageCard childern="조회된 데이터가 존재하지 않습니다."/>
+    return (
+            <PopularQuoteContainer onReload={onReload} quotes={quotes}/>
     )
 }

src/components/UI/ai-quote/ConversationList.tsx

@@ -29,6 +29,7 @@ export default function ConversationList({ isLoading, conversationList }: PropsT
         {conversationList.map((conversation) => {
           return (
             <ConversationCard
+              key={conversation.created_at}
               profileImage={profileImage}
               conversation={conversation}
               onLoadScrollEnd={onScrollEnd}

src/components/UI/ai-quote/ai.module.css

@@ -5,7 +5,6 @@
 }
 
 @keyframes appear {
-
     from {opacity: 0; transform: translateY(-10px);}
 
 }
@@ -32,7 +31,6 @@
     right:2em ;
     rotate: 170deg;
     top: 1.15em;
-
     border-top: 10px solid transparent;
     position: absolute;
     border-bottom: 10px solid transparent;

src/components/UI/detail-quote/RecommandQuoteCard.tsx

@@ -1,11 +1,11 @@
 import styles from './Quotes.module.css'
 
-import { ItemsType } from "@/types/items.types"
+import { QuoteType } from "@/types/items.types"
 import { hoverAnimation } from "@/utils/common-func"
 import { MouseEventHandler } from "react"
 
 interface PropsType {
-    quoteInfo : ItemsType
+    quoteInfo : QuoteType
     onClick: MouseEventHandler<HTMLLIElement>
 
  }

src/components/UI/detail-quote/RecommandQuoteList.tsx

@@ -4,11 +4,11 @@ import { useRouter } from 'next/navigation'
 
 import RecommandQuoteCard from './RecommandQuoteCard'
 
-import { ItemsType } from "@/types/items.types"
+import { QuoteType } from "@/types/items.types"
 
 
 interface PropsType {
-  recommandItems: ItemsType[]
+  recommandItems: QuoteType[]
 }
 export default function RecommandQuoteList({ recommandItems }: PropsType) {
   const { push } = useRouter()
@@ -22,7 +22,7 @@ export default function RecommandQuoteList({ recommandItems }: PropsType) {
       <h3 className="text-white sm:text-[1.5em] text-[1.25em] mt-[2em]  bg-[rgba(255,255,255,0.05)]">
         추천 명언(TOP 10)</h3>
       <ul className=' pt-[2em] flex flex-wrap w-full'>
-        {recommandItems.map((item: ItemsType) =>
+        {recommandItems.map((item: QuoteType) =>
           <RecommandQuoteCard
             onClick={() => onClickPageSwitchHandle(item.author, item.quote_id)}
             quoteInfo={item}

src/components/UI/quote/button/QuoteCardControlButtons.tsx

@@ -13,10 +13,10 @@ import { pageSwitch, quotesSelector } from '@/utils/common-func'
 import { HiDotsVertical, HiOutlineZoomIn } from 'react-icons/hi'
 import { HiOutlineBookmark, HiScissors, HiXMark } from 'react-icons/hi2'
 
-import type { ItemsType } from '@/types/items.types'
+import type {QuoteType } from '@/types/items.types'
 
 interface PropsType {
-  item: ItemsType
+  item: QuoteType
   index: number | 0
   isUserQuote?: boolean
 }

src/components/UI/quote/button/RefreshButton.tsx

@@ -12,7 +12,7 @@ export default function RefreshButton({ onClickReload }: PropsType) {
   return (
     <ControlButton
       ariaLabel="새로고침"
-      className={`${styles.refresh_btn} top-[11em] border p-[8px] text-[1.15em] absolute flex items-center right-[4%] text-white hover:cursor-pointer z-[20] hover:text-[#e3e3e0] `}
+      className={`${styles.refresh_btn} top-[12.25em]  left-[50%] translate-x-[-50%] border p-[5.8px] text-[1.15em] absolute flex items-center text-white hover:cursor-pointer z-[20] hover:text-[#e3e3e0] `}
       onClick={onClickReload}>
       <HiRefresh />
     </ControlButton>

src/components/UI/quote/button/UserQuoteCardBtnContainer.tsx

@@ -11,10 +11,10 @@ import { getUserEmail } from '@/utils/session-storage'
 import { deleteUserQuote } from '@/services/data/delete'
 import { HiOutlinePencil, HiOutlineTrash } from 'react-icons/hi2'
 
-import { ItemsType } from '@/types/items.types'
+import { type QuoteType } from '@/types/items.types'
 
 interface PropsType {
-  item: ItemsType
+  item: QuoteType
   index: number
   isMypage?: boolean
 }

src/components/UI/quote/card/QuoteCard.tsx

@@ -103,6 +103,7 @@ export default function QuoteCard({ item, index, ttsInfos, eventHandlerGroup, ch
   if (!item) return <ReplaceMessageCard childern="게시글이 존재하지 않습니다." />
   return (
     <li
+      key={quoteId}
       onTouchMove={hoverAnimationMobile}
       onMouseMove={hoverAnimation}
       onMouseEnter={eventHandlerGroup.onPrefetch}
@@ -111,7 +112,7 @@ export default function QuoteCard({ item, index, ttsInfos, eventHandlerGroup, ch
           setLiRefs(index, element)
         }
       }}
-      key={quoteId}
+
       className={`
       ${styles.card}
        ${isCardTheme

src/components/UI/quote/card/ZoomInQuoteCard.tsx

@@ -9,11 +9,11 @@ import Overlay from '../overlay/Overlay'
 import { gsap } from 'gsap/all'
 import { Draggable } from 'gsap/Draggable'
 
-import { ItemsType } from '@/types/items.types'
+import { type QuoteType } from '@/types/items.types'
 
 
 interface PropsType {
-  item: ItemsType
+  item: QuoteType
 }
 export default function ZommInQuoteCard({ item }: PropsType) {
   gsap.registerPlugin(Draggable)

src/components/UI/quote/container/PopularQuoteContainer.tsx

@@ -1,38 +1,26 @@
 "use client"
 
-import { useCardZoomInOutStore } from "@/store/store";
-import { useSwrFetch } from "@/utils/swr";
-
 import ZommInQuoteCard from "../card/ZoomInQuoteCard";
 import Title from "../../common/Title/Title";
-import ReplaceMessageCard from "../../common/card/ReplaceMessageCard";
-import PopularQuoteList from "../list/PopularQuoteList";
 import RefreshButton from '../button/RefreshButton';
+import { QuoteType } from "@/types/items.types";
+import { useCardZoomInOutStore } from "@/store/store";
+import QuoteContainer from "./QuoteContainer";
 
-import toast from "react-hot-toast";
-
-
-export default function PopularQuoteContainer() {
-
-    const url = '/api/quotes/populars'
-    const { data, mutate } = useSwrFetch(url, 15000)
-    const { quotes } = data || { quotes: null }
+interface PropsType {
+    quotes:QuoteType[]
+    onReload:()=>void
+}
 
-    async function reload() {
-        toast.promise(mutate(), {
-            loading: '새로운 데이터를 불러오는 중입니다.',
-            success: '최신 데이터로 갱신되었습니다.',
-            error: '서버 문제로 데이터 조회에 실패하였습니다.'
-        })
-    }
-    const cardIndex = useCardZoomInOutStore((state) => state.cardIndex)
+export default function PopularQuoteContainer({quotes, onReload}:PropsType) {
+
+    const {cardIndex} = useCardZoomInOutStore()
 
-    if (!quotes) return <ReplaceMessageCard childern='데이터를 불러오는 입니다..' />
     return (
         <>
-            <Title title={`실시간 인기명언`} current={quotes.length||0} total={quotes.length||0} />
-            <RefreshButton onClickReload={reload}/>
-            <PopularQuoteList quotes={quotes} />
+            <Title title={`실시간 인기명언`} current={quotes?.length||0} total={quotes?.length||0} />
+            <RefreshButton onClickReload={onReload}/>
+            <QuoteContainer items={quotes} />
             <ZommInQuoteCard item={quotes[cardIndex]} />
         </>
     )

src/components/UI/quote/container/QuoteContainer.tsx

@@ -10,6 +10,7 @@ import QuoteList from '../list/QuoteList'
 
 import { viewCounter } from '@/services/data/patch'
 import { toast } from 'react-toastify'
+import { QuoteType } from '@/types/items.types'
 
 
 export interface TtsType {
@@ -29,15 +30,7 @@ export interface Handlers {
 
 
 interface PropsType {
-  items: {
-    quote_id: number
-    author: string
-    views: number
-    quote: string
-    job: string
-    birth: string
-    intro: string
-  }[]
+  items: QuoteType[]
 }
 
 

src/types/items.types.ts

@@ -3,6 +3,7 @@ export interface QuoteType {
   quote_id: number
   author: string
   quote: string
+  views?:number
   job?: string
   intro?: string
   birth?: string