My laundry/layout

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 => (
-      <Icon
-        name="setting"
-        size={20}
-        color="#000"
-        onPress={() => navigation.navigate('Setting')}
-      />
-    ),
-  },
-  Scan: {
-    title: '',
-    left: () => null,
-    right: navigation => (
-      <Icon
-        name="close"
-        size={24}
-        color="#000"
-        onPress={() => navigation.navigate('Home')}
-      />
-    ),
-  },
-  My: {
-    title: '마이페이지',
-    left: () => null,
-    right: navigation => (
-      <Icon
-        name="setting"
-        size={20}
-        color="#000"
-        onPress={() => navigation.navigate('Setting')}
-      />
-    ),
-  },
-  Setting: {
-    title: '설정',
-    left: navigation => (
-      <Icon
-        name="left"
-        size={20}
-        color="#000"
-        onPress={() => 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,
           })}
         />
+        <MypageStack.Screen
+          name="MyLaundry"
+          component={MyLaundry}
+          options={({ navigation, route }) => ({
+            ...extendHeaderOptions({ navigation, route }),
+            headerTransparent: true,
+          })}
+        />
         <MypageStack.Screen
           name="Setting"
           component={Setting}

src/components/My/Laundry/index.tsx → src/components/My/Laundries/index.tsx

@@ -1,12 +1,25 @@
 import { AspectRatio, Badge, Box, Center, FlatList, Image } from 'native-base';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useCallback } 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';
+import { useNavigation } from '@react-navigation/native';
+import {
+  MyLaundryTabScreensProp,
+  MyPageScreenNavigationProp,
+  MypageTabScreensProp,
+} from '~/types/navigation';
 
-const dummyMyLaundry = [
+type dummyMyLaundriesProps = {
+  id: number;
+  tag: string;
+  title: string;
+  date: string;
+};
+
+export const dummyMyLaundries: dummyMyLaundriesProps[] = [
   {
     id: 1,
     tag: '티셔츠',
@@ -33,15 +46,27 @@ const dummyMyLaundry = [
   },
 ];
 
-const Laundry = (): ReactElement => {
+const tag = '[My/Laundries]';
+
+const Laundries = (): ReactElement => {
+  const navigation = useNavigation<MyPageScreenNavigationProp['navigation']>();
+
+  const naviageToMyLaundry = useCallback(
+    (id: number): void => {
+      console.log(tag, 'naviageToMyLaundry');
+      navigation.navigate('MyLaundry', { id });
+    },
+    [navigation],
+  );
+
   const renderItem = ({
     item,
     index,
   }: {
     item: any;
     index: number;
   }): ReactElement => (
-    <TouchableOpacity>
+    <TouchableOpacity onPress={() => naviageToMyLaundry(item.id)}>
       <AspectRatio
         width={Dimensions.get('window').width / 2}
         borderWidth={1}
@@ -92,9 +117,9 @@ const Laundry = (): ReactElement => {
     </TouchableOpacity>
   );
 
-  return dummyMyLaundry.length ? (
+  return dummyMyLaundries.length ? (
     <FlatList
-      data={dummyMyLaundry}
+      data={dummyMyLaundries}
       pagingEnabled={true}
       numColumns={2}
       keyExtractor={item => item.id.toString()}
@@ -110,4 +135,4 @@ const Laundry = (): ReactElement => {
   );
 };
 
-export default Laundry;
+export default Laundries;

src/components/My/Tip/index.tsx → src/components/My/Tips/index.tsx

@@ -3,12 +3,12 @@ import React, { ReactElement } from 'react';
 import { Text } from 'react-native';
 import s from './styles';
 
-const Tip = (): ReactElement => {
+const Tips = (): ReactElement => {
   return (
     <HStack style={s.container}>
       <Text>Tip</Text>
     </HStack>
   );
 };
 
-export default Tip;
+export default Tips;

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: () => <MyLaundry />,
-  second: () => <MyTip />,
+  first: () => <MyLaundries />,
+  second: () => <MyTips />,
 };
 
 const My = ({

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 (
+    <GradientWrapper
+      angle={360}
+      colors={[
+        'rgba(55, 130, 255, 1) 60%',
+        'rgba(105, 178, 255, 1) 100%',
+        'rgba(224, 242, 254, 1) 100%',
+      ]}
+    >
+      <StatusBar translucent backgroundColor={'transparent'} />
+      <Center flex={1}>
+        <Subhead1 style={s.userName}>{dummyMyLaundries[id - 1].title}</Subhead1>
+      </Center>
+    </GradientWrapper>
+  );
+};
+
+export default MyLaundry;

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;

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'

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 => (
+      <Icon
+        name="setting"
+        size={20}
+        color="#000"
+        onPress={() => navigation.navigate('Setting')}
+      />
+    ),
+  },
+  Scan: {
+    title: '',
+    left: () => null,
+    right: navigation => (
+      <Icon
+        name="close"
+        size={24}
+        color="#000"
+        onPress={() => navigation.navigate('Home')}
+      />
+    ),
+  },
+  My: {
+    title: '마이페이지',
+    left: () => null,
+    right: navigation => (
+      <Icon
+        name="setting"
+        size={20}
+        color="#000"
+        onPress={() => navigation.navigate('Setting')}
+      />
+    ),
+  },
+  MyLaundry: {
+    title: '내 세탁',
+    left: navigation => (
+      <Icon
+        name="left"
+        size={20}
+        color="#000"
+        onPress={() => navigation.goBack()}
+      />
+    ),
+    right: navigation => (
+      <Icon
+        name="setting"
+        size={20}
+        color="#000"
+        onPress={() => navigation.navigate('Setting')}
+      />
+    ),
+  },
+  Setting: {
+    title: '설정',
+    left: navigation => (
+      <Icon
+        name="left"
+        size={20}
+        color="#000"
+        onPress={() => navigation.goBack()}
+      />
+    ),
+    right: () => null,
+  },
+};
+
+export default buildHeader;