Merge pull request #115 from DDD-Community/feature/junseub-qa

[QA] 3차 QA
DDD-Community · Sep 6, 2024 · 56a3012 · 56a3012
2 parents c2f5f03 + e4e570e
commit 56a3012
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 12 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -15,6 +15,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'polabo-contents.s3.ap-northeast-2.amazonaws.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'd3l8obr3u6wg96.cloudfront.net'
+      }
     ],
   },
   webpack: (config) => {

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -32,7 +32,7 @@ const ModalOverlay = ({
 
   return (
     <div
-      className={`fixed inset-0 z-20 flex items-center justify-center bg-gray-900/60 ${
+      className={`fixed inset-0 z-20 flex touch-pinch-zoom items-center justify-center overflow-hidden bg-gray-900/60 ${
         isVisible ? 'opacity-100' : 'opacity-0'
       }`}
       onClick={handleClick}

diff --git a/src/components/Polaroid/Base/PolaroidImage.tsx b/src/components/Polaroid/Base/PolaroidImage.tsx
@@ -1,6 +1,7 @@
 import { FILTERS } from '@/lib'
 import { useEffect, useState } from 'react'
 import { getImageWidthHeight } from '@/lib/utils/image'
+import Image from 'next/image'
 
 interface PolaroidImageProps {
   imageUrl: string
@@ -26,14 +27,26 @@ const PolaroidImage = ({ imageUrl }: PolaroidImageProps) => {
   }
 
   return (
-    <div
-      className={aspectRatio}
-      style={{
-        background: `radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.15) 100%), url(${imageUrl}) lightgray 50% / cover no-repeat`,
-        boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.10) inset',
-        filter: FILTERS.POLAROID,
-      }}
-    />
+    <div className="relative h-auto w-auto">
+      <div
+        className="absolute bottom-0 left-0 right-0 top-0 z-50"
+        style={{
+          background: `radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.15) 100%)`,
+          boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.10) inset',
+        }}
+      />
+      <Image
+        src={imageUrl}
+        alt="폴라로이드 이미지"
+        width={1000}
+        height={1000}
+        quality={100}
+        className={`${aspectRatio} object-cover`}
+        style={{
+          filter: FILTERS.POLAROID,
+        }}
+      />
+    </div>
   )
 }
 

diff --git a/src/components/Polaroid/PolaroidDetail/index.tsx b/src/components/Polaroid/PolaroidDetail/index.tsx
@@ -23,7 +23,7 @@ const PolaroidDetailModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <PolaroidFrame className="mx-auto flex w-[272px] flex-col overflow-y-hidden">
+      <PolaroidFrame className="mx-auto flex w-[272px] touch-pinch-zoom flex-col overflow-y-hidden">
         <div className="mt-5 px-3">
           <PolaroidImage imageUrl={polaroid.imageUrl} />
         </div>

diff --git a/src/components/Polaroid/PolaroidMaker/index.tsx b/src/components/Polaroid/PolaroidMaker/index.tsx
@@ -78,7 +78,7 @@ const PolaroidMaker = ({
   }
 
   return (
-    <PolaroidFrame className="mx-auto flex w-[272px] flex-col overflow-y-hidden">
+    <PolaroidFrame className="mx-auto flex w-[272px] touch-pinch-zoom flex-col overflow-y-hidden">
       <div className="mt-5 px-3">
         <PolaroidImageInput
           imageUrl={previewFile}

diff --git a/src/lib/constants/polaroidConfig.ts b/src/lib/constants/polaroidConfig.ts
@@ -1,6 +1,6 @@
 export const FILTERS = {
   NORMAL: 'none',
-  POLAROID: 'sepia(0.1) contrast(1.2) brightness(1.05) saturate(1.0) blur(0px)',
+  POLAROID: 'sepia(0.2) contrast(1.0) brightness(1) saturate(1.2) blur(0px)',
   VINTAGE:
     'sepia(0.4) contrast(1.1) brightness(0.9) saturate(0.8) hue-rotate(-20deg) blur(0.6px)',
 } as const