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 tag = '[My/Laundries]'; + +const Laundries = (): ReactElement => { + const navigation = useNavigation(); + + const naviageToMyLaundry = useCallback( + (id: number): void => { + console.log(tag, 'naviageToMyLaundry'); + navigation.navigate('MyLaundry', { id }); + }, + [navigation], + ); + const renderItem = ({ item, index, @@ -41,7 +66,7 @@ const Laundry = (): ReactElement => { item: any; index: number; }): ReactElement => ( - + naviageToMyLaundry(item.id)}> { ); - return dummyMyLaundry.length ? ( + return dummyMyLaundries.length ? ( item.id.toString()} @@ -110,4 +135,4 @@ const Laundry = (): ReactElement => { ); }; -export default Laundry; +export default Laundries; diff --git a/src/components/My/Laundry/styles.ts b/src/components/My/Laundries/styles.ts similarity index 100% rename from src/components/My/Laundry/styles.ts rename to src/components/My/Laundries/styles.ts diff --git a/src/components/My/Laundry/types.ts b/src/components/My/Laundries/types.ts similarity index 100% rename from src/components/My/Laundry/types.ts rename to src/components/My/Laundries/types.ts 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/Tip/types.ts b/src/components/My/Tips/types.ts similarity index 100% rename from src/components/My/Tip/types.ts rename to src/components/My/Tips/types.ts 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..d8f95d4 --- /dev/null +++ b/src/pages/MyLaundry/index.tsx @@ -0,0 +1,33 @@ +import { Center } from 'native-base'; +import React, { ReactElement } from 'react'; +import { MyPageScreenNavigationProp } from '~/types/navigation'; +import s from './styles'; +import { StatusBar } from 'react-native'; +import { dummyMyLaundries } from '@components/My/Laundries'; +import { Subhead1 } from '@components/lds/typography'; +import GradientWrapper from '@components/GradientWrapper'; + +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' 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;