Image 태그를 공통된 컴포넌트를 사용하도록 변경 (24.04.08)

Image 태그를 공통된 컴포넌트를 사용하도록 변경 (24.04.08)

next.config.js

@@ -12,6 +12,7 @@ const nextConfig = {
     domains: ["image.toast.com"],
     minimumCacheTTL: 86400,
     deviceSizes: [480, 768, 980],
+    imageSizes: [96, 128, 256, 384, 480],
   },
 };
 

src/apis/image.ts

@@ -1,7 +1,7 @@
-import { TImageType } from "@/types/base";
+import { EImageType } from "@/types/base";
 import api from "@/apis";
 
-const uploadImage = async (type: TImageType, formData: FormData) => {
+const uploadImage = async (type: EImageType, formData: FormData) => {
   const { data } = await api.post<string>(`/images/${type}`, formData, {
     headers: { "Content-Type": "multipart/form-data" },
   });

src/app/sitemap.ts

@@ -8,7 +8,11 @@ async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const url = `${API_URL}/posts?${query}`;
 
   try {
-    const res = await fetch(url, { method: "GET", cache: "no-store" });
+    const res = await fetch(url, {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+      next: { revalidate: 86400 },
+    });
 
     const posts = (await res.json()) as IPost[];
 

src/components/modal/ModalPortal.tsx

@@ -3,7 +3,7 @@ import { FC, useRef, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
 interface Props {
-  children: React.ReactChild;
+  children: React.ReactNode;
 }
 
 const ModalPortal: FC<Props> = ({ children }) => {

src/components/modal/about/SkillForm.tsx

@@ -1,14 +1,14 @@
 import React, { useRef } from "react";
 
-import Image from "next/image";
-
 import { useSkillMutation } from "@hooks/query/skill";
 import { useUploadImage } from "@hooks/query/image";
 import Input from "@components/ui/core/Input";
+import Image from "@components/ui/core/Image";
 import Button from "@components/ui/core/Button";
 import ModalLayout from "@components/modal/ModalLayout";
 import { ImageIcon } from "@components/icons";
 import { ESkillType, ISkill } from "@/types/skill";
+import { EImageType } from "@/types/base";
 
 interface IProps {
   onClose: () => void;
@@ -26,7 +26,7 @@ const SkillForm = ({ onClose, skill }: IProps) => {
 
   const { image, changeImage, clearImage } = useUploadImage({
     defaultImg: skill?.icon ?? "",
-    type: "skill",
+    type: EImageType.SKILL,
   });
 
   const { createOrUpdate, remove } = useSkillMutation(skill?._id);
@@ -109,7 +109,7 @@ const SkillForm = ({ onClose, skill }: IProps) => {
           <div className="flex items-center gap-4">
             {image && (
               <Image
-                className="cursor-pointer"
+                className="aspect-square cursor-pointer"
                 src={image}
                 alt="thumbnail"
                 onClick={clearImage}

src/components/modal/series/edit.tsx

@@ -8,6 +8,7 @@ import Image from "@components/ui/core/Image";
 import Button from "@components/ui/core/Button";
 import ModalLayout from "@components/modal/ModalLayout";
 import { ImageIcon } from "@components/icons";
+import { EImageType } from "@/types/base";
 import { ISeries } from "@/types";
 
 interface IProps {
@@ -25,7 +26,7 @@ const EditSeries = ({ series, onClose }: IProps) => {
 
   const { image, changeImage, clearImage } = useUploadImage({
     defaultImg: thumbnail,
-    type: "series",
+    type: EImageType.SERIES,
   });
 
   const thumbnailHandler = (e: React.MouseEvent) => {

src/components/pages/About/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Image from "next/image";
-
 import { ABOUT_INFOS, USER_DETAIL, USER_LINKS } from "@utils/constant/user";
+import Image from "@components/ui/core/Image";
+
 import Skill from "@components/ui/client/about/Skill";
 import Project from "@components/ui/client/about/Project";
 import Experience from "@components/ui/client/about/Experience";
@@ -23,7 +23,7 @@ const About = () => {
             alt="main"
             width={200}
             height={200}
-            className="rounded-md md:hidden"
+            className="aspect-square rounded-md md:hidden"
           />
         </div>
         <p className="font-light">{USER_DETAIL.description}</p>

src/components/pages/Post/[nid]/index.tsx

@@ -15,7 +15,7 @@ const Post = ({ params }: IProps) => {
   const nid = Number(params.nid);
 
   return (
-    <section className="frame flex w-[theme(screens.xl.max)] flex-col items-center xl:w-full">
+    <section className="frame relative flex w-[theme(screens.xl.max)] flex-col items-center xl:w-full">
       <Hydrate nid={nid}>
         <PostHeader nid={nid} />
         <PostContent nid={nid} />

src/components/pages/Series/page.client.tsx

@@ -21,9 +21,12 @@ const Series = () => {
             key={series._id}
             className="group flex cursor-pointer flex-col items-center justify-start gap-3"
           >
-            <div className="w-full flex-1 rounded-b-md rounded-t-md">
-              <Image src={series.thumbnail ?? "/SEOKO.png"} alt={series.name} priority />
-            </div>
+            <Image
+              src={series.thumbnail ?? "/SEOKO.png"}
+              alt={series.name}
+              priority
+              className="aspect-default w-full flex-1 rounded-b-md rounded-t-md "
+            />
             <div className="flex w-full flex-col gap-2">
               <h3 className="truncate font-semibold text-primary transition-[color] group-hover:text-effect1">
                 {series.name}

src/components/ui/Markdown/editor.tsx

@@ -10,10 +10,10 @@ import MDEditor, {
 } from "@uiw/react-md-editor";
 import { useUploadImageMutation } from "@hooks/query/image";
 import { ImageIcon } from "@components/icons";
-import { TImageType } from "@/types/base";
+import { EImageType } from "@/types/base";
 
 interface IProps {
-  type: TImageType;
+  type: EImageType;
   content: string;
   onChangeContent: (value: string) => void;
 }

src/components/ui/Markdown/overrides/img.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import React from "react";
 
-import NextImage, { ImageProps } from "next/image";
+import { ImageProps } from "next/image";
+
+import NextImage from "@components/ui/core/Image";
 
 const IMAGE_BASE_URL = "image.toast.com";
 
@@ -23,8 +25,8 @@ const img = (props: ImageProps) => {
   return (
     <>
       <NextImage
+        priority
         alt={alt ?? "post_image"}
-        loading="lazy"
         {...rest}
         width={1000}
         height={1000}

src/components/ui/PostList/Item.tsx

@@ -32,7 +32,13 @@ const PostItem = ({ post }: IProps) => {
     <Link href={`/post/${nid}`} className="w-full">
       <div className="group relative flex w-full cursor-pointer items-center justify-center gap-8 rounded-md px-2 py-2 transition-[background-color] hover:bg-tertiary md:flex-col md:gap-0">
         <div className="relative flex w-[250px] flex-col rounded-lg bg-gray-400 transition-[box-shadow] group-hover:shadow-md md:w-full">
-          <Image src={thumbnail} alt={title} placeholder="blur" blurDataURL={thumbnail} />
+          <Image
+            src={thumbnail}
+            alt={title}
+            placeholder="blur"
+            blurDataURL={thumbnail}
+            className="aspect-default rounded-lg"
+          />
         </div>
         <div className="flex flex-1 flex-col justify-around gap-4 break-all text-primary md:min-h-0 md:w-full md:gap-3 md:px-2 md:py-3">
           <h1 className="w-full text-lg font-medium transition-[color] group-hover:text-effect1">

src/components/ui/ProjectHeader/index.tsx

@@ -36,7 +36,7 @@ const ProjectHeader = ({ project }: IProps) => {
 
   return (
     <header className="mt-8 flex w-[theme(screens.md.max)] flex-col items-center justify-center gap-3 break-all md:w-full">
-      <Image src={thumbnail} alt="project-thumbnail" />
+      <Image src={thumbnail} alt="project-thumbnail" className="aspect-default rounded-lg" />
       <h1 className="text-xl font-bold text-primary transition-[color]">{title}</h1>
       <p className="text-sm text-slate-500 transition-[color] dark:text-slate-400">{description}</p>
       <div className="text-sm text-slate-500 transition-[color] dark:text-slate-400">

src/components/ui/ProjectList/index.tsx

@@ -15,9 +15,12 @@ const ProjectList = ({ projects }: IProps) => {
       {projects.map((project) => (
         <Link key={project._id} href={`/project/${project.nid}`}>
           <div className="flex cursor-pointer flex-col items-center justify-start rounded-md bg-secondary text-primary shadow-md transition-[color,background-color,transform,box-shadow] hover:-translate-y-2 hover:shadow-lg">
-            <div className="aspect-[2/1] w-full flex-1 rounded-b-md rounded-t-md [&>img]:rounded-b-none">
-              <Image src={project.thumbnail} alt={project.title} priority />
-            </div>
+            <Image
+              src={project.thumbnail}
+              alt={project.title}
+              priority
+              className="aspect-default w-full flex-1 rounded-b-md rounded-t-md [&>img]:rounded-b-none"
+            />
             <div className="flex w-full flex-col gap-2 whitespace-pre-wrap break-all px-2 py-2 text-primary transition-[color,opacity]">
               <h3 className="truncate text-lg font-bold">{project.title}</h3>
               <div className="truncate text-sm">{project.description}</div>

src/components/ui/client/post/PostHeader/index.tsx

@@ -50,7 +50,7 @@ const PostHeader = ({ nid }: IProps) => {
 
   return (
     <div className="mb-2 mt-4 flex w-[theme(screens.md.max)] flex-col items-center justify-center gap-5 break-all md:w-full">
-      <Image src={thumbnail} alt="post-thumbnail" priority />
+      <Image priority alt="post-thumbnail" src={thumbnail} className="aspect-default rounded-lg" />
       <h1 className="text-center text-xl font-bold text-primary transition-[color]">{title}</h1>
       {tags.length > 0 && <TagList className="justify-center" tags={tags} onClick={onClickTag} />}
       <PostSubInfo viewCount={viewCount} likeCount={likeCount} createdAt={createdAt} />

src/components/ui/client/write/post/Header.tsx

@@ -80,7 +80,14 @@ const PostHeader = (props: IProps) => {
       <h3 className="text-xl font-semibold text-primary">썸네일</h3>
       <div className="flex items-center gap-4">
         <div className="w-[200px] md:w-full">
-          {thumbnail && <Image src={thumbnail} alt="thumbnail" onClick={clearThumbnail} />}
+          {thumbnail && (
+            <Image
+              src={thumbnail}
+              alt="thumbnail"
+              onClick={clearThumbnail}
+              className="aspect-default rounded-lg"
+            />
+          )}
         </div>
         <span onClick={thumbnailHandler}>
           <ImageIcon className="h-16 w-16 cursor-pointer fill-[theme(textColor.primary)] hover:opacity-50" />

src/components/ui/client/write/post/index.tsx

@@ -11,6 +11,7 @@ import { useUploadImage } from "@hooks/query/image";
 import PostHeader from "@components/ui/client/write/post/Header";
 import WriteFooter from "@components/ui/client/write/Footer";
 import SeriesList from "@components/modal/series/list";
+import { EImageType } from "@/types/base";
 
 interface IProps {
   nid: number | null;
@@ -27,7 +28,7 @@ const Post = ({ nid }: IProps) => {
   const [tags, deletedTags, addedTags, tagHandler, onClickTag] = useWriteTag(post);
   const { image, changeImage, clearImage } = useUploadImage({
     defaultImg: post?.thumbnail,
-    type: "post",
+    type: EImageType.POST,
   });
 
   const thumbnailRef = useRef<HTMLInputElement | null>(null);
@@ -72,7 +73,11 @@ const Post = ({ nid }: IProps) => {
           thumbnailHandler={thumbnailHandler}
           clearThumbnail={clearImage}
         />
-        <Editor type="post" content={postInput.content} onChangeContent={onChangeContent} />
+        <Editor
+          type={EImageType.POST}
+          content={postInput.content}
+          onChangeContent={onChangeContent}
+        />
         <WriteFooter save={addPost} />
       </div>
       {openSeries && (

src/components/ui/client/write/project/Header.tsx

@@ -86,7 +86,14 @@ const Header = (props: IProps) => {
       <h3 className="text-xl font-semibold text-primary transition-[color]">썸네일</h3>
       <div className="flex items-center gap-4">
         <div className="w-[200px] md:w-full">
-          {thumbnail && <Image src={thumbnail} alt="thumbnail" onClick={clearThumbnail} />}
+          {thumbnail && (
+            <Image
+              src={thumbnail}
+              alt="thumbnail"
+              onClick={clearThumbnail}
+              className="aspect-default rounded-lg"
+            />
+          )}
         </div>
         <span onClick={thumbnailHandler}>
           <ImageIcon className="h-16 w-16 cursor-pointer fill-[theme(textColor.primary)] transition-[fill] hover:opacity-50" />

src/components/ui/client/write/project/index.tsx

@@ -9,6 +9,7 @@ import { useGetProjectQuery, useProjectMutation } from "@hooks/query/project";
 import { useUploadImage } from "@hooks/query/image";
 import ProjectHeader from "@components/ui/client/write/project/Header";
 import WriteFooter from "@components/ui/client/write/Footer";
+import { EImageType } from "@/types/base";
 
 interface IProps {
   nid: number | null;
@@ -23,7 +24,7 @@ const Project = ({ nid }: IProps) => {
   const [input, onChangeValue, onChangeContent] = useWriteProject(project);
   const { image, changeImage, clearImage } = useUploadImage({
     defaultImg: project?.thumbnail,
-    type: "project",
+    type: EImageType.PROJECT,
   });
 
   const thumbnailRef = useRef<HTMLInputElement | null>(null);
@@ -60,7 +61,7 @@ const Project = ({ nid }: IProps) => {
         thumbnailHandler={thumbnailHandler}
         clearThumbnail={clearImage}
       />
-      <Editor type="post" content={content} onChangeContent={onChangeContent} />
+      <Editor type={EImageType.PROJECT} content={content} onChangeContent={onChangeContent} />
       <WriteFooter save={addProject} />
     </section>
   );

src/components/ui/core/Avatar/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Image from "next/image";
+import Image from "@components/ui/core/Image";
 
 interface IProps {
   src?: string;
@@ -18,9 +18,8 @@ const Avatar: React.FC<IProps> = (props) => {
         width={width}
         height={height}
         src={src}
-        quality={100}
         alt="avatar"
-        className="rounded-[50%] bg-slate-400 object-cover"
+        className="aspect-square rounded-full bg-slate-400 object-cover"
       />
     </div>
   );

src/components/ui/core/Image/index.tsx

@@ -5,12 +5,13 @@ import NextImage, { ImageProps } from "next/image";
 const Image = ({ width, height, className = "", ...rest }: ImageProps) => {
   return (
     <NextImage
-      {...rest}
       style={{ objectFit: "cover" }}
-      className={`relative aspect-[150/100] h-auto max-w-full rounded-lg ${className}`}
+      className={`relative h-auto max-w-full ${className}`}
       quality={100}
+      sizes="(max-width: 980px) 980px, 768px, 50vw, 33vw"
       width={rest.fill ? undefined : width ?? 1000}
       height={rest.fill ? undefined : height ?? 1000}
+      {...rest}
     />
   );
 };

src/components/ui/core/SkillImage/index.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-import Image, { ImageProps } from "next/image";
+import { ImageProps } from "next/image";
+
+import Image from "@components/ui/core/Image";
 
 interface IProps extends ImageProps {
   size?: number;

src/hooks/query/image.ts

@@ -1,15 +1,15 @@
 import { useState } from "react";
 
 import { useMutation } from "@tanstack/react-query";
-import { TImageType } from "@/types/base";
+import { EImageType } from "@/types/base";
 import { uploadImage } from "@/apis/image";
 
 interface IProps {
   defaultImg?: string;
-  type: TImageType;
+  type: EImageType;
 }
 
-const useUploadImageMutation = (type: TImageType) => {
+const useUploadImageMutation = (type: EImageType) => {
   return useMutation({
     mutationFn: (file: FormData) => uploadImage(type, file),
   });

src/types/base.ts

@@ -13,4 +13,12 @@ interface IToc {
 
 type TImageType = "post" | "project" | "skill" | "series";
 
+enum EImageType {
+  POST = "post",
+  PROJECT = "project",
+  SKILL = "skill",
+  SERIES = "series",
+}
+
+export { EImageType };
 export type { IBaseResponse, IToc, TImageType };