Merge pull request #135 from DDD-Community/feature/134

[FEATURE] 보드 테마 선택, 투명 헤더

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

@@ -56,9 +56,14 @@ const BoardPage = async ({ params }: BoardPageProps) => {
 
   const session = await auth()
 
+  const background = `/images/boardThemas/${board.options.THEMA}.png`
+
   return (
     <TutorialProvider>
-      <div className="relative flex h-dvh flex-col bg-gray-50">
+      <div
+        className="relative flex h-dvh flex-col bg-cover"
+        style={{ backgroundImage: `url(${background})` }}
+      >
         <Header
           title={
             <div className="flex items-center justify-center gap-[3px] text-center">
@@ -76,6 +81,8 @@ const BoardPage = async ({ params }: BoardPageProps) => {
               <ShareBtn boardName={board.title} />
             )
           }
+          className="bg-transparent"
+          shadow={false}
         />
         {board.items.length === 0 ? (
           <Empty />

src/app/board/create/_components/BoardNameForm.tsx

@@ -4,13 +4,13 @@ import Button from '@/components/Button'
 import TextInput from '@/components/TextInput'
 import { ReactNode } from 'react'
 import { useBoardName } from '@/hooks/useBoardName'
+import { useRouter } from 'next/navigation'
 
 interface BoardNameFormProps {
   children: ReactNode
-  createBoard: (title: string) => void
 }
 
-const BoardNameForm = ({ children, createBoard }: BoardNameFormProps) => {
+const BoardNameForm = ({ children }: BoardNameFormProps) => {
   const {
     boardName,
     setBoardName,
@@ -20,6 +20,8 @@ const BoardNameForm = ({ children, createBoard }: BoardNameFormProps) => {
     description,
   } = useBoardName()
 
+  const router = useRouter()
+
   return (
     <>
       <div>
@@ -40,7 +42,7 @@ const BoardNameForm = ({ children, createBoard }: BoardNameFormProps) => {
         size="lg"
         className="mb-12"
         disabled={isInvalid}
-        onClick={() => createBoard(boardName)}
+        onClick={() => router.push(`/board/create/theme?title=${boardName}`)}
       >
         다음
       </Button>

src/app/board/create/page.tsx

@@ -1,25 +1,11 @@
+import BackButton from '@/app/board/create/_components/BackButton'
+import BoardNameRecommendations from '@/app/board/create/_components/BoardNameRecommendations'
 import Image from 'next/image'
 import PolaboLogo from 'public/images/polabo_logo.png'
-import { postBoard } from '@/lib'
-import { revalidateTag } from 'next/cache'
-import { redirect } from 'next/navigation'
-import BoardNameRecommendations from '@/app/board/create/_components/BoardNameRecommendations'
-import BackButton from '@/app/board/create/_components/BackButton'
 import BoardAvailabilityCheckModal from './_components/BoardAvailabilityCheckModal'
 import BoardNameForm from './_components/BoardNameForm'
 
 const CreateBoardPage = () => {
-  const createBoard = async (title: string) => {
-    'use server'
-
-    const boardId = await postBoard({
-      title,
-      userId: null,
-    })
-
-    revalidateTag('myBoard')
-    redirect(`/board/${boardId}`)
-  }
   return (
     <div className="relative flex h-dvh flex-col items-center justify-between px-5">
       <BackButton />
@@ -29,7 +15,7 @@ const CreateBoardPage = () => {
         className="object-contain px-20 pt-6"
       />
       <BoardAvailabilityCheckModal />
-      <BoardNameForm createBoard={createBoard}>
+      <BoardNameForm>
         <BoardNameRecommendations />
       </BoardNameForm>
     </div>

src/app/board/create/theme/_components/ThemaSelect.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import Button from '@/components/Button'
+import { BOARDTHEMAS } from '@/lib/constants/boardConfig'
+import { BoardThemaKeyType } from '@/types'
+import Image from 'next/image'
+import CheckIcon from 'public/icons/check.svg'
+import { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+interface ThemaSelectItemProps {
+  themaType: BoardThemaKeyType
+  isCurrentThema: boolean
+  setCurrentThema: (thema: BoardThemaKeyType) => void
+}
+
+const ThemaSelectItem = ({
+  themaType,
+  isCurrentThema,
+  setCurrentThema,
+}: ThemaSelectItemProps) => (
+  <div
+    className={twMerge(
+      'relative flex flex-col items-center justify-center gap-2.5',
+    )}
+  >
+    {isCurrentThema && (
+      <CheckIcon className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-[calc(50%+15px)] scale-[3] text-gray-950" />
+    )}
+
+    <div
+      className={twMerge(
+        'h-[178px] w-[140px] max-w-full overflow-hidden rounded-lg border-2',
+        isCurrentThema ? 'border-gray-950' : 'border-gray-300',
+      )}
+    >
+      <Image
+        src={`/images/boardThemas/${themaType}.png`}
+        alt="polabo"
+        width={140}
+        height={178}
+        onClick={() => setCurrentThema(themaType)}
+        objectFit="contain"
+      />
+    </div>
+    <span
+      className={twMerge(
+        'text-md font-semiBold',
+        isCurrentThema ? 'text-gray-950' : 'text-gray-400',
+      )}
+    >
+      {BOARDTHEMAS[themaType].title}
+    </span>
+  </div>
+)
+
+interface ThemaSelectProps {
+  boardName: string
+  createBoard: (boardName: string, boardThema: BoardThemaKeyType) => void
+}
+
+const ThemaSelect = ({ createBoard, boardName }: ThemaSelectProps) => {
+  const [currentThema, setCurrentThema] = useState<BoardThemaKeyType>('B-0')
+
+  return (
+    <div className="flex h-[calc(100%-64px)] flex-col">
+      <div className="grid h-full auto-rows-min grid-cols-2 gap-2.5 overflow-y-scroll px-4 pt-3">
+        {Object.entries(BOARDTHEMAS).map(([key]) => (
+          <ThemaSelectItem
+            key={key}
+            themaType={key as BoardThemaKeyType}
+            isCurrentThema={currentThema === key}
+            setCurrentThema={setCurrentThema}
+          />
+        ))}
+      </div>
+      <Button
+        size="lg"
+        className="mx-auto mb-12"
+        onClick={() => createBoard(boardName, currentThema)}
+      >
+        완료
+      </Button>
+    </div>
+  )
+}
+
+export default ThemaSelect

src/app/board/create/theme/page.tsx

@@ -0,0 +1,48 @@
+import Header from '@/components/Header'
+import { postBoard } from '@/lib'
+import { revalidateTag } from 'next/cache'
+import { redirect } from 'next/navigation'
+import { BoardThemaKeyType } from '@/types'
+import ThemaSelect from './_components/ThemaSelect'
+
+interface PageProps {
+  searchParams: {
+    title: string
+  }
+}
+
+const CreateBoardThemePage = ({ searchParams }: PageProps) => {
+  const { title } = searchParams
+
+  const createBoard = async (
+    boardName: string,
+    boardThema: BoardThemaKeyType,
+  ) => {
+    'use server'
+
+    const boardId = await postBoard({
+      title: boardName,
+      userId: null,
+      options: {
+        THEMA: boardThema,
+      },
+    })
+
+    revalidateTag('myBoard')
+
+    redirect(`/board/${boardId}`)
+  }
+
+  return (
+    <div className="h-dvh">
+      <Header
+        title="보드 테마를 선택해주세요!"
+        leftButton={<Header.BackButton />}
+        shadow={false}
+      />
+      <ThemaSelect createBoard={createBoard} boardName={title} />
+    </div>
+  )
+}
+
+export default CreateBoardThemePage

src/components/Header/index.tsx

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react'
 import HeaderBackButton from '@/components/Header/HeaderBackButton'
+import { twMerge } from 'tailwind-merge'
 
 interface HeaderProps {
   title?: ReactNode
   description?: string
   leftButton?: ReactNode
   rightButton?: ReactNode
   shadow?: boolean
+  className?: string
 }
 
 const Header = ({
@@ -15,14 +17,18 @@ const Header = ({
   leftButton = null,
   rightButton = null,
   shadow = true,
+  className = '',
 }: HeaderProps) => {
   return (
     <>
       <header
-        className={`fixed z-10 flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 ${shadow && 'shadow-header'}`}
+        className={twMerge(
+          `fixed z-10 flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 ${shadow && 'shadow-header'}`,
+          className,
+        )}
       >
         <div className="w-6 cursor-pointer">{leftButton}</div>
-        <div className="text-gray-700">
+        <div className="text-gray-900">
           <div className="text-center text-md font-semiBold leading-6">
             {title}
           </div>

src/lib/constants/boardConfig.ts

@@ -0,0 +1,14 @@
+export const BOARDTHEMAS = {
+  'B-0': {
+    title: '기본 테마',
+  },
+  'B-1': {
+    title: '밝은 테마',
+  },
+  'B-2': {
+    title: '수능 테마',
+  },
+  'B-3': {
+    title: '코르크판 테마',
+  },
+}

src/types/board.ts

@@ -4,9 +4,17 @@ export interface Board {
   title: string
   items: Polaroid[]
   mine: boolean
+  options: {
+    THEMA: BoardThemaKeyType
+  }
 }
 
 export interface CreateBoardPayload {
   title: string
   userId: string | null
+  options: {
+    THEMA: BoardThemaKeyType
+  }
 }
+
+export type BoardThemaKeyType = 'B-0' | 'B-1' | 'B-2' | 'B-3'