From 6a40b3e229ad367cad1005127815416f4b4103e0 Mon Sep 17 00:00:00 2001
From: Chaemin-L <chaem12@kookmin.ac.kr>
Date: Mon, 29 Jan 2024 10:57:50 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=B9=AD=EC=B0=AC=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/comment/comment-form.tsx              | 40 ++++-----
 src/app/comment/comment-up.tsx                | 87 +++++++++----------
 src/components/app/comment/background.tsx     |  8 ++
 src/components/app/comment/content-form.tsx   |  2 +-
 .../app/comment/layered-background.tsx        | 16 ----
 src/components/app/comment/required-form.tsx  |  8 +-
 6 files changed, 78 insertions(+), 83 deletions(-)
 create mode 100644 src/components/app/comment/background.tsx
 delete mode 100644 src/components/app/comment/layered-background.tsx

diff --git a/src/app/comment/comment-form.tsx b/src/app/comment/comment-form.tsx
index 301ddb18..ce582592 100644
--- a/src/app/comment/comment-form.tsx
+++ b/src/app/comment/comment-form.tsx
@@ -5,8 +5,8 @@ import { NotFound } from "@/app/error/404";
 import CloseSVG from "@/assets/icons/close.svg?react";
 import Marble1SVG from "@/assets/imgs/marble1.svg?react";
 import Marble2SVG from "@/assets/imgs/marble2.svg?react";
+import { Background } from "@/components/app/comment/background";
 import { ContentForm } from "@/components/app/comment/content-form";
-import { LayeredBackground } from "@/components/app/comment/layered-background";
 import { RequiredForm } from "@/components/app/comment/required-form";
 import { BlurredAppbar } from "@/components/common/blurred-appbar";
 import { ButtonProvider } from "@/components/common/button-provider";
