Merge pull request #123 from DDD-Community/feature/board-name-recomme…

…ndations

보드 이름 추천 기능 구현

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

@@ -2,16 +2,16 @@
 
 import Button from '@/components/Button'
 import TextInput from '@/components/TextInput'
-import { ReactNode, useState } from 'react'
+import { useState } from 'react'
+import BoardNameRecommendations from '@/app/board/create/_components/BoardNameRecommendations'
 
 const MAX_BOARD_NAME_LENGTH = 15
 
 interface BoardNameFormProps {
-  children: ReactNode
   createBoard: (title: string) => void
 }
 
-const BoardNameForm = ({ children, createBoard }: BoardNameFormProps) => {
+const BoardNameForm = ({ createBoard }: BoardNameFormProps) => {
   const [title, setTitle] = useState('')
   const [hasError, setHasError] = useState(false)
   const isEmpty = title.length === 0
@@ -39,7 +39,7 @@ const BoardNameForm = ({ children, createBoard }: BoardNameFormProps) => {
           setValue={onInput}
         />
       </div>
-      {children}
+      <BoardNameRecommendations setBoardName={setTitle} />
       <Button
         type="submit"
         size="lg"

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

@@ -1,30 +1,29 @@
-import SketchIcon1 from 'public/icons/sketchIcons-1.svg'
-import SketchIcon2 from 'public/icons/sketchIcons-2.svg'
-import SketchIcon3 from 'public/icons/sketchIcons-3.svg'
-import SketchIcon4 from 'public/icons/sketchIcons-4.svg'
-import SketchIcon5 from 'public/icons/sketchIcons-5.svg'
-import SketchIcon6 from 'public/icons/sketchIcons-6.svg'
-import { ReactNode } from 'react'
+'use client'
 
-const Tag = ({ children }: { children: ReactNode }) => {
+import { HTMLAttributes, useEffect, useState } from 'react'
+import { getBoardNameRecommendations } from '@/lib'
+
+const Tag = ({ children, onClick }: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <div className="flex h-[26px] items-center justify-center gap-1.5 rounded-[36px] border border-gray-900 bg-gray-0 px-2.5 text-xxs first:ml-2">
+    <div
+      onClick={onClick}
+      className="flex h-[26px] cursor-pointer items-center justify-center gap-1.5 rounded-[36px] border border-gray-900 bg-gray-0 px-2.5 text-xxs first:ml-2"
+    >
       {children}
     </div>
   )
 }
 
 type RecommendationBtnsProps = {
-  recommendations: {
-    title: string
-    icon: ReactNode
-  }[]
+  recommendations: string[]
   direction: 'left' | 'right'
+  setBoardName: (boardName: string) => void
 }
 
 const RecommendationBtns = ({
   direction,
   recommendations,
+  setBoardName,
 }: RecommendationBtnsProps) => {
   const animationClass =
     direction === 'left' ? 'animate-slide-left' : 'animate-slide-right'
@@ -38,54 +37,42 @@ const RecommendationBtns = ({
     <div className="relative flex w-screen max-w-md overflow-x-hidden">
       <div className={`${animationClass} flex gap-2 whitespace-nowrap`}>
         {recommendations.map((recommendation) => (
-          <Tag key={recommendation.title}>
-            {recommendation.icon}
-            {recommendation.title}
+          <Tag
+            key={recommendation}
+            onClick={() => setBoardName(recommendation)}
+          >
+            {recommendation}
           </Tag>
         ))}
       </div>
       <div className={`${delayedAnimationClass} flex gap-2 whitespace-nowrap`}>
         {recommendations.map((recommendation) => (
-          <Tag key={recommendation.title}>
-            {recommendation.icon}
-            {recommendation.title}
+          <Tag
+            key={recommendation}
+            onClick={() => setBoardName(recommendation)}
+          >
+            {recommendation}
           </Tag>
         ))}
       </div>
     </div>
   )
 }
 
-const BoardNameRecommendations = () => {
-  const topRecommendations = [
-    {
-      title: '내 첫인상에 대해 알려줘',
-      icon: <SketchIcon1 />,
-    },
-    {
-      title: '장하오 데뷔 1주년',
-      icon: <SketchIcon2 />,
-    },
-    {
-      title: '23학번 디자인과 MT',
-      icon: <SketchIcon3 />,
-    },
-  ]
+interface BoardNameRecommendationsProps {
+  setBoardName: (boardName: string) => void
+}
+
+const BoardNameRecommendations = ({
+  setBoardName,
+}: BoardNameRecommendationsProps) => {
+  const [recommendations, setRecommendations] = useState<string[]>([])
 
-  const bottomRecommendations = [
-    {
-      title: '2024년 여름 일본여행',
-      icon: <SketchIcon4 />,
-    },
-    {
-      title: '고등학교 졸사찍은 날',
-      icon: <SketchIcon5 />,
-    },
-    {
-      title: '100일 축하보드',
-      icon: <SketchIcon6 />,
-    },
-  ]
+  useEffect(() => {
+    getBoardNameRecommendations().then((data) => {
+      setRecommendations(data)
+    })
+  }, [])
 
   return (
     <div>
@@ -94,11 +81,13 @@ const BoardNameRecommendations = () => {
       </div>
       <div className="mb-20 flex flex-col gap-3">
         <RecommendationBtns
-          recommendations={topRecommendations}
+          recommendations={recommendations.slice(0, 8)}
+          setBoardName={setBoardName}
           direction="left"
         />
         <RecommendationBtns
-          recommendations={bottomRecommendations}
+          recommendations={recommendations.slice(8)}
+          setBoardName={setBoardName}
           direction="right"
         />
       </div>

src/app/board/create/page.tsx

@@ -5,7 +5,6 @@ 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'
 
 const CreateBoardPage = () => {
   const createBoard = async (title: string) => {
@@ -27,9 +26,7 @@ const CreateBoardPage = () => {
         className="object-contain px-20 pt-6"
       />
       <BoardAvailabilityCheckModal />
-      <BoardNameForm createBoard={createBoard}>
-        <BoardNameRecommendations />
-      </BoardNameForm>
+      <BoardNameForm createBoard={createBoard} />
     </div>
   )
 }

src/lib/api/board.ts

@@ -36,3 +36,9 @@ export const getBoardAvailableCount = async (): Promise<number> => {
 
   return res.data
 }
+
+export const getBoardNameRecommendations = async (): Promise<string[]> => {
+  const res = await get('/api/v1/boards/recommend-title')
+
+  return res.data
+}