diff --git a/apps/friends-react-native/src/app/components/EmptyView.tsx b/apps/friends-react-native/src/app/components/EmptyView.tsx index 478a72e..7d82f42 100644 --- a/apps/friends-react-native/src/app/components/EmptyView.tsx +++ b/apps/friends-react-native/src/app/components/EmptyView.tsx @@ -1,4 +1,4 @@ -import { Fragment, ReactNode } from 'react'; +import { ReactNode } from 'react'; import { StyleSheet, View } from 'react-native'; import SurprisedCat from '../assets/images/surprised-cat.svg'; @@ -16,10 +16,10 @@ export const EmptyView = ({ }: { title: ReactNode; descriptions?: ReactNode[]; + views?: ReactNode[][]; size?: 'small' | 'big'; catType?: 'waffle' | 'basic'; etc?: ReactNode; - views?: ReactNode[]; }) => { const { subtitle, caption } = useThemeContext(({ color }) => color.text); const sizeStyle = { small: smallStyle, big: bigStyle }[size]; @@ -32,7 +32,20 @@ export const EmptyView = ({ )} {title} - {views?.map((v, i) => {v})} + + + {views?.map((view) => { + return ( + + {view.map((v, i) => ( + + {v} + + ))} + + ); + })} + {descriptions?.map((d, i) => ( {d} @@ -47,6 +60,9 @@ const styles = StyleSheet.create({ container: { display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }, subtitle: { fontWeight: '600' }, description: { fontWeight: '600' }, + view: { fontWeight: '600', lineHeight: 18 }, + viewContainer: { display: 'flex', gap: 17 }, + viewContentsContainer: { display: 'flex', gap: 8 }, }); const smallStyle = StyleSheet.create({ diff --git a/apps/friends-react-native/src/app/components/Icons/_createIconComponent.tsx b/apps/friends-react-native/src/app/components/Icons/_createIconComponent.tsx index f350102..059e0fd 100644 --- a/apps/friends-react-native/src/app/components/Icons/_createIconComponent.tsx +++ b/apps/friends-react-native/src/app/components/Icons/_createIconComponent.tsx @@ -5,7 +5,7 @@ import { useThemeContext } from '../../contexts/ThemeContext'; import { ThemeValues } from '../../styles/theme'; type Props = Omit & { - style?: Partial<{ color: string }>; + style?: Partial<{ color: string; marginTop: number }>; variant?: keyof ThemeValues['color']['text']; }; diff --git a/apps/friends-react-native/src/app/screens/MainScreen/FriendTimetable/FriendGuide/index.tsx b/apps/friends-react-native/src/app/screens/MainScreen/FriendTimetable/FriendGuide/index.tsx index 9125af0..26ac866 100644 --- a/apps/friends-react-native/src/app/screens/MainScreen/FriendTimetable/FriendGuide/index.tsx +++ b/apps/friends-react-native/src/app/screens/MainScreen/FriendTimetable/FriendGuide/index.tsx @@ -18,6 +18,7 @@ export const FriendGuide = () => { }, } = useThemeContext(); + const svgMargionTop = -2; const openGuideModal = () => dispatch({ type: 'setGuideModalOpen', isOpen: true }); return ( @@ -27,26 +28,33 @@ export const FriendGuide = () => { title="망한 시간표 대회 참여 방법" catType="waffle" views={[ - - 우측 상단{' '} - 을 눌러{' '} - '수신망한와플#7777'로 - , - 친구 요청을 보내주시면 자동 신청됩니다., - - 2025년 1학기 시간표 중 하나가 - , - - '대표 시간표'로 지정되어 있는지 확인해주세요. - , - - 발표(3/30) 전에 친구 삭제 시 무효 - 처리됩니다. - , - // <> - // 친구가 수락하면 사이드바 친구 목록에 - // 추가됩니다. - // , + [ + <> + 우측 상단{' '} + 을 눌러{' '} + '수신망한와플#7777'로 + , + <> + + 친구 요청을 보내주시면 자동 신청됩니다. + , + ], + [ + <> + 2025년 1학기 + 시간표 중 하나가 + , + <> + + '대표 시간표'로 지정되어 있는지 확인해주세요. + , + ], + [ + <> + 발표(3/30) 전에 + 친구 삭제 시 무효 처리됩니다. + , + ], ]} // title="추가한 친구가 없습니다." // descriptions={[ @@ -79,4 +87,8 @@ const styles = StyleSheet.create({ description: { width: 450 }, hint: { textDecorationLine: 'underline', fontSize: 10 }, bold: { fontWeight: 'bold' }, + empty: { + width: 12, + height: 12, + }, });