Merge pull request #79 from CodeItBoost3/feature/post-ui-fix

내가 속한 그룹 목록 이미지 꺠짐 문제 해결

Author: choikyungsoo

src/components/modal/SelectGroupModal.jsx

@@ -3,6 +3,7 @@ import GroupList from "@/components/mypage/GroupList.jsx";
 import userService from "@/services/user/userService";
 import DummyImg from "@/assets/image/profile-basic2.svg";
 import CreateMemory from "@/components/modal/CreateMemory";
+import {decodeImageUrl} from "../../utils/decodeImageUrl.js";
 
 export default function SelectGroupModal({ onClose }) {
   const [groups, setGroups] = useState([]);
@@ -16,7 +17,7 @@ export default function SelectGroupModal({ onClose }) {
         const groupList = response.data.groups.map((item) => ({
           id: item.group.groupId,
           name: item.group.groupName,
-          image: item.group.imageUrl || DummyImg,
+          image: item.group.imageUrl ? `${decodeImageUrl(item.group.imageUrl)}` : DummyImg,
         }));
 
         setGroups(groupList);

src/components/mypage/GroupCard.jsx

@@ -4,6 +4,7 @@ import userService from "@/services/user/userService";
 import { useToast } from "@/hooks/useToast";
 import DummyImg from "@/assets/image/profile-basic2.svg";
 import useValidateLogin from "@/hooks/useValidateLogin.js";
+import {decodeImageUrl} from "@/utils/decodeImageUrl.js";
 
 export default function GroupCard() {
   const [groups, setGroups] = useState([]);
@@ -14,10 +15,11 @@ export default function GroupCard() {
     const fetchGroups = async () => {
       try {
         const response = await userService.getMyGroups();
+        console.log(response);
         const groupList = response.data.groups.map((item) => ({
           id: item.group.groupId,
           name: item.group.groupName,
-          image: item.group.imageUrl || DummyImg,
+          image: item.group.imageUrl ? `${decodeImageUrl(item.group.imageUrl)}` : DummyImg,
         }));
 
         setGroups(groupList);

src/pages/Main.jsx

@@ -204,7 +204,7 @@ export default function Main() {
             </div>
           </div>
           {/* 섹션 2 */}
-          <MemoryActions widthClass="flex-1" marginTop="mt-[7vh]" onClickGroup={handleGroupRegist}/>
+          <MemoryActions widthClass="flex-1" marginTop="mt-[7vh]" onClickGroup={handleGroupRegist} isLogin={isLogin}/>
         </div>
         {isGroupMakeModalOpen && <CreateGroup onClose={() => setIsGroupMakeModalOpen(false)}/>}
         {isLoginModalOpen && <NeedLoginToGuest onClick={handleLoginModal}/>}

src/utils/decodeImageUrl.js

@@ -0,0 +1,10 @@
+export const decodeImageUrl = (url) => {
+  if (!url) return null;
+
+  try {
+    const decodedUrl = decodeURIComponent(url);
+    return `https://d1up383l0okfvw.cloudfront.net/${decodedUrl}`;
+  } catch {
+    return `https://d1up383l0okfvw.cloudfront.net/${url}`;
+  }
+};