From 1e64b10648406308fc8c4bd68a6a4cae7ab7e45d Mon Sep 17 00:00:00 2001 From: "Hyunmin Woo (Hanul)" Date: Thu, 7 Sep 2023 20:47:52 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=EC=B9=9C=EA=B5=AC=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20dots=20(#78)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/components/NotificationDot.tsx | 11 ++++++++ .../ManageFriendsDrawerContent/index.tsx | 25 ++++++++++++++++--- friends/src/app/screens/MainScreen/index.tsx | 10 +++++++- friends/src/app/styles/colors.ts | 2 ++ 4 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 friends/src/app/components/NotificationDot.tsx diff --git a/friends/src/app/components/NotificationDot.tsx b/friends/src/app/components/NotificationDot.tsx new file mode 100644 index 0000000..44530e7 --- /dev/null +++ b/friends/src/app/components/NotificationDot.tsx @@ -0,0 +1,11 @@ +import { StyleSheet, View } from 'react-native'; + +import { COLORS } from '../styles/colors'; + +type Props = { style?: { position?: 'absolute'; top?: number; left?: number; right?: number; bottom?: number } }; + +export const NotificationDot = ({ style }: Props) => { + return ; +}; + +const styles = StyleSheet.create({ dot: { width: 4, height: 4, borderRadius: 2, backgroundColor: COLORS.red } }); diff --git a/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx b/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx index ee7df73..b86d405 100644 --- a/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx +++ b/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx @@ -5,8 +5,10 @@ import { CloseIcon } from '../../../components/Icons/CloseIcon'; import { SnuttLogoIcon } from '../../../components/Icons/SnuttLogoIcon'; import { SnuttTextIcon } from '../../../components/Icons/SnuttTextIcon'; import { UserPlusIcon } from '../../../components/Icons/UserPlusIcon'; +import { NotificationDot } from '../../../components/NotificationDot'; import { Typography } from '../../../components/Typography'; import { useThemeContext } from '../../../contexts/ThemeContext'; +import { useFriends } from '../../../queries/useFriends'; import { useMainScreenContext } from '..'; import { ManageFriendsDrawerContentActiveList } from './ManageFriendsDrawerContentActiveList'; import { ManageFriendsDrawerContentRequestedList } from './ManageFriendsDrawerContentRequestedList'; @@ -26,6 +28,8 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => { const tabInactiveBorder = useThemeContext((data) => data.color.tab.inactive.border); const tabInactiveText = useThemeContext((data) => data.color.tab.inactive.text); const dividerColor = useThemeContext((data) => data.color.border.divider); + const { data: requestedFriends } = useFriends({ state: 'REQUESTED' }); + const isRequestedFriendExist = requestedFriends && requestedFriends.length !== 0; return ( @@ -49,9 +53,12 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => { onPress={() => setTab(value)} style={{ ...styles.tab, borderBottomColor: isActive ? tabActiveBorder : tabInactiveBorder }} > - - {label} - + + + {label} + + {isRequestedFriendExist && value === 'REQUESTED' && } + ); })} @@ -97,8 +104,18 @@ const styles = StyleSheet.create({ snutt: { fontSize: 18, fontWeight: '900', flex: 1 }, divider: { marginTop: 20, height: 1, marginBottom: 16 }, tabs: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }, - tab: { height: 40, borderBottomWidth: 3, width: '50%', display: 'flex', justifyContent: 'center' }, + tab: { + height: 40, + borderBottomWidth: 3, + width: '50%', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + tabTextWrapper: { position: 'relative' }, tabText: { textAlign: 'center', fontSize: 16 }, + dot: { position: 'absolute', top: 0, right: -8 }, + tabContent: { paddingLeft: 15, paddingRight: 15, paddingTop: 16, flex: 1 }, addFriend: { diff --git a/friends/src/app/screens/MainScreen/index.tsx b/friends/src/app/screens/MainScreen/index.tsx index f1f2d8a..98321f4 100644 --- a/friends/src/app/screens/MainScreen/index.tsx +++ b/friends/src/app/screens/MainScreen/index.tsx @@ -15,6 +15,7 @@ import { QuestionIcon } from '../../components/Icons/QuestionIcon'; import { UserPlusIcon } from '../../components/Icons/UserPlusIcon'; import { WarningIcon } from '../../components/Icons/WarningIcon'; import { Input } from '../../components/Input'; +import { NotificationDot } from '../../components/NotificationDot'; import { Typography } from '../../components/Typography'; import { useServiceContext } from '../../contexts/ServiceContext'; import { useThemeContext } from '../../contexts/ThemeContext'; @@ -113,7 +114,9 @@ const Header = ({ navigation }: DrawerHeaderProps) => { const { friendService } = useServiceContext(); const { mutate: request } = useRequestFriend(); const guideEnabledColor = useThemeContext((data) => data.color.text.guide); + const { data: requestedFriends } = useFriends({ state: 'REQUESTED' }); + const isRequestedFriendExist = requestedFriends && requestedFriends.length !== 0; const isValid = friendService.isValidNicknameTag(addFriendModalNickname); const guideMessageState = addFriendModalNickname === '' ? 'disabled' : isValid ? 'hidden' : 'enabled'; @@ -132,7 +135,10 @@ const Header = ({ navigation }: DrawerHeaderProps) => { } left={ navigation.openDrawer()}> - + + + {isRequestedFriendExist && } + } right={ @@ -219,4 +225,6 @@ const styles = StyleSheet.create({ height: 12, }, guideText: { fontSize: 10 }, + hamburgerWrapper: { position: 'relative' }, + hamburgerNotificationDot: { position: 'absolute', top: 5, right: -1 }, }); diff --git a/friends/src/app/styles/colors.ts b/friends/src/app/styles/colors.ts index e532c09..cf6dfeb 100644 --- a/friends/src/app/styles/colors.ts +++ b/friends/src/app/styles/colors.ts @@ -16,4 +16,6 @@ export const COLORS = { primary10: '#00b8b0', primary20: '#1ca6a0', + + red: '#E54459', } satisfies Record;