refactor: use type declaration file

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({

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<TextNode[]>([]);
   const [selectedId, setSelectedId] = useState<number | null>(null);
   const [selectedColor, setSelectedColor] = useState<string>("#000000");
   const [qrImageUrl, setQrImageUrl] = useState<string>("");
-  const [storedFormData, setStoredFormData] = useState<FormData>({
-    url: "",
-    title: "",
-    shortenUrl: "",
-    backgroundImageUrl: "",
-    backgroundImageId: 0,
-    shortenUrlId: 0,
-    tags: [],
-    category: "",
-  });
+  const [storedFormData, setStoredFormData] = useState<FormData>(
+    {} as FormData
+  );
   const [shortenUrl, setShortenUrl] = useState<string>("");
   const stageRef = useRef<StageType>(null);
   const qrImageRef = useRef<Konva.Image>(null);

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;

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;

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[];

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<TextNode[]>([]);
@@ -46,7 +36,7 @@ export default function Third() {
     backgroundImageUrl: "",
     backgroundImageId: 0,
     shortenUrlId: 0,
-    tags: "",
+    tags: [],
     category: "",
   });
   const [shortenUrl, setShortenUrl] = useState<string>("");

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";

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 }) => {

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;
+}

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;
+}