Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(loading): 로딩 페이지 추가 #80

Merged
merged 2 commits into from
Jul 23, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/chat/FriendList.jsx
Original file line number Diff line number Diff line change
@@ -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}>
21 changes: 21 additions & 0 deletions src/components/common/DifeYellowDotLogo.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as React from "react";
import Svg, { Circle, Path } from "react-native-svg";

const DifeYellowDotLogo = () => (
<Svg
width={145}
height={44}
viewBox="0 0 145 44"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M95.4858 2.94716C96.5078 4.43176 97.0548 6.49671 96.3174 8.46312C95.8644 9.67112 94.5179 10.2832 93.3099 9.83017C92.1018 9.37717 91.4898 8.03066 91.9428 6.82265C92.0134 6.63432 92.0282 6.16398 91.6374 5.59636C91.2662 5.05707 90.7155 4.72354 90.1607 4.67807C89.6729 4.63809 88.7683 4.78936 87.5908 6.05755C86.4342 7.30321 85.1141 9.54192 83.9332 13.3209C84.9979 13.0951 85.9942 12.8828 86.7898 12.7126C88.0514 12.4426 89.293 13.2465 89.5629 14.5081C89.8329 15.7697 89.029 17.0113 87.7674 17.2812C86.4249 17.5685 84.4236 17.9944 82.4853 18.4018C81.8424 20.7915 81.2871 23.0328 80.7864 25.1114C80.5729 25.9975 80.3681 26.8597 80.1699 27.6941C80.0387 28.2466 79.9103 28.7869 79.7843 29.3137C82.3527 28.8328 85.2902 28.259 88.2836 27.6013C89.63 27.3054 90.9822 26.9938 92.3125 26.6674C92.488 24.2958 93.3386 21.8141 94.9415 19.4485C99.0587 13.3722 104.535 11.721 108.561 13.7408C110.477 14.7024 111.904 16.4982 112.173 18.7035C112.447 20.9583 111.464 23.1951 109.451 24.9457C107.514 26.63 104.276 27.9923 100.85 29.1183C99.7581 29.4771 98.6119 29.8226 97.4327 30.1544C97.6164 30.6151 97.8467 31.0367 98.1135 31.4125C99.5567 33.4458 102.428 34.6604 106.243 33.1344C108.108 32.3882 109.637 31.0382 111.398 29.2063C111.735 28.8565 112.083 28.4852 112.444 28.0998L112.444 28.0997C113.887 26.5605 115.539 24.7972 117.502 23.2851C120.043 21.3276 123.172 19.7142 127.393 19.0567C131.576 18.4054 136.704 18.7118 143.241 20.3809C144.491 20.7 145.246 21.9721 144.927 23.2222C144.608 24.4722 143.336 25.2269 142.086 24.9077C135.964 23.3447 131.497 23.1461 128.112 23.6731C124.767 24.1941 122.357 25.4424 120.353 26.9863C118.719 28.2451 117.396 29.6547 115.982 31.1605L115.981 31.1609L115.978 31.164C115.584 31.5839 115.183 32.0112 114.766 32.4448C112.934 34.35 110.826 36.3331 107.978 37.4723C102.366 39.7171 97.1206 38.0854 94.3036 34.1168C93.6987 33.2645 93.2233 32.3298 92.8856 31.3363C91.685 31.6263 90.4785 31.9025 89.2863 32.1644C85.3561 33.028 81.5355 33.7467 78.5227 34.2984C77.9058 36.5101 77.2324 38.4811 76.3513 39.9504C75.374 41.5802 73.8563 43.0262 71.5572 43.0262C69.8168 43.0262 68.275 42.3756 67.2952 41.0386C66.3768 39.7854 66.2086 38.2761 66.3802 36.9978C66.7098 34.5419 68.4841 31.7198 71.4759 30.8964C72.0298 30.7439 73.2129 30.518 74.7534 30.2359C75.0237 29.1423 75.3042 27.9615 75.6065 26.689L75.6068 26.6877L75.6077 26.6838C75.8091 25.8361 76.0201 24.9477 76.2442 24.0173C76.5907 22.5792 76.9651 21.055 77.3781 19.4515C77.1147 19.5023 76.9109 19.5398 76.7804 19.561C75.507 19.7681 74.3068 18.9037 74.0997 17.6302C73.8926 16.3568 74.757 15.1566 76.0305 14.9495C76.3776 14.8931 77.4098 14.6856 78.7429 14.4102C78.917 13.7996 79.097 13.1803 79.2834 12.5525C80.6189 8.05411 82.2836 4.90709 84.167 2.87861C86.0857 0.812179 88.3161 -0.160817 90.5423 0.0216391C92.7017 0.198613 94.4443 1.43423 95.4858 2.94716ZM73.3419 35.2585C73.0622 35.316 72.8522 35.3633 72.7157 35.4009C72.3482 35.502 71.9607 35.76 71.6242 36.1947C71.2834 36.6351 71.0722 37.1616 71.0107 37.6193C70.9809 37.8418 70.991 38.0128 71.0135 38.1277C71.0245 38.1835 71.0374 38.2216 71.0472 38.2449C71.0535 38.2599 71.0586 38.2689 71.0613 38.2734C71.065 38.2756 71.0714 38.2792 71.0812 38.2836C71.1213 38.3019 71.2607 38.3542 71.5572 38.3542C71.6311 38.3542 71.6677 38.345 71.7428 38.2916C71.8548 38.212 72.0663 38.0115 72.3444 37.5477C72.6749 36.9965 73.002 36.2439 73.3419 35.2585ZM97.2601 25.3423C97.9928 25.1262 98.7051 24.9052 99.3912 24.6798C102.803 23.5585 105.225 22.4294 106.386 21.4202C107.47 20.4774 107.586 19.6905 107.535 19.2682C107.477 18.7964 107.153 18.2617 106.465 17.9166C105.282 17.3231 102.14 17.1532 98.8093 22.0693C98.0484 23.1921 97.548 24.2937 97.2601 25.3423ZM52.6326 4.80053C53.0891 6.31732 52.8876 8.01745 52.1762 9.78154C51.374 11.771 49.7849 13.462 47.9517 14.8161C46.2774 16.0528 44.2704 17.105 42.1236 17.9188L41.921 18.4684C39.7626 24.3305 37.3982 31.0024 35.7555 35.9492C36.3807 35.8865 37.1556 35.7582 38.0585 35.5399C41.5728 34.6904 46.0502 32.7198 49.2001 29.7328C52.6496 26.4615 55.1496 22.4287 56.105 19.1917C56.5878 17.5555 56.6056 16.364 56.399 15.6393C56.2385 15.0762 55.9539 14.7498 55.2896 14.5686C54.0449 14.2292 53.3111 12.945 53.6506 11.7003C53.99 10.4556 55.2742 9.72175 56.5189 10.0612C58.8174 10.6881 60.2996 12.28 60.8921 14.3585C61.4385 16.2754 61.1954 18.4489 60.5859 20.5141C59.3565 24.6799 56.3454 29.3955 52.4149 33.1229C48.5149 36.8213 43.2235 39.098 39.1562 40.0812C37.1553 40.5649 35.1987 40.7983 33.7281 40.5951C33.083 40.5059 31.9693 40.2645 31.1939 39.3709C30.7421 38.8502 30.475 38.1807 30.4757 37.4485C30.4762 36.9038 30.6239 36.4298 30.8046 36.0501C32.252 31.593 34.4629 25.287 36.596 19.4242C33.0579 20.0298 29.3586 19.9874 26.1269 18.9412C18.555 16.49 13.4883 17.9053 10.1696 19.8563C8.46555 20.858 7.15162 22.0446 6.15689 23.0723C5.71603 23.5278 5.34795 23.9409 5.01672 24.3127L4.88159 24.4643C4.70642 24.6605 4.52248 24.865 4.35171 25.0412C4.20231 25.1954 3.95896 25.4386 3.66962 25.6398C2.61029 26.3762 1.15456 26.1144 0.418142 25.0551C-0.301449 24.0199 -0.0679345 22.6063 0.931488 21.8552C0.944474 21.8427 0.965749 21.8217 0.996187 21.7903C1.09224 21.6912 1.21756 21.5531 1.39638 21.3528L1.52471 21.2088C1.8542 20.8388 2.28715 20.3527 2.79985 19.823C3.97302 18.6109 5.61541 17.114 7.80189 15.8286C12.2644 13.2052 18.7159 11.6313 27.5658 14.4963C30.6639 15.4992 34.7156 15.2943 38.5214 14.1976C39.3687 11.9278 40.1589 9.85533 40.8288 8.15246C41.2902 6.97972 41.6994 5.97005 42.0337 5.18713C42.339 4.47223 42.6523 3.77492 42.9111 3.36064C43.6938 2.10796 44.971 1.44728 46.1431 1.19733C47.329 0.944458 48.6623 1.04819 49.8517 1.60107C51.0849 2.17432 52.1631 3.24008 52.6326 4.80053ZM44.5378 11.5038C44.7611 10.9248 44.9745 10.3762 45.1765 9.86295C45.6304 8.70921 46.0212 7.74608 46.3304 7.02189C46.4853 6.65916 46.6145 6.36877 46.7172 6.15049C46.7901 5.99565 46.836 5.90644 46.8582 5.86472C46.8852 5.84549 46.9609 5.80003 47.1175 5.76665C47.3906 5.70841 47.6824 5.74483 47.8823 5.83773C48.0383 5.91026 48.1133 5.9959 48.1588 6.14681C48.2173 6.3414 48.2955 6.91261 47.8432 8.0342C47.4818 8.93044 46.6204 9.99105 45.1758 11.0581C44.9716 11.2089 44.7588 11.3576 44.5378 11.5038ZM34.1957 35.9314C34.1968 35.9307 34.2122 35.9342 34.2387 35.9443C34.2079 35.9372 34.1946 35.9322 34.1957 35.9314ZM68.9813 12.3221C70.2195 12.6845 70.9295 13.982 70.5671 15.2202L64.1029 37.3062C63.7405 38.5444 62.4429 39.2544 61.2047 38.892C59.9665 38.5296 59.2566 37.2321 59.619 35.9939L66.0832 13.9078C66.4456 12.6696 67.7431 11.9597 68.9813 12.3221ZM70.3453 8.91708C71.9873 8.91708 73.3184 7.58596 73.3184 5.94395C73.3184 4.30195 71.9873 2.97084 70.3453 2.97084C68.7032 2.97084 67.3721 4.30195 67.3721 5.94395C67.3721 7.58596 68.7032 8.91708 70.3453 8.91708Z"
fill="#012CFF"
/>
<Circle cx="70.3451" cy="5.94382" r="2.97312" fill="#FFD600" />
</Svg>
);
export default DifeYellowDotLogo;
28 changes: 28 additions & 0 deletions src/components/common/loading/Dot.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from "react";
import { Animated, StyleSheet } from "react-native";

const Dot = ({ opacity, translateY }) => {
return (
<Animated.View
style={[
styles.dot,
{
opacity,
transform: [{ translateY }],
},
]}
/>
);
};

const styles = StyleSheet.create({
dot: {
width: 12,
height: 12,
borderRadius: 10,
backgroundColor: "#2964E0",
margin: 5,
},
});

export default Dot;
89 changes: 89 additions & 0 deletions src/components/common/loading/Loading.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React, { useEffect, useRef } from "react";
import { View, Animated, StyleSheet, SafeAreaView } from "react-native";
import Dot from "./Dot";
import DifeYellowDotLogo from "../DifeYellowDotLogo";

const INITAL_OPACITY = 0.2;
const DOT_COUNT = 3;

const createAnimatedValues = (count, initialValue) => {
const animatedValues = [];
for (let i = 0; i < count; i++) {
animatedValues.push(new Animated.Value(initialValue));
}
return animatedValues;
};

const Loading = () => {
const dotOpacities = useRef(
createAnimatedValues(DOT_COUNT, INITAL_OPACITY),
).current;

const createAnimationConfig = (isOn) => {
return {
toValue: isOn ? 1 : INITAL_OPACITY,
duration: 500,
useNativeDriver: true,
};
};

const createSequence = (animatedValue) => {
return Animated.sequence([
Animated.timing(animatedValue, createAnimationConfig(true)),
Animated.timing(animatedValue, createAnimationConfig(false)),
]);
};

useEffect(() => {
const animate = () => {
Animated.loop(
Animated.stagger(200, dotOpacities.map(createSequence)),
).start();
};
animate();
}, [dotOpacities]);

return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.dots}>
<View style={styles.logo}>
<DifeYellowDotLogo />
</View>
{dotOpacities.map((opacity, index) => (
<Dot
key={index}
opacity={opacity}
translateY={opacity.interpolate({
inputRange: [0, 1],
outputRange: [0, -10],
})}
/>
))}
</View>
</View>
</SafeAreaView>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
logo: {
position: "absolute",
bottom: "100%",
marginBottom: 3,
},
dots: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: 89,
width: 89,
},
});

export default Loading;
4 changes: 4 additions & 0 deletions src/config/api.js
Original file line number Diff line number Diff line change
@@ -47,6 +47,10 @@ export const changePassword = (email) => {
});
};

export const getMyConnects = () => {
return api.get("/connects");
};

export const getProfile = () => {
return api.get("/members/profile");
};
4 changes: 2 additions & 2 deletions src/context/WebSocketContext.js
Original file line number Diff line number Diff line change
@@ -7,8 +7,8 @@ import React, {
} from "react";
import { Client } from "@stomp/stompjs";
import { getChatroomsByType } from "../config/api"; // Adjust the import path as necessary
import { Text } from "react-native";
import { WS_URL } from "@env";
import Loading from "@components/common/loading/Loading";

const WebSocketContext = createContext(null);

@@ -121,7 +121,7 @@ export const WebSocketProvider = ({ children }) => {
disconnectWebSocket,
}}
>
{isConnected ? children : <Text>LOADING...</Text>}
{isConnected ? children : <Loading />}
</WebSocketContext.Provider>
);
};
10 changes: 5 additions & 5 deletions src/pages/chat/ChatRoomPage.jsx
Original file line number Diff line number Diff line change
@@ -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(() => {
56 changes: 34 additions & 22 deletions src/pages/chat/FriendListPage.jsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,56 @@
import React from "react";
import React, { useState, useEffect } from "react";
import { Text, View, SafeAreaView, FlatList } from "react-native";

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}>
<TopBar topBar="친구 목록" />
<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>
11 changes: 11 additions & 0 deletions src/util/secureStoreUtils.js
Original file line number Diff line number Diff line change
@@ -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;
}
};