fix : 정원카드 레이아웃 수정

dnd-side-project · Mar 5, 2024 · 7ca5ba0 · 7ca5ba0
1 parent 5192284
commit 7ca5ba0
Showing 1 changed file with 57 additions and 82 deletions.
diff --git a/pages/garden/index.tsx b/pages/garden/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 import BaseLayout from '@/layout/base-layout'
 import withAuth from '@/layout/HOC/with-auth'
 import Button from '@/components/button'
@@ -67,7 +67,10 @@ const Pages = () => {
       setFlippedCardIndex(index)
     }
   }
-
+  const totalCount = useMemo(
+    () => surveys?.pages[0].data.totalCount ?? 0,
+    [surveys],
+  )
   return (
     <BaseLayout
       className="bg-gray-gray50"
@@ -90,7 +93,9 @@ const Pages = () => {
           </h3>
         </div>
         <Link href="/dashboard">
-          <button className="!w-fit px-4 py-3 rounded-md text-body3-medium  text-main-green-green800 bg-main-green-green50 ">내 결과 보기</button>
+          <button className="!w-fit px-4 py-3 rounded-md text-body3-medium  text-main-green-green800 bg-main-green-green50 ">
+            내 결과 보기
+          </button>
         </Link>
       </div>
       <section className="bg-white">
@@ -105,89 +110,59 @@ const Pages = () => {
               <motion.div
                 {...fadeInProps}
                 transition={{ staggerChildren: 0.03 }}
-                className="grid grid-cols-3 gap-2 "
+                className="grid grid-cols-3 gap-2 w-full px-5 "
               >
                 {surveys?.pages.map((page, pageNo) =>
-                  pageNo === 0 && page.data.content.length < 21 ? (
-                    [
-                      ...page.data.content,
-                      ...Array.from(
-                        { length: 21 - page.data.content.length },
-                        (v) => null,
-                      ),
-                    ].map((item, index) =>
-                      item ? (
-                        <TreeCard
-                          senderName={item.senderName}
-                          key={`${item.surveyId}-${(pageNo + 1) * (index + 1)}`}
-                          id={item.surveyId}
-                          period={item.period}
-                          relation={item.relation}
-                          isFlipped={index === flippedCardIndex}
-                          onClick={() => handleCardClick(index)}
+                  page.data.content.map((item, index) => (
+                    <TreeCard
+                      senderName={item.senderName}
+                      key={`${item.surveyId}-${(pageNo + 1) * (index + 1)}`}
+                      id={item.surveyId}
+                      period={item.period}
+                      relation={item.relation}
+                      isFlipped={index === flippedCardIndex}
+                      onClick={() => handleCardClick(index)}
+                    />
+                  )),
+                )}
+                {Array.from(
+                  { length: Math.abs((totalCount % 3) - 3) + 3 },
+                  () => null,
+                ).map((_, index) => (
+                  <motion.div
+                    variants={fadeInProps.variants}
+                    key={`empty-${(index + 1) * (index + 1)}`}
+                  >
+                    <div className="flex justify-center items-center rounded w-[104px] h-[110px] bg-gray-gray50 border-dashed border ">
+                      <svg
+                        width="34"
+                        height="34"
+                        viewBox="0 0 34 34"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M8.36523 17.5469C8.55024 19.222 9.87772 22.8973 13.7077 24.1978C17.5376 25.4983 20.8343 24.6076 22.0039 23.9997"
+                          stroke="#D9D9D9"
+                          strokeLinecap="round"
                         />
-                      ) : (
-                        <motion.div
-                          variants={fadeInProps.variants}
-                          key={`empty-${(pageNo + 1) * (index + 1)}`}
-                        >
-                          <div className="flex justify-center items-center rounded w-[104px] h-[110px] bg-gray-gray50 border-dashed border ">
-                            <svg
-                              width="34"
-                              height="34"
-                              viewBox="0 0 34 34"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M8.36523 17.5469C8.55024 19.222 9.87772 22.8973 13.7077 24.1978C17.5376 25.4983 20.8343 24.6076 22.0039 23.9997"
-                                stroke="#D9D9D9"
-                                strokeLinecap="round"
-                              />
-                              <circle
-                                cx="17"
-                                cy="17"
-                                r="16.5"
-                                stroke="#D9D9D9"
-                              />
-                              <circle
-                                cx="14.8053"
-                                cy="12.6139"
-                                r="1.64516"
-                                fill="#D9D9D9"
-                              />
-                              <circle
-                                cx="21.3893"
-                                cy="14.8053"
-                                r="1.64516"
-                                fill="#D9D9D9"
-                              />
-                            </svg>
-                          </div>
-                        </motion.div>
-                      ),
-                    )
-                  ) : (
-                    <motion.div
-                      key={`empty-${pageNo + 1}-container`}
-                      {...fadeInProps}
-                      transition={{ staggerChildren: 0.08 }}
-                      className="grid grid-cols-3 gap-2 "
-                    >
-                      {page.data.content.map((item, index) => (
-                        <TreeCard
-                          senderName={item.senderName}
-                          key={`${item.surveyId}-${(pageNo + 1) * (index + 1)}`}
-                          id={item.surveyId}
-                          period={item.period}
-                          relation={item.relation}
-                          isFlipped={index === flippedCardIndex}
-                          onClick={() => handleCardClick(index)}
+                        <circle cx="17" cy="17" r="16.5" stroke="#D9D9D9" />
+                        <circle
+                          cx="14.8053"
+                          cy="12.6139"
+                          r="1.64516"
+                          fill="#D9D9D9"
                         />
-                      ))}
-                    </motion.div>
-                  ),
-                )}
+                        <circle
+                          cx="21.3893"
+                          cy="14.8053"
+                          r="1.64516"
+                          fill="#D9D9D9"
+                        />
+                      </svg>
+                    </div>
+                  </motion.div>
+                ))}
               </motion.div>
             ) : (
               <motion.div