Merge pull request #33 from BOBpossible/feat/#25_My

Feat/#25 my

.gitignore

@@ -62,4 +62,9 @@ buck-out/
 
 
 # 인증 키 등
-.env
+.env
+
+
+
+# 디자인시스템
+zDesign.txt

src/assets/DesignSystem.tsx

@@ -0,0 +1,112 @@
+import {StyleSheet} from 'react-native';
+// import {DesignSystem} from '../../assets/DesignSystem';
+
+export const DesignSystem = StyleSheet.create({
+  centerArrange: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  h1SB: {
+    fontSize: 24,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  h2SB: {
+    fontSize: 17,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  h3SB: {
+    fontSize: 14,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  subtitle1: {
+    fontSize: 23,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  subtitle2: {
+    fontSize: 19,
+    fontFamily: 'Pretendard-Medium',
+  },
+  title1SB: {
+    fontSize: 18,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  title2Regular: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-Regular',
+  },
+  title3SB: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  title4Md: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-Medium',
+  },
+  body1Lt: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-Light',
+  },
+  body2Lt: {
+    fontSize: 14,
+    fontFamily: 'Pretendard-Light',
+  },
+  caption1Lt: {
+    fontSize: 12,
+    fontFamily: 'Pretendard-Light',
+  },
+  caption2Lt: {
+    fontSize: 10,
+    fontFamily: 'Pretendard-Light',
+  },
+  grey1: {
+    color: '#FCFCFC',
+  },
+  grey2: {
+    color: '#F5F5F5',
+  },
+  grey3: {
+    color: '#EFEFEF',
+  },
+  grey4: {
+    color: '#E8E8E8',
+  },
+  grey5: {
+    color: '#DFDFDF',
+  },
+  grey6: {
+    color: '#C8C8C8',
+  },
+  grey7: {
+    color: '#B7B7B7',
+  },
+  grey8: {
+    color: '#949494',
+  },
+  grey9: {
+    color: '#777777',
+  },
+  grey10: {
+    color: '#616161',
+  },
+  grey11: {
+    color: '#555555',
+  },
+  grey12: {
+    color: '#3F3F3F',
+  },
+  grey13: {
+    color: '#383838',
+  },
+  grey14: {
+    color: '#2A2A2A',
+  },
+  grey15: {
+    color: '#1F1F1F',
+  },
+  grey16: {
+    color: '#1A1A1A',
+  },
+  grey17: {
+    color: '#111111',
+  },
+});

src/components/My/MyHeader.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type {FC} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type MyHeaderProps = {
   goBack: () => void;
@@ -18,7 +19,7 @@ export const MyHeader: FC<MyHeaderProps> = ({goBack, title, save}) => {
         </View>
       </TouchableOpacity>
       <View>
-        <Text style={[styles.headerText]}>{title}</Text>
+        <Text style={[DesignSystem.title4Md, {color: 'black'}]}>{title}</Text>
       </View>
       {save !== undefined ? (
         <TouchableOpacity onPress={save}>
@@ -49,13 +50,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginLeft: 16,
   },
-  headerText: {
-    fontSize: 17,
-    color: 'black',
-    marginLeft: 16,
-    marginRight: 16,
-    // fontWeight: '600',
-  },
   saveButton: {
     marginRight: 16,
     color: '#6C69FF',

src/components/My/MyInquiryListDetails.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type {FC} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type MyInquiryDetailsProps = {
   title: string;
@@ -19,11 +20,11 @@ export const MyInquiryDetails: FC<MyInquiryDetailsProps> = ({title, body, date,
     <View style={{flex: 1}}>
         <TouchableOpacity onPress={handleReviewPress} style={[styles.listDetailsWrap]}>
             <View style={[styles.listLeftWrap]}>
-                <Text style={[styles.titleText, styles.title4Md]}>{title}</Text>
-                <Text style={[styles.dateText]}>{date.slice(0,4)}-{date.slice(5,7)}-{date.slice(8,10)}</Text>
+                <Text style={[styles.titleText, DesignSystem.title4Md]}>{title}</Text>
+                <Text style={[DesignSystem.body2Lt, {color: '#949494'}]}>{date.slice(0,4)}-{date.slice(5,7)}-{date.slice(8,10)}</Text>
             </View>
             <View>
-                <Text style={[styles.statusText]}>{status}</Text>
+                <Text style={[DesignSystem.body1Lt, {color: '#777777'}]}>{status}</Text>
             </View>
         </TouchableOpacity>
     </View>
@@ -35,11 +36,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontFamily: 'Pretendard-Medium',
   },
-  dateText: {
-    color: '#949494',
-    fontSize: 14,
-    fontFamily: 'Pretendard-Light',
-  },
   listDetailsWrap: {
     flex: 1,
     flexDirection: 'row',
@@ -54,9 +50,4 @@ const styles = StyleSheet.create({
     color: '#000000',
     marginBottom: 8,
   },
-  statusText: {
-    color: '#777777',
-    fontSize: 16,
-    fontFamily: 'Pretendard-Light',
-  },
 });

src/components/My/MyInquiryMakeButton.tsx

@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type goWriteProps = {
   goWrite: () => void;
@@ -10,7 +11,7 @@ export const MyInquiryMakeButton: FC<goWriteProps> = ({goWrite}) => {
   return (
     <View style={[styles.progressRow]}>
       <TouchableOpacity style={[styles.progressToggle]} onPress={goWrite}>
-        <Text style={[styles.buttonText]}>문의 남기기 </Text>
+        <Text style={[DesignSystem.body1Lt, {color: 'white'}]}>문의 남기기 </Text>
         <Icon name="pencil" size={18} color="white" />
       </TouchableOpacity>
     </View>
@@ -37,9 +38,4 @@ const styles = StyleSheet.create({
     backgroundColor: '#2A2A2A',
     flexDirection: 'row',
   },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    fontFamily: 'Pretendard-Light',
-  },
 });

src/components/My/MyNotificationsSwitch.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import type {FC} from 'react';
 import {StyleSheet, Text, TouchableOpacity, Switch, View, Image} from 'react-native';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type MyNotificationsSwitchProps = {
   text: string;
@@ -11,7 +12,7 @@ export type MyNotificationsSwitchProps = {
 export const MyNotificationsSwitch: FC<MyNotificationsSwitchProps> = ({text, value, onValueChange}) => {
   return (
     <View>
-      <Text style={{marginLeft: 21.87, color: '#000000', fontSize: 16}}>{text}</Text>
+      <Text style={[DesignSystem.body1Lt, {marginLeft: 21.88, color: '#000000'}]}>{text}</Text>
       <Switch
         value={value}
         trackColor={{false: '#DFDFDF', true: '#6C69FF'}}

src/components/My/MyPointList.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity, Image} from 'react-native';
 import moment from 'moment';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 //prettier-ignore
 export const MyPointList = () => {
@@ -17,19 +18,19 @@ export const MyPointList = () => {
   return (
     <View style={[styles.listWrap]}>
         <View style={[styles.listDayWrap]}>
-            <Text style={[styles.dateText, styles.title33B16]}>{month}.{day}</Text>
+            <Text style={[styles.dateText, DesignSystem.title3SB]}>{month}.{day}</Text>
         </View>
         <View style={[styles.listDetailsWrap]}>
             <View style={[styles.listMissionWrap]}>
-                <Text style={[styles.storeNameText, styles.title33B16]}>{title}</Text>
+                <Text style={[styles.storeNameText, DesignSystem.title3SB]}>{title}</Text>
                 <Text style={[styles.missionText], {fontFamily: 'Pretendard-Light'}}>{subTitle}</Text>
                 {/* <Text style={[styles.missionText], {point > 0 ? fontFamily: 'Pretendard-Light' : fontFamily: 'Pretendard-Light' }}>{subTitle}</Text> */}
             </View>
             <View style={[styles.listPointWrap]}>
                 {point > 0 ?
-                <Text style={[styles.title33B16, {color: '#6C69FF'}]}>{point.toString().replace(/\B(?=(\d{3})(?!\d))/g, ',')}P</Text>
+                <Text style={[DesignSystem.title3SB, {color: '#6C69FF'}]}>{point.toString().replace(/\B(?=(\d{3})(?!\d))/g, ',')}P</Text>
                 :
-                <Text style={[styles.title33B16, {color: '#B7B7B7'}]}>{point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P</Text>
+                <Text style={[DesignSystem.title3SB, {color: '#B7B7B7'}]}>{point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P</Text>
                 }
             </View>
 
@@ -39,10 +40,6 @@ export const MyPointList = () => {
 };
 
 const styles = StyleSheet.create({
-  title33B16: {
-    fontSize: 16,
-    fontFamily: 'Pretendard-SemiBold',
-  },
   listWrap: {
     flexDirection: 'row',
   },