+
{children}
)
diff --git a/src/components/Polaroid/LoadingFilter.tsx b/src/components/Polaroid/LoadingFilter.tsx
new file mode 100644
index 0000000..de42f62
--- /dev/null
+++ b/src/components/Polaroid/LoadingFilter.tsx
@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom'
+import Loader from '../Loading'
+
+const Loading = ({ message }: { message: string }) => {
+ return ReactDOM.createPortal(
+
,
+ document.getElementById('modal-root') as HTMLElement,
+ )
+}
+
+export default Loading
diff --git a/src/components/Polaroid/PolaroidCard.tsx b/src/components/Polaroid/PolaroidCard.tsx
index 7361b53..61e5252 100644
--- a/src/components/Polaroid/PolaroidCard.tsx
+++ b/src/components/Polaroid/PolaroidCard.tsx
@@ -12,7 +12,7 @@ function PolaroidCard({ imageUrl, oneLineMessage, filter }: PolaroidCardProps) {
- {oneLineMessage}
+ {oneLineMessage}
)
diff --git a/src/components/Polaroid/PolaroidMaker.tsx b/src/components/Polaroid/PolaroidMaker.tsx
index c3a135e..2729076 100644
--- a/src/components/Polaroid/PolaroidMaker.tsx
+++ b/src/components/Polaroid/PolaroidMaker.tsx
@@ -1,22 +1,55 @@
'use client'
-import AddPhotoIcon from 'public/icons/add_photo_alternate.svg'
-import { ChangeEvent, useState } from 'react'
import { MAX_LENGTH } from '@/lib'
+import rotateImageIfNeeded from '@/lib/utils/image'
+import AddPhotoIcon from 'public/icons/add_photo_alternate.svg'
+import { ChangeEvent, useEffect, useState } from 'react'
import Base, { PolaroidImage } from './Base'
-const PolaroidMaker = () => {
+interface PolaroidMakerProps {
+ setButtonDisabled: (disabled: boolean) => void
+}
+
+const PolaroidMaker = ({ setButtonDisabled }: PolaroidMakerProps) => {
const [inputEnabled, setInputEnabled] = useState
(false)
const [text, setText] = useState('')
- const [selectedFile, setSelectedFile] = useState(null)
+ const [selectedFile, setSelectedFile] = useState(null)
+ // const [loadingImg, setLoadingImg] = useState(false)
- const handleFileChange = (event: React.ChangeEvent) => {
+ const handleFileChange = async (
+ event: React.ChangeEvent,
+ ) => {
if (event.target.files && event.target.files.length > 0) {
- setSelectedFile(event.target.files[0])
+ // setSelectedFile(event.target.files[0])
+
+ const file = event.target.files[0]
+ const imageUrl = URL.createObjectURL(file)
+ const rotatedUrl = await rotateImageIfNeeded(imageUrl)
+ setSelectedFile(rotatedUrl)
}
}
+ useEffect(() => {
+ setButtonDisabled(!selectedFile)
+ }, [selectedFile, setButtonDisabled])
+
+ // useEffect(() => {
+ // if (selectedFile) {
+ // setLoadingImg(true)
+ // setButtonDisabled(true)
+ // const timer = setTimeout(() => {
+ // setLoadingImg(false)
+ // setButtonDisabled(false)
+ // }, 3000)
+ // return () => clearTimeout(timer)
+ // }
+ // setButtonDisabled(true)
+
+ // return undefined
+ // }, [selectedFile, setButtonDisabled])
+
+ // if (loadingImg) return
return (
@@ -34,7 +67,7 @@ const PolaroidMaker = () => {
id="fileInput"
/>
{selectedFile ? (
-
+
) : (
)}
diff --git a/src/components/Polaroid/index.tsx b/src/components/Polaroid/index.tsx
deleted file mode 100644
index 04c0df1..0000000
--- a/src/components/Polaroid/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import Image from 'next/image'
-
-interface PolaroidProps {
- imageUrl: string
- oneLineMessage: string
- filter?: number
-}
-
-function Polaroid({ imageUrl, oneLineMessage, filter }: PolaroidProps) {
- let filterStyle = ''
- if (filter === 1) {
- filterStyle =
- 'sepia(0.2) contrast(1.3) brightness(1.0) saturate(1.2) blur(0.7px)'
- } else if (filter === 2) {
- filterStyle =
- 'sepia(0.4) contrast(1.1) brightness(0.9) saturate(0.8) hue-rotate(-20deg) blur(0.6px)'
- } else {
- filterStyle = 'none'
- }
-
- return (
-
- )
-}
-
-Polaroid.defaultProps = {
- filter: 1,
-}
-
-export default Polaroid
diff --git a/src/lib/api/board.ts b/src/lib/api/board.ts
index 12ddf7c..bf07cb2 100644
--- a/src/lib/api/board.ts
+++ b/src/lib/api/board.ts
@@ -28,11 +28,3 @@ export const getTotalBoards = (): Promise => {
},
})
}
-
-export const getTotalBoards = (): Promise => {
- return get('/api/v1/boards/total-count', {
- next: {
- tags: ['totalBoards'],
- },
- })
-}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..752a293
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+function middleware(request: NextRequest) {
+ const requestHeaders = new Headers(request.headers)
+ requestHeaders.set('x-pathname', request.nextUrl.pathname)
+
+ return NextResponse.next({
+ request: {
+ headers: requestHeaders,
+ },
+ })
+}
+
+export default middleware