refactor: add getClassesByLength

DDD-Community · Dec 16, 2024 · 402c6f4 · 402c6f4
1 parent 387f5fb
commit 402c6f4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 54 deletions.
diff --git a/...enshot/_components/ExportPolaroidList.tsx → ...]/screenshot/_components/PolaroidList.tsx b/...enshot/_components/ExportPolaroidList.tsx → ...]/screenshot/_components/PolaroidList.tsx
@@ -7,54 +7,44 @@ import PolaroidDescription from '@/components/Polaroid/Base/PolaroidDescription'
 import PolaroidMessage from '@/components/Polaroid/Base/PolaroidMessage'
 import PolaroidNickname from '@/components/Polaroid/Base/PolaroidNickname'
 import {
-  getFromClass,
-  getMessageClass,
-  getPaddingClass,
-  getWidthClass,
+  getClassesByLength,
   groupPolaroidsByLength,
 } from '@/app/board/[boardId]/screenshot/_components/utils'
 
-interface ExportPolaroidItemProps {
+interface PolaroidItemProps {
   polaroid: Polaroid
-  widthClass: string
-  paddingClass: string
-  messageClass: string
-  fromClass: string
+  length: number
 }
 
-const ExportPolaroidItem = ({
-  polaroid,
-  widthClass,
-  fromClass,
-  paddingClass,
-  messageClass,
-}: ExportPolaroidItemProps) => {
+const PolaroidItem = ({ polaroid, length }: PolaroidItemProps) => {
   const randomRotate =
     Math.random() > 0.5 ? Math.random() + 1 : Math.random() * -1 - 1
 
+  const classes = getClassesByLength(length)
+
   return (
     <div
       className="flex flex-col justify-center"
       style={{ rotate: `${randomRotate}deg` }}
     >
       <PolaroidFrame
-        className={widthClass}
+        className={classes.width}
         themaKey={polaroid.options.THEMA}
         fontKey={polaroid.options.FONT}
       >
         <div
-          className={paddingClass}
+          className={classes.padding}
           style={getPolaroidStyle(polaroid.options.THEMA)}
         >
           <PolaroidImage imageUrl={polaroid.imageUrl} />
         </div>
         <PolaroidDescription themaKey={polaroid.options.THEMA}>
           <PolaroidMessage
-            className={messageClass}
+            className={classes.message}
             message={polaroid.oneLineMessage}
           />
           <PolaroidNickname
-            className={fromClass}
+            className={classes.from}
             nickName={polaroid.nickname}
           />
         </PolaroidDescription>
@@ -63,7 +53,7 @@ const ExportPolaroidItem = ({
   )
 }
 
-const ExportPolaroidList = ({ polaroids }: { polaroids: Polaroid[] }) => {
+const PolaroidList = ({ polaroids }: { polaroids: Polaroid[] }) => {
   const { length } = polaroids
   const groupedPolaroids = groupPolaroidsByLength(polaroids)
 
@@ -76,13 +66,10 @@ const ExportPolaroidList = ({ polaroids }: { polaroids: Polaroid[] }) => {
             className="flex items-center justify-center gap-8"
           >
             {rows.map((polaroid: Polaroid) => (
-              <ExportPolaroidItem
+              <PolaroidItem
                 polaroid={polaroid}
                 key={polaroid.id}
-                widthClass={getWidthClass(length)}
-                paddingClass={getPaddingClass(length)}
-                messageClass={getMessageClass(length)}
-                fromClass={getFromClass(length)}
+                length={length}
               />
             ))}
           </div>
@@ -92,4 +79,4 @@ const ExportPolaroidList = ({ polaroids }: { polaroids: Polaroid[] }) => {
   )
 }
 
-export default ExportPolaroidList
+export default PolaroidList
diff --git a/src/app/board/[boardId]/screenshot/_components/utils.ts b/src/app/board/[boardId]/screenshot/_components/utils.ts
@@ -1,34 +1,21 @@
 import { Polaroid } from '@/types'
 
-export const getWidthClass = (length: number) => {
+export const getClassesByLength = (length: number) => {
   if (length > 6) {
-    return 'w-[280px]'
-  }
-  return 'w-[304px]'
-}
-
-export const getPaddingClass = (length: number) => {
-  if (length > 6) {
-    return 'px-[12px] pb-[12px] pt-[20px]'
+    return {
+      width: 'w-[280px]',
+      padding: 'px-[12px] pb-[12px] pt-[20px]',
+      message: 'h-[25px] text-[24px] leading-[26px]',
+      from: 'h-5 text-[20px] leading-[20px]',
+    }
   }
 
-  return 'px-[14px] pb-[14px] pt-[22px]'
-}
-
-export const getMessageClass = (length: number) => {
-  if (length > 6) {
-    return 'h-[25px] text-[24px] leading-[26px]'
+  return {
+    width: 'w-[304px]',
+    padding: 'px-[14px] pb-[14px] pt-[22px]',
+    message: 'h-[35px] text-[28px] leading-5',
+    from: 'h-6 text-[23px] leading-4',
   }
-
-  return 'h-[35px] text-[28px] leading-5'
-}
-
-export const getFromClass = (length: number) => {
-  if (length > 6) {
-    return 'h-5 text-[20px] leading-[20px]'
-  }
-
-  return 'h-6 text-[23px] leading-4'
 }
 
 export const groupPolaroidsByLength = (polaroids: Polaroid[]) => {

diff --git a/src/app/board/[boardId]/screenshot/page.tsx b/src/app/board/[boardId]/screenshot/page.tsx
@@ -4,7 +4,7 @@ import PinIcon from 'public/icons/PinIcon.svg'
 import PolaboLogo from 'public/images/polabo-logo.png'
 import Image from 'next/image'
 import { ensureArray } from '@/lib/utils/array'
-import ExportPolaroidList from '@/app/board/[boardId]/screenshot/_components/ExportPolaroidList'
+import PolaroidList from '@/app/board/[boardId]/screenshot/_components/PolaroidList'
 
 interface BoardScreenshotPageProps {
   params: {
@@ -41,7 +41,7 @@ const BoardScreenshotPage = async ({
           {board.title}
         </span>
       </div>
-      <ExportPolaroidList polaroids={selectedPolaroids} />
+      <PolaroidList polaroids={selectedPolaroids} />
       <div className="flex w-full items-center justify-center">
         <Image
           src={PolaboLogo}