[FE-214]feat: Card컴포넌트화

src/components/RecordCard.tsx

@@ -0,0 +1,61 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import recordIcons from '@assets/record_icons'
+import { useCheckMobile } from '@hooks/useCheckMobile'
+import { useNavigate } from 'react-router-dom'
+
+interface CardProps {
+  title: string
+  recordId: number
+  colorName: string
+  iconName: string
+  commentCount: number
+  isDragging?: boolean
+  setIsDragging?: Dispatch<SetStateAction<boolean>>
+}
+
+function RecordCard({
+  recordId,
+  title,
+  colorName,
+  iconName,
+  commentCount,
+  isDragging,
+  setIsDragging,
+}: CardProps) {
+  const { isMobile } = useCheckMobile()
+  const ColorName = `bg-${colorName}`
+  const RecordIcon = recordIcons[`${iconName}`]
+  const navigate = useNavigate()
+
+  const handleClickRecord = (recordId: number) => {
+    if (isDragging && setIsDragging) {
+      setIsDragging(false)
+      return
+    }
+    navigate(`/record/${recordId}`)
+  }
+  return (
+    <div
+      key={recordId}
+      className={`h-full w-[164px] shrink-0 rounded-2xl ${ColorName} flex cursor-pointer flex-col items-center justify-center`}
+      onClick={() => handleClickRecord(recordId)}
+    >
+      <RecordIcon width={100} height={100} />
+      <div className="mt-4 text-sm font-semibold text-grey-10">
+        {!isMobile && title.length > 6 ? (
+          <>
+            <p>{title.substring(0, 6)}</p>
+            <p className="text-center">
+              {title.substring(6).replaceAll('(^\\p{Z}+|\\p{Z}+$)', '')}
+            </p>
+          </>
+        ) : (
+          title
+        )}
+      </div>
+      <p className="mt-2.5 text-xs leading-none">댓글 {commentCount}개</p>
+    </div>
+  )
+}
+
+export default RecordCard

src/pages/Main/TogetherSlider.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import { IRandomRecordData } from 'types/recordData'
-import recordIcons from '@assets/record_icons'
-import { useNavigate } from 'react-router-dom'
 import useSwipe from '@hooks/useSwipe'
 import { parentCategoryID } from 'types/category'
-import { useCheckMobile } from '@hooks/useCheckMobile'
+import RecordCard from '@components/RecordCard'
 
 export default function TogetherSlider({
   randomRecordData,
@@ -13,23 +11,12 @@ export default function TogetherSlider({
   randomRecordData: IRandomRecordData[] | null
   parentCategoryId: parentCategoryID
 }) {
-  const navigate = useNavigate()
-  const { isMobile } = useCheckMobile()
-
   const dragRef = useRef<HTMLDivElement | null>(
     null
   ) as React.MutableRefObject<HTMLDivElement>
 
   const { handleMouseDown, isDragging, setIsDragging } = useSwipe(dragRef)
 
-  const handleClickRecord = (recordId: number) => {
-    if (isDragging) {
-      setIsDragging(false)
-      return
-    }
-    navigate(`/record/${recordId}`)
-  }
-
   useEffect(() => {
     dragRef.current.scrollLeft = 0
   }, [parentCategoryId])
@@ -44,33 +31,17 @@ export default function TogetherSlider({
     >
       {randomRecordData !== null &&
         randomRecordData.map((item) => {
-          const colorName = `bg-${item.colorName}`
-          const RecordIcon = recordIcons[`${item.iconName}`]
           return (
-            <div
+            <RecordCard
               key={item.recordId}
-              className={`h-full w-[164px] shrink-0 rounded-2xl ${colorName} flex cursor-pointer flex-col items-center justify-center`}
-              onClick={() => handleClickRecord(item.recordId)}
-            >
-              <RecordIcon width={100} height={100} />
-              <div className="mt-4 text-sm font-semibold text-grey-10">
-                {!isMobile && item.title.length > 6 ? (
-                  <>
-                    <p>{item.title.substring(0, 6)}</p>
-                    <p className="text-center">
-                      {item.title
-                        .substring(6)
-                        .replaceAll('(^\\p{Z}+|\\p{Z}+$)', '')}
-                    </p>
-                  </>
-                ) : (
-                  item.title
-                )}
-              </div>
-              <p className="mt-2.5 text-xs leading-none">
-                댓글 {item.commentCount}개
-              </p>
-            </div>
+              isDragging={isDragging}
+              setIsDragging={setIsDragging}
+              title={item.title}
+              colorName={item.colorName}
+              iconName={item.iconName}
+              commentCount={item.commentCount}
+              recordId={item.recordId}
+            />
           )
         })}
     </div>

src/types/recordData.ts

@@ -17,14 +17,25 @@ export interface IMemoryRecordList {
   totalPage: number
 }
 
-export interface IMemoryRecord {
+interface RecordCategory {
   recordId: number
   title: string
   iconName: string
   iconColor: string
+}
+
+export interface IMemoryRecord extends RecordCategory {
   memoryRecordComments: IRecordMemoryComment[]
 }
 
+export interface CategoryCard {
+  colorName: string
+  commentCount: number
+  iconName: string
+  recordId: number
+  title: string
+}
+
 export interface IRecordMemoryComment {
   commentId: number
   content: string