Merge pull request #109 from gw-lim/fix/pink-layout

⚡️ fix: 핑크 레이아웃 수정
P1Z7 · Feb 19, 2024 · 6ddcc23 · 6ddcc23
2 parents 0a58a9a + aea7528
commit 6ddcc23
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 143 deletions.
diff --git a/app/(route)/(bottom-nav)/signin/page.tsx b/app/(route)/(bottom-nav)/signin/page.tsx
@@ -94,7 +94,7 @@ const SignInPage = () => {
           <ArrowLeft />
         </button>
       </header>
-      <div className="flex-center flex-col px-20 pt-80">
+      <div className="flex-center flex-col px-20 pt-80 pc:pb-20">
         <Link href="/">
           <Logo />
         </Link>

diff --git a/app/(route)/post/_components/DetailInfo.tsx b/app/(route)/post/_components/DetailInfo.tsx
@@ -13,20 +13,18 @@ const DetailInfo = () => {
   const { description } = watch();
 
   return (
-    <>
+    <div className="flex h-full flex-col justify-between">
       <PostFrame>
         <div className="flex flex-col gap-28">
           <ProgressBar ratio="full" />
           <FunnelTitle step="상세 설명" />
         </div>
         <DetailInput />
       </PostFrame>
-      <div className="fixed bottom-0 w-full bg-white-black px-20">
-        <BottomButton isSubmit isDisabled={!isCheck || description.length > 100}>
-          작성 완료
-        </BottomButton>
-      </div>
-    </>
+      <BottomButton isSubmit isDisabled={!isCheck || description.length > 100}>
+        작성 완료
+      </BottomButton>
+    </div>
   );
 };
 

diff --git a/app/(route)/post/_components/MainInfo.tsx b/app/(route)/post/_components/MainInfo.tsx
@@ -23,20 +23,18 @@ const MainInfo = ({ onNextStep }: Props) => {
   const isDisabled = !placeName || !address || !startDate || !endDate || !isValid;
 
   return (
-    <>
+    <div className="flex h-full flex-col justify-between">
       <PostFrame>
         <div className="flex flex-col gap-28">
           <ProgressBar ratio="1/2" />
           <FunnelTitle step="행사 정보" isRequired />
         </div>
         <MainInput />
       </PostFrame>
-      <div className="fixed bottom-0 w-full bg-white-black px-20">
-        <BottomButton onClick={onNextStep} isDisabled={isDisabled}>
-          다음으로
-        </BottomButton>
-      </div>
-    </>
+      <BottomButton onClick={onNextStep} isDisabled={isDisabled}>
+        다음으로
+      </BottomButton>
+    </div>
   );
 };
 

diff --git a/app/(route)/post/_components/StarInfo.tsx b/app/(route)/post/_components/StarInfo.tsx
@@ -15,20 +15,18 @@ const StarInfo = ({ onNextStep }: Props) => {
   const { artistNames, groupName, eventType, groupId } = watch();
   const isDisabled = !groupName || (groupId && artistNames.length === 0) || !eventType;
   return (
-    <>
+    <div className="flex h-full flex-col justify-between">
       <PostFrame>
         <div className="flex flex-col gap-28">
           <ProgressBar ratio="1/4" />
           <FunnelTitle step="행사 대상" isRequired />
         </div>
         <StarInput />
       </PostFrame>
-      <div className="sticky bottom-0 right-0 w-full bg-white-black px-20">
-        <BottomButton onClick={onNextStep} isDisabled={isDisabled}>
-          다음으로
-        </BottomButton>
-      </div>
-    </>
+      <BottomButton onClick={onNextStep} isDisabled={isDisabled}>
+        다음으로
+      </BottomButton>
+    </div>
   );
 };
 

diff --git a/app/(route)/post/_components/SubInfo.tsx b/app/(route)/post/_components/SubInfo.tsx
@@ -12,18 +12,16 @@ interface Props {
 
 const SubInfo = ({ onNextStep }: Props) => {
   return (
-    <>
+    <div className="flex h-full flex-col justify-between">
       <PostFrame>
         <div className="flex flex-col gap-28">
           <ProgressBar ratio="3/4" />
           <FunnelTitle step="특전 정보" />
         </div>
         <SubInput />
       </PostFrame>
-      <div className="fixed bottom-0 w-full bg-white-black px-20">
-        <BottomButton onClick={onNextStep}>다음으로</BottomButton>
-      </div>
-    </>
+      <BottomButton onClick={onNextStep}>다음으로</BottomButton>
+    </div>
   );
 };
 

diff --git a/app/(route)/post/page.tsx b/app/(route)/post/page.tsx
@@ -58,24 +58,26 @@ const Post = () => {
     <>
       {isLogin && (
         <PinkLayout size="narrow">
-          <MobileHeader handleClick={handlePrevClick} />
-          <div className="p-20 pb-116 pt-36 text-16 pc:relative pc:min-h-[59.5vh] pc:px-0 pc:pb-0">
-            <GenericFormProvider formOptions={{ mode: "onBlur", defaultValues: DEFAULT_INPUT_VALUES, shouldFocusError: true }}>
-              <Funnel>
-                <Step name={POST_STEPS[0]}>
-                  <StarInfo onNextStep={() => setStep(POST_STEPS[1])} />
-                </Step>
-                <Step name={POST_STEPS[1]}>
-                  <MainInfo onNextStep={() => setStep(POST_STEPS[2])} />
-                </Step>
-                <Step name={POST_STEPS[2]}>
-                  <SubInfo onNextStep={() => setStep(POST_STEPS[3])} />
-                </Step>
-                <Step name={POST_STEPS[3]}>
-                  <DetailInfo />
-                </Step>
-              </Funnel>
-            </GenericFormProvider>
+          <div className="flex h-full flex-col">
+            <MobileHeader handleClick={handlePrevClick} />
+            <div className="h-full p-20 pb-116 pt-36 text-16 pc:relative pc:min-h-[59.5vh] pc:px-0 pc:pb-0">
+              <GenericFormProvider formOptions={{ mode: "onBlur", defaultValues: DEFAULT_INPUT_VALUES, shouldFocusError: true }}>
+                <Funnel>
+                  <Step name={POST_STEPS[0]}>
+                    <StarInfo onNextStep={() => setStep(POST_STEPS[1])} />
+                  </Step>
+                  <Step name={POST_STEPS[1]}>
+                    <MainInfo onNextStep={() => setStep(POST_STEPS[2])} />
+                  </Step>
+                  <Step name={POST_STEPS[2]}>
+                    <SubInfo onNextStep={() => setStep(POST_STEPS[3])} />
+                  </Step>
+                  <Step name={POST_STEPS[3]}>
+                    <DetailInfo />
+                  </Step>
+                </Funnel>
+              </GenericFormProvider>
+            </div>
           </div>
         </PinkLayout>
       )}

diff --git a/app/(route)/signup/_components/SearchArtist.tsx b/app/(route)/signup/_components/SearchArtist.tsx
@@ -98,7 +98,7 @@ const SearchArtist = ({ onClick, myArtists, myArtistsInfo }: Props) => {
   };
 
   return (
-    <div className="flex w-full flex-col pt-8 pc:min-h-[37.3rem]">
+    <div className="flex w-full flex-col pt-8">
       <button className="w-fit text-14 font-500 text-gray-400 underline" onClick={() => openModal("reqArtist")} type="button">
         찾으시는 아티스트가 없으신가요?
       </button>

diff --git a/app/(route)/signup/_components/step/AccountInfo.tsx b/app/(route)/signup/_components/step/AccountInfo.tsx
@@ -54,84 +54,86 @@ const AccountInfo = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <div className="flex flex-col gap-20 pb-160 pt-36 pc:pb-0">
-      <div className="flex items-end gap-8">
+    <div className="flex h-full flex-col justify-between pb-160 pt-36 pc:pb-0">
+      <div className="flex flex-col gap-20">
+        <div className="flex items-end gap-8">
+          <InputText
+            isSuccess={canWrite}
+            noButton
+            control={control}
+            onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
+            name="email"
+            autoComplete="email"
+            placeholder="이메일을 입력해 주세요"
+            hint={canWrite ? "이메일이 발송되었습니다" : "이메일 형식으로 입력하여 주세요."}
+            rules={{
+              required: ERROR_MESSAGES.email.emailField,
+              pattern: { value: REG_EXP.CHECK_EMAIL, message: ERROR_MESSAGES.email.emailPattern },
+            }}
+          >
+            이메일
+          </InputText>
+          <div className="w-88 shrink-0 pb-20">
+            <Button type={canWrite ? "linedGray" : "lined"} size="free" style="h-48 text-14 rounded-sm" isDisabled={!!formState.errors.email || !email} onClick={handleEmailClick}>
+              {canWrite ? "재인증" : "인증하기"}
+            </Button>
+          </div>
+        </div>
+        <div className="flex items-end gap-8">
+          <InputText
+            isSuccess={isVerification}
+            onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
+            noButton
+            control={control}
+            name="code"
+            autoComplete="none"
+            placeholder="인증코드를 입력해 주세요"
+            hint={isVerification ? "인증되었습니다" : "이메일로 발송된 인증 코드를 입력하여 주세요."}
+            rules={{
+              required: ERROR_MESSAGES.code.codeField,
+            }}
+            disabled={!canWrite}
+          >
+            인증코드 입력
+          </InputText>
+          <div className="w-88 shrink-0 pb-20">
+            <Button type="lined" size="free" style="h-48 text-14 rounded-sm" isDisabled={!canWrite || !code || isVerification} onClick={handleCodeClick}>
+              {isVerification ? "인증완료" : "확인"}
+            </Button>
+          </div>
+        </div>
         <InputText
-          isSuccess={canWrite}
-          noButton
           control={control}
           onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
-          name="email"
-          autoComplete="email"
-          placeholder="이메일을 입력해 주세요"
-          hint={canWrite ? "이메일이 발송되었습니다" : "이메일 형식으로 입력하여 주세요."}
-          rules={{
-            required: ERROR_MESSAGES.email.emailField,
-            pattern: { value: REG_EXP.CHECK_EMAIL, message: ERROR_MESSAGES.email.emailPattern },
-          }}
+          name="password"
+          type="password"
+          placeholder="비밀번호를 입력해주세요"
+          hint="영문과 숫자를 조합하여 8자리 이상"
+          autoComplete="new-password"
+          rules={{ required: ERROR_MESSAGES.password.passwordField, pattern: { value: REG_EXP.CHECK_PASSWORD, message: ERROR_MESSAGES.password.passwordPattern } }}
         >
-          이메일
+          비밀번호
         </InputText>
-        <div className="w-88 shrink-0 pb-20">
-          <Button type={canWrite ? "linedGray" : "lined"} size="free" style="h-48 text-14 rounded-sm" isDisabled={!!formState.errors.email || !email} onClick={handleEmailClick}>
-            {canWrite ? "재인증" : "인증하기"}
-          </Button>
-        </div>
-      </div>
-      <div className="flex items-end gap-8">
         <InputText
-          isSuccess={isVerification}
-          onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
-          noButton
           control={control}
-          name="code"
-          autoComplete="none"
-          placeholder="인증코드를 입력해 주세요"
-          hint={isVerification ? "인증되었습니다" : "이메일로 발송된 인증 코드를 입력하여 주세요."}
+          onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
+          name="passwordCheck"
+          type="password"
+          autoComplete="new-password"
+          placeholder="비밀번호를 입력해주세요"
           rules={{
-            required: ERROR_MESSAGES.code.codeField,
+            required: ERROR_MESSAGES.password.passwordField,
+            validate: {
+              matchPassword: (value) => {
+                const passwordValue = getValues("password");
+                return passwordValue === value || ERROR_MESSAGES.passwordCh.passwordChField;
+              },
+            },
           }}
-          disabled={!canWrite}
         >
-          인증코드 입력
+          비밀번호 확인
         </InputText>
-        <div className="w-88 shrink-0 pb-20">
-          <Button type="lined" size="free" style="h-48 text-14 rounded-sm" isDisabled={!canWrite || !code || isVerification} onClick={handleCodeClick}>
-            {isVerification ? "인증완료" : "확인"}
-          </Button>
-        </div>
       </div>
-      <InputText
-        control={control}
-        onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
-        name="password"
-        type="password"
-        placeholder="비밀번호를 입력해주세요"
-        hint="영문과 숫자를 조합하여 8자리 이상"
-        autoComplete="new-password"
-        rules={{ required: ERROR_MESSAGES.password.passwordField, pattern: { value: REG_EXP.CHECK_PASSWORD, message: ERROR_MESSAGES.password.passwordPattern } }}
-      >
-        비밀번호
-      </InputText>
-      <InputText
-        control={control}
-        onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
-        name="passwordCheck"
-        type="password"
-        autoComplete="new-password"
-        placeholder="비밀번호를 입력해주세요"
-        rules={{
-          required: ERROR_MESSAGES.password.passwordField,
-          validate: {
-            matchPassword: (value) => {
-              const passwordValue = getValues("password");
-              return passwordValue === value || ERROR_MESSAGES.passwordCh.passwordChField;
-            },
-          },
-        }}
-      >
-        비밀번호 확인
-      </InputText>
       <div className={`fixed bottom-0 left-0 w-full pc:sticky pc:mt-20 ${isError ? "animate-brrr" : ""}`}>
         <BottomButton onClick={onNext}>
           {/* <BottomButton onClick={onNext} isDisabled={isButtonDisabled}> */}

diff --git a/app/(route)/signup/_components/step/MyArtistsInfo.tsx b/app/(route)/signup/_components/step/MyArtistsInfo.tsx
@@ -26,7 +26,7 @@ const MyArtistsInfo = () => {
   };
 
   return (
-    <div className="h-full pb-160 pc:pb-0">
+    <div className="flex h-full flex-col justify-between pb-160 pc:pb-0">
       <SearchArtist onClick={handleClick} myArtists={myArtists} myArtistsInfo={myArtistsInfo} />
       <BottomButton isDisabled={isButtonDisabled} isSkip isSubmit>
         오프너 시작하기

diff --git a/app/(route)/signup/_components/step/ProfileInfo.tsx b/app/(route)/signup/_components/step/ProfileInfo.tsx
@@ -23,8 +23,8 @@ const ProfileInfo = ({ onNext }: { onNext: () => void }) => {
   const isButtonDisabled = !!formState.errors.nickName || !formState.isValid;
 
   return (
-    <div className="pt-36">
-      <div className="pc:h-[37.3rem]">
+    <div className="flex h-full flex-col justify-between pt-36">
+      <div>
         <InputText
           control={control}
           onKeyDown={(e) => handleEnterError(e, !isButtonDisabled, onNext)}
@@ -44,7 +44,7 @@ const ProfileInfo = ({ onNext }: { onNext: () => void }) => {
           닉네임
         </InputText>
       </div>
-      <div className={`fixed bottom-0 left-0 w-full ${isError ? "animate-brrr" : ""}`}>
+      <div className={`fixed bottom-0 left-0 w-full pc:sticky ${isError ? "animate-brrr" : ""}`}>
         <BottomButton onClick={onNext} isDisabled={isButtonDisabled}>
           다음으로
         </BottomButton>

diff --git a/app/(route)/signup/page.tsx b/app/(route)/signup/page.tsx
@@ -58,11 +58,11 @@ const SignUp = () => {
     return (
       <PinkLayout size={pcWidth}>
         <Header onClick={handlePrevClick} />
-        <GenericFormProvider<SignUpFormType> formOptions={{ mode: "onBlur", defaultValues: DEFAULT_VALUES }}>
-          <div className="flex h-full flex-col px-20 ">
+        <div className="flex h-[calc(100%-13.8rem)] grow flex-col px-20">
+          <GenericFormProvider<SignUpFormType> formOptions={{ mode: "onBlur", defaultValues: DEFAULT_VALUES }}>
             <ProfileSetup steps={STEPS} handleNextClick={handleNextClick} Funnel={Funnel} Step={Step} />
-          </div>
-        </GenericFormProvider>
+          </GenericFormProvider>
+        </div>
       </PinkLayout>
     );
 };

diff --git a/app/_components/GenericFormProvider.tsx b/app/_components/GenericFormProvider.tsx
@@ -69,7 +69,9 @@ const GenericFormProvider = <T extends FieldValues>({ children, formOptions }: G
 
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form>
+      <form onSubmit={methods.handleSubmit(onSubmit)} className="h-full">
+        {children}
+      </form>
       {modal === "editApprove" && (
         <AlertModal closeModal={closeModal} handleBtnClick={() => router.replace(`/event/${eventId}/approve`)}>
           수정사항은 사용자 3인 이상의

diff --git a/app/_components/button/BottomButton.tsx b/app/_components/button/BottomButton.tsx
@@ -15,11 +15,7 @@ const BottomButton = ({ onClick, children, isDisabled, isSkip = false, isSubmit
   const path = usePathname();
 
   return (
-    <div
-      className={classNames("fixed bottom-0 left-0 z-nav flex w-full flex-col items-center gap-12 border-t border-gray-50 bg-white-black px-20 pb-24 pt-12 pc:sticky pc:mt-20", {
-        "pc:!mt-0": path === "/post",
-      })}
-    >
+    <div className="fixed bottom-0 left-0 z-nav flex w-full flex-col items-center gap-12 border-t border-gray-50 bg-white-black px-20 pb-24 pt-12 pc:sticky pc:mt-20">
       <Button size="xl" onClick={onClick} isDisabled={isDisabled} isSubmit={isSubmit}>
         {children}
       </Button>