Merge pull request #121 from serafuku/yunochi/develop

✨  이미지를 프록싱해서 제공하기

package.json

@@ -19,12 +19,14 @@
   },
   "dependencies": {
     "@prisma/client": "^6.0.1",
+    "axios": "^1.7.9",
     "bullmq": "^5.30.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "daisyui": "^4.12.14",
     "dotenv-cli": "^7.4.2",
     "ioredis": "^5.4.1",
+    "ip-address": "^10.0.1",
     "ip-cidr": "^3.1.0",
     "jose": "^5.9.6",
     "module-alias": "^2.2.3",

src/app/_components/NameComponents.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { getProxyUrl } from '@/utils/getProxyUrl/getProxyUrl';
+
 type username = {
   username: string[] | undefined;
   width: number;
@@ -18,7 +20,7 @@ export default function NameComponents({ username, height }: username) {
                   className={`mx-1 object-contain`}
                   style={{ height: height }}
                   alt="Custom Emoji In Username"
-                  src={el}
+                  src={getProxyUrl(el)}
                   key={key}
                 />
               ) : (

src/app/_components/answer.tsx

@@ -6,6 +6,7 @@ import NameComponents from './NameComponents';
 import { AnswerWithProfileDto } from '../_dto/answers/Answers.dto';
 import { userProfileDto } from '../_dto/fetch-profile/Profile.dto';
 import { useParams } from 'next/navigation';
+import { getProxyUrl } from '@/utils/getProxyUrl/getProxyUrl';
 
 interface askProps {
   value: AnswerWithProfileDto;
@@ -88,7 +89,7 @@ export default function Answer({ value, idState, ref }: askProps) {
           <div className="chat-image avatar">
             <div className="w-12 rounded-full">
               <Link href={`/main/user/${value.answeredPersonHandle}`}>
-                <img src={userInfo?.avatarUrl} alt="answered person avatar" />
+                <img src={userInfo?.avatarUrl && getProxyUrl(userInfo.avatarUrl)} alt="answered person avatar" />
               </Link>
             </div>
           </div>

src/app/_components/notification.tsx

@@ -5,6 +5,7 @@ import { useContext, useEffect } from 'react';
 import { NotificationContext } from '../main/layout';
 import Link from 'next/link';
 import { FaReply } from 'react-icons/fa';
+import { getProxyUrl } from '@/utils/getProxyUrl/getProxyUrl';
 
 export default function Notification() {
   const notificationContext = useContext(NotificationContext);
@@ -25,7 +26,7 @@ export default function Notification() {
                     fill="white"
                   />
                   <img
-                    src={noti.data.answeredPerson?.avatarUrl}
+                    src={noti.data.answeredPerson?.avatarUrl && getProxyUrl(noti.data.answeredPerson.avatarUrl)}
                     alt="answered persen avatar"
                     className={`w-16 h-16 rounded-full ${isRead && 'opacity-70'}`}
                   />

src/app/_components/userProfile.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { userProfileDto } from '../_dto/fetch-profile/Profile.dto';
 import NameComponents from './NameComponents';
+import { getProxyUrl } from '@/utils/getProxyUrl/getProxyUrl';
 
 interface Props {
   profile: userProfileDto;
@@ -12,7 +13,11 @@ export default function UsernameAndProfile({ profile }: Props) {
   return (
     <div className="backdrop-brightness-105 shadow-md dark:backdrop-brightness-75 rounded-box border-base-300 p-4 dark:text-white">
       <Link href={`/main/user/${profile.handle}`} className="flex items-center gap-4">
-        <img src={profile.avatarUrl} alt="following avatar" className="w-14 h-14 rounded-full object-cover" />
+        <img
+          src={getProxyUrl(profile.avatarUrl)}
+          alt="following avatar"
+          className="w-14 h-14 rounded-full object-cover"
+        />
         <div className="flex flex-col text-md">
           <NameComponents username={profile.name} width={16} height={16} />
           <span className="text-xs">{profile.handle}</span>