diff --git a/src/app/(pages)/4q-create/_components/second.tsx b/src/app/(pages)/4q-create/_components/second.tsx index efa088c..d0bf3ce 100644 --- a/src/app/(pages)/4q-create/_components/second.tsx +++ b/src/app/(pages)/4q-create/_components/second.tsx @@ -8,22 +8,12 @@ import { generatePhotoImg } from "@/service/photo_api"; import { getShortenUrl } from "@/service/shorten_api"; import tagArrow from "../../../../../public/images/tag_arrow.png"; import tagTranslationMap from "@/lib/tagTranslationEnKr"; +import { FormData } from "@/types/form-data"; message.config({ maxCount: 3, }); -interface FormData { - url: string; - shortenUrl: string; - title: string; - backgroundImageUrl: string; - backgroundImagId: number; - shortenUrlId: number; - tags: string[]; - category: string; -} - export default function Second() { const [emblaRef, emblaApi] = useEmblaCarousel({ diff --git a/src/app/(pages)/4q-create/_components/third.tsx b/src/app/(pages)/4q-create/_components/third.tsx index 422f23f..ed88f31 100644 --- a/src/app/(pages)/4q-create/_components/third.tsx +++ b/src/app/(pages)/4q-create/_components/third.tsx @@ -10,6 +10,7 @@ import { generateTicket } from "@/service/photo_api"; import Lottie from "react-lottie-player"; import loadingLottie from "../../../../../public/rotties/image-loading.json"; import type { Stage as StageType } from "konva/lib/Stage"; +import { FormData } from "@/types/form-data"; interface TextNode { id: number; @@ -21,33 +22,15 @@ interface TextNode { color: string; } -interface FormData { - url: string; - shortenUrl: string; - title: string; - backgroundImageUrl: string; - backgroundImageId: number; - shortenUrlId: number; - tags: string[]; - category: string; -} - export default function Third() { const [qrPosition, setQrPosition] = useState({ x: 50, y: 50 }); const [textNodes, setTextNodes] = useState([]); const [selectedId, setSelectedId] = useState(null); const [selectedColor, setSelectedColor] = useState("#000000"); const [qrImageUrl, setQrImageUrl] = useState(""); - const [storedFormData, setStoredFormData] = useState({ - url: "", - title: "", - shortenUrl: "", - backgroundImageUrl: "", - backgroundImageId: 0, - shortenUrlId: 0, - tags: [], - category: "", - }); + const [storedFormData, setStoredFormData] = useState( + {} as FormData + ); const [shortenUrl, setShortenUrl] = useState(""); const stageRef = useRef(null); const qrImageRef = useRef(null); diff --git a/src/app/(pages)/4q-gallery/_components/detail.tsx b/src/app/(pages)/4q-gallery/_components/detail.tsx index 6292b33..3143d15 100644 --- a/src/app/(pages)/4q-gallery/_components/detail.tsx +++ b/src/app/(pages)/4q-gallery/_components/detail.tsx @@ -6,17 +6,7 @@ import { FaArrowLeft } from "react-icons/fa6"; import { Button, Divider } from "antd"; import CreateContainer from "./create-container"; import { PiFolderOpenDuotone, PiCalendarBlankDuotone } from "react-icons/pi"; - -type Item = { - imageId: number; - userName: string; - url: string; - likeCount: number; - tags: string[]; - categoryName: string; - createdAt: string; - liked: boolean; -}; +import { Item } from "@/types/item"; type DetailProps = { item: Item; diff --git a/src/app/(pages)/4q-gallery/_components/item-card.tsx b/src/app/(pages)/4q-gallery/_components/item-card.tsx index 7a520b4..2dada1a 100644 --- a/src/app/(pages)/4q-gallery/_components/item-card.tsx +++ b/src/app/(pages)/4q-gallery/_components/item-card.tsx @@ -11,17 +11,7 @@ import { likeImage, unlikeImage } from "@/service/photo_api"; import Lottie from "react-lottie-player"; import heartLottie from "../../../../../public/rotties/heart-lottie.json"; import Image from "next/image"; - -type Item = { - imageId: number; - userName: string; - url: string; - likeCount: number; - tags: string[]; - categoryName: string; - createdAt: string; - liked: boolean; -}; +import { Item } from "@/types/item"; type ItemCardProps = { item: Item; diff --git a/src/app/(pages)/4q-gallery/_components/item-container.tsx b/src/app/(pages)/4q-gallery/_components/item-container.tsx index 4883879..6148e93 100644 --- a/src/app/(pages)/4q-gallery/_components/item-container.tsx +++ b/src/app/(pages)/4q-gallery/_components/item-container.tsx @@ -4,17 +4,7 @@ import ItemCard from "./item-card"; import { getGalleryData } from "@/service/photo_api"; import { Button } from "antd"; import { BounceDot } from "basic-loading"; - -type Item = { - createdAt: string; - imageId: number; - likeCount: number; - userName: string; - categoryName: string; - url: string; - tags: string[]; - liked: boolean; -}; +import { Item } from "@/types/item"; type GalleryPage = { content: Item[]; diff --git a/src/app/(pages)/4q-gallery/_components/second.tsx b/src/app/(pages)/4q-gallery/_components/second.tsx index 545c4a6..8da5b4e 100644 --- a/src/app/(pages)/4q-gallery/_components/second.tsx +++ b/src/app/(pages)/4q-gallery/_components/second.tsx @@ -11,6 +11,7 @@ import Lottie from "react-lottie-player"; import loadingLottie from "../../../../../public/rotties/image-loading.json"; import type { Stage as StageType } from "konva/lib/Stage"; import { isMobile } from "react-device-detect"; +import { FormData } from "@/types/form-data"; interface TextNode { id: number; @@ -22,17 +23,6 @@ interface TextNode { color: string; } -interface FormData { - url: string; - shortenUrl: string; - title: string; - backgroundImageUrl: string; - backgroundImageId: number; - shortenUrlId: number; - tags: string; - category: string; -} - export default function Third() { const [qrPosition, setQrPosition] = useState({ x: 50, y: 50 }); const [textNodes, setTextNodes] = useState([]); @@ -46,7 +36,7 @@ export default function Third() { backgroundImageUrl: "", backgroundImageId: 0, shortenUrlId: 0, - tags: "", + tags: [], category: "", }); const [shortenUrl, setShortenUrl] = useState(""); diff --git a/src/app/(pages)/4q-gallery/page.tsx b/src/app/(pages)/4q-gallery/page.tsx index 72c411d..b6080a2 100644 --- a/src/app/(pages)/4q-gallery/page.tsx +++ b/src/app/(pages)/4q-gallery/page.tsx @@ -1,7 +1,7 @@ // page.tsx "use client"; export const dynamic = "force-dynamic"; -import React, { useState, useCallback, Suspense } from "react"; +import React, { useState, Suspense } from "react"; import { useSearchParams } from "next/navigation"; import Container from "./_components/item-container"; import "react-horizontal-scrolling-menu/dist/styles.css"; diff --git a/src/service/ReactQueryClientProvider.tsx b/src/service/ReactQueryClientProvider.tsx index 7da27bd..a647883 100644 --- a/src/service/ReactQueryClientProvider.tsx +++ b/src/service/ReactQueryClientProvider.tsx @@ -3,7 +3,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import React from 'react'; -// Create a client const queryClient = new QueryClient(); export const ReactQueryClientProvider = ({ children }: { children: React.ReactNode }) => { diff --git a/src/types/form-data.ts b/src/types/form-data.ts new file mode 100644 index 0000000..b64f6db --- /dev/null +++ b/src/types/form-data.ts @@ -0,0 +1,10 @@ +export interface FormData { + url: string; + shortenUrl: string; + title: string; + backgroundImageUrl: string; + backgroundImageId: number; + shortenUrlId: number; + tags: string[]; + category: string; +} diff --git a/src/types/item.ts b/src/types/item.ts new file mode 100644 index 0000000..f509e3d --- /dev/null +++ b/src/types/item.ts @@ -0,0 +1,10 @@ +export interface Item { + imageId: number; + userName: string; + url: string; + likeCount: number; + tags: string[]; + categoryName: string; + createdAt: string; + liked: boolean; +}