Merge pull request #96 from DDD-Community/fix/94

[FIX/QA] 2차 QA

package.json

@@ -29,7 +29,6 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "next": "14.2.4",
     "next-auth": "^5.0.0-beta.20",
-    "path-to-regexp": "^7.1.0",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18",
     "react-dom": "^18",

src/app/(onboarding)/login/_components/Policy.tsx

@@ -10,7 +10,7 @@ const Policy = () => {
   return (
     <div className="text-center text-xxs text-gray-400">
       <div>
-        시작하기 버튼을 누르시면 POLABO의
+        시작하기 버튼을 누르시면 POLABO의{' '}
         <LinkTo
           text="서비스 이용약관"
           link="https://hwanheejung.notion.site/POLABO-292cb07b2fd74d7488aa4b684c67eb9a?pvs=74"

src/app/(onboarding)/login/page.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import PolaroidsIcon from 'public/icons/home_polaroids.svg'
-import ThreePolaroids from 'public/icons/threePolaroids.png'
+import LoginPolaroid from 'public/icons/login_polaroid.png'
 import PolaboLogo from 'public/images/polabo_logo.png'
 import KakaoLogin from './_components/KakaoLogin'
 import Policy from './_components/Policy'
@@ -16,7 +16,7 @@ const LoginPage = () => {
         <Image src={PolaboLogo} priority alt="logo" className="px-20 py-0.5" />
       </div>
       <Image
-        src={ThreePolaroids}
+        src={LoginPolaroid}
         priority
         alt="polaroids icon"
         className="object-contain px-20 pb-10"

src/app/(onboarding)/signup/_components/steps/GenderForm.tsx

@@ -54,7 +54,7 @@ const GenderForm = ({
         완료
       </Button>
       <Link
-        href="/"
+        href="/signup/complete"
         className="mb-6 text-center text-md font-semiBold text-gray-400"
       >
         다음에 할게요

src/app/(onboarding)/signup/_components/steps/NicknameForm.tsx

@@ -33,7 +33,7 @@ const NicknameForm = ({
       <div className="mb-20 text-2xl font-thin leading-10">
         닉네임을 정해주세요!
       </div>
-      <div className="mx-auto">
+      <div className="">
         <NicknameInput
           value={newName}
           setValue={setNewName}

src/components/BirthDateInput/index.tsx

@@ -6,6 +6,7 @@ import {
   Dispatch,
   SetStateAction,
   useEffect,
+  useRef,
   useState,
 } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -27,6 +28,9 @@ const BirthDateInput = ({
   const [month, setMonth] = useState('')
   const [day, setDay] = useState('')
 
+  const monthInputRef = useRef<HTMLInputElement>(null)
+  const dayInputRef = useRef<HTMLInputElement>(null)
+
   useEffect(() => {
     if (!value) return
 
@@ -53,13 +57,19 @@ const BirthDateInput = ({
     const { value: inputValue } = e.target
     if (/^\d{0,4}$/.test(inputValue)) {
       setYear(inputValue)
+      if (inputValue.length === 4) {
+        monthInputRef.current?.focus()
+      }
     }
   }
 
   const handleMonthChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value: inputValue } = e.target
     if (/^\d{0,2}$/.test(inputValue) && +inputValue <= 12) {
       setMonth(inputValue)
+      if (inputValue.length === 2) {
+        dayInputRef.current?.focus()
+      }
     }
   }
 
@@ -69,6 +79,7 @@ const BirthDateInput = ({
       setDay(inputValue)
     }
   }
+
   return (
     <div
       className={twMerge(
@@ -97,6 +108,7 @@ const BirthDateInput = ({
           className="w-full text-center focus:outline-none"
           maxLength={2}
           inputMode="numeric"
+          ref={monthInputRef}
         />
       </div>
       <span className="font-semibold text-xl text-gray-400">/</span>
@@ -109,6 +121,7 @@ const BirthDateInput = ({
           className="w-full text-center focus:outline-none"
           maxLength={2}
           inputMode="numeric"
+          ref={dayInputRef}
         />
       </div>
     </div>

src/lib/constants/polaroidConfig.ts

@@ -1,7 +1,6 @@
 export const FILTERS = {
   NORMAL: 'none',
-  POLAROID:
-    'sepia(0.2) contrast(1.3) brightness(1.0) saturate(1.2) blur(0.5px)',
+  POLAROID: 'sepia(0.2) contrast(1.3) brightness(1.0) saturate(1.2) blur(0px)',
   VINTAGE:
     'sepia(0.4) contrast(1.1) brightness(0.9) saturate(0.8) hue-rotate(-20deg) blur(0.6px)',
 } as const

src/middleware.ts

@@ -1,13 +1,13 @@
 import { auth } from '@/auth'
 import { NextRequest, NextResponse } from 'next/server'
-import { match } from 'path-to-regexp'
 
-// 경로 일치 확인
 function isMatch(pathname: string, urls: string[]) {
-  return urls.some((url) => !!match(url)(pathname))
+  return urls.some((url) => {
+    return pathname.startsWith(url)
+  })
 }
 
-const matchersForAuth = ['/mypage/*', '/board/create/*', '/signup']
+const matchersForAuth = ['/mypage', '/board/create', '/signup']
 
 const matchersForLogin = ['/login']