@@ -91,6 +91,7 @@ export const CommentFormPage = () => {
 
   return (
     <DefaultLayout
+      className="overflow-hidden"
       appbar={
         !openCrop && (
           <BlurredAppbar
@@ -100,6 +101,7 @@ export const CommentFormPage = () => {
         )
       }
     >
+      <Background />
       {openCrop ? (
         <ImageCropper
           src={image}
@@ -108,26 +110,24 @@ export const CommentFormPage = () => {
         />
       ) : (
         <>
-          <LayeredBackground>
-            <Header
-              text={`{${data.keyword}} 순간을 올린\\n {${data.userNickname}} 님에게 칭찬 남기기`}
-            />
-            <div className="absolute right-5 top-[70px]">
-              {{ 0: <Marble1SVG />, 1: <Marble2SVG /> }[marbleIdx]}
-            </div>
+          <Header
+            text={`{${data.keyword}} 순간을 올린\\n {${data.userNickname}} 님에게 칭찬 남기기`}
+          />
+          <div className="absolute right-5 top-[70px]">
+            {{ 0: <Marble1SVG />, 1: <Marble2SVG /> }[marbleIdx]}
+          </div>
 
-            <div className="flex w-full flex-col gap-7">
-              <RequiredForm
-                nickname={nickname}
-                setNickname={setNickname}
-                image={image}
-                changeImage={changeImage}
-              />
-              {required && (
-                <ContentForm content={content} setContent={setContent} />
-              )}
-            </div>
-          </LayeredBackground>
+          <div className="flex w-full flex-col gap-7">
+            <RequiredForm
+              nickname={nickname}
+              setNickname={setNickname}
+              image={image}
+              changeImage={changeImage}
+            />
+            {required && (
+              <ContentForm content={content} setContent={setContent} />
+            )}
+          </div>
 
           <ButtonProvider isFull={true}>
             <ButtonProvider.Primary
diff --git a/src/app/comment/comment-up.tsx b/src/app/comment/comment-up.tsx
index 0f78ea70..23643286 100644
--- a/src/app/comment/comment-up.tsx
+++ b/src/app/comment/comment-up.tsx
@@ -13,8 +13,8 @@ import { CommentDoneView } from "./comment-done";
 import { NotFound } from "@/app/error/404";
 import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
 import Marbles from "@/assets/imgs/marbles.svg?react";
+import { Background } from "@/components/app/comment/background";
 import { DraggableMarble } from "@/components/app/comment/draggable-marble";
-import { LayeredBackground } from "@/components/app/comment/layered-background";
 import { Arrow } from "@/components/common/arrow";
 import { Header } from "@/components/common/header";
 import { DefaultLayout } from "@/components/layout/default";
@@ -155,49 +155,46 @@ export const CommentUpPage = () => {
   };
 
   return (
-    <>
-      <DefaultLayout
-        className="overflow-hidden"
-        appbar={
-          <div className=" flex h-[64px] w-full px-5 py-2.5">
-            <button
-              className={clsx("z-20", "hidden" && isReached)}
-              onClick={() => navigate(-1)}
-            >
-              <ChevronLeftEdgeSVG />
-            </button>
-          </div>
-        }
-      >
-        <LayeredBackground>
-          {/* backgroun area */}
-          <div className="absolute left-0 top-0 w-full ">
-            <Marbles className="-z-10 w-full  rotate-180" />
-          </div>
-
-          <section className="absolute  bottom-0 left-0 mb-[70px] flex h-full w-full flex-col gap-[46px]">
-            <div
-              className="relative mx-auto flex h-full w-fit flex-col items-center justify-end gap-[50px]"
-              onMouseDown={onMouseDown}
-              onTouchStart={onTouchStart}
-            >
-              {arrowShow && <Arrow />}
-              <DraggableMarble
-                isReached={isReached}
-                setIsReached={setIsReached}
-                flyDuration={FLY_DURATION}
-                nickname={sessionStorage.getItem("comment_nickname") ?? ""}
-              />
-            </div>
-            <Header
-              className="select-none text-center"
-              text={`{구슬을 위로 밀어서}\\n{칭찬 구슬을 전달하세요!}`}
-            />
-          </section>
-        </LayeredBackground>
-
-        <CommentDoneView transition={move ? DONE_ANIMATION : null} />
-      </DefaultLayout>
-    </>
+    <DefaultLayout
+      className="overflow-hidden"
+      appbar={
+        <div className=" flex h-[64px] w-full px-5 py-2.5">
+          <button
+            className={clsx("z-20", "hidden" && isReached)}
+            onClick={() => navigate(-1)}
+          >
+            <ChevronLeftEdgeSVG />
+          </button>
+        </div>
+      }
+    >
+      {/* backgroun area */}
+      <Background />
+      <div className="absolute left-0 top-0 w-full ">
+        <Marbles className="-z-10 w-full  rotate-180" />
+      </div>
+
+      <section className="absolute  bottom-0 left-0 mb-[70px] flex h-full w-full flex-col gap-[46px]">
+        <div
+          className="relative mx-auto flex h-full w-fit flex-col items-center justify-end gap-[50px]"
+          onMouseDown={onMouseDown}
+          onTouchStart={onTouchStart}
+        >
+          {arrowShow && <Arrow />}
+          <DraggableMarble
+            isReached={isReached}
+            setIsReached={setIsReached}
+            flyDuration={FLY_DURATION}
+            nickname={sessionStorage.getItem("comment_nickname") ?? ""}
+          />
+        </div>
+        <Header
+          className="select-none text-center"
+          text={`{구슬을 위로 밀어서}\\n{칭찬 구슬을 전달하세요!}`}
+        />
+      </section>
+
+      <CommentDoneView transition={move ? DONE_ANIMATION : null} />
+    </DefaultLayout>
   );
 };
diff --git a/src/components/app/comment/background.tsx b/src/components/app/comment/background.tsx
new file mode 100644
index 00000000..dc8fa39b
--- /dev/null
+++ b/src/components/app/comment/background.tsx
@@ -0,0 +1,8 @@
+export const Background = () => {
+  return (
+    <div className="absolute left-1/2 top-1/2 -z-10 flex h-full w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-x-hidden blur-[50px]">
+      <div className=" mt-[100px] w-full  flex-[1.5] -translate-x-1/3 rounded-full bg-[#BDE0FF] opacity-25" />
+      <div className=" w-full flex-1 translate-x-1/3 rounded-full bg-[#FFECA9] opacity-25" />
+    </div>
+  );
+};
diff --git a/src/components/app/comment/content-form.tsx b/src/components/app/comment/content-form.tsx
index ac0cb249..815f0370 100644
--- a/src/components/app/comment/content-form.tsx
+++ b/src/components/app/comment/content-form.tsx
@@ -9,7 +9,7 @@ interface ContentFormProps {
 }
 export const ContentForm = ({ content, setContent }: ContentFormProps) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="mb-14 flex flex-col gap-4">
       <div className="flex flex-col gap-3">
         <h4 className="text-h4 text-primary">칭찬 메시지</h4>
         <Textarea
diff --git a/src/components/app/comment/layered-background.tsx b/src/components/app/comment/layered-background.tsx
deleted file mode 100644
index acb98971..00000000
--- a/src/components/app/comment/layered-background.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PropsWithChildren } from "react";
-
-import BackgroundGradient from "@/assets/imgs/background_gradient.svg?react";
-
-export const LayeredBackground = ({ children }: PropsWithChildren) => {
-  return (
-    <>
-      <div className="absolute left-0 top-0 -z-10 h-full w-full overflow-hidden">
-        <BackgroundGradient className="h-full w-full blur-[50px]" />
-      </div>
-      <div className="flex h-full w-full flex-1 flex-col gap-9 pb-[60px]">
-        {children}
-      </div>
-    </>
-  );
-};
diff --git a/src/components/app/comment/required-form.tsx b/src/components/app/comment/required-form.tsx
index 0586300d..3f7f4e4b 100644
--- a/src/components/app/comment/required-form.tsx
+++ b/src/components/app/comment/required-form.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { ChangeEvent, Dispatch, SetStateAction } from "react";
 
 import { ImageContainer } from "@/components/common/image-container";
@@ -30,7 +31,12 @@ export const RequiredForm = ({
           }
         />
       </div>
-      <div className="flex flex-col gap-4">
+      <div
+        className={clsx(
+          (!nickname || !image) && "mb-[60px]",
+          "flex flex-col gap-4",
+        )}
+      >
         <h4 className="text-h4 text-primary">칭찬 반응 이미지</h4>
         {image.length > 0 ? (
           <ImageContainer src={image} onChange={changeImage} />