From 9560e9f39a27ad7ba015247afb19a0a3f40fe621 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 6 Feb 2026 16:04:35 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20ActionListBottomSheet=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EB=B0=8F=20=EC=B1=84=ED=8C=85=EB=B0=A9=20=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=EC=97=90=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ActionListBottomSheet/ActionButton.tsx | 20 +++++++++++ .../ActionListBottomSheet/index.style.ts | 9 +++++ .../ActionListBottomSheet/index.tsx | 28 +++++++++++++++ .../BottomSheet/BottomSheetCommon.tsx | 4 ++- src/components/BottomSheet/index.android.tsx | 4 +-- src/components/BottomSheet/index.ios.tsx | 4 +-- src/components/BottomSheet/index.tsx | 6 ++-- src/components/index.ts | 2 +- src/locales/ko/groupChat.json | 3 +- .../ChatMoreActionsBottomSheet/index.tsx | 34 +++++++++++++++++++ .../components/ScreenHeader/index.tsx | 3 ++ src/screens/group/GroupChatScreen/index.tsx | 9 +++++ .../ColorPickItem/index.tsx | 2 +- 13 files changed, 117 insertions(+), 11 deletions(-) create mode 100644 src/components/BottomSheet/ActionListBottomSheet/ActionButton.tsx create mode 100644 src/components/BottomSheet/ActionListBottomSheet/index.style.ts create mode 100644 src/components/BottomSheet/ActionListBottomSheet/index.tsx create mode 100644 src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx diff --git a/src/components/BottomSheet/ActionListBottomSheet/ActionButton.tsx b/src/components/BottomSheet/ActionListBottomSheet/ActionButton.tsx new file mode 100644 index 00000000..1cd12224 --- /dev/null +++ b/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) => ( + + + {label} + + +); \ No newline at end of file diff --git a/src/components/BottomSheet/ActionListBottomSheet/index.style.ts b/src/components/BottomSheet/ActionListBottomSheet/index.style.ts new file mode 100644 index 00000000..c708babc --- /dev/null +++ b/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, + }, +}); \ No newline at end of file diff --git a/src/components/BottomSheet/ActionListBottomSheet/index.tsx b/src/components/BottomSheet/ActionListBottomSheet/index.tsx new file mode 100644 index 00000000..ccf06ee7 --- /dev/null +++ b/src/components/BottomSheet/ActionListBottomSheet/index.tsx @@ -0,0 +1,28 @@ +import { BottomSheet, Shapes } from '@components'; + +import type { BottomSheetProps } from '..'; +import { ActionButton } from './ActionButton'; + +interface ActionListBottomSheetProps extends BottomSheetProps { + actionItems: ActionButton[]; +} + +const ActionListBottomSheet = ({ + actionItems, + ...props +}: ActionListBottomSheetProps) => ( + + {actionItems.map((item, idx) => ( + <> + {idx > 0 && } + + + ))} + +); + +export default ActionListBottomSheet; diff --git a/src/components/BottomSheet/BottomSheetCommon.tsx b/src/components/BottomSheet/BottomSheetCommon.tsx index ea27640b..b2257f81 100644 --- a/src/components/BottomSheet/BottomSheetCommon.tsx +++ b/src/components/BottomSheet/BottomSheetCommon.tsx @@ -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; } diff --git a/src/components/BottomSheet/index.android.tsx b/src/components/BottomSheet/index.android.tsx index a1691bc5..e414d2e3 100644 --- a/src/components/BottomSheet/index.android.tsx +++ b/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'; diff --git a/src/components/BottomSheet/index.ios.tsx b/src/components/BottomSheet/index.ios.tsx index be4e2749..1dbd686a 100644 --- a/src/components/BottomSheet/index.ios.tsx +++ b/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'; \ No newline at end of file diff --git a/src/components/BottomSheet/index.tsx b/src/components/BottomSheet/index.tsx index 2573424b..f558455f 100644 --- a/src/components/BottomSheet/index.tsx +++ b/src/components/BottomSheet/index.tsx @@ -6,13 +6,13 @@ 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) => ( ( /> ); -export default BottomSheet; +export { default as ActionListBottomSheet } from './ActionListBottomSheet'; diff --git a/src/components/index.ts b/src/components/index.ts index 8467105d..e0ec2239 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/locales/ko/groupChat.json b/src/locales/ko/groupChat.json index 760e014a..d49b50cf 100644 --- a/src/locales/ko/groupChat.json +++ b/src/locales/ko/groupChat.json @@ -1,3 +1,4 @@ { - "write-message": "메시지 작성" + "write-message": "메시지 작성", + "view-group-members": "그룹 멤버 보기" } \ No newline at end of file diff --git a/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx b/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx new file mode 100644 index 00000000..13f906c1 --- /dev/null +++ b/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx @@ -0,0 +1,34 @@ +import { ActionListBottomSheet } from '@/components'; +import { useTranslatedText } from '@/hooks'; + +interface ChatMoreActionsBottomSheetProps { + chatRoomId: string; + bottomSheetEnabled: boolean; + setBottomSheetEnabled: (enabled: boolean) => void; +} + +const ChatMoreActionsBottomSheet = ({ + chatRoomId, + bottomSheetEnabled, + setBottomSheetEnabled, +}: ChatMoreActionsBottomSheetProps) => { + const tViewGroupMembers = useTranslatedText({ tKey: 'groupChat.view-group-members' }); + + return ( + { + // Navigate to group members screen + }, + }, + ]} + enabled={bottomSheetEnabled} + onClose={() => setBottomSheetEnabled(false)} + /> + ); + +}; + +export default ChatMoreActionsBottomSheet; diff --git a/src/screens/group/GroupChatScreen/components/ScreenHeader/index.tsx b/src/screens/group/GroupChatScreen/components/ScreenHeader/index.tsx index ff9c0fa8..fed9d945 100644 --- a/src/screens/group/GroupChatScreen/components/ScreenHeader/index.tsx +++ b/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 = ({ diff --git a/src/screens/group/GroupChatScreen/index.tsx b/src/screens/group/GroupChatScreen/index.tsx index 1428d006..8d907016 100644 --- a/src/screens/group/GroupChatScreen/index.tsx +++ b/src/screens/group/GroupChatScreen/index.tsx @@ -10,6 +10,7 @@ import { StackableScreenLayout } from '@/layout'; import type { Chat } from './components/ChatItem/types'; import ChatList from './components/ChatList'; +import ChatMoreActionsBottomSheet from './components/ChatMoreActionsBottomSheet'; import MessageInput from './components/MessageInput'; import ScreenHeader from './components/ScreenHeader'; import { useGroupChatBootstrap } from './hooks/useGroupChatBootstrap'; @@ -74,6 +75,8 @@ const GroupChatScreen = () => { sendChatMessage, }); + const [isMoreActionsBottomSheetEnabled, setIsMoreActionsBottomSheetEnabled] = useState(false); + if (!chatRoomInfoData || isChatRoomInfoPending || !profileData || isProfilePending) { return null; } @@ -86,6 +89,7 @@ const GroupChatScreen = () => { color={GROUP_COLORS[groupColorKey].strong} groupName={groupName} isHost={false} + onMoreButtonPress={() => setIsMoreActionsBottomSheetEnabled(true)} /> } keyboardControllerType='keyboardAvoidingView' @@ -103,6 +107,11 @@ const GroupChatScreen = () => { groupColorKey={groupColorKey} handleSend={handleSend} /> + ); }; diff --git a/src/screens/group/groupDetail/components/GroupColorPickerDialog/ColorPickItem/index.tsx b/src/screens/group/groupDetail/components/GroupColorPickerDialog/ColorPickItem/index.tsx index 61f138c8..4efe66fb 100644 --- a/src/screens/group/groupDetail/components/GroupColorPickerDialog/ColorPickItem/index.tsx +++ b/src/screens/group/groupDetail/components/GroupColorPickerDialog/ColorPickItem/index.tsx @@ -17,7 +17,7 @@ const ColorPickItem = ({ }: ColorPickItemProps) => { const styles = createStyles(isSelected, colorKey); - return ( + return ( onSelect(colorKey)} style={styles.container} From 58f43a3b8035716a082961e68a79f23f95ef92f7 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 6 Feb 2026 18:10:47 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?= =?UTF-8?q?=EA=B7=B8=EB=A3=B9=20=EB=A9=A4=EB=B2=84=20=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ActionListBottomSheet/index.tsx | 6 +-- .../BottomSheet/BottomSheetCommon.tsx | 3 +- src/components/Dialog/Alert/index.style.ts | 9 ----- src/components/Dialog/Alert/index.tsx | 3 +- src/components/Dialog/Any/index.style.ts | 4 +- src/components/Dialog/Any/index.tsx | 2 + src/components/Dialog/Confirm/index.style.ts | 18 --------- src/components/Dialog/Confirm/index.tsx | 3 +- src/components/Dialog/index.style.ts | 21 +++++++++++ src/locales/ko/groupChat.json | 2 +- .../ChatMoreActionsBottomSheet/index.tsx | 16 ++++++-- .../components/UserInfosDialog/index.style.ts | 36 ++++++++++++++++++ .../components/UserInfosDialog/index.tsx | 37 +++++++++++++++++++ src/screens/group/GroupChatScreen/index.tsx | 4 +- 14 files changed, 121 insertions(+), 43 deletions(-) create mode 100644 src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts create mode 100644 src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx diff --git a/src/components/BottomSheet/ActionListBottomSheet/index.tsx b/src/components/BottomSheet/ActionListBottomSheet/index.tsx index ccf06ee7..8d483154 100644 --- a/src/components/BottomSheet/ActionListBottomSheet/index.tsx +++ b/src/components/BottomSheet/ActionListBottomSheet/index.tsx @@ -1,4 +1,5 @@ import { BottomSheet, Shapes } from '@components'; +import { View } from 'react-native'; import type { BottomSheetProps } from '..'; import { ActionButton } from './ActionButton'; @@ -13,14 +14,13 @@ const ActionListBottomSheet = ({ }: ActionListBottomSheetProps) => ( {actionItems.map((item, idx) => ( - <> + {idx > 0 && } - + ))} ); diff --git a/src/components/BottomSheet/BottomSheetCommon.tsx b/src/components/BottomSheet/BottomSheetCommon.tsx index b2257f81..55343fec 100644 --- a/src/components/BottomSheet/BottomSheetCommon.tsx +++ b/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, View } from 'react-native'; import { useHardwareBack } from '@/hooks/useHardwareBack'; @@ -65,6 +65,7 @@ const BottomSheetCommon = ({ useEffect(() => { if (enabled) { setHidden(false); + Keyboard.dismiss(); } const anim = Animated.timing(animation, { toValue: enabled ? 1 : 0, diff --git a/src/components/Dialog/Alert/index.style.ts b/src/components/Dialog/Alert/index.style.ts index 74005162..f9df1489 100644 --- a/src/components/Dialog/Alert/index.style.ts +++ b/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', -}; \ No newline at end of file diff --git a/src/components/Dialog/Alert/index.tsx b/src/components/Dialog/Alert/index.tsx index e4960825..edc0ac55 100644 --- a/src/components/Dialog/Alert/index.tsx +++ b/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; diff --git a/src/components/Dialog/Any/index.style.ts b/src/components/Dialog/Any/index.style.ts index 75c55aaf..84ec8709 100644 --- a/src/components/Dialog/Any/index.style.ts +++ b/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: { }, }); diff --git a/src/components/Dialog/Any/index.tsx b/src/components/Dialog/Any/index.tsx index a223b3a6..0a87de53 100644 --- a/src/components/Dialog/Any/index.tsx +++ b/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 { diff --git a/src/components/Dialog/Confirm/index.style.ts b/src/components/Dialog/Confirm/index.style.ts index 9c1b35a9..b0f68192 100644 --- a/src/components/Dialog/Confirm/index.style.ts +++ b/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], -}; \ No newline at end of file diff --git a/src/components/Dialog/Confirm/index.tsx b/src/components/Dialog/Confirm/index.tsx index 49568373..5d585412 100644 --- a/src/components/Dialog/Confirm/index.tsx +++ b/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; diff --git a/src/components/Dialog/index.style.ts b/src/components/Dialog/index.style.ts index db5b138b..637d8b47 100644 --- a/src/components/Dialog/index.style.ts +++ b/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], +}; \ No newline at end of file diff --git a/src/locales/ko/groupChat.json b/src/locales/ko/groupChat.json index d49b50cf..6793f189 100644 --- a/src/locales/ko/groupChat.json +++ b/src/locales/ko/groupChat.json @@ -1,4 +1,4 @@ { "write-message": "메시지 작성", - "view-group-members": "그룹 멤버 보기" + "group-member-list": "그룹 멤버 목록" } \ No newline at end of file diff --git a/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx b/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx index 13f906c1..fe5af0de 100644 --- a/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx +++ b/src/screens/group/GroupChatScreen/components/ChatMoreActionsBottomSheet/index.tsx @@ -1,18 +1,22 @@ 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 { - chatRoomId: string; + userInfos: GetChatRoomInfoResponse['data']['userInfos']; bottomSheetEnabled: boolean; setBottomSheetEnabled: (enabled: boolean) => void; } const ChatMoreActionsBottomSheet = ({ - chatRoomId, + userInfos, bottomSheetEnabled, setBottomSheetEnabled, }: ChatMoreActionsBottomSheetProps) => { - const tViewGroupMembers = useTranslatedText({ tKey: 'groupChat.view-group-members' }); + const tViewGroupMembers = useTranslatedText({ tKey: 'groupChat.group-member-list' }); return ( { - // Navigate to group members screen + dialogService.add({ + content: ( + + ), + }); }, }, ]} diff --git a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts new file mode 100644 index 00000000..b699d208 --- /dev/null +++ b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts @@ -0,0 +1,36 @@ +import { StyleSheet } from 'react-native'; + +import type { TextProps } from '@/components/Text'; + +export const styles = StyleSheet.create({ + container: { + }, + userInfoContainer: { + flexDirection: 'row', + gap: 12, + paddingHorizontal: 16, + alignItems: 'center', + }, + scrollView: { + flexGrow: 0, + maxHeight: 500, minHeight: 100, + }, + 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', +}; \ No newline at end of file diff --git a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx new file mode 100644 index 00000000..8fcf30db --- /dev/null +++ b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx @@ -0,0 +1,37 @@ +import { ScrollView, View } from 'react-native'; + +import { Avatar, Dialog, Text, TText } from '@/components'; +import type { GetChatRoomInfoResponse } from '@/features/chat/model/getChatRoomInfo'; + +import { styles, TITLE_TEXT_STYLE } from './index.style'; + +interface UserInfosDialogProps { + userInfos: GetChatRoomInfoResponse['data']['userInfos']; +} + +const UserInfosDialog = ({ userInfos }: UserInfosDialogProps) => ( + + + + + { + userInfos.map((userInfo) => ( + + + {userInfo.nickname} + + )) + } + + + +); + +export default UserInfosDialog; \ No newline at end of file diff --git a/src/screens/group/GroupChatScreen/index.tsx b/src/screens/group/GroupChatScreen/index.tsx index 8d907016..74ec8788 100644 --- a/src/screens/group/GroupChatScreen/index.tsx +++ b/src/screens/group/GroupChatScreen/index.tsx @@ -109,8 +109,8 @@ const GroupChatScreen = () => { /> ); From 49b74e5513b8f02bc70b7216fce1fa03039eeab4 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 6 Feb 2026 18:19:32 +0900 Subject: [PATCH 3/5] =?UTF-8?q?style:=20=EA=B7=B8=EB=A3=B9=20=EB=A9=A4?= =?UTF-8?q?=EB=B2=84=20=EB=AA=A9=EB=A1=9D=20Dialog=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/UserInfosDialog/index.style.ts | 11 +++++++---- .../components/UserInfosDialog/index.tsx | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts index b699d208..bd1d8ec4 100644 --- a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts +++ b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts @@ -1,10 +1,9 @@ import { StyleSheet } from 'react-native'; import type { TextProps } from '@/components/Text'; +import { theme } from '@/theme'; export const styles = StyleSheet.create({ - container: { - }, userInfoContainer: { flexDirection: 'row', gap: 12, @@ -13,11 +12,15 @@ export const styles = StyleSheet.create({ }, scrollView: { flexGrow: 0, - maxHeight: 500, minHeight: 100, + maxHeight: 500, + borderWidth: 1, + borderColor: theme.color.neutral[500], + borderRadius: theme.radius[200], + paddingVertical: 8, }, scrollViewContentContainer: { paddingVertical: 8, - gap: 12, + gap: 12, }, }); diff --git a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx index 8fcf30db..f4d965bf 100644 --- a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx +++ b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.tsx @@ -11,7 +11,7 @@ interface UserInfosDialogProps { const UserInfosDialog = ({ userInfos }: UserInfosDialogProps) => ( - + Date: Fri, 6 Feb 2026 18:35:00 +0900 Subject: [PATCH 4/5] =?UTF-8?q?style:=20=EA=B7=B8=EB=A3=B9=20=EB=A9=A4?= =?UTF-8?q?=EB=B2=84=20=EB=AA=A9=EB=A1=9D=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GroupChatScreen/components/UserInfosDialog/index.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts index bd1d8ec4..439ce7d7 100644 --- a/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts +++ b/src/screens/group/GroupChatScreen/components/UserInfosDialog/index.style.ts @@ -14,7 +14,7 @@ export const styles = StyleSheet.create({ flexGrow: 0, maxHeight: 500, borderWidth: 1, - borderColor: theme.color.neutral[500], + borderColor: theme.color.neutral[300], borderRadius: theme.radius[200], paddingVertical: 8, }, From 839da50ea6c240aca86c4fa60893b877c213f9a9 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 6 Feb 2026 18:46:02 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomSheet/ActionListBottomSheet/index.tsx | 3 ++- src/components/BottomSheet/BottomSheetCommon.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/BottomSheet/ActionListBottomSheet/index.tsx b/src/components/BottomSheet/ActionListBottomSheet/index.tsx index 8d483154..91f3422d 100644 --- a/src/components/BottomSheet/ActionListBottomSheet/index.tsx +++ b/src/components/BottomSheet/ActionListBottomSheet/index.tsx @@ -1,7 +1,8 @@ -import { BottomSheet, Shapes } from '@components'; +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 { diff --git a/src/components/BottomSheet/BottomSheetCommon.tsx b/src/components/BottomSheet/BottomSheetCommon.tsx index 55343fec..560c046b 100644 --- a/src/components/BottomSheet/BottomSheetCommon.tsx +++ b/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, Keyboard, View } from 'react-native'; +import { Animated, Dimensions, Keyboard } from 'react-native'; import { useHardwareBack } from '@/hooks/useHardwareBack';