From 9b4290f1aaa8cbc0cdde714965be71068cd49d89 Mon Sep 17 00:00:00 2001 From: Santos Date: Thu, 11 Aug 2022 00:01:03 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=EC=84=B8?= =?UTF-8?q?=ED=83=81=20=EA=B2=B0=EA=B3=BC=20layout=20=EA=B5=AC=EC=84=B1?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AppNavigation.tsx | 80 +++------------ src/components/My/Laundries/index.tsx | 138 ++++++++++++++++++++++++++ src/components/My/Laundries/styles.ts | 30 ++++++ src/components/My/Laundries/types.ts | 0 src/pages/My/index.tsx | 15 ++- src/pages/MyLaundry/index.tsx | 48 +++++++++ src/pages/MyLaundry/styles.ts | 17 ++++ src/types/navigation.ts | 9 ++ 8 files changed, 261 insertions(+), 76 deletions(-) create mode 100644 src/components/My/Laundries/index.tsx create mode 100644 src/components/My/Laundries/styles.ts create mode 100644 src/components/My/Laundries/types.ts create mode 100644 src/pages/MyLaundry/index.tsx create mode 100644 src/pages/MyLaundry/styles.ts diff --git a/AppNavigation.tsx b/AppNavigation.tsx index ed6620e..1b3360b 100644 --- a/AppNavigation.tsx +++ b/AppNavigation.tsx @@ -3,75 +3,11 @@ import Home from '@pages/Home'; import Scan from '@pages/Scan'; import My from '@pages/My'; import Setting from '@pages/Setting'; +import MyLaundry from '@pages/MyLaundry'; -import { - MypageStack, - HomeStack, - ScanStack, - Navigation, - Route, -} from '~/types/navigation'; -import Icon from 'react-native-vector-icons/AntDesign'; -import { Subhead1 } from '~/components/lds/typography'; - -type buildHeaderProps = { - [key: string]: { - title: string; - left: (arg: Navigation) => React.ReactNode | null; - right: (arg: Navigation) => React.ReactNode | null; - }; -}; - -const buildHeader: buildHeaderProps = { - Home: { - title: '홈', - left: () => null, - right: navigation => ( - navigation.navigate('Setting')} - /> - ), - }, - Scan: { - title: '', - left: () => null, - right: navigation => ( - navigation.navigate('Home')} - /> - ), - }, - My: { - title: '마이페이지', - left: () => null, - right: navigation => ( - navigation.navigate('Setting')} - /> - ), - }, - Setting: { - title: '설정', - left: navigation => ( - navigation.goBack()} - /> - ), - right: () => null, - }, -}; +import { MypageStack, HomeStack, ScanStack, Route } from '~/types/navigation'; +import { Subhead1 } from '@components/lds/typography'; +import buildHeader from '@utils/buildHeader'; const extendHeaderOptions = ({ navigation, @@ -161,6 +97,14 @@ export const MyScreens = () => { headerTransparent: true, })} /> + ({ + ...extendHeaderOptions({ navigation, route }), + headerTransparent: true, + })} + /> { + const navigation = useNavigation(); + + const naviageToMyLaundry = useCallback( + (id: number): void => { + console.log(tag, 'naviageToMyLaundry'); + navigation.navigate('MyLaundry', { id }); + }, + [navigation], + ); + + const renderItem = ({ + item, + index, + }: { + item: any; + index: number; + }): ReactElement => ( + naviageToMyLaundry(item.id)}> + +
+ + {item.tag} + + + {item.title} + + + {item.date} + + folder +
+ + + ); + + return dummyMyLaundries.length ? ( + item.id.toString()} + renderItem={renderItem} + /> + ) : ( +
+ 마이세탁이 비어있네요! + + 내 세탁물에 맞는 세탁벙법을 찾아보세요. + +
+ ); +}; + +export default Laundries; diff --git a/src/components/My/Laundries/styles.ts b/src/components/My/Laundries/styles.ts new file mode 100644 index 0000000..cf93127 --- /dev/null +++ b/src/components/My/Laundries/styles.ts @@ -0,0 +1,30 @@ +import { StyleProp, ViewStyle, TextStyle } from 'react-native'; +import * as c from '@styles/foundation-color'; + +const container: StyleProp = {}; + +const title: StyleProp = { + color: c.CoolGaryColor['900'], + fontWeight: 'bold', + lineHeight: 20, +}; + +const emptyTitle: StyleProp = { + color: c.CoolGaryColor['500'], + fontWeight: '400', + lineHeight: 22, +}; + +const tag: StyleProp = { + color: c.CoolGaryColor['900'], + fontWeight: '500', + letterSpacing: -0.5, +}; + +const date: StyleProp = { + color: c.CoolGaryColor['600'], + fontWeight: '500', + lineHeight: 16, +}; + +export default { container, title, tag, date, emptyTitle }; diff --git a/src/components/My/Laundries/types.ts b/src/components/My/Laundries/types.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx index b2c6ec4..ac955bc 100644 --- a/src/pages/My/index.tsx +++ b/src/pages/My/index.tsx @@ -1,18 +1,17 @@ import { Box, Center } from 'native-base'; import React, { ReactElement } from 'react'; -import AppLayout from '~/components/AppLayout'; import { MyPageScreenNavigationProp } from '~/types/navigation'; import s from './styles'; import { Dimensions, StatusBar } from 'react-native'; -import CustomeTabView from '~/components/TabView'; -import MyLaundry from '~/components/My/Laundry'; -import MyTip from '~/components/My/Tip'; -import { Subhead1 } from '~/components/lds/typography'; -import GradientWrapper from '~/components/GradientWrapper'; +import CustomeTabView from '@components/TabView'; +import MyLaundries from '@components/My/Laundries'; +import MyTips from '@components/My/Tips'; +import { Subhead1 } from '@components/lds/typography'; +import GradientWrapper from '@components/GradientWrapper'; const renderScene = { - first: () => , - second: () => , + first: () => , + second: () => , }; const My = ({ diff --git a/src/pages/MyLaundry/index.tsx b/src/pages/MyLaundry/index.tsx new file mode 100644 index 0000000..498e689 --- /dev/null +++ b/src/pages/MyLaundry/index.tsx @@ -0,0 +1,48 @@ +import { Box, Center } from 'native-base'; +import React, { ReactElement } from 'react'; +import { MyPageScreenNavigationProp } from '~/types/navigation'; +import s from './styles'; +import { Dimensions, StatusBar } from 'react-native'; +import CustomeTabView from '@components/TabView'; +import MyLaundries, { dummyMyLaundries } from '@components/My/Laundries'; +import MyTips from '@components/My/Tips'; +import { Subhead1 } from '@components/lds/typography'; +import GradientWrapper from '@components/GradientWrapper'; + +const renderScene = { + first: () => , + second: () => , +}; + +const MyLaundry = ({ + navigation, + route, +}: MyPageScreenNavigationProp): ReactElement => { + const { id } = route?.params; + + return ( + + +
+ {dummyMyLaundries[id - 1].title} +
+ {/* + + */} + + ); +}; + +export default MyLaundry; diff --git a/src/pages/MyLaundry/styles.ts b/src/pages/MyLaundry/styles.ts new file mode 100644 index 0000000..31e9ebe --- /dev/null +++ b/src/pages/MyLaundry/styles.ts @@ -0,0 +1,17 @@ +import { StyleSheet } from 'react-native'; +import * as c from '@styles/foundation-color'; + +const style = StyleSheet.create({ + container: { + flex: 1, + padding: 0, + backgroundColor: 'rgba(55, 130, 255, 1) 60%', + }, + userName: { + fontWeight: '700', + lineHeight: 24, + color: c.CoolGaryColor['900'], + }, +}); + +export default style; diff --git a/src/types/navigation.ts b/src/types/navigation.ts index 37fc9cc..dacb3bb 100644 --- a/src/types/navigation.ts +++ b/src/types/navigation.ts @@ -34,6 +34,9 @@ export type ScanStackParamList = SettingStackParamList & { export type MypageStackParamList = SettingStackParamList & { My: undefined; + MyLaundry: { + id: number; + }; }; export type SignInScreenNavigationProp = NativeStackScreenProps< @@ -57,9 +60,15 @@ export type ScanScreenNavigationProp = NativeStackScreenProps< >; export type MyPageScreenNavigationProp = NativeStackScreenProps< + MypageStackParamList, + 'MyLaundry' +>; + +export type MyLaundryScreenNavigationProp = NativeStackScreenProps< MypageStackParamList, 'My' >; + export type SettingScreenNavigationProp = NativeStackScreenProps< SettingStackParamList, 'Setting' From 1fe94e8e227aeda518421f7b39a40d81f9d2b8b3 Mon Sep 17 00:00:00 2001 From: Santos Date: Thu, 11 Aug 2022 00:01:36 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20naming=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/My/Laundry/index.tsx | 113 ------------------- src/components/My/Laundry/styles.ts | 30 ----- src/components/My/Tip/types.ts | 0 src/components/My/{Tip => Tips}/index.tsx | 4 +- src/components/My/{Tip => Tips}/styles.ts | 0 src/components/My/{Laundry => Tips}/types.ts | 0 6 files changed, 2 insertions(+), 145 deletions(-) delete mode 100644 src/components/My/Laundry/index.tsx delete mode 100644 src/components/My/Laundry/styles.ts delete mode 100644 src/components/My/Tip/types.ts rename src/components/My/{Tip => Tips}/index.tsx (80%) rename src/components/My/{Tip => Tips}/styles.ts (100%) rename src/components/My/{Laundry => Tips}/types.ts (100%) diff --git a/src/components/My/Laundry/index.tsx b/src/components/My/Laundry/index.tsx deleted file mode 100644 index a375590..0000000 --- a/src/components/My/Laundry/index.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { AspectRatio, Badge, Box, Center, FlatList, Image } from 'native-base'; -import React, { ReactElement } from 'react'; -import { Dimensions, TouchableOpacity } from 'react-native'; -import s from './styles'; -import * as c from '@styles/foundation-color'; -import Folder from '@assets/images/folder.png'; -import { Body1, Body2, Caption2 } from '@components/lds/typography'; - -const dummyMyLaundry = [ - { - id: 1, - tag: '티셔츠', - title: '내가 제일 아끼는 폴로 럭비티', - date: '2020-01-01', - }, - { - id: 2, - tag: '바지', - title: '캐시미어 니트', - date: '2020-01-01', - }, - { - id: 3, - tag: '청바지', - title: '내가 제일 아끼는 폴로 럭비티', - date: '2020-01-01', - }, - { - id: 4, - tag: '니트', - title: '내가 제일 아끼는 폴로 럭비티', - date: '2020-01-01', - }, -]; - -const Laundry = (): ReactElement => { - const renderItem = ({ - item, - index, - }: { - item: any; - index: number; - }): ReactElement => ( - - -
- - {item.tag} - - - {item.title} - - - {item.date} - - folder -
- - - ); - - return dummyMyLaundry.length ? ( - item.id.toString()} - renderItem={renderItem} - /> - ) : ( -
- 마이세탁이 비어있네요! - - 내 세탁물에 맞는 세탁벙법을 찾아보세요. - -
- ); -}; - -export default Laundry; diff --git a/src/components/My/Laundry/styles.ts b/src/components/My/Laundry/styles.ts deleted file mode 100644 index cf93127..0000000 --- a/src/components/My/Laundry/styles.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { StyleProp, ViewStyle, TextStyle } from 'react-native'; -import * as c from '@styles/foundation-color'; - -const container: StyleProp = {}; - -const title: StyleProp = { - color: c.CoolGaryColor['900'], - fontWeight: 'bold', - lineHeight: 20, -}; - -const emptyTitle: StyleProp = { - color: c.CoolGaryColor['500'], - fontWeight: '400', - lineHeight: 22, -}; - -const tag: StyleProp = { - color: c.CoolGaryColor['900'], - fontWeight: '500', - letterSpacing: -0.5, -}; - -const date: StyleProp = { - color: c.CoolGaryColor['600'], - fontWeight: '500', - lineHeight: 16, -}; - -export default { container, title, tag, date, emptyTitle }; diff --git a/src/components/My/Tip/types.ts b/src/components/My/Tip/types.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/My/Tip/index.tsx b/src/components/My/Tips/index.tsx similarity index 80% rename from src/components/My/Tip/index.tsx rename to src/components/My/Tips/index.tsx index e862a2d..4999d6d 100644 --- a/src/components/My/Tip/index.tsx +++ b/src/components/My/Tips/index.tsx @@ -3,7 +3,7 @@ import React, { ReactElement } from 'react'; import { Text } from 'react-native'; import s from './styles'; -const Tip = (): ReactElement => { +const Tips = (): ReactElement => { return ( Tip @@ -11,4 +11,4 @@ const Tip = (): ReactElement => { ); }; -export default Tip; +export default Tips; diff --git a/src/components/My/Tip/styles.ts b/src/components/My/Tips/styles.ts similarity index 100% rename from src/components/My/Tip/styles.ts rename to src/components/My/Tips/styles.ts diff --git a/src/components/My/Laundry/types.ts b/src/components/My/Tips/types.ts similarity index 100% rename from src/components/My/Laundry/types.ts rename to src/components/My/Tips/types.ts From 13b35521974d253c23d42f33cc017bd1bdea8978 Mon Sep 17 00:00:00 2001 From: Santos Date: Thu, 11 Aug 2022 00:02:14 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20buildHeader=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/buildHeader.tsx | 83 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/utils/buildHeader.tsx diff --git a/src/utils/buildHeader.tsx b/src/utils/buildHeader.tsx new file mode 100644 index 0000000..36850f9 --- /dev/null +++ b/src/utils/buildHeader.tsx @@ -0,0 +1,83 @@ +import * as React from 'react'; +import { Navigation } from '~/types/navigation'; +import Icon from 'react-native-vector-icons/AntDesign'; + +export type buildHeaderProps = { + [key: string]: { + title: string; + left: (arg: Navigation) => React.ReactNode | null; + right: (arg: Navigation) => React.ReactNode | null; + }; +}; + +const buildHeader: buildHeaderProps = { + Home: { + title: '홈', + left: () => null, + right: navigation => ( + navigation.navigate('Setting')} + /> + ), + }, + Scan: { + title: '', + left: () => null, + right: navigation => ( + navigation.navigate('Home')} + /> + ), + }, + My: { + title: '마이페이지', + left: () => null, + right: navigation => ( + navigation.navigate('Setting')} + /> + ), + }, + MyLaundry: { + title: '내 세탁', + left: navigation => ( + navigation.goBack()} + /> + ), + right: navigation => ( + navigation.navigate('Setting')} + /> + ), + }, + Setting: { + title: '설정', + left: navigation => ( + navigation.goBack()} + /> + ), + right: () => null, + }, +}; + +export default buildHeader; From e5eb6182faf939859f2d0900b63b409384d0ccd3 Mon Sep 17 00:00:00 2001 From: Santos Date: Thu, 11 Aug 2022 00:04:15 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=EC=84=B8?= =?UTF-8?q?=ED=83=81=20=EA=B2=B0=EA=B3=BC=20layout=20=EA=B5=AC=EC=84=B1=20?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyLaundry/index.tsx | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/src/pages/MyLaundry/index.tsx b/src/pages/MyLaundry/index.tsx index 498e689..d8f95d4 100644 --- a/src/pages/MyLaundry/index.tsx +++ b/src/pages/MyLaundry/index.tsx @@ -1,19 +1,12 @@ -import { Box, Center } from 'native-base'; +import { Center } from 'native-base'; import React, { ReactElement } from 'react'; import { MyPageScreenNavigationProp } from '~/types/navigation'; import s from './styles'; -import { Dimensions, StatusBar } from 'react-native'; -import CustomeTabView from '@components/TabView'; -import MyLaundries, { dummyMyLaundries } from '@components/My/Laundries'; -import MyTips from '@components/My/Tips'; +import { StatusBar } from 'react-native'; +import { dummyMyLaundries } from '@components/My/Laundries'; import { Subhead1 } from '@components/lds/typography'; import GradientWrapper from '@components/GradientWrapper'; -const renderScene = { - first: () => , - second: () => , -}; - const MyLaundry = ({ navigation, route, @@ -33,14 +26,6 @@ const MyLaundry = ({
{dummyMyLaundries[id - 1].title}
- {/* - - */} ); };