Merge pull request #513 from solid-connection/codex/cdn-upload-unify-main-clean

manNomi · web-flow · commit 6dd12bc498d7 · 2026-05-03T23:53:44.000+09:00
refactor(web): 이미지 URL 유틸을 normalizeImageUrlToUploadCdn로 단일화
diff --git a/apps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx b/apps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import Image from "@/components/ui/FallbackImage";
 import { getHomeUniversitySlugByName } from "@/constants/university";
 import type { ListUniversity } from "@/types/university";
-import { convertImageUrl } from "@/utils/fileUtils";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 
 type PopularUniversityCardProps = {
   university: ListUniversity;
@@ -32,7 +32,7 @@ const PopularUniversityCard = ({
             className="h-[120px] rounded-lg object-cover"
             src={
               university.backgroundImageUrl
-                ? convertImageUrl(university.backgroundImageUrl)
+                ? normalizeImageUrlToUploadCdn(university.backgroundImageUrl)
                 : "/svgs/placeholders/university-background-placeholder.svg"
             }
             width={153}
diff --git a/apps/web/src/app/community/[boardCode]/PostCards.tsx b/apps/web/src/app/community/[boardCode]/PostCards.tsx
@@ -8,8 +8,8 @@ import { IconPostLikeOutline } from "@/public/svgs";
 import { IconCommunication } from "@/public/svgs/community";
 import { IconSolidConnentionLogo } from "@/public/svgs/mentor";
 import type { ListPost } from "@/types/community";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import { convertISODateToDate } from "@/utils/datetimeUtils";
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
 
 type PostCardsProps = {
   posts: ListPost[];
@@ -99,7 +99,7 @@ export const PostCard = ({ post }: { post: ListPost }) => (
         {post.postThumbnailUrl ? (
           <Image
             className="object-cover"
-            src={convertUploadedImageUrl(post.postThumbnailUrl)}
+            src={normalizeImageUrlToUploadCdn(post.postThumbnailUrl)}
             fill
             sizes="80px"
             alt="게시글 사진"
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -8,8 +8,8 @@ import Image from "@/components/ui/FallbackImage";
 import { DEFAULT_PROFILE_IMAGE } from "@/constants/profile";
 import { IconMoreVertFilled, IconSubComment } from "@/public/svgs";
 import type { Comment as CommentType, CommunityUser } from "@/types/community";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import { convertISODateToDateTime } from "@/utils/datetimeUtils";
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
 import CommentInput from "./CommentInput";
 
 type CommentSectionProps = {
@@ -138,7 +138,7 @@ const CommentProfile = ({ user }: { user: CommunityUser }) => {
       <div className="h-[25px] w-[25px] rounded-full bg-bg-600">
         <Image
           className="h-full w-full rounded-full"
-          src={user?.profileImageUrl ? convertUploadedImageUrl(user?.profileImageUrl) : DEFAULT_PROFILE_IMAGE}
+          src={user?.profileImageUrl ? normalizeImageUrlToUploadCdn(user?.profileImageUrl) : DEFAULT_PROFILE_IMAGE}
           width={40}
           height={40}
           alt="alt"
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
@@ -8,8 +8,8 @@ import { DEFAULT_PROFILE_IMAGE } from "@/constants/profile";
 import { IconCloseFilled, IconPostLikeFilled, IconPostLikeOutline } from "@/public/svgs";
 import { IconCommunication } from "@/public/svgs/community";
 import type { PostImage as PostImageType, Post as PostType } from "@/types/community";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import { convertISODateToDateTime } from "@/utils/datetimeUtils";
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
 
 export const metadata: Metadata = {
   title: "글 상세보기",
@@ -117,7 +117,7 @@ const Content = ({ post, postId }: ContentProps) => {
               className="h-full w-full rounded-full object-cover"
               src={
                 post.postFindSiteUserResponse.profileImageUrl
-                  ? convertUploadedImageUrl(post.postFindSiteUserResponse.profileImageUrl)
+                  ? normalizeImageUrlToUploadCdn(post.postFindSiteUserResponse.profileImageUrl)
                   : DEFAULT_PROFILE_IMAGE
               }
               width={40}
@@ -147,7 +147,7 @@ const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageC
       <div className="mb-3 pr-5">
         <div className="relative pt-[75%]">
           <Image
-            src={convertUploadedImageUrl(images[0].url)}
+            src={normalizeImageUrlToUploadCdn(images[0].url)}
             layout="fill"
             objectFit="cover"
             alt="image"
@@ -163,7 +163,7 @@ const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageC
         {images.map((image, index) => (
           <Image
             key={image.id}
-            src={convertUploadedImageUrl(image.url)}
+            src={normalizeImageUrlToUploadCdn(image.url)}
             width={197}
             height={197}
             alt="image"
@@ -196,7 +196,7 @@ const ImagePopup = ({ image, title, onClose }: ImagePopupProps) => (
       <div />
     </div>
     <div className="relative flex-grow">
-      <Image src={convertUploadedImageUrl(image.url)} layout="fill" objectFit="contain" alt="Popup" />
+      <Image src={normalizeImageUrlToUploadCdn(image.url)} layout="fill" objectFit="contain" alt="Popup" />
     </div>
   </div>
 );
diff --git a/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/_ui/MentorArticle/index.tsx b/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/_ui/MentorArticle/index.tsx
@@ -3,7 +3,7 @@
 import Image from "@/components/ui/FallbackImage";
 import { IconLikeFill, IconLikeNotFill } from "@/public/svgs/mentor";
 import type { Article } from "@/types/news";
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import useLikeToggle from "./_hooks/useLikeToggle";
 
 interface MentorArticleProps {
@@ -13,7 +13,7 @@ interface MentorArticleProps {
 
 const MentorArticle = ({ article, mentorId }: MentorArticleProps) => {
   const { isLiked, handleToggleLike } = useLikeToggle(article.id, mentorId, article.isLiked);
-  const thumbnailUrl = convertUploadedImageUrl(article.thumbnailUrl);
+  const thumbnailUrl = normalizeImageUrlToUploadCdn(article.thumbnailUrl);
   return (
     <div key={article.description} className="overflow-hidden">
       {/* 아티클 이미지 */}
diff --git a/apps/web/src/app/mentor/modify/_ui/ModifyContent/_ui/ArticlePanel/index.tsx b/apps/web/src/app/mentor/modify/_ui/ModifyContent/_ui/ArticlePanel/index.tsx
@@ -5,8 +5,8 @@ import ReusableDropdown from "@/components/ui/ReusableDropdown";
 import ArticleThumbPng from "@/public/images/article-thumb.png";
 import { IconPencil } from "@/public/svgs/mentor";
 import { type Article, ArticleDropdownType } from "@/types/news";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import { convertISODateToDate } from "@/utils/datetimeUtils";
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
 import useDeleteDropDownHandler from "./_hooks/useDropDownHandler";
 
 interface ArticlePanelProps {
@@ -25,7 +25,7 @@ const ArticlePanel = ({ article, userId }: ArticlePanelProps) => {
     userId,
   });
 
-  const imageSrc = article.thumbnailUrl ? convertUploadedImageUrl(article.thumbnailUrl) : ArticleThumbPng;
+  const imageSrc = article.thumbnailUrl ? normalizeImageUrlToUploadCdn(article.thumbnailUrl) : ArticleThumbPng;
 
   return (
     <>
diff --git a/apps/web/src/app/my/modify/_ui/ModifyContent/_ui/ImageInputFiled/_hooks/useImageInputHandler.ts b/apps/web/src/app/my/modify/_ui/ModifyContent/_ui/ImageInputFiled/_hooks/useImageInputHandler.ts
@@ -1,7 +1,7 @@
 import { type ChangeEvent, type RefObject, useEffect, useRef, useState } from "react";
 import { useController, useFormContext } from "react-hook-form";
 
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 
 interface ImageInputHandlerReturn {
   selectedImage: File | undefined;
@@ -26,7 +26,7 @@ const useImageInputHandler = (initImagePreview: string | null): ImageInputHandle
 
   useEffect(() => {
     if (initImagePreview) {
-      setImagePreviewUrl(convertUploadedImageUrl(initImagePreview));
+      setImagePreviewUrl(normalizeImageUrlToUploadCdn(initImagePreview));
     }
   }, [initImagePreview]);
 
diff --git a/apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx b/apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx
@@ -1,7 +1,7 @@
 import Image from "@/components/ui/FallbackImage";
 import LinkifyText from "@/components/ui/LinkifyText";
 import type { University } from "@/types/university";
-import { convertImageUrl } from "@/utils/fileUtils";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import InfoSection from "./_ui/InfoSection";
 import LanguageSection from "./_ui/LanguageSection";
 import MapSection from "./_ui/MapSection";
@@ -23,7 +23,7 @@ const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) =>
       <div className="relative -z-10 h-60 w-full bg-blue-100">
         <Image
           alt="대학 이미지"
-          src={convertImageUrl(university.backgroundImageUrl)}
+          src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
           fill
           className="object-cover"
           fallbackSrc="/svgs/placeholders/image-placeholder.svg"
@@ -33,7 +33,7 @@ const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) =>
         <TitleSection
           title={koreanName}
           subTitle={university.englishName}
-          logoUrl={convertImageUrl(university.logoImageUrl)}
+          logoUrl={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
         />
         {/* TODO: totalDispatchCount 추가시 연동, 나라에 국기 추가 */}
         <div className="mb-7 mt-10 flex justify-center divide-x">
diff --git a/apps/web/src/components/mentor/ArticleBottomSheetModal/hooks/useArticleSchema.ts b/apps/web/src/components/mentor/ArticleBottomSheetModal/hooks/useArticleSchema.ts
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useGetMentorMyProfile } from "@/apis/mentor";
 import { usePostAddArticle, usePutModifyArticle } from "@/apis/news";
-import { convertUploadedImageUrl } from "@/utils/fileUtils";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import type { InitialData } from "..";
 import { type ArticleFormData, articleSchema } from "../lib/schema";
 
@@ -61,7 +61,7 @@ const useArticleSchema = ({
       reset(defaultValues); // react-hook-form의 reset 기능으로 defaultValues 설정
 
       // 이미지 미리보기도 초기 데이터로 설정합니다.
-      const imageSrc = initialData?.thumbnailUrl ? convertUploadedImageUrl(initialData.thumbnailUrl) : null;
+      const imageSrc = initialData?.thumbnailUrl ? normalizeImageUrlToUploadCdn(initialData.thumbnailUrl) : null;
       setImagePreview(imageSrc);
     } else {
       // 모달이 닫힐 때: 모든 상태를 깨끗하게 초기화합니다.
diff --git a/apps/web/src/components/ui/UniverSityCard/index.tsx b/apps/web/src/components/ui/UniverSityCard/index.tsx
@@ -3,7 +3,7 @@ import Image from "@/components/ui/FallbackImage";
 import CheveronRightFilled from "@/components/ui/icon/ChevronRightFilled";
 import { getHomeUniversitySlugByName } from "@/constants/university";
 import type { ListUniversity } from "@/types/university";
-import { convertImageUrl } from "@/utils/fileUtils";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import shortenLanguageTestName from "@/utils/universityUtils";
 
 type UniversityCardProps = {
@@ -31,7 +31,7 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
             <div className="flex flex-shrink-0 items-center">
               <Image
                 className="h-14 w-14 rounded-full object-cover"
-                src={convertImageUrl(university.logoImageUrl)}
+                src={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
                 width={56}
                 height={56}
                 alt="대학 이미지"
diff --git a/apps/web/src/utils/fileUtils.ts b/apps/web/src/utils/fileUtils.ts
@@ -1,5 +1,3 @@
-import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
-
 // 파일명에서 확장자 추출
 export const getFileExtension = (url: string) => {
   return url.split(".").pop()?.toUpperCase() || "FILE";
@@ -58,11 +56,3 @@ export const downloadLocalFile = (file: File, fileName?: string) => {
   document.body.removeChild(link);
   URL.revokeObjectURL(blobUrl);
 };
-
-export const convertUploadedImageUrl = (url: string | null | undefined): string => {
-  return normalizeImageUrlToUploadCdn(url);
-};
-
-export const convertImageUrl = (url: string | null | undefined): string => {
-  return normalizeImageUrlToUploadCdn(url);
-};
