Merge pull request #121 from DDD-Community/feature/polaroid-design

폴라로이드 꾸미기 기능 추가

src/app/board/[boardId]/_actions/uploadAction.ts

@@ -1,12 +1,15 @@
 'use server'
 
 import { getPreSignedUrl, postPolaroid, uploadImage } from '@/lib'
+import { FontKeyType, ThemaKeyType } from '@/types'
 
 export const uploadAction = async (id: string, formData: FormData) => {
   try {
     const fileInput = formData.get('fileInput')
     const oneLineMessage = formData.get('oneLineMessage')
     const nickname = formData.get('nickname')
+    const font = formData.get('font')
+    const thema = formData.get('thema')
 
     if (!fileInput || !(fileInput instanceof File)) {
       throw new Error('Invalid file input')
@@ -20,6 +23,10 @@ export const uploadAction = async (id: string, formData: FormData) => {
       imageKey,
       oneLineMessage: oneLineMessage as string,
       nickname: nickname as string,
+      options: {
+        FONT: font as FontKeyType,
+        THEMA: thema as ThemaKeyType,
+      },
     })
     return res
   } catch (error) {

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

@@ -11,7 +11,7 @@ const ArrowBack = () => {
   return (
     <>
       <CloseIcon
-        className="cursor-pointer text-gray-0"
+        className="absolute left-5 top-10 cursor-pointer text-gray-0"
         onClick={() => setShowAskBfCloseModal(true)}
       />
       <AskBfCloseModal

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

@@ -0,0 +1,107 @@
+import ArrowBack from '@/app/board/[boardId]/_components/CreatePolaroidModal/ArrowBack'
+import PolaroidMaker from '@/components/Polaroid/PolaroidMaker'
+import TagButton from '@/components/TagButton'
+import { twMerge } from 'tailwind-merge'
+import FontSelect from '@/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect'
+import UploadBtn from '@/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn'
+import { Dispatch, SetStateAction, useEffect, useRef } from 'react'
+import { FontKeyType, ThemaKeyType } from '@/types'
+import PolaroidIcon from 'public/icons/polaroid.svg'
+
+interface CreatePolaroidProps {
+  image: File | null
+  selectedFontKey: FontKeyType
+  selectedThemaKey: ThemaKeyType
+  message: string
+  nickname: string
+  showFontSelect: boolean
+  isValid: boolean
+  submit: () => Promise<void>
+  setImage: Dispatch<SetStateAction<File | null>>
+  setMessage: Dispatch<SetStateAction<string>>
+  setNickname: Dispatch<SetStateAction<string>>
+  setShowFontSelect: Dispatch<SetStateAction<boolean>>
+  setSelectedFontKey: Dispatch<SetStateAction<FontKeyType>>
+  setShowThemaSelect: Dispatch<SetStateAction<boolean>>
+  setIsValid: Dispatch<SetStateAction<boolean>>
+}
+
+const CreatePolaroid = ({
+  image,
+  selectedFontKey,
+  selectedThemaKey,
+  message,
+  nickname,
+  setImage,
+  setMessage,
+  setNickname,
+  showFontSelect,
+  setShowFontSelect,
+  setSelectedFontKey,
+  setShowThemaSelect,
+  submit,
+  isValid,
+  setIsValid,
+}: CreatePolaroidProps) => {
+  const fontSelectRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setIsValid(!!image)
+  }, [image])
+
+  useEffect(() => {
+    if (fontSelectRef.current) {
+      fontSelectRef.current.scrollIntoView()
+    }
+  }, [fontSelectRef, showFontSelect])
+
+  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="mx-auto w-[272px]">
+          <PolaroidMaker
+            image={image}
+            fontKey={selectedFontKey}
+            themaKey={selectedThemaKey}
+            message={message}
+            nickname={nickname}
+            setImage={setImage}
+            setMessage={setMessage}
+            setNickname={setNickname}
+          />
+          <div className="flex gap-5 py-5">
+            <TagButton
+              className={twMerge(
+                'font-hesom text-md leading-5',
+                showFontSelect ? 'border-gray-0 bg-gray-800 text-gray-0' : '',
+              )}
+              onClick={() => setShowFontSelect((prev) => !prev)}
+            >
+              폰트 고르기
+            </TagButton>
+            <TagButton
+              className="flex gap-2 p-2.5 text-sm leading-4"
+              onClick={() => setShowThemaSelect((prev) => !prev)}
+            >
+              <PolaroidIcon />
+              프레임 고르기
+            </TagButton>
+          </div>
+        </div>
+        {showFontSelect && (
+          <FontSelect
+            ref={fontSelectRef}
+            selectedFont={selectedFontKey}
+            onSelect={setSelectedFontKey}
+          />
+        )}
+      </div>
+      <div className="flex w-full justify-center pb-10">
+        <UploadBtn submitForm={submit} btnDisabled={!isValid} />
+      </div>
+    </div>
+  )
+}
+
+export default CreatePolaroid

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

@@ -0,0 +1,42 @@
+import { FontKeyType } from '@/types'
+import { FONTS } from '@/lib'
+import { twMerge } from 'tailwind-merge'
+import TagButton from '@/components/TagButton'
+import { forwardRef } from 'react'
+
+interface FontSelectProps {
+  selectedFont: FontKeyType
+  onSelect: (fontKey: FontKeyType) => void
+}
+
+const FontSelect = forwardRef<HTMLDivElement, FontSelectProps>(
+  ({ selectedFont, onSelect }, ref) => {
+    const selectedFontClass = 'bg-gray-0 text-gray-1000 border border-gray-900'
+    const fontClass = 'text-neutral-500 bg-gray-300 border border-gray-500 '
+    return (
+      <div className="overflow-x-scroll scrollbar-hide" ref={ref}>
+        <div className="mx-[calc((100%-272px)/2)] inline-flex items-center gap-2">
+          {Object.entries(FONTS).map(([key, font]) => (
+            <TagButton
+              className={twMerge(
+                'shrink-0',
+                FONTS[selectedFont].title === font.title
+                  ? selectedFontClass
+                  : fontClass,
+                font.className,
+              )}
+              key={key}
+              onClick={() => onSelect(key as FontKeyType)}
+            >
+              {font.title}
+            </TagButton>
+          ))}
+        </div>
+      </div>
+    )
+  },
+)
+
+FontSelect.displayName = 'FontSelect'
+
+export default FontSelect

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

@@ -0,0 +1,89 @@
+import Image from 'next/image'
+import { twMerge } from 'tailwind-merge'
+import { ThemaKeyType } from '@/types'
+import { THEMAS } from '@/lib'
+import { useEffect, useState } from 'react'
+import Button from '@/components/Button'
+import ArrowBackIcon from 'public/icons/arrow_back_ios.svg'
+
+interface ThemaSelectItemProps {
+  themaType: ThemaKeyType
+  isCurrentThema: boolean
+  setCurrentThema: (thema: ThemaKeyType) => void
+}
+
+const ThemaSelectItem = ({
+  themaType,
+  isCurrentThema,
+  setCurrentThema,
+}: ThemaSelectItemProps) => {
+  return (
+    <div
+      className={twMerge(
+        'flex items-center justify-center rounded-lg border-2 bg-gray-700 px-7 py-[22px]',
+        isCurrentThema ? 'border-gray-100' : 'border-gray-700',
+      )}
+    >
+      <Image
+        src={`/images/polaroidThemas/${themaType}.png`}
+        alt="polabo"
+        width={100}
+        height={100}
+        onClick={() => setCurrentThema(themaType)}
+      />
+    </div>
+  )
+}
+
+interface ThemaSelectProps {
+  selectedThema: ThemaKeyType
+  setSelectedThema: (thema: ThemaKeyType) => void
+  setShowThemaSelect: (showThemaSelect: boolean) => void
+}
+
+const ThemaSelect = ({
+  selectedThema,
+  setSelectedThema,
+  setShowThemaSelect,
+}: ThemaSelectProps) => {
+  const [currentThema, setCurrentThema] = useState<ThemaKeyType>(selectedThema)
+
+  useEffect(() => {
+    setCurrentThema(selectedThema)
+  }, [selectedThema])
+
+  const onSelectThema = () => {
+    setSelectedThema(currentThema)
+    setShowThemaSelect(false)
+  }
+
+  return (
+    <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between">
+      <div className="absolute left-5 top-10">
+        <ArrowBackIcon
+          className="h-6 w-6 text-gray-0"
+          onClick={() => setShowThemaSelect(false)}
+        />
+      </div>
+      <div className="mx-12 overflow-y-scroll pb-5 pt-10 scrollbar-hide">
+        <div className="grid grid-cols-2 gap-3">
+          {Object.entries(THEMAS).map(([key]) => (
+            <ThemaSelectItem
+              key={key}
+              themaType={key as ThemaKeyType}
+              isCurrentThema={currentThema === key}
+              setCurrentThema={setCurrentThema}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex w-full justify-center pb-10">
+        <Button size="lg" onClick={onSelectThema}>
+          선택 완료
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ThemaSelect

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

@@ -18,23 +18,20 @@ const UploadBtn = ({ submitForm, btnDisabled }: UploadBtnProps) => {
   }
 
   return (
-    <div>
-      <div className="px-5">
-        <Button
-          onClick={() => setShowFinalModal(true)}
-          size="lg"
-          className="w-full"
-          disabled={isPending || btnDisabled}
-        >
-          업로드하기
-        </Button>
-      </div>
+    <>
+      <Button
+        onClick={() => setShowFinalModal(true)}
+        size="lg"
+        disabled={isPending || btnDisabled}
+      >
+        업로드하기
+      </Button>
       <FinalModal
         isOpen={showFinalModal}
         onClose={() => setShowFinalModal(false)}
         onConfirm={onSubmit}
       />
-    </div>
+    </>
   )
 }