[Feature] 채팅 멤버 목록 보기 기능 구현

src/components/BottomSheet/ActionListBottomSheet/ActionButton.tsx

@@ -0,0 +1,20 @@
+import Text from '@/components/Text';
+import TouchableRipple from '@/components/TouchableRipple';
+
+import { styles } from './index.style';
+
+export type ActionButton = {
+  label: string;
+  onPress: () => void;
+};
+
+export const ActionButton = ({
+  label,
+  onPress,
+}: ActionButton) => (
+  <TouchableRipple containerStyle={styles.actionButtonContainer} onPress={onPress}>
+    <Text font='b2'>
+      {label}
+    </Text>
+  </TouchableRipple>
+);

src/components/BottomSheet/ActionListBottomSheet/index.style.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  actionButtonContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+  },
+});

src/components/BottomSheet/ActionListBottomSheet/index.tsx

@@ -0,0 +1,29 @@
+import { Shapes } from '@components';
+import { View } from 'react-native';
+
+import type { BottomSheetProps } from '..';
+import { BottomSheet } from '../index';
+import { ActionButton } from './ActionButton';
+
+interface ActionListBottomSheetProps extends BottomSheetProps {
+  actionItems: ActionButton[];
+}
+
+const ActionListBottomSheet = ({
+  actionItems,
+  ...props
+}: ActionListBottomSheetProps) => (
+  <BottomSheet {...props}>
+    {actionItems.map((item, idx) => (
+      <View key={`actionButton-${item.label}`}>
+        {idx > 0 && <Shapes.Line />}
+        <ActionButton 
+          label={item.label}
+          onPress={item.onPress}
+        />
+      </View>
+    ))}
+  </BottomSheet>
+);
+
+export default ActionListBottomSheet;

src/components/BottomSheet/BottomSheetCommon.tsx

@@ -2,7 +2,7 @@ import { Backdrop } from '@components';
 import type { PropsWithChildren } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
-import { Animated, Dimensions, View } from 'react-native';
+import { Animated, Dimensions, Keyboard } from 'react-native';
 
 import { useHardwareBack } from '@/hooks/useHardwareBack';
 
@@ -13,6 +13,7 @@ export interface BottomSheetCommonProps extends PropsWithChildren {
   onClose?: () => void;
   /** iOS에서는 false로 넘겨도 되며, 기본값 true */
   closeOnBackdropPress?: boolean;
+  closeOnHardwareBack?: boolean;
   /** SafeAreaInsets.bottom 혹은 0 */
   bottomPadding: number;
   /** useNativeDriver 플래그 */
@@ -23,6 +24,7 @@ const BottomSheetCommon = ({
   enabled,
   onClose,
   closeOnBackdropPress = true,
+  closeOnHardwareBack = true,
   bottomPadding,
   useNativeDriver,
   children,
@@ -53,7 +55,7 @@ const BottomSheetCommon = ({
   };
 
   useHardwareBack(() => {
-    if (enabled && onClose) {
+    if (closeOnHardwareBack && enabled && onClose) {
       onClose();
       return true;
     }
@@ -63,6 +65,7 @@ const BottomSheetCommon = ({
   useEffect(() => {
     if (enabled) {
       setHidden(false);
+      Keyboard.dismiss();
     }
     const anim = Animated.timing(animation, {
       toValue: enabled ? 1 : 0,

src/components/BottomSheet/index.android.tsx

@@ -11,7 +11,7 @@ type BottomSheetProps = Omit<
   'bottomPadding' | 'useNativeDriver'
 >;
 
-const BottomSheet = (props: BottomSheetProps) => {
+export const BottomSheet = (props: BottomSheetProps) => {
   const insets = useSafeAreaInsets();
 
   return (
@@ -23,4 +23,4 @@ const BottomSheet = (props: BottomSheetProps) => {
   );
 };
 
-export default BottomSheet;
+export { default as ActionListBottomSheet } from './ActionListBottomSheet';

src/components/BottomSheet/index.ios.tsx

@@ -13,7 +13,7 @@ type BottomSheetProps = Omit<
   'bottomPadding' | 'useNativeDriver'
 >;
 
-const BottomSheet = (props: BottomSheetProps) => {
+export const BottomSheet = (props: BottomSheetProps) => {
   const insets = useSafeAreaInsets();
 
   return (
@@ -32,4 +32,4 @@ const BottomSheet = (props: BottomSheetProps) => {
   );
 };
 
-export default BottomSheet;
+export { default as ActionListBottomSheet } from './ActionListBottomSheet';

src/components/BottomSheet/index.tsx

@@ -6,18 +6,18 @@ import type {
 import BottomSheetCommon from './BottomSheetCommon';
 
 /** 공통Props에서 bottomPadding/useNativeDriver만 뺀 타입 */
-type BottomSheetProps = Omit<
+export type BottomSheetProps = Omit<
   BottomSheetCommonProps,
   'bottomPadding' | 'useNativeDriver'
 >;
 
 // TODO: BottomSheet disable 시에, 가상 DOM으로부터 언마운트하도록 구현 변경 (Dialog의 구현처럼)
-const BottomSheet = (props: BottomSheetProps) => (
+export const BottomSheet = (props: BottomSheetProps) => (
   <BottomSheetCommon
     {...props}
     bottomPadding={0}
     useNativeDriver={!filterPlatform(['windows'])}
   />
 );
 
-export default BottomSheet;
+export { default as ActionListBottomSheet } from './ActionListBottomSheet';

src/components/Dialog/Alert/index.style.ts

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
 
-import type { TextProps } from '@/components/Text';
 import { theme } from '@/theme';
 
 export const styles = StyleSheet.create({
@@ -19,11 +18,3 @@ export const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
 });
-
-export const TITLE_TEXT_STYLE: TextProps = {
-  font: 't2',
-};
-
-export const MESSAGE_TEXT_STYLE: TextProps = {
-  font: 'b3',
-};

src/components/Dialog/Alert/index.tsx

@@ -4,7 +4,8 @@ import { View } from 'react-native';
 import { useDialog } from '@/hooks/useDialog';
 import { useTranslatedText } from '@/hooks/useTranslatedText';
 
-import { MESSAGE_TEXT_STYLE, styles, TITLE_TEXT_STYLE } from './index.style';
+import { MESSAGE_TEXT_STYLE, TITLE_TEXT_STYLE } from '../index.style';
+import { styles } from './index.style';
 
 interface AlertDialogProps {
   title: string;

src/components/Dialog/Any/index.style.ts

@@ -1,8 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  container: { 
-    flex: 1,
-    alignItems: 'center',
+  container: {
   },
 });

src/components/Dialog/Any/index.tsx

@@ -1,8 +1,10 @@
 import type { ReactNode } from 'react';
 import { View } from 'react-native';
 
+import Text from '@/components/Text';
 import { useDialog } from '@/hooks/useDialog';
 
+import { TITLE_TEXT_STYLE } from '../index.style';
 import { styles } from './index.style';
 
 interface AnyDialogProps {

src/components/Dialog/Confirm/index.style.ts

@@ -23,21 +23,3 @@ export const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
 });
-
-export const TITLE_TEXT_STYLE: TextProps = {
-  font: 't2',
-};
-
-export const MESSAGE_TEXT_STYLE: TextProps = {
-  font: 'b3',
-};
-
-export const CLOSE_BUTTON_STYLE: ButtonProps = {
-  style: {
-    alignSelf: 'stretch',
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: theme.color.neutral[500],
-  },
-  textColor: theme.color.neutral[500],
-};

src/components/Dialog/Confirm/index.tsx

@@ -4,7 +4,8 @@ import { View } from 'react-native';
 import { useDialog } from '@/hooks/useDialog';
 import { useTranslatedText } from '@/hooks/useTranslatedText';
 
-import { CLOSE_BUTTON_STYLE, MESSAGE_TEXT_STYLE, styles, TITLE_TEXT_STYLE } from './index.style';
+import { CLOSE_BUTTON_STYLE, MESSAGE_TEXT_STYLE, TITLE_TEXT_STYLE } from '../index.style';
+import { styles } from './index.style';
 
 interface AlertDialogProps {
   title: string;

src/components/Dialog/index.style.ts

@@ -2,6 +2,9 @@ import { StyleSheet } from 'react-native';
 
 import { theme } from '@/theme';
 
+import type { ButtonProps } from '../Button/Basic';
+import type { TextProps } from '../Text';
+
 export const styles = StyleSheet.create({
   container: {
     position: 'absolute',
@@ -19,3 +22,21 @@ export const styles = StyleSheet.create({
     padding: theme.spacing[400],
   },
 });
+
+export const TITLE_TEXT_STYLE: TextProps = {
+  font: 't2',
+};
+
+export const MESSAGE_TEXT_STYLE: TextProps = {
+  font: 'b3',
+};
+
+export const CLOSE_BUTTON_STYLE: ButtonProps = {
+  style: {
+    alignSelf: 'stretch',
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: theme.color.neutral[500],
+  },
+  textColor: theme.color.neutral[500],
+};

src/components/index.ts

@@ -2,7 +2,7 @@ export { default as Accordion } from './Accordion';
 export { default as Avatar } from './Avatar';
 export { default as AvatarGroup } from './AvatarGroup';
 export { default as Backdrop } from './Backdrop';
-export { default as BottomSheet } from './BottomSheet';
+export { ActionListBottomSheet, BottomSheet } from './BottomSheet';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
 export { default as DateTimePicker } from './DateTimePicker';

src/locales/ko/groupChat.json

@@ -1,3 +1,4 @@
 {
-  "write-message": "메시지 작성"
+  "write-message": "메시지 작성",
+  "group-member-list": "그룹 멤버 목록"
 }

src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx

@@ -0,0 +1,42 @@
+import { ActionListBottomSheet } from '@/components';
+import type { GetChatRoomInfoResponse } from '@/features/chat/model/getChatRoomInfo';
+import { useTranslatedText } from '@/hooks';
+import { dialogService } from '@/utils/dialog';
+
+import UserInfosDialog from '../UserInfosDialog';
+
+interface ChatMoreActionsBottomSheetProps {
+  userInfos: GetChatRoomInfoResponse['data']['userInfos'];
+  bottomSheetEnabled: boolean;
+  setBottomSheetEnabled: (enabled: boolean) => void;
+}
+
+const ChatMoreActionsBottomSheet = ({
+  userInfos,
+  bottomSheetEnabled,
+  setBottomSheetEnabled,
+}: ChatMoreActionsBottomSheetProps) => {
+  const tViewGroupMembers = useTranslatedText({ tKey: 'groupChat.group-member-list' });
+
+  return (
+    <ActionListBottomSheet 
+      actionItems={[
+        {
+          label: tViewGroupMembers,
+          onPress: () => {
+            dialogService.add({
+              content: (
+                <UserInfosDialog userInfos={userInfos} />
+              ),
+            });
+          },
+        },
+      ]}
+      enabled={bottomSheetEnabled}
+      onClose={() => setBottomSheetEnabled(false)}
+    />
+  );
+
+};
+
+export default ChatMoreActionsBottomSheet;

src/screens/group/GroupChatScreen/components/ScreenHeader/index.tsx

@@ -11,12 +11,14 @@ interface ScreenHeaderProps {
   groupName: string;
   isHost: boolean;
   color: Color;
+  onMoreButtonPress: () => void;
 }
 
 const ScreenHeader = ({
   groupName,
   isHost,
   color,
+  onMoreButtonPress,
 }: ScreenHeaderProps) => {
   const navigation = useStackNavigation();
   const [isNotiEnabled, setIsNotiEnabled] = useState(true);
@@ -46,6 +48,7 @@ const ScreenHeader = ({
         <Button.Icon 
           Icon={MoreIcon}
           {...ICON_STYLE(color)}
+          onPress={onMoreButtonPress}
         />
       </View>
     </View>

src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+import type { TextProps } from '@/components/Text';
+import { theme } from '@/theme';
+
+export const styles = StyleSheet.create({
+  userInfoContainer: {
+    flexDirection: 'row',
+    gap: 12,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+  },
+  scrollView: {
+    flexGrow: 0, 
+    maxHeight: 500,
+    borderWidth: 1,
+    borderColor: theme.color.neutral[300],
+    borderRadius: theme.radius[200],
+    paddingVertical: 8,
+  },
+  scrollViewContentContainer: {
+    paddingVertical: 8,
+    gap: 12,
+  },
+});
+
+export const TITLE_TEXT_STYLE: TextProps = {
+  font: 't1',
+  textStyle: {
+    alignSelf: 'center',
+  },
+  containerStyle: {
+    paddingBottom: 12,
+  },
+};
+
+export const USER_INFO_NICKNAME_TEXT_STYLE: TextProps = {
+  font: 'b3',
+};