Merge pull request #133 from DDD-Community/feature/polaroid-frames

[FEATURE] 신규 프레임 추가

src/components/Polaroid/PolaroidCard/index.tsx

@@ -4,6 +4,7 @@ import PolaroidFrame from '@/components/Polaroid/Base/PolaroidFrame'
 import PolaroidDescription from '@/components/Polaroid/Base/PolaroidDescription'
 import PolaroidMessage from '@/components/Polaroid/Base/PolaroidMessage'
 import PolaroidNickname from '@/components/Polaroid/Base/PolaroidNickname'
+import { getPolaroidStyle } from '@/lib/utils/polaroid'
 
 interface PolaroidCardProps {
   polaroid: Polaroid
@@ -18,7 +19,7 @@ function PolaroidCard({ polaroid, onClick = () => {} }: PolaroidCardProps) {
       themaKey={polaroid.options.THEMA}
       fontKey={polaroid.options.FONT}
     >
-      <div className="p-2">
+      <div className="p-2" style={getPolaroidStyle(polaroid.options.THEMA)}>
         <PolaroidImage imageUrl={polaroid.imageUrl} />
       </div>
       <PolaroidDescription themaKey={polaroid.options.THEMA}>

src/components/Polaroid/PolaroidDetail/PolaroidItem.tsx

@@ -1,4 +1,5 @@
 import { Polaroid } from '@/types'
+import { getPolaroidStyle } from '@/lib/utils/polaroid'
 import PolaroidDescription from '../Base/PolaroidDescription'
 import PolaroidFrame from '../Base/PolaroidFrame'
 import PolaroidImage from '../Base/PolaroidImage'
@@ -16,7 +17,10 @@ const PolaroidItem = ({ polaroid }: PolaroidItemProps) => {
       themaKey={polaroid.options.THEMA}
       fontKey={polaroid.options.FONT}
     >
-      <div className="mt-5 px-3">
+      <div
+        className="px-3 pb-3 pt-5"
+        style={getPolaroidStyle(polaroid.options.THEMA)}
+      >
         <PolaroidImage imageUrl={polaroid.imageUrl} />
       </div>
       <PolaroidDescription themaKey={polaroid.options.THEMA}>

src/components/Polaroid/PolaroidMaker/index.tsx

@@ -9,6 +9,7 @@ import imageCompression from 'browser-image-compression'
 import PolaroidFrame from '@/components/Polaroid/Base/PolaroidFrame'
 import PolaroidDescription from '@/components/Polaroid/Base/PolaroidDescription'
 import { FontKeyType, ThemaKeyType } from '@/types'
+import { getPolaroidStyle } from '@/lib/utils/polaroid'
 import PolaroidImageInput from './PolaroidImageInput'
 import PolaroidMessageInput from './PolaroidMessageInput'
 import PolaroidNicknameInput from './PolaroidNicknameInput'
@@ -88,7 +89,7 @@ const PolaroidMaker = ({
       fontKey={fontKey}
       themaKey={themaKey}
     >
-      <div className="mt-5 px-3">
+      <div className="px-3 pb-3 pt-5" style={getPolaroidStyle(themaKey)}>
         <PolaroidImageInput
           imageUrl={previewFile}
           changeImage={handleImageChange}

src/lib/constants/polaroidConfig.ts

@@ -53,6 +53,21 @@ export const THEMAS: Record<ThemaKeyType, ThemaType> = {
     descriptionStyle:
       'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #e6daff',
   },
+  'F-9': {
+    className: 'bg-[#FFFEF2]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FAF0FE 0%, #F1CFFF 100%)',
+  },
+  'F-10': {
+    className: 'bg-[#FFFEF2]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFF9EA 0%, #FFDE83 100%)',
+  },
+  'F-11': {
+    className: 'bg-[#FFFEF2]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFE7F0 0%, #FFAECD 100%)',
+  },
 } as const
 
 export const FONTS: Record<FontKeyType, FontType> = {

src/lib/utils/polaroid.ts

@@ -1,6 +1,22 @@
 import { Session } from 'next-auth'
+import { ThemaKeyType } from '@/types'
 
 export const getPolaroidNickname = (
   nickname: string,
   session: Session | null,
 ) => nickname || session?.profile?.nickName || '익명'
+
+const isPolaroidWithFrame = (themaKey: ThemaKeyType) => {
+  const polaroidWithFrame: ThemaKeyType[] = ['F-9', 'F-10', 'F-11']
+
+  return polaroidWithFrame.includes(themaKey)
+}
+
+export const getPolaroidStyle = (themaKey: ThemaKeyType) => {
+  return isPolaroidWithFrame(themaKey)
+    ? {
+        backgroundImage: `url('/images/polaroidFrames/${themaKey}.svg')`,
+        backgroundSize: 'cover',
+      }
+    : {}
+}

src/types/polaroid.ts

@@ -37,6 +37,9 @@ export type ThemaKeyType =
   | 'F-6'
   | 'F-7'
   | 'F-8'
+  | 'F-9'
+  | 'F-10'
+  | 'F-11'
 
 export interface ThemaType {
   className: string