feat: use next env for typescript types

100-hours-a-week · Oct 8, 2024 · 87e5aef · 87e5aef
1 parent 96282d1
commit 87e5aef
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 142 deletions.
diff --git a/src/app/(pages)/4q-create/(modals)/tagSelectModal.tsx b/src/app/(pages)/4q-create/(modals)/tagSelectModal.tsx
@@ -4,11 +4,6 @@ import styles from "./tagSelectModal.module.css";
 import hot_mark from "../../../../../public/images/hot_tag.png";
 import tagTranslationMap from "@/lib/tagTranslationKrEn";
 
-interface TagSelectorProps {
-  selectedTags: string[];
-  onSelect: (selectedTags: string[]) => void;
-}
-
 export default function TagSelector({
   selectedTags,
   onSelect,

diff --git a/src/app/(pages)/4q-create/_components/first.tsx b/src/app/(pages)/4q-create/_components/first.tsx
@@ -10,10 +10,6 @@ const { Option } = Select;
 
 const STORAGE_KEY = "form_data";
 
-interface FirstProps {
-  formRef: React.RefObject<any>;
-  onSubmit: () => void;
-}
 
 export default function First({ formRef, onSubmit }: FirstProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);

diff --git a/src/app/(pages)/4q-create/_components/second.tsx b/src/app/(pages)/4q-create/_components/second.tsx
@@ -13,16 +13,6 @@ 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
@@ -6,29 +6,19 @@ import styles from "./third.module.css";
 import Konva from "konva";
 import { PiTextTBold } from "react-icons/pi";
 import { HiTrash } from "react-icons/hi";
-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';
-
-interface TextNode {
-  id: number;
-  text: string;
-  x: number;
-  y: number;
-  fontSize: number;
-  isEditing: boolean;
-  color: string;
-}
+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";
 
 interface FormData {
   url: string;
   shortenUrl: string;
   title: string;
   backgroundImageUrl: string;
-  backgroundImageId: number;  
+  backgroundImageId: number;
   shortenUrlId: number;
-  tags: string;
+  tags: string[];
   category: string;
 }
 
@@ -45,7 +35,7 @@ export default function Third() {
     backgroundImageUrl: "",
     backgroundImageId: 0,
     shortenUrlId: 0,
-    tags: "",
+    tags: [],
     category: "",
   });
   const [shortenUrl, setShortenUrl] = useState<string>("");
@@ -56,8 +46,8 @@ export default function Third() {
   const [isLoading, setLoading] = useState(false);
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const storedFormDataString = sessionStorage.getItem('form_data');
+    if (typeof window !== "undefined") {
+      const storedFormDataString = sessionStorage.getItem("form_data");
       if (storedFormDataString) {
         const parsedFormData = JSON.parse(storedFormDataString);
         setStoredFormData(parsedFormData);
@@ -83,9 +73,11 @@ export default function Third() {
     }
   };
 
-  const [backgroundImage] = useImage(storedFormData.backgroundImageUrl, 'anonymous');
-  const [qrImage] = useImage(qrImageUrl, 'anonymous');
-
+  const [backgroundImage] = useImage(
+    storedFormData.backgroundImageUrl,
+    "anonymous"
+  );
+  const [qrImage] = useImage(qrImageUrl, "anonymous");
 
   const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
     setQrPosition({
@@ -148,26 +140,27 @@ export default function Third() {
     }
   }, [qrImage, isSelected]);
 
-
   const handleSubmit = async () => {
     setLoading(true);
     try {
       if (stageRef.current) {
         const dataURL = stageRef.current.toDataURL({ pixelRatio: 3 });
         const ticketImage = await fetch(dataURL)
-          .then(res => res.blob())
-          .then(blob => new File([blob], "ticket.png", { type: "image/png" }));
+          .then((res) => res.blob())
+          .then(
+            (blob) => new File([blob], "ticket.png", { type: "image/png" })
+          );
 
         const responseMessage = await generateTicket(
           ticketImage,
           storedFormData.backgroundImageId,
           storedFormData.shortenUrlId,
-          storedFormData.title,
+          storedFormData.title
         );
         if (responseMessage?.ticketId) {
           setTimeout(() => {
             setLoading(false);
-          }, 4000); 
+          }, 4000);
           window.location.href = `/4q-create/download/${responseMessage.ticketId}`;
         } else {
           alert("티켓 생성에 실패했습니다.");
@@ -178,7 +171,7 @@ export default function Third() {
     } finally {
       setTimeout(() => {
         setLoading(false);
-      }, 8000); 
+      }, 8000);
     }
   };
 
@@ -301,17 +294,17 @@ export default function Third() {
               </Tooltip>
             </div>
             <div id="myqrcode">
-            <QRCode
-              value={shortenUrl}
-              bgColor="#fff"
-              style={{ margin: 16, display: 'none' }}
-            />
-          </div>
+              <QRCode
+                value={shortenUrl}
+                bgColor="#fff"
+                style={{ margin: 16, display: "none" }}
+              />
+            </div>
           </div>
           <div className={styles.submitBtnContainer}>
             <Button
               className={styles.submitBtn}
-              style={{ height: '40px', width: '140px' }}
+              style={{ height: "40px", width: "140px" }}
               onClick={handleSubmit}
             >
               생성하기

diff --git a/src/app/(pages)/4q-gallery/_components/first.tsx b/src/app/(pages)/4q-gallery/_components/first.tsx
@@ -6,11 +6,6 @@ import styles from "./first.module.css";
 
 const STORAGE_KEY = "form_data";
 
-interface FirstProps {
-  formRef: React.RefObject<any>;
-  onSubmit: () => void;
-}
-
 export default function First({ formRef, onSubmit }: FirstProps) {
   const [value, setValue] = useState<string[]>([]);
 

diff --git a/src/app/(pages)/4q-gallery/_components/item-card.tsx b/src/app/(pages)/4q-gallery/_components/item-card.tsx
@@ -8,25 +8,10 @@ import { Drawer, theme, message } from "antd";
 import { IoMdHeart } from "react-icons/io";
 import { IoPerson } from "react-icons/io5";
 import { likeImage, unlikeImage } from "@/service/photo_api";
-import Lottie from 'react-lottie-player';
-import heartLottie from '../../../../../public/rotties/heart-lottie.json';
+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;
-};
-
-type ItemCardProps = {
-  item: Item;
-};
-
 export default function ItemCard({ item }: ItemCardProps) {
   const { token } = theme.useToken();
   const [open, setOpen] = useState(false);
@@ -44,7 +29,7 @@ export default function ItemCard({ item }: ItemCardProps) {
   };
 
   const clickHeart = async () => {
-    const accessToken = sessionStorage.getItem('AccessToken');
+    const accessToken = sessionStorage.getItem("AccessToken");
 
     if (!accessToken) {
       message.error("로그인이 필요한 기능입니다.");
@@ -67,7 +52,7 @@ export default function ItemCard({ item }: ItemCardProps) {
           setPlayLottie(true);
           setTimeout(() => {
             setPlayLottie(false);
-          }, 1000); 
+          }, 1000);
         }
       }
     } catch (error) {
@@ -89,12 +74,7 @@ export default function ItemCard({ item }: ItemCardProps) {
           </div>
         )}
         <div className={styles.heartCircle}>
-          <Heart
-            width={25}
-            height={25}
-            active={active}
-            onClick={clickHeart}
-          />
+          <Heart width={25} height={25} active={active} onClick={clickHeart} />
         </div>
         <div className={styles.imgContainer}>
           <Image
@@ -109,7 +89,7 @@ export default function ItemCard({ item }: ItemCardProps) {
       <div className={styles.bottomContainer}>
         <div className={styles.author}>
           <IoPerson />
-          <span>{item.userName ? item.userName : '비로그인 회원'}</span>
+          <span>{item.userName ? item.userName : "비로그인 회원"}</span>
         </div>
         <div className={styles.heartCount}>
           <IoMdHeart />
@@ -123,7 +103,7 @@ export default function ItemCard({ item }: ItemCardProps) {
         onClose={onClose}
         open={open}
         height="97%"
-        getContainer={document.body}  
+        getContainer={document.body}
         className={styles.drawerContainer}
       >
         <div className={styles.detailContainer}>

diff --git a/src/app/(pages)/4q-gallery/_components/item-container.tsx b/src/app/(pages)/4q-gallery/_components/item-container.tsx
@@ -5,17 +5,6 @@ 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;
-};
-
 type ContainerProps = {
   category: string;
   tag: string;

diff --git a/src/app/(pages)/4q-gallery/_components/second.tsx b/src/app/(pages)/4q-gallery/_components/second.tsx
@@ -12,16 +12,6 @@ import loadingLottie from "../../../../../public/rotties/image-loading.json";
 import type { Stage as StageType } from "konva/lib/Stage";
 import { isMobile } from "react-device-detect";
 
-interface TextNode {
-  id: number;
-  text: string;
-  x: number;
-  y: number;
-  fontSize: number;
-  isEditing: boolean;
-  color: string;
-}
-
 interface FormData {
   url: string;
   shortenUrl: string;

diff --git a/src/app/(pages)/mypage/my-4q/page.tsx b/src/app/(pages)/mypage/my-4q/page.tsx
@@ -6,18 +6,8 @@ import { List } from "antd";
 import ItemList from "./_components/item-list";
 import { getMyTicket } from "../../../../service/photo_api";
 
-
-interface Ticket {
-  id: string;
-  title: string;
-  ticketUrl: string;
-  categoryName: string;
-  formattedDate: string;
-}
-
-
 export default function Page() {
-  const [tickets, setTickets] = useState<Ticket[]>([])
+  const [tickets, setTickets] = useState<Ticket[]>([]);
 
   useEffect(() => {
     const fetchTickets = async () => {
@@ -33,7 +23,9 @@ export default function Page() {
   }, []);
 
   const handleDelete = (id) => {
-    setTickets((prevTickets) => prevTickets.filter((ticket) => ticket.id !== id));
+    setTickets((prevTickets) =>
+      prevTickets.filter((ticket) => ticket.id !== id)
+    );
   };
 
   return (

diff --git a/src/service/useGalleryQuery.ts b/src/service/useGalleryQuery.ts
@@ -1,28 +1,5 @@
 import { useInfiniteQuery } from 'react-query';
 
-export interface Item {
-  id: string
-  createdAt: string;
-  imageId: number;
-  likeCount: number;
-  userName: string;
-  categoryName: string;
-  url: string;
-  tags: string[];
-  liked: boolean;
-}
-
-interface GalleryResponse {
-  content: Item[];
-  last: boolean;
-}
-
-interface UseGalleryQueryParams {
-  category: string;
-  tag: string;
-  sort: string;
-}
-
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL; 
 
 // API 호출 함수