feat: 배경 등록 버그 수정

Author: Gwonyeong

next.config.ts

@@ -19,9 +19,9 @@ const nextConfig: NextConfig = {
     ],
   },
   /* config options here */
-  api: {
-    bodyParser: {
-      sizeLimit: "10mb", // 기본값 1mb에서 10mb로 증가
+  experimental: {
+    serverActions: {
+      bodySizeLimit: "10mb",
     },
   },
   webpack: (config) => {

src/(actions)/builder/page/page.ts

@@ -56,16 +56,14 @@ export const updatePageCall = async (
   if (backgroundImage) {
     formData.append("image", backgroundImage);
   }
-  await fetchIncetance(
+  const res = await fetchIncetance(
     `${process.env.NEXT_PUBLIC_BACKEND_API}${update.path(gameId, pageId)}`,
     {
       method: update.METADATA.method,
-      // headers: {
-      //   "Content-Type": "multipart/form-data",
-      // },
       body: formData,
     }
   );
+  return await res.json();
 };
 
 export const getAllGameCall = async (

src/(actions)/fetch.ts

@@ -13,12 +13,12 @@ export const fetchIncetance = async (url: string, options: RequestInit) => {
       ...options.headers,
     },
   });
+
   if (!response.ok) {
     const error: {
       message: string;
       statusCode: number;
     } = (await response.json()).message;
-
     throw new Error(error.message);
   }
 

src/app/(builder)/builder/game/(page)/[gameId]/page/[pageId]/page.tsx

@@ -359,6 +359,11 @@ export default function BuilderGamePage() {
                 alt="background"
                 fill
                 style={{ objectFit: "cover" }}
+                onClick={(e) => {
+                  if (e.target !== e.currentTarget) return;
+
+                  setActiveBlock(null);
+                }}
               />
             </div>
           </div>
@@ -442,7 +447,10 @@ export default function BuilderGamePage() {
           ))}
         </div>
         {/* 선택지 */}
-        <div id="choice-container" className="flex flex-col gap-2">
+        <div
+          id="choice-container"
+          className="flex flex-col gap-2 mt-2 ml-[20px] mr-[20px]"
+        >
           {page?.choices.map((choice, idx) => {
             const isActive =
               activeBlock?.idx === idx && activeBlock?.type === "choice";

src/app/(main)/main/builder/new-game/layout.tsx

@@ -4,9 +4,5 @@ import React from "react";
 import MarginWrapper from "../../_component/MarginWrapper";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <MarginWrapper>
-      <div className="flex flex-col w-full">{children}</div>
-    </MarginWrapper>
-  );
+  return <div className="flex flex-col w-full">{children}</div>;
 }

src/app/(main)/main/game/page.tsx

@@ -8,6 +8,7 @@ import MarginWrapper from "../_component/MarginWrapper";
 import W600Wrapper from "../_component/W600Wrapper";
 
 export default async function GamePage() {
+  console.log("렌더링");
   return (
     <div className="flex flex-col w-full items-center">
       <MarginWrapper>

src/app/(main)/main/my/_components/ContinuedGames.tsx

@@ -42,15 +42,15 @@ export default function ContinuedGames() {
           </Link>
         )}
       </div>
-      <div className="flex flex-row  h-[244px] gap-2 flex-nowrap  overflow-x-auto overflow-y-hidden mt-[12px]">
+      <div className="flex flex-row   gap-2 flex-nowrap  overflow-x-auto overflow-y-hidden mt-[12px]">
         {continuedGameList.length === 0 ? (
           <div className="flex text-gray-400 body-sb w-full h-full justify-center items-center ">
             진행중인 게임이 없어요
           </div>
         ) : (
           continuedGameList.map((game) => (
             <div
-              className="flex min-w-[170px]  w-[170px] h-[173px] "
+              className="flex min-w-[170px]  w-[170px]  "
               key={game.game.id.toString()}
             >
               <ContinuedGamesCard game={game} />

src/app/(main)/main/my/_components/ContinuedGames/Card.tsx

@@ -19,32 +19,36 @@ export default function ContinuedGamesCard({ game }: { game: any }) {
     setIsOpen(false);
   };
   return (
-    <div className="w-full  h-full   flex flex-col" onClick={handleClick}>
+    <>
       {isOpen && (
         <GameBottomSheet gameId={game.game.id} handleClose={handleClose} />
       )}
-      <>
-        <Image
-          className="w-full  aspect-square object-cover rounded-[8px]"
-          src={game.game.thumbnail.url ?? ""}
-          alt="game"
-          layout="responsive"
-          width={100}
-          height={100}
-        />
-      </>
+      <div className="w-full  h-full   flex flex-col" onClick={handleClick}>
+        <>
+          <Image
+            className="w-full  aspect-square object-cover rounded-[8px]"
+            src={game.game.thumbnail.url ?? ""}
+            alt="game"
+            layout="responsive"
+            width={100}
+            height={100}
+          />
+        </>
 
-      <div className="flex  flex-col mt-[8px]">
-        <span className="caption-rg text-gray-100 mt-[8px]">
-          {convertDate(game.play.createdAt)}
-        </span>
-        <div className="headline-md text-white mt-[2px]">{game.game.title}</div>
-        <div className="flex flex-row items-center mt-[2px]">
-          <div className="caption-rg text-green-500 line-clamp-1 mt-[2px]">
-            {game.play.page.title}
+        <div className="flex  flex-col mt-[8px]">
+          <span className="caption-rg text-gray-100 mt-[8px]">
+            {convertDate(game.play.createdAt)}
+          </span>
+          <div className="headline-md text-white mt-[2px] line-clamp-1">
+            {game.game.title}
+          </div>
+          <div className="flex flex-row items-center mt-[2px]">
+            <div className="caption-rg text-green-500 line-clamp-1 mt-[2px]">
+              {game.play.page.title}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

src/common/Game/RowCardList/RowCardList.tsx

@@ -21,9 +21,10 @@ export default function RowCardList({
         {gameListEntity.gameList.map((card, idx) => {
           return (
             <div
-              className={`flex ${
-                idx === 0 ? "ml-[20px]" : ""
-              } min-w-[171px] w-[171px] `}
+              className={`flex ${idx === 0 ? "ml-[20px]" : ""} ${
+                idx === gameListEntity.gameList.length - 1 ? "mr-[20px]" : ""
+              }
+                min-w-[171px] w-[171px] `}
               key={card.game.id}
             >
               <Card