refactor: 칭찬 댓글 작성 페이지 배경 리팩토링

depromeet · Jan 29, 2024 · 6a40b3e · 6a40b3e
1 parent a8fe167
commit 6a40b3e
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 83 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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} />