[fix] HeaderWithBack 레이아웃 수정

KUSITMS-30th-TEAM-C · Nov 27, 2024 · 1e82b06 · 1e82b06
1 parent 334b710
commit 1e82b06
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/src/app/home/fast/add/page.tsx b/src/app/home/fast/add/page.tsx
@@ -8,7 +8,7 @@ import {
   Div,
   CheckboxWithLabel,
 } from '@/components'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import '@/app/start/start.css'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useQuerykeyStore } from '@/store/querykeyStore'
@@ -48,9 +48,12 @@ export default function FastPage() {
   const { mutate: patch } = usePatchQuickStart(id)
   const { refreshKey } = useQuerykeyStore()
 
+  const hourInputRef = useRef<HTMLInputElement>(null)
+  const minuteInputRef = useRef<HTMLInputElement>(null)
+
   const validateName = (value: string): void => {
     setErrorName(
-      !value.match(/^[a-zA-Z가-힣0-9]{1,10}$/)
+      !value.match(/^[a-zA-Z가-힣\u3131-\u314e0-9]{1,10}$/)
         ? '이름은 10자 이내의 한글/영문/숫자로 설정해 주세요.'
         : '',
     )
@@ -161,6 +164,7 @@ export default function FastPage() {
         <h1 className="subtitle">시작 시간</h1>
         <div className="flex items-center gap-20">
           <Input
+            ref={hourInputRef}
             type="number"
             pattern="\d*"
             placeholder="HH"
@@ -171,6 +175,7 @@ export default function FastPage() {
           />
           <span className="font-semibold">시</span>
           <Input
+            ref={minuteInputRef}
             type="number"
             pattern="\d*"
             placeholder="MM"

diff --git a/src/app/home/fast/page.tsx b/src/app/home/fast/page.tsx
@@ -29,7 +29,7 @@ export default function FastPage() {
         )}
       </Div>
       <Button
-        className="fixed inset-x-0 bottom-30 mx-auto w-[60%] whitespace-nowrap"
+        className="fixed inset-x-0 bottom-30 mx-auto w-[80%] max-w-280 whitespace-nowrap"
         onClick={() => router.push('/home/fast/add')}
         rightIcon={<Plus />}
       >

diff --git a/src/app/start/layout.tsx b/src/app/start/layout.tsx
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
   description: '조각조각 - 회원가입 : 사용자 정보 입력',
 }
 export default function StartLayout({ children }: StrictPropsWithChildren) {
-  return <div className="overflow-hidden w-full">{children}</div>
+  return <div className="overflow-hidden w-full h-full">{children}</div>
 }
diff --git a/src/app/start/page.tsx b/src/app/start/page.tsx
@@ -43,7 +43,7 @@ export default function Start() {
   const progressBarWidth = `${(step / 3) * 100}%`
 
   return (
-    <div className="w-full h-screen overflow-hidden">
+    <div className="h-full">
       <HeaderWithBack onBack={handleBack} title="조각조각 시작하기">
         <div className={cn('relative mt-15 mx-20', step === 4 && 'opacity-0')}>
           <div className="bg-black h-10 w-10 absolute bottom-0" />
@@ -54,7 +54,7 @@ export default function Start() {
           />
         </div>
 
-        <div className="h-full">
+        <div>
           <If condition={step === 1}>
             <Step1 setError={setError} />
           </If>

diff --git a/src/components/ui/HeaderWithBack.tsx b/src/components/ui/HeaderWithBack.tsx
@@ -12,12 +12,14 @@ export default function HeaderWithBack({
   title,
 }: StartHeaderProps) {
   return (
-    <div className="flex flex-col h-screen mt-10 overflow-hidden">
+    <div className="flex flex-col mt-10 overflow-hidden w-full h-full">
       <header className="relative font-semibold flex justify-center items-center py-4 min-h-52">
         <IconLeft className="absolute left-20" onClick={onBack} />
         <span>{title}</span>
       </header>
-      <main className="h-full relative">{children}</main>
+      <main className="h-[calc(100%-52px)] relative overflow-auto">
+        {children}
+      </main>
     </div>
   )
 }