diff --git a/src/components/chat/FriendList.jsx b/src/components/chat/FriendList.jsx
index 08010b88..f8b6bd9f 100644
--- a/src/components/chat/FriendList.jsx
+++ b/src/components/chat/FriendList.jsx
@@ -6,7 +6,7 @@ import IconChatProfile from "@components/chat/IconChatProfile";
 import IconSend from "@components/common/IconSend";
 import IconMenu from "@components/chat/IconMenu";
 
-const FriendList = ({ name = "name" }) => {
+const FriendList = ({ name }) => {
 	return (
 		<>
 			<TouchableOpacity style={styles.rectangle}>
diff --git a/src/config/api.js b/src/config/api.js
index 8e014607..738b04b4 100644
--- a/src/config/api.js
+++ b/src/config/api.js
@@ -47,6 +47,10 @@ export const changePassword = (email) => {
 	});
 };
 
+export const getMyConnects = () => {
+	return api.get("/connects");
+};
+
 export const getProfile = () => {
 	return api.get("/members/profile");
 };
diff --git a/src/pages/chat/ChatRoomPage.jsx b/src/pages/chat/ChatRoomPage.jsx
index 86b2da34..57ec90db 100644
--- a/src/pages/chat/ChatRoomPage.jsx
+++ b/src/pages/chat/ChatRoomPage.jsx
@@ -25,7 +25,7 @@ import IconChatSetting from "@components/chat/IconChatSetting";
 import ChatBubble from "./ChatBubble/ChatBubble";
 import { useWebSocket } from "context/WebSocketContext";
 import formatKoreanTime from "util/formatTime";
-import * as SecureStore from "expo-secure-store";
+import { getMyMemberId } from "util/secureStoreUtils";
 
 const ChatRoomPage = ({ route }) => {
 	const navigation = useNavigation();
@@ -40,11 +40,11 @@ const ChatRoomPage = ({ route }) => {
 	const flatListRef = useRef(null);
 
 	useEffect(() => {
-		const getMemberId = async () => {
-			const id = await SecureStore.getItemAsync("memberId");
-			setMemberId(parseInt(id));
+		const fetchMyMemberId = async () => {
+			const myMemberId = await getMyMemberId();
+			setMemberId(myMemberId);
 		};
-		getMemberId();
+		fetchMyMemberId();
 	}, []);
 
 	useEffect(() => {
diff --git a/src/pages/chat/FriendListPage.jsx b/src/pages/chat/FriendListPage.jsx
index 55b71838..28fa661a 100644
--- a/src/pages/chat/FriendListPage.jsx
+++ b/src/pages/chat/FriendListPage.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Text, View, SafeAreaView, FlatList } from "react-native";
 
 import FriendListStyles from "@pages/chat/FriendListStyles";
@@ -6,26 +6,33 @@ import FriendListStyles from "@pages/chat/FriendListStyles";
 import TopBar from "@components/common/TopBar";
 import IconFriendNumber from "@components/chat/IconFriendNumber";
 import FriendList from "@components/chat/FriendList";
+import { getMyConnects } from "config/api";
+import { getMyMemberId } from "util/secureStoreUtils";
 
 const FriendListPage = () => {
-	const FriendData = [
-		{
-			id: "1",
-			name: "Dann",
-		},
-		{
-			id: "2",
-			name: "Amy",
-		},
-		{
-			id: "3",
-			name: "Haedam",
-		},
-		{
-			id: "4",
-			name: "Jenny",
-		},
-	];
+	const [connects, setConnects] = useState([]);
+	const [myMemberId, setMyMemberId] = useState(null);
+
+	const filterAcceptedConnects = (connects) => {
+		return connects.filter((connect) => connect.status === "ACCEPTED");
+	};
+
+	const getOtherMemberFromConnect = (connect) => {
+		return connect.from_member.id === myMemberId
+			? connect.to_member
+			: connect.from_member;
+	};
+
+	useEffect(() => {
+		const fetchMyMemberIDAndConnects = async () => {
+			const myMemberId = await getMyMemberId();
+			const response = await getMyConnects();
+			const acceptedConnects = filterAcceptedConnects(response.data);
+			setMyMemberId(myMemberId);
+			setConnects(acceptedConnects);
+		};
+		fetchMyMemberIDAndConnects();
+	}, []);
 
 	return (
 		<SafeAreaView style={FriendListStyles.container}>
@@ -33,12 +40,17 @@ const FriendListPage = () => {
 			<View style={FriendListStyles.containerFriendNumber}>
 				<Text style={FriendListStyles.textFriend}>내 친구</Text>
 				<IconFriendNumber />
-				<Text style={FriendListStyles.textNumber}>{"23"}</Text>
+				<Text style={FriendListStyles.textNumber}>
+					{connects.length}
+				</Text>
 			</View>
 			<FlatList
 				style={FriendListStyles.flatlist}
-				data={FriendData}
-				renderItem={({ item }) => <FriendList name={item.name} />}
+				data={connects}
+				renderItem={({ item }) => {
+					const otherMember = getOtherMemberFromConnect(item);
+					return <FriendList name={otherMember.username} />;
+				}}
 				keyExtractor={(item) => item.id}
 			/>
 		</SafeAreaView>
diff --git a/src/util/secureStoreUtils.js b/src/util/secureStoreUtils.js
new file mode 100644
index 00000000..abbac7dc
--- /dev/null
+++ b/src/util/secureStoreUtils.js
@@ -0,0 +1,11 @@
+import * as SecureStore from "expo-secure-store";
+
+export const getMyMemberId = async () => {
+	try {
+		const myMemberId = await SecureStore.getItemAsync("memberId");
+		return myMemberId ? parseInt(myMemberId) : null;
+	} catch (error) {
+		console.error("본인 memberId를 로컬에서 가져올 수 없습니다.", error);
+		return null;
+	}
+};