Refactor/change image api to: 이름 기반 이미지 조회 API를 ID 기반 조회 API로 변경 (#141)

* refactor: 커뮤니티 세션에서 이름 기반 이미지 조회를 ID 기반 조회로 변경 * refactor: 멤버 페이지의 마이페이지 조회 api에서 가져오던 presignURL 조회 방식을 ID 기반 조회로 변경 * refector: 멤버 및 채팅 세션에서 이름 기반 이미지 조회를 ID 기반 조회로 변경 * fix: 프로필 이미지가 없는 사용자로 인한 채팅 세션 오류 해결 및 불필요한 주석 삭제 * refactor: 홈 세션에서 이름 기반 이미지 조회를 ID 기반 조회로 변경
team-diverse · Sep 27, 2024 · 4d14ced · 4d14ced
1 parent cb5b794
commit 4d14ced
Show file tree

Hide file tree

Showing 21 changed files with 1,436 additions and 629 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/chat/ChatroomItem.jsx b/src/components/chat/ChatroomItem.jsx
@@ -12,7 +12,7 @@ const ChatroomItem = ({ chatroomInfo, context, time, myMemberId }) => {
 	const otherMember = chatroomInfo.members.find(
 		(member) => member.id !== myMemberId,
 	);
-	const otherMemberProfileImageName = otherMember.profileImg?.originalName;
+	const otherMemberProfileImageId = otherMember.profileImg?.id;
 	const username = otherMember.username;
 
 	return (
@@ -27,9 +27,7 @@ const ChatroomItem = ({ chatroomInfo, context, time, myMemberId }) => {
 			<View style={styles.notify}>
 				<View style={styles.iconTextContainer}>
 					<View style={styles.icon}>
-						<IconChatProfile
-							imageName={otherMemberProfileImageName}
-						/>
+						<IconChatProfile fileId={otherMemberProfileImageId} />
 					</View>
 					<View style={styles.textContainer}>
 						<Text style={styles.textName}>{username}</Text>

diff --git a/src/components/chat/FriendList.jsx b/src/components/chat/FriendList.jsx
@@ -12,7 +12,7 @@ import { getMyMemberId } from "util/secureStoreUtils";
 import * as Sentry from "@sentry/react-native";
 import ModalKebabMenuConnectList from "@components/member/ModalKebabMenuConnectList";
 
-const FriendList = ({ connectId, memberId, name, imageName }) => {
+const FriendList = ({ connectId, memberId, name, fileId }) => {
 	const navigation = useNavigation("");
 	const { chatrooms, subscribeToNewChatroom } = useWebSocket();
 
@@ -79,7 +79,7 @@ const FriendList = ({ connectId, memberId, name, imageName }) => {
 						}
 					>
 						<View style={styles.icon}>
-							<IconChatProfile imageName={imageName} />
+							<IconChatProfile fileId={fileId} />
 						</View>
 						<Text
 							style={styles.textName}

diff --git a/src/components/chat/IconChatProfile.jsx b/src/components/chat/IconChatProfile.jsx
@@ -1,14 +1,17 @@
 import React, { useEffect, useState } from "react";
 import Svg, { Path, Defs, ClipPath, Image as SvgImage } from "react-native-svg";
-import { getProfileImageByFileName } from "config/api";
+import { getProfileImageByFileId } from "config/api";
 import * as Sentry from "@sentry/react-native";
 
-const IconChatProfile = ({ size = 48, imageName, ...props }) => {
+const IconChatProfile = ({ size = 48, fileId, ...props }) => {
 	const [profilePresignUrl, setProfilePresignUrl] = useState(null);
 
 	const getProfileImage = async () => {
 		try {
-			const response = await getProfileImageByFileName(imageName);
+			if (fileId === undefined) {
+				return;
+			}
+			const response = await getProfileImageByFileId(fileId);
 			setProfilePresignUrl(response.data);
 		} catch (error) {
 			Sentry.captureException(error);
@@ -21,7 +24,8 @@ const IconChatProfile = ({ size = 48, imageName, ...props }) => {
 
 	useEffect(() => {
 		getProfileImage();
-	}, [imageName]);
+	}, [fileId]);
+
 	const pathData = `
 		M0 ${size * 0.2083}C0 ${size * 0.0933} ${size * 0.0933} 0 ${size * 0.2083} 0H${size * 0.5}
 		C${size * 0.7761} 0 ${size} ${size * 0.2182} ${size} ${size * 0.5}

diff --git a/src/components/community/ItemCommunity.jsx b/src/components/community/ItemCommunity.jsx
@@ -30,6 +30,8 @@ const ItemCommunity = ({
 					? `'${post.post.title}' ${t("commentOnPost")}`
 					: post.title;
 
+				console.log(post.profilePresignUrl);
+
 				return (
 					<TouchableOpacity
 						key={index}
@@ -119,15 +121,11 @@ const ItemCommunity = ({
 								</View>
 							</View>
 
-							{(apiPost
-								? post.post.profilePresignUrl
-								: post.profilePresignUrl) && (
+							{post.profilePresignUrl && (
 								<View style={styles.containerImage}>
 									<Image
 										source={{
-											uri: apiPost
-												? post.post.profilePresignUrl
-												: post.profilePresignUrl,
+											uri: post.profilePresignUrl,
 										}}
 										style={styles.imagePost}
 									/>

diff --git a/src/components/home/HomeCardBack.jsx b/src/components/home/HomeCardBack.jsx
@@ -19,7 +19,7 @@ import ModalRequest from "@components/common/ModalRequest";
 
 const { fontCaption } = CustomTheme;
 
-const HomeCardBack = ({ memberId, profileImg, name, onPress }) => {
+const HomeCardBack = ({ memberId, fileId, name, onPress }) => {
 	const { t } = useTranslation();
 	const navigation = useNavigation();
 
@@ -95,7 +95,7 @@ const HomeCardBack = ({ memberId, profileImg, name, onPress }) => {
 				<HomecardDifeB />
 			</View>
 			<View style={styles.homecardBack}>
-				<HomeProfile profile={profileImg} back={true} />
+				<HomeProfile fileId={fileId} back={true} />
 				<TouchableOpacity
 					onPress={() =>
 						navigation.navigate("ConnectProfilePage", {

diff --git a/src/components/home/HomeCardFront.jsx b/src/components/home/HomeCardFront.jsx
@@ -20,7 +20,7 @@ const { fontCaption } = CustomTheme;
 
 const HomeCardFront = ({
 	memberId,
-	profileImg,
+	fileId,
 	tags,
 	introduction,
 	name,
@@ -86,7 +86,7 @@ const HomeCardFront = ({
 				<HomecardDifeF />
 			</View>
 			<View style={styles.homeProfile}>
-				<HomeProfile profile={profileImg} />
+				<HomeProfile fileId={fileId} />
 				<View style={styles.tagContainer} onLayout={handleTagLayout}>
 					<Tag tag={tags} />
 				</View>

diff --git a/src/components/home/HomeProfile.js b/src/components/home/HomeProfile.js
@@ -1,15 +1,41 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { View, StyleSheet } from "react-native";
 import { Image } from "expo-image";
+
 import { CustomTheme } from "@styles/CustomTheme";
+import { getProfileImageByFileId } from "config/api";
 
-const HomeProfile = ({ profile = null, back = false }) => {
+const HomeProfile = ({ fileId, back = false }) => {
 	const containerStyle = back ? { width: 100.647, height: 118 } : null;
 
+	const [presignUrl, setPresignUrl] = useState(null);
+
+	useEffect(() => {
+		const getPresignUrl = async () => {
+			try {
+				if (fileId == null) {
+					return;
+				}
+				const response = await getProfileImageByFileId(fileId);
+				setPresignUrl(response.data);
+			} catch (error) {
+				console.error(
+					"홈 카드 프로필 이미지 조회 실패:",
+					error.response ? error.response.data : error.message,
+				);
+			}
+		};
+		getPresignUrl();
+	}, [fileId]);
+
 	return (
-		<View style={[styles.rectangle, containerStyle]}>
-			<Image source={{ url: profile }} style={styles.image} />
-		</View>
+		<>
+			<View style={[styles.rectangle, containerStyle]}>
+				{fileId && (
+					<Image source={{ uri: presignUrl }} style={styles.image} />
+				)}
+			</View>
+		</>
 	);
 };
 

diff --git a/src/components/member/ItemBlockList.jsx b/src/components/member/ItemBlockList.jsx
@@ -35,13 +35,13 @@ const ItemBlockList = ({ blacklistedMemberId, date }) => {
 	};
 
 	const [name, setName] = useState();
-	const [imageName, setImageName] = useState(null);
+	const [fileId, setFileId] = useState(null);
 
 	const getConnectProfile = async () => {
 		try {
 			const response = await getProfileById(blacklistedMemberId);
 			setName(response.data.username);
-			setImageName(response.data.profileImg?.originalName || null);
+			setFileId(response.data.profileImg?.id || null);
 		} catch (error) {
 			console.error(
 				"디테일 프로필 조회 오류:",
@@ -67,7 +67,7 @@ const ItemBlockList = ({ blacklistedMemberId, date }) => {
 						}
 					>
 						<View style={styles.icon}>
-							<IconChatProfile imageName={imageName} />
+							<IconChatProfile fileId={fileId} />
 						</View>
 						<Text style={styles.textName}>{name}</Text>
 					</TouchableOpacity>

diff --git a/src/components/member/ItemLikeBookmark.jsx b/src/components/member/ItemLikeBookmark.jsx
@@ -42,11 +42,11 @@ const ItemLikeBookmark = ({ likedAndBookmarkPostList }) => {
 							</Text>
 						</View>
 
-						{post.post.profilePresignUrl && (
+						{post.profilePresignUrl && (
 							<View style={styles.containerImage}>
 								<Image
 									source={{
-										uri: post.post.profilePresignUrl,
+										uri: post.profilePresignUrl,
 									}}
 									style={styles.imagePost}
 								/>

diff --git a/src/components/member/ItemRequestConnectList.jsx b/src/components/member/ItemRequestConnectList.jsx
@@ -20,7 +20,7 @@ const ItemRequestConnectList = ({
 	connectId,
 	memberId,
 	name,
-	imageName,
+	fileId,
 	received = false,
 }) => {
 	const { t } = useTranslation();
@@ -79,7 +79,7 @@ const ItemRequestConnectList = ({
 					}
 				>
 					<View style={styles.icon}>
-						<IconChatProfile imageName={imageName} />
+						<IconChatProfile fileId={fileId} />
 					</View>
 					<Text
 						style={styles.textName}

diff --git a/src/config/api.js b/src/config/api.js
@@ -474,12 +474,8 @@ export const getConnectList = () => {
 	return api.get(`/connects`);
 };
 
-export const getProfileImageByFileName = (fileName) => {
-	return api.get(`/files`, {
-		params: {
-			name: fileName,
-		},
-	});
+export const getProfileImageByFileId = (fileId) => {
+	return api.get(`/files/${fileId}`);
 };
 
 export const deleteBookmarkByPostId = (postId) => {

diff --git a/src/pages/chat/ChatBubble/ChatBubble.jsx b/src/pages/chat/ChatBubble/ChatBubble.jsx
@@ -16,7 +16,7 @@ import ModalTranslationsCount from "@components/common/ModalTranslationsCount";
 const { fontNavi } = CustomTheme;
 
 const ChatBubble = ({
-	profileImageName,
+	fileId,
 	username,
 	message,
 	time,
@@ -108,10 +108,7 @@ const ChatBubble = ({
 				{showProfile && (
 					<View style={styles.profileWrapper}>
 						<View style={styles.iconChatProfileWrapper}>
-							<IconChatProfile
-								size={36}
-								imageName={profileImageName}
-							/>
+							<IconChatProfile size={36} fileId={fileId} />
 						</View>
 					</View>
 				)}

diff --git a/src/pages/chat/ChatRoomPage.jsx b/src/pages/chat/ChatRoomPage.jsx
@@ -138,9 +138,7 @@ const ChatRoomPage = ({ route }) => {
 								return (
 									<ChatBubble
 										key={msg.id}
-										profileImageName={
-											otherMember.profileImg?.originalName
-										}
+										fileId={otherMember.profileImg?.id}
 										username={msg.member.username}
 										message={msg.message}
 										time={formatKoreanTime(msg.created)}
@@ -195,9 +193,7 @@ const ChatRoomPage = ({ route }) => {
 							key={member.id}
 							style={ChatRoomStyles.containerChatPeople}
 						>
-							<IconChatProfile
-								imageName={member.profileImg?.originalName}
-							/>
+							<IconChatProfile fileId={member.profileImg?.id} />
 							<Text style={ChatRoomStyles.textChatPeople}>
 								{member.username}
 							</Text>

diff --git a/src/pages/chat/FriendListPage.jsx b/src/pages/chat/FriendListPage.jsx
@@ -62,7 +62,7 @@ const FriendListPage = ({ route }) => {
 							connectId={item.id}
 							memberId={otherMember.id}
 							name={otherMember.username}
-							imageName={otherMember.profileImg?.originalName}
+							fileId={otherMember.profileImg?.id}
 						/>
 					);
 				}}

diff --git a/src/pages/community/PostPage.jsx b/src/pages/community/PostPage.jsx
@@ -31,7 +31,7 @@ import {
 	deleteLikeByPostId,
 	createPostBookmark,
 	deleteBookmarkByPostId,
-	getProfileImageByFileName,
+	getProfileImageByFileId,
 	translationByPostId,
 	getMyProfile,
 } from "config/api";
@@ -113,14 +113,11 @@ const PostPage = ({ route }) => {
 			setMemberId(postByIdResponse.data.writer.id);
 			setHeart(postByIdResponse.data.likesCount);
 			setBookmark(postByIdResponse.data.bookmarkCount);
-			const fileNames = postByIdResponse.data.files.map(
-				(file) => file.originalName,
-			);
+			const fileIds = postByIdResponse.data.files.map((file) => file.id);
 			const responses = await Promise.all(
-				fileNames.map((fileName) =>
-					getProfileImageByFileName(fileName),
-				),
+				fileIds.map((fileId) => getProfileImageByFileId(fileId)),
 			);
+
 			const responseImages = responses.map((response) => response.data);
 			setImages(responseImages);
 

diff --git a/src/pages/connect/GroupProfilePage.jsx b/src/pages/connect/GroupProfilePage.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import GroupProfileStyles from "@pages/connect/GroupProfileStyles";
 import {
 	getGroupByGroupId,
-	getProfileImageByFileName,
+	getProfileImageByFileId,
 	createLikeChatroom,
 	deleteLikeChatroom,
 } from "config/api";
@@ -48,12 +48,9 @@ const GroupProfilePage = ({ route }) => {
 			const profile = formatProfileData([response.data]);
 			setGroupProfileData(profile[0]);
 
-			if (
-				response.data.profileImg &&
-				response.data.profileImg.originalName
-			) {
-				const image = await getProfileImageByFileName(
-					response.data.profileImg.originalName,
+			if (response.data.profileImg && response.data.profileImg.id) {
+				const image = await getProfileImageByFileId(
+					response.data.profileImg.id,
 				);
 				setProfilePresignUrl(image.data);
 			} else {

diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
@@ -113,7 +113,8 @@ const HomePage = () => {
 	};
 
 	const profileData = profileDataList[currentProfileIndex];
-	const { id, profilePresignUrl, tags, bio, username, country } = profileData
+	// console.log(profileData.profileImg?.id);
+	const { id, profileImg, tags, bio, username, country } = profileData
 		? profileData
 		: {
 				id: null,
@@ -216,7 +217,7 @@ const HomePage = () => {
 						<View style={HomeStyles.homecard}>
 							<HomeCardBack
 								memberId={id}
-								profileImg={profilePresignUrl}
+								fileId={profileImg?.id}
 								name={username}
 								onPress={() => setShowNewCard(false)}
 							/>
@@ -233,7 +234,7 @@ const HomePage = () => {
 						<View style={HomeStyles.homecard}>
 							<HomeCardFront
 								memberId={id}
-								profileImg={profilePresignUrl}
+								fileId={profileImg?.id}
 								tags={tags}
 								introduction={bio}
 								name={username}