🚸 친구 요청 dots (#78)

wafflestudio · Sep 7, 2023 · 1e64b10 · 1e64b10
1 parent e4d4406
commit 1e64b10
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/friends/src/app/components/NotificationDot.tsx 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 <View style={[style, styles.dot]} />;
+};
+
+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
@@ -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 (
     <View style={styles.container}>
@@ -49,9 +53,12 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => {
               onPress={() => setTab(value)}
               style={{ ...styles.tab, borderBottomColor: isActive ? tabActiveBorder : tabInactiveBorder }}
             >
-              <Typography style={{ ...styles.tabText, color: isActive ? tabActiveText : tabInactiveText }}>
-                {label}
-              </Typography>
+              <View style={styles.tabTextWrapper}>
+                <Typography style={{ ...styles.tabText, color: isActive ? tabActiveText : tabInactiveText }}>
+                  {label}
+                </Typography>
+                {isRequestedFriendExist && value === 'REQUESTED' && <NotificationDot style={styles.dot} />}
+              </View>
             </TouchableOpacity>
           );
         })}
@@ -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
@@ -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={
           <TouchableOpacity onPress={() => navigation.openDrawer()}>
-            <HamburgerIcon width={30} height={30} />
+            <View style={styles.hamburgerWrapper}>
+              <HamburgerIcon width={30} height={30} />
+              {isRequestedFriendExist && <NotificationDot style={styles.hamburgerNotificationDot} />}
+            </View>
           </TouchableOpacity>
         }
         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
@@ -16,4 +16,6 @@ export const COLORS = {
 
   primary10: '#00b8b0',
   primary20: '#1ca6a0',
+
+  red: '#E54459',
 } satisfies Record<string, Color>;