Merge pull request #126 from DDD-Community/feature/4th-qa

[FIX] 4차 QA

src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx

@@ -58,7 +58,7 @@ const CreatePolaroid = ({
   return (
     <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between">
       <ArrowBack />
-      <div className="w-full overflow-y-scroll pb-5 pt-16 scrollbar-hide">
+      <div className="w-full overflow-y-scroll overscroll-none pb-[114px] pt-16 scrollbar-hide">
         <div className="mx-auto w-[272px]">
           <PolaroidMaker
             image={image}
@@ -97,7 +97,7 @@ const CreatePolaroid = ({
           />
         )}
       </div>
-      <div className="flex w-full justify-center pb-10">
+      <div className="absolute bottom-10 flex w-full justify-center">
         <UploadBtn submitForm={submit} btnDisabled={!isValid} />
       </div>
     </div>

src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx

@@ -65,7 +65,7 @@ const ThemaSelect = ({
           onClick={() => setShowThemaSelect(false)}
         />
       </div>
-      <div className="mx-12 overflow-y-scroll pb-5 pt-10 scrollbar-hide">
+      <div className="mx-12 overflow-y-scroll overscroll-none pb-5 pt-10 scrollbar-hide">
         <div className="grid grid-cols-2 gap-3">
           {Object.entries(THEMAS).map(([key]) => (
             <ThemaSelectItem

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

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

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

@@ -1,14 +1,9 @@
-'use client'
-
-import { HTMLAttributes, useEffect, useState } from 'react'
+import { HTMLAttributes } from 'react'
 import { getBoardNameRecommendations } from '@/lib'
 
-const Tag = ({ children, onClick }: HTMLAttributes<HTMLDivElement>) => {
+const Tag = ({ children }: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <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"
-    >
+    <div 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>
   )
@@ -17,13 +12,11 @@ const Tag = ({ children, onClick }: HTMLAttributes<HTMLDivElement>) => {
 type RecommendationBtnsProps = {
   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'
@@ -37,42 +30,20 @@ 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}
-            onClick={() => setBoardName(recommendation)}
-          >
-            {recommendation}
-          </Tag>
+          <Tag key={recommendation}>{recommendation}</Tag>
         ))}
       </div>
       <div className={`${delayedAnimationClass} flex gap-2 whitespace-nowrap`}>
         {recommendations.map((recommendation) => (
-          <Tag
-            key={recommendation}
-            onClick={() => setBoardName(recommendation)}
-          >
-            {recommendation}
-          </Tag>
+          <Tag key={recommendation}>{recommendation}</Tag>
         ))}
       </div>
     </div>
   )
 }
 
-interface BoardNameRecommendationsProps {
-  setBoardName: (boardName: string) => void
-}
-
-const BoardNameRecommendations = ({
-  setBoardName,
-}: BoardNameRecommendationsProps) => {
-  const [recommendations, setRecommendations] = useState<string[]>([])
-
-  useEffect(() => {
-    getBoardNameRecommendations().then((data) => {
-      setRecommendations(data)
-    })
-  }, [])
+const BoardNameRecommendations = async () => {
+  const recommendations = await getBoardNameRecommendations()
 
   return (
     <div>
@@ -82,12 +53,10 @@ const BoardNameRecommendations = ({
       <div className="mb-20 flex flex-col gap-3">
         <RecommendationBtns
           recommendations={recommendations.slice(0, 8)}
-          setBoardName={setBoardName}
           direction="left"
         />
         <RecommendationBtns
           recommendations={recommendations.slice(8)}
-          setBoardName={setBoardName}
           direction="right"
         />
       </div>

src/app/board/create/page.tsx

@@ -3,6 +3,7 @@ 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 BoardAvailabilityCheckModal from './_components/BoardAvailabilityCheckModal'
 import BoardNameForm from './_components/BoardNameForm'
 
@@ -26,7 +27,9 @@ const CreateBoardPage = () => {
         className="object-contain px-20 pt-6"
       />
       <BoardAvailabilityCheckModal />
-      <BoardNameForm createBoard={createBoard} />
+      <BoardNameForm createBoard={createBoard}>
+        <BoardNameRecommendations />
+      </BoardNameForm>
     </div>
   )
 }

src/app/layout.tsx

@@ -78,7 +78,7 @@ export default function RootLayout({
         <link rel="icon" href="/images/favicon.ico" sizes="any" />
       </head>
       <body
-        className={`${PretendVariable.variable} ${Jooree.variable} ${Hesom.variable} ${Eunyoung.variable} ${Ttaerom.variable} ${Hipi.variable}`}
+        className={`${PretendVariable.variable} ${Jooree.variable} ${Hesom.variable} ${Eunyoung.variable} ${Ttaerom.variable} ${Hipi.variable} overscroll-none`}
       >
         <AuthSession>
           <CheckNewUser />

src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx

@@ -31,7 +31,7 @@ const PolaroidNicknameInput = ({
 
     const resizeObserver = new ResizeObserver(() => {
       if (element) {
-        setWidth(element.offsetWidth)
+        setWidth(Math.max(50, element.offsetWidth) + 10)
       }
     })
 
@@ -46,14 +46,6 @@ const PolaroidNicknameInput = ({
     }
   }, [])
 
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    setWidth(Math.max(50, ref.current.offsetWidth) + 10)
-  }, [nickname, placeholder])
-
   const onFocus = () => {
     setShowBorder(true)
     setPlaceholder('')
@@ -82,6 +74,7 @@ const PolaroidNicknameInput = ({
           onFocus={onFocus}
           onBlur={onBlur}
           placeholder={placeholder}
+          autoComplete="off"
           name="oneLineMessage"
           style={{
             width: `${width}px`,