fix: visit page step introduce

SSOCK · Nov 18, 2024 · 72a85f7 · 72a85f7
1 parent 8d09828
commit 72a85f7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/app/(protected)/make/_components/DecoDrawer.tsx b/app/(protected)/make/_components/DecoDrawer.tsx
@@ -55,7 +55,7 @@ const DecoDrawer = ({ step, userData }: { step: number; userData: User }) => {
       <DrawerTrigger className="pointer-events-auto transform rounded-lg bg-white p-2 px-4 transition duration-200 hover:bg-gray-300">
         {step === STEP.MAIN_DECORATION ? '장식 선택하기' : '바닥 장식 선택하기'}
       </DrawerTrigger>
-      <DrawerContent className="flex flex-col items-center justify-center gap-8 border-none bg-primary">
+      <DrawerContent className="flex flex-col items-center justify-center gap-8 border-none bg-primary pb-10">
         <DrawerHeader className="flex flex-col items-center gap-2">
           <DrawerTitle className="flex items-center gap-2 text-white">
             좌우로 스크롤해 장식을 선택해 주세요 <ArrowLeftRight />

diff --git a/app/(public)/visit/[userId]/store/modelStore.ts b/app/(public)/visit/[userId]/store/modelStore.ts
@@ -28,7 +28,7 @@ interface ModelStore {
 export const use3DModel = create<ModelStore>((set) => ({
   model: DECO.GINGERBREAD.fileName,
   modelColor: '#ff0000',
-  message: '따뜻한 마음을 담아 메세지를 작성해 주세요.',
+  message: '',
   author: '',
   messageColor: '#ff0000',
   setModel: (newModel) =>

diff --git a/app/(public)/visit/_components/_make/DecoDrawer.tsx b/app/(public)/visit/_components/_make/DecoDrawer.tsx
@@ -61,7 +61,7 @@ const DecoDrawer = ({
       <DrawerTrigger className="pointer-events-auto transform rounded-lg bg-white p-2 px-4 transition duration-200 hover:bg-gray-300">
         장식 선택하기
       </DrawerTrigger>
-      <DrawerContent className="flex flex-col items-center justify-center gap-8 border-none bg-primary">
+      <DrawerContent className="flex flex-col items-center justify-center gap-8 border-none bg-primary pb-10">
         <DrawerHeader className="flex flex-col items-center gap-4">
           <DrawerTitle className="flex items-center gap-2 text-white">
             좌우로 스크롤해 장식을 선택해 주세요 <ArrowLeftRight />

diff --git a/app/(public)/visit/_components/_make/LetterPaper.tsx b/app/(public)/visit/_components/_make/LetterPaper.tsx
@@ -7,6 +7,7 @@ import { transKoreaTime } from '@/shared/utils/time/transKoreaTime';
 
 const LetterPaper = ({ step }: { step: number }) => {
   const { messageColor, author, message } = use3DModel();
+
   return (
     <div
       className="letter-paper pointer-events-auto my-8 flex w-4/5 flex-col justify-between rounded-lg p-4 md:w-1/2"
@@ -26,10 +27,12 @@ const LetterPaper = ({ step }: { step: number }) => {
           }}
         >
           {step === STEP.MESSAGE_NOTE_COLOR
-            ? '따뜻한 마음을 담아 메세지를 작성해 주세요.'
+            ? '따뜻한 마음을 담아 메세지 입니다.'
             : message
-                .split('\n')
-                .map((line, index) => <p key={index}>{line}</p>)}
+              ? message
+                  .split('\n')
+                  .map((line, index) => <p key={index}>{line}</p>)
+              : '아래 입력창에 메세지를 입력해주세요.'}
         </div>
       </div>
       <div
@@ -47,7 +50,9 @@ const LetterPaper = ({ step }: { step: number }) => {
         <h3 className="flex w-full flex-1 justify-end gap-2 text-gray-300">
           <p>From</p>
           <p className="text-green-500">
-            {step === STEP.MESSAGE_NOTE_COLOR ? '익명' : author}
+            {step === STEP.MESSAGE_NOTE_COLOR && '보내는 이'}
+            {step !== STEP.MESSAGE_NOTE_COLOR &&
+              (author === '' ? '보내는 이' : author)}
           </p>
         </h3>
       </div>

diff --git a/app/(public)/visit/_components/_make/MessageForm.tsx b/app/(public)/visit/_components/_make/MessageForm.tsx
@@ -57,14 +57,15 @@ const MessageForm = ({
     model,
     modelColor,
     messageColor,
-    message,
+
     author,
     resetModel,
   } = use3DModel();
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      message,
+      message: '',
       author,
     },
   });
@@ -134,7 +135,7 @@ const MessageForm = ({
                 <Textarea
                   disabled={step === STEP.MESSAGE_NOTE_COLOR}
                   className="no-scrollbar w-4/5 p-4 md:w-1/3"
-                  placeholder="따뜻한 마음을 담아 메세지를 작성해 주세요."
+                  placeholder="이곳에 따뜻한 마음을 담아 메세지를 작성해 주세요."
                   {...field}
                   onChange={(e) => {
                     const value = e.target.value;