Merge pull request #89 from DDD-Community/feature/86

[Feature/86] 추가정보 반영 (birthDt, gender)

package.json

@@ -22,6 +22,7 @@
     ]
   },
   "dependencies": {
+    "@jest/globals": "^29.7.0",
     "@storybook/preview-api": "^8.1.11",
     "@svgr/webpack": "^8.1.0",
     "browser-image-compression": "^2.0.2",

src/__tests__/validateBirthDt.test.ts

@@ -0,0 +1,45 @@
+import { validateBirthDt } from '@/lib/utils/validation'
+import { describe, expect, it } from '@jest/globals'
+
+describe('validateBirthDt', () => {
+  it('before 1900 -> false', () => {
+    expect(validateBirthDt('1899-12-31')).toBe(false)
+  })
+
+  it('year after the current year -> false', () => {
+    const nextYear = (new Date().getFullYear() + 1).toString()
+    expect(validateBirthDt(`${nextYear}-01-01`)).toBe(false)
+  })
+
+  it('invalid month -> false', () => {
+    expect(validateBirthDt('2020-13-01')).toBe(false)
+    expect(validateBirthDt('2020-00-01')).toBe(false)
+  })
+
+  it('invalid day -> false', () => {
+    expect(validateBirthDt('2024-01-32')).toBe(false)
+    expect(validateBirthDt('2024-02-30')).toBe(false)
+  })
+
+  it('valid date -> true', () => {
+    expect(validateBirthDt('2024-01-31')).toBe(true)
+    expect(validateBirthDt('2020-02-29')).toBe(true) // Leap year
+  })
+
+  it('non-leap year February 29 -> false', () => {
+    expect(validateBirthDt('2019-02-29')).toBe(false) // non-leap year
+  })
+
+  it('at the edge of the year range -> true', () => {
+    expect(validateBirthDt('1900-01-01')).toBe(true)
+  })
+
+  it('future date -> false', () => {
+    const tomorrow = new Date()
+    tomorrow.setDate(tomorrow.getDate() + 1)
+    const futureDate = tomorrow
+      .toISOString()
+      .split('T')[0] as `${string}-${string}-${string}`
+    expect(validateBirthDt(futureDate)).toBe(false)
+  })
+})

src/app/(board)/board/[boardId]/components/CreatePolaroidModal/index.tsx → src/app/(board)/board/[boardId]/_components/CreatePolaroidModal/index.tsx

@@ -2,7 +2,7 @@
 
 import PolaroidMaker from '@/components/Polaroid/PolaroidMaker'
 import { useRef, useState } from 'react'
-import { uploadAction } from '../../actions/uploadAction'
+import { uploadAction } from '../../_actions/uploadAction'
 import ArrowBack from './ArrowBack'
 import { useModal } from './ModalContext'
 import UploadBtn from './UploadBtn'

src/app/(board)/board/[boardId]/components/Empty.tsx → src/app/(board)/board/[boardId]/_components/Empty.tsx

@@ -1,8 +1,8 @@
 import Icon from 'public/icons/pinned.svg'
 
 const Empty = () => (
-  <div className="flex-1 flex flex-col justify-center items-center pb-16">
-    <Icon className="text-gray-900 size-24" />
+  <div className="flex flex-1 flex-col items-center justify-center pb-16">
+    <Icon className="size-24 text-gray-900" />
     <span className="font-jooree text-2xl opacity-40">보드를 꾸며주세요!</span>
   </div>
 )

src/app/(board)/board/[boardId]/page.tsx

@@ -5,14 +5,14 @@ import PolaroidCard from '@/components/Polaroid/PolaroidCard'
 import { getBoard } from '@/lib'
 import { Metadata } from 'next'
 import PinIcon from 'public/icons/pinFilled.svg'
-import CreatePolaroid from './components/CreatePolaroidModal'
-import { ModalProvider } from './components/CreatePolaroidModal/ModalContext'
-import Empty from './components/Empty'
-import OpenModalBtn from './components/OpenModalBtn'
-import ShareBtn from './components/ShareBtn'
-import Tutorial from './components/Tutorial'
-import { Step1Tooltip } from './components/Tutorial/Tooltips'
-import { TutorialProvider } from './components/Tutorial/TutorialContext'
+import CreatePolaroid from './_components/CreatePolaroidModal'
+import { ModalProvider } from './_components/CreatePolaroidModal/ModalContext'
+import Empty from './_components/Empty'
+import OpenModalBtn from './_components/OpenModalBtn'
+import ShareBtn from './_components/ShareBtn'
+import Tutorial from './_components/Tutorial'
+import { Step1Tooltip } from './_components/Tutorial/Tooltips'
+import { TutorialProvider } from './_components/Tutorial/TutorialContext'
 
 export async function generateMetadata({
   params,

src/app/(board)/board/create/page.tsx

@@ -3,9 +3,9 @@ import PolaboLogo from 'public/images/polabo_logo.png'
 import { postBoard } from '@/lib'
 import { revalidateTag } from 'next/cache'
 import { redirect } from 'next/navigation'
-import BoardAvailabilityCheckModal from './components/BoardAvailabilityCheckModal'
-import BoardNameForm from './components/BoardNameForm'
-import BoardNameRecommendations from './components/BoardNameRecommendations'
+import BoardAvailabilityCheckModal from './_components/BoardAvailabilityCheckModal'
+import BoardNameForm from './_components/BoardNameForm'
+import BoardNameRecommendations from './_components/BoardNameRecommendations'
 
 const CreateBoardPage = () => {
   const createBoard = async (title: string) => {

src/app/(home)/components/CopyLinkBtn.tsx → src/app/(home)/_components/CopyLinkBtn.tsx

@@ -19,12 +19,12 @@ const CopyLinkBtn = () => {
 
   return (
     <>
-      <div className="text-center text-gray-700 text-xxs leading-3 mb-1">
+      <div className="mb-1 text-center text-xxs leading-3 text-gray-700">
         copy link!
       </div>
       <button
         type="button"
-        className="p-3 bg-gray-100 rounded-[30px] shadow-[0_4px_8px_0_rgba(0,0,0,0.15)]"
+        className="rounded-[30px] bg-gray-100 p-3 shadow-[0_4px_8px_0_rgba(0,0,0,0.15)]"
         aria-label="copy link"
         onClick={copyLink}
       >

src/app/(home)/page.tsx

@@ -2,9 +2,9 @@ import Image from 'next/image'
 import PolaroidsIcon from 'public/icons/home_polaroids.svg'
 import PolaboLogo from 'public/images/polabo_logo.png'
 import Hamburger from '@/components/HamburgerMenu'
-import CopyLinkBtn from './components/CopyLinkBtn'
-import CreateBoardBtn from './components/CreateBoardBtn'
-import TotalCount from './components/TotalCount'
+import CopyLinkBtn from './_components/CopyLinkBtn'
+import CreateBoardBtn from './_components/CreateBoardBtn'
+import TotalCount from './_components/TotalCount'
 
 const HomePage = () => {
   return (

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

@@ -2,8 +2,8 @@ import Image from 'next/image'
 import PolaroidsIcon from 'public/icons/home_polaroids.svg'
 import ThreePolaroids from 'public/icons/threePolaroids.png'
 import PolaboLogo from 'public/images/polabo_logo.png'
-import KakaoLogin from './components/KakaoLogin'
-import Policy from './components/Policy'
+import KakaoLogin from './_components/KakaoLogin'
+import Policy from './_components/Policy'
 
 const LoginPage = () => {
   return (

src/app/(onboarding)/signup/_components/Header.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import BackIcon from 'public/icons/arrow_back_ios.svg'
+import { useStep } from './contexts/StepContext'
+
+const Header = () => {
+  const { step, prevStep } = useStep()
+  return (
+    <header className="h-16 w-full p-5">
+      {step !== 1 && (
+        <div className="cursor-pointer">
+          <BackIcon onClick={() => prevStep()} />
+        </div>
+      )}
+    </header>
+  )
+}
+
+export default Header

src/app/(onboarding)/signup/_components/Indicator.tsx

@@ -0,0 +1,26 @@
+import { useStep } from './contexts/StepContext'
+
+const Circle = ({ step, active }: { step: number; active: boolean }) => (
+  <div
+    className={
+      active
+        ? `flex h-5 w-5 items-center justify-center rounded-full bg-gray-950 text-sm text-gray-0`
+        : 'h-2 w-2 rounded-full bg-gray-400'
+    }
+  >
+    {active ? step : ''}
+  </div>
+)
+
+const Indicator = () => {
+  const { step } = useStep()
+  return (
+    <div className="mb-2 flex items-center gap-2">
+      <Circle step={1} active={step === 1} />
+      <Circle step={2} active={step === 2} />
+      <Circle step={3} active={step === 3} />
+    </div>
+  )
+}
+
+export default Indicator

src/app/(onboarding)/signup/_components/ProfileForm.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { updateProfile } from '@/lib'
+import { UserProfile } from '@/types'
+import { useSession } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import Indicator from './Indicator'
+import { ProfileProvider } from './contexts/ProfileContext'
+import { useStep } from './contexts/StepContext'
+import BirthDtForm from './steps/BirthDtForm'
+import GenderForm from './steps/GenderForm'
+import NicknameForm from './steps/NicknameForm'
+
+const ProfileForm = () => {
+  const { step } = useStep()
+  const { data: session, update } = useSession()
+  const router = useRouter()
+
+  const handleSubmit = async (newProfile: UserProfile) => {
+    if (session?.profile !== newProfile) {
+      const serverRes = await updateProfile(newProfile)
+      if (serverRes.code === 'SUCCESS') {
+        update({ profile: newProfile })
+        router.push('/signup/complete')
+      }
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-1 flex-col px-10">
+      <Indicator />
+      <ProfileProvider>
+        {step === 1 && <NicknameForm />}
+        {step === 2 && <BirthDtForm />}
+        {step === 3 && <GenderForm handleSubmit={handleSubmit} />}
+      </ProfileProvider>
+    </div>
+  )
+}
+
+export default ProfileForm

src/app/(onboarding)/signup/_components/contexts/ProfileContext.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { UserProfile } from '@/types'
+import { useSession } from 'next-auth/react'
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+
+interface ProfileContextProps {
+  newName: UserProfile['nickName']
+  newBirthDt: UserProfile['birthDt']
+  newGender: UserProfile['gender']
+  setNewName: Dispatch<SetStateAction<UserProfile['nickName']>>
+  setBirthDt: Dispatch<SetStateAction<UserProfile['birthDt']>>
+  setGender: Dispatch<SetStateAction<UserProfile['gender']>>
+}
+
+const ProfileContext = createContext<ProfileContextProps | undefined>(undefined)
+
+export const ProfileProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const { data: session } = useSession()
+  const [newName, setNewName] = useState<UserProfile['nickName']>(
+    session?.profile.nickName ?? '',
+  )
+  const [newBirthDt, setBirthDt] = useState<UserProfile['birthDt']>(undefined)
+  const [newGender, setGender] = useState<UserProfile['gender']>('NONE')
+
+  const value = useMemo(
+    () => ({
+      newName,
+      newBirthDt,
+      newGender,
+      setNewName,
+      setBirthDt,
+      setGender,
+    }),
+    [newName, newBirthDt, newGender],
+  )
+
+  return (
+    <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
+  )
+}
+
+export const useProfile = () => {
+  const context = useContext(ProfileContext)
+  if (context === undefined) {
+    throw new Error('Error at useProfile')
+  }
+  return context
+}

src/app/(onboarding)/signup/_components/contexts/StepContext.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { ReactNode, createContext, useContext, useMemo, useState } from 'react'
+
+interface StepContextProps {
+  step: 1 | 2 | 3
+  nextStep: () => void
+  prevStep: () => void
+}
+
+const StepContext = createContext<StepContextProps | undefined>(undefined)
+
+export const StepProvider = ({ children }: { children: ReactNode }) => {
+  const [step, setStep] = useState<1 | 2 | 3>(1)
+
+  const nextStep = () =>
+    setStep((prev) => (prev !== 3 ? ((prev + 1) as 1 | 2 | 3) : prev))
+
+  const prevStep = () =>
+    setStep((prev) => (prev !== 1 ? ((prev - 1) as 1 | 2 | 3) : prev))
+
+  const value = useMemo(
+    () => ({
+      step,
+      nextStep,
+      prevStep,
+    }),
+    [step],
+  )
+
+  return <StepContext.Provider value={value}>{children}</StepContext.Provider>
+}
+
+export const useStep = () => {
+  const context = useContext(StepContext)
+  if (context === undefined) {
+    throw new Error('Error at useStep')
+  }
+  return context
+}