💄 사이드바 ui 개편 (#90)

wafflestudio · Oct 8, 2023 · 7d3c6c8 · 7d3c6c8
1 parent c0de861
commit 7d3c6c8
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 33 deletions.
diff --git a/apps/friends-react-native/src/app/assets/icons/snutt-text.svg b/apps/friends-react-native/src/app/assets/icons/snutt-text.svg
diff --git a/apps/friends-react-native/src/app/assets/icons/user-plus.svg b/apps/friends-react-native/src/app/assets/icons/user-plus.svg
diff --git a/apps/friends-react-native/src/app/components/Button.tsx b/apps/friends-react-native/src/app/components/Button.tsx
@@ -21,16 +21,17 @@ export const Button = ({ color, children, style = {}, ...props }: Props) => {
 
 const styles = StyleSheet.create({
   button: {
+    width: 40,
     height: 26,
     borderRadius: 3,
     display: 'flex',
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: 0.5,
     borderStyle: 'solid',
   },
 
   text: {
-    paddingHorizontal: 8,
-    fontSize: 11,
+    fontSize: 12,
+    textAlign: 'center',
   },
 });
diff --git a/...eens/MainScreen/ManageFriendsDrawerContent/ManageFriendsDrawerContentActiveList/index.tsx b/...eens/MainScreen/ManageFriendsDrawerContent/ManageFriendsDrawerContentActiveList/index.tsx
@@ -25,7 +25,8 @@ export const ManageFriendsDrawerContentActiveList = ({ onClickFriend }: Props) =
   const { mutate: deleteFriend } = useDeleteFriend();
   const { mutate: patchDisplayName } = usePatchDisplayName();
   const moreIconColor = useThemeContext((data) => data.color.text.description);
-  const { dispatch } = useMainScreenContext();
+  const activeItemBackgroundColor = useThemeContext((data) => data.color.bg.listActiveItem);
+  const { dispatch, selectedFriendId } = useMainScreenContext();
 
   const [bottomSheetState, setBottomSheetState] = useState<
     | { isOpen: false }
@@ -47,7 +48,14 @@ export const ManageFriendsDrawerContentActiveList = ({ onClickFriend }: Props) =
         ListEmptyComponent={Empty}
         contentContainerStyle={styles.listContainer}
         renderItem={({ item }) => (
-          <TouchableOpacity key={item.friendId} style={styles.item} onPress={() => onClickFriend(item.friendId)}>
+          <TouchableOpacity
+            key={item.friendId}
+            style={[
+              styles.item,
+              { backgroundColor: item.friendId === selectedFriendId ? activeItemBackgroundColor : undefined },
+            ]}
+            onPress={() => onClickFriend(item.friendId)}
+          >
             <Typography style={styles.nickname}>{friendService.formatNickname(item)}</Typography>
 
             <TouchableOpacity
@@ -181,8 +189,16 @@ const usePatchDisplayName = () => {
 };
 
 const styles = StyleSheet.create({
-  item: { height: 40, display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 },
-  nickname: { flex: 1, lineHeight: 15, fontSize: 13 },
+  item: {
+    height: 40,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 24,
+    marginTop: 4,
+  },
+  nickname: { flex: 1, lineHeight: 15, fontSize: 14 },
   listContainer: { flexGrow: 1 },
 
   sheetContent: { paddingBottom: 20 },

diff --git a/...s/MainScreen/ManageFriendsDrawerContent/ManageFriendsDrawerContentRequestedList/index.tsx b/...s/MainScreen/ManageFriendsDrawerContent/ManageFriendsDrawerContentRequestedList/index.tsx
@@ -74,7 +74,15 @@ const useDeclineFriend = () => {
 };
 
 const styles = StyleSheet.create({
-  item: { height: 40, display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 },
-  nickname: { flex: 1, lineHeight: 15, fontSize: 13 },
+  item: {
+    height: 40,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 24,
+    marginTop: 4,
+  },
+  nickname: { flex: 1, lineHeight: 15, fontSize: 14 },
   listContainer: { flexGrow: 1 },
 });
diff --git a/apps/friends-react-native/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx b/apps/friends-react-native/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx
@@ -42,7 +42,7 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => {
           <CloseIcon width={30} height={30} />
         </TouchableOpacity>
       </View>
-      <View style={{ ...styles.divider, backgroundColor: dividerColor }} />
+      <View style={{ ...styles.divider, borderColor: dividerColor }} />
 
       <View style={styles.tabs}>
         {tabs.map(({ label, value }) => {
@@ -92,8 +92,9 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => {
 };
 
 const styles = StyleSheet.create({
-  container: { paddingVertical: 22, paddingHorizontal: 20, height: '100%', display: 'flex' },
+  container: { paddingVertical: 22, height: '100%', display: 'flex' },
   header: {
+    marginHorizontal: 20,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -102,31 +103,34 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   snutt: { fontSize: 18, fontWeight: '900', flex: 1 },
-  divider: { marginTop: 20, height: 1, marginBottom: 16 },
-  tabs: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' },
+  divider: { marginTop: 20, marginHorizontal: 8, borderTopWidth: 0.5, marginBottom: 8 },
+  tabs: { marginHorizontal: 20, display: 'flex', flexDirection: 'row', justifyContent: 'space-between' },
   tab: {
-    height: 40,
-    borderBottomWidth: 3,
+    height: 38,
+    borderBottomWidth: 2,
     width: '50%',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
   tabTextWrapper: { position: 'relative' },
   tabText: { textAlign: 'center', fontSize: 16 },
-  dot: { position: 'absolute', top: 0, right: -8 },
+  dot: { position: 'absolute', top: 1, right: -6 },
 
-  tabContent: { paddingLeft: 15, paddingRight: 15, paddingTop: 16, flex: 1 },
+  tabContent: { paddingTop: 16, flex: 1 },
 
   addFriend: {
-    borderBottomWidth: 2,
+    marginHorizontal: 20,
+    paddingLeft: 4,
+    paddingRight: 10,
+    borderBottomWidth: 0.5,
     paddingBottom: 9,
-    marginBottom: 8,
+    marginBottom: 12,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
-  addFriendText: { fontSize: 12 },
+  addFriendText: { fontSize: 13 },
 });
 
 const tabs: { label: string; value: Tab }[] = [

diff --git a/apps/friends-react-native/src/app/styles/theme.ts b/apps/friends-react-native/src/app/styles/theme.ts
@@ -3,7 +3,7 @@ import { Color, COLORS } from './colors';
 export type ThemeValues = {
   theme: 'light' | 'dark';
   color: {
-    bg: { default: Color };
+    bg: { default: Color; listActiveItem: Color };
     text: {
       default: Color;
       selectLabel: Color;
@@ -27,7 +27,7 @@ export const getThemeValues = (theme: 'dark' | 'light'): ThemeValues => {
 
 const getLightThemeColors = (): ThemeValues['color'] => {
   return {
-    bg: { default: COLORS.white },
+    bg: { default: COLORS.white, listActiveItem: COLORS.gray05 },
     text: {
       default: COLORS.black,
       selectLabel: COLORS.gray60,
@@ -39,7 +39,7 @@ const getLightThemeColors = (): ThemeValues['color'] => {
       hint: COLORS.gray40,
     },
     button: {
-      gray: { text: COLORS.gray40 },
+      gray: { text: COLORS.gray35 },
       text: { disabled: COLORS.gray20 },
       outlined: { primary: COLORS.primary20, gray: COLORS.gray20 },
     },
@@ -51,16 +51,16 @@ const getLightThemeColors = (): ThemeValues['color'] => {
     },
     input: { placeholder: COLORS.gray20, default: { border: COLORS.gray15 }, focused: { border: COLORS.primary10 } },
     tab: {
-      active: { border: COLORS.gray30, text: COLORS.black },
-      inactive: { border: COLORS.gray05, text: COLORS.gray30 },
+      active: { border: COLORS.gray35, text: COLORS.gray40 },
+      inactive: { border: COLORS.gray05, text: COLORS.gray20 },
     },
     carousel: { dots: { active: COLORS.gray40, inactive: COLORS.gray15 } },
   };
 };
 
 const getDarkThemeColors = (): ThemeValues['color'] => {
   return {
-    bg: { default: COLORS.gray80 },
+    bg: { default: COLORS.gray80, listActiveItem: COLORS.gray60 },
     text: {
       default: COLORS.white,
       selectLabel: COLORS.gray30,