diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
index d14d3605..e1024dff 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -5,12 +5,10 @@ import { useMemo, useState } from "react";
 import { useDeleteComment } from "@/apis/community";
 import useBlockCommunityUser from "@/app/community/_hooks/useBlockCommunityUser";
 import Dropdown from "@/components/ui/Dropdown";
-import Image from "@/components/ui/FallbackImage";
-import { DEFAULT_PROFILE_IMAGE } from "@/constants/profile";
+import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import useReportedPostsStore from "@/lib/zustand/useReportedPostsStore";
 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 CommentInput from "./CommentInput";
 
@@ -152,15 +150,7 @@ const Comment = ({
 const CommentProfile = ({ user }: { user: CommunityUser }) => {
   return (
     <div className="flex items-center gap-2">
-      <div className="h-[25px] w-[25px] rounded-full bg-bg-600">
-        <Image
-          className="h-full w-full rounded-full"
-          src={user?.profileImageUrl ? normalizeImageUrlToUploadCdn(user?.profileImageUrl) : DEFAULT_PROFILE_IMAGE}
-          width={40}
-          height={40}
-          alt="alt"
-        />
-      </div>
+      <ProfileWithBadge profileImageUrl={user?.profileImageUrl} width={25} height={25} />
       <div className="overflow-hidden text-black typo-medium-2">{user?.nickname}</div>
     </div>
   );
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
index cc584145..8fb58cab 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import { useDeleteLike, usePostLike } from "@/apis/community";
 import Image from "@/components/ui/FallbackImage";
 import LinkifyText from "@/components/ui/LinkifyText";
+import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import { COMMUNITY_MAX_UPLOAD_IMAGES } from "@/constants/community";
-import { DEFAULT_PROFILE_IMAGE } from "@/constants/profile";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { IconCloseFilled, IconPostLikeFilled, IconPostLikeOutline } from "@/public/svgs";
 import { IconCommunication } from "@/public/svgs/community";
@@ -115,19 +115,7 @@ const Content = ({ post, postId }: ContentProps) => {
 
       <div className="flex h-16 items-center justify-between border-y border-gray-c-100 px-5 py-3">
         <div className="flex gap-2.5">
-          <div className="h-10 w-10 rounded-full bg-bg-600">
-            <Image
-              className="h-full w-full rounded-full object-cover"
-              src={
-                post.postFindSiteUserResponse.profileImageUrl
-                  ? normalizeImageUrlToUploadCdn(post.postFindSiteUserResponse.profileImageUrl)
-                  : DEFAULT_PROFILE_IMAGE
-              }
-              width={40}
-              height={40}
-              alt=""
-            />
-          </div>
+          <ProfileWithBadge profileImageUrl={post.postFindSiteUserResponse.profileImageUrl} width={40} height={40} />
           <div className="flex flex-col">
             <div className="overflow-hidden text-ellipsis font-serif text-black typo-medium-2">
               {post.postFindSiteUserResponse.nickname || ""}