[friends-native] 망한시간표대회 안내 문구 추가

wafflestudio · Mar 9, 2025 · b52746b · b52746b
1 parent 2b1b3ad
commit b52746b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 24 deletions.
diff --git 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 = ({
         <SurprisedCat width={sizeStyle.image.width} height={sizeStyle.image.height} />
       )}
       <Typography style={{ color: subtitle, ...styles.subtitle, ...sizeStyle.subtitle }}>{title}</Typography>
-      {views?.map((v, i) => <Fragment key={i}>{v}</Fragment>)}
+
+      <View style={styles.viewContainer}>
+        {views?.map((view) => {
+          return (
+            <View style={styles.viewContentsContainer}>
+              {view.map((v, i) => (
+                <Typography key={i} style={{ ...styles.view, color: caption, ...sizeStyle.description }}>
+                  {v}
+                </Typography>
+              ))}
+            </View>
+          );
+        })}
+      </View>
       {descriptions?.map((d, i) => (
         <Typography key={i} style={{ ...styles.description, color: caption, ...sizeStyle.description }}>
           {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
@@ -5,7 +5,7 @@ import { useThemeContext } from '../../contexts/ThemeContext';
 import { ThemeValues } from '../../styles/theme';
 
 type Props = Omit<SvgProps, 'style'> & {
-  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
@@ -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={[
-          <View style={styles.description}>
-            <CheckIcon style={{ color: caption }} width={12} height={12} /> 우측 상단{' '}
-            <UserPlusIcon style={{ color: caption }} width={12} height={12} /> 을 눌러{' '}
-            <Typography style={styles.bold}>'수신망한와플#7777'</Typography>로
-          </View>,
-          <View style={styles.description}>친구 요청을 보내주시면 자동 신청됩니다.</View>,
-          <View style={styles.description}>
-            <CheckIcon style={{ color: caption }} width={12} height={12} /> 2025년 1학기 시간표 중 하나가
-          </View>,
-          <View style={styles.description}>
-            <Typography style={styles.bold}>'대표 시간표'</Typography>로 지정되어 있는지 확인해주세요.
-          </View>,
-          <View style={styles.description}>
-            <CheckIcon style={{ color: caption }} width={12} height={12} /> 발표(3/30) 전에 친구 삭제 시 무효
-            처리됩니다.
-          </View>,
-          // <>
-          //   친구가 수락하면 사이드바 <HamburgerIcon style={{ color: caption }} width={12} height={12} /> 친구 목록에
-          //   추가됩니다.
-          // </>,
+          [
+            <>
+              <CheckIcon style={{ color: caption, marginTop: svgMargionTop }} width={12} height={12} /> 우측 상단{' '}
+              <UserPlusIcon style={{ color: caption, marginTop: svgMargionTop }} width={12} height={12} /> 을 눌러{' '}
+              <Typography style={styles.bold}>'수신망한와플#7777'</Typography>로
+            </>,
+            <>
+              <View style={styles.empty} />
+              친구 요청을 보내주시면 자동 신청됩니다.
+            </>,
+          ],
+          [
+            <>
+              <CheckIcon style={{ color: caption, marginTop: svgMargionTop }} width={12} height={12} /> 2025년 1학기
+              시간표 중 하나가
+            </>,
+            <>
+              <View style={styles.empty} />
+              <Typography style={styles.bold}>'대표 시간표'</Typography>로 지정되어 있는지 확인해주세요.
+            </>,
+          ],
+          [
+            <>
+              <CheckIcon style={{ color: caption, marginTop: svgMargionTop }} width={12} height={12} /> 발표(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,
+  },
 });