#14 feat : temporary storage (#33)

sdp-tech · Feb 7, 2024 · 79f881e · 79f881e
1 parent a8ca31d
commit 79f881e
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 6 deletions.
diff --git a/src/common/BottomButton.tsx b/src/common/BottomButton.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styled from 'styled-components/native';
-import { Body16M } from '../styles/GlobalText';
+import { Body16B, Body16M } from '../styles/GlobalText';
 import { PURPLE, GREEN, PURPLE2 } from '../styles/GlobalColor';
 
 interface BottomButtonProps {
@@ -13,7 +13,7 @@ interface BottomButtonProps {
 const BottomButton = ({ value, pressed, onPress }: BottomButtonProps) => {
   return (
     <ButtonContainer pressed={pressed} onPress={onPress}>
-      <Body16M style={{color: pressed ? PURPLE2 : PURPLE }}>{value}</Body16M>
+      <Body16B style={{color: pressed ? PURPLE2 : PURPLE }}>{value}</Body16B>
     </ButtonContainer>
   )
 }

diff --git a/src/components/Home/Market/ServiceRegistration.tsx b/src/components/Home/Market/ServiceRegistration.tsx
@@ -11,13 +11,12 @@ import { useState } from "react";
 import Filter from "../../../common/Filter";
 import Hashtag from "../../../common/Hashtag";
 import Photo from "../../../assets/common/Photo.svg"
+import TempStorage from "./TempStorage";
 
 const statusBarHeight = getStatusBarHeight(true);
 
 const BackButton = styled.TouchableOpacity`
   padding: 10px;
-  position: absolute;
-  left: 0px;
   top: ${statusBarHeight-10}px;
   z-index: 1;
 `
@@ -169,11 +168,16 @@ const RegistrationPage = ({ navigation, route }: StackScreenProps<HomeStackParam
   } ]
   return (
     <ScrollView>
-      <View style={{marginTop:30, borderBottomWidth:1, borderBlockColor:"#000", padding:5}}>
+      <View style={{flexDirection:"row", marginTop:20, borderBottomWidth:1, borderBlockColor:"#000", padding:5, justifyContent:"space-between"}}>
         <BackButton onPress={() => navigation.goBack()}>
           <Arrow color='black' />
         </BackButton>
-        <Body16B style={{fontSize:18,textAlign:"center"}}>서비스 등록</Body16B>
+        <View>
+          <Body16B style={{fontSize:18,textAlign:"center"}}>서비스 등록</Body16B>
+        </View>
+        <TouchableOpacity onPress={() => {navigation.navigate("TempStorage")}}>
+          <Body14M style={{color:"#929292"}}>임시저장 | 5</Body14M>
+        </TouchableOpacity>
       </View>
       {/* 사진 업로드하는 컴포넌트 만들 것 */}
       <UploadSection style={{borderBottomWidth:5, borderBottomColor: "#dcdcdc"}}>

diff --git a/src/components/Home/Market/TempStorage.tsx b/src/components/Home/Market/TempStorage.tsx
@@ -0,0 +1,80 @@
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
+import Arrow from '../../../assets/common/Arrow.svg';
+import styled from "styled-components/native";
+import { getStatusBarHeight } from "react-native-safearea-height";
+import { Body14B, Body14M, Body16B } from "../../../styles/GlobalText";
+import { StackScreenProps } from "@react-navigation/stack";
+import { useState } from "react";
+import BottomButton from "../../../common/BottomButton";
+
+const statusBarHeight = getStatusBarHeight(true);
+
+const BackButton = styled.TouchableOpacity`
+  padding: 10px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+const TempView = styled.TouchableOpacity`
+  padding: 10px;
+`
+
+const TempStorage = ({navigation}: StackScreenProps<any>) => {
+  const [pressed, setPressed] = useState<boolean>(false);
+  const storage = [
+    {
+      name: "서비스 이름 어쩌구1",
+      date: "2024.02.06.00:00"
+    },
+    {
+      name: "서비스 이름 어쩌구2",
+      date: "2024.02.06.00:00"
+    },
+    {
+      name: "서비스 이름 어쩌구3",
+      date: "2024.02.06.00:00"
+    },
+    {
+      name: "서비스 이름 어쩌구4",
+      date: "2024.02.06.00:00"
+    },
+    {
+      name: "서비스 이름 어쩌구5",
+      date: "2024.02.06.00:00"
+    }
+  ];
+
+  return (
+    <ScrollView>
+      <View style={{flexDirection:"row", marginTop:20, borderBottomWidth:1, borderBlockColor:"#dcdcdc", padding:5, justifyContent:"space-between"}}>
+        <BackButton onPress={() => navigation.goBack()}>
+          <Arrow color='black' />
+        </BackButton>
+        <View>
+          <Body16B style={{fontSize:18,textAlign:"center"}}>임시저장</Body16B>
+        </View>
+        <TouchableOpacity onPress={() => {}}>
+          <Body14M style={{color:"#929292"}}>편집</Body14M>
+        </TouchableOpacity>
+      </View>
+      <View>
+        <Body14B style={{padding:10}}>총 {storage.length}개</Body14B>
+        {storage.map((item, idx) => (
+          <TempView style={{borderBottomWidth:1, borderColor:"#dcdcdc"}}key={idx}>
+            <Body16B>{item.name}</Body16B>
+            <Body14M style={{color:"#929292"}}>{item.date}</Body14M>
+          </TempView>
+        ))}
+      </View>
+      <View style={{padding: 50}}>
+        <BottomButton 
+        value={'불러오기'}
+        pressed={pressed}
+        onPress={()=>{}}
+        >
+      </BottomButton>
+      </View>
+    </ScrollView>
+  )
+}
+
+export default TempStorage;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -15,6 +15,7 @@ import MarketTabView from '../components/Home/Market/MarketTabView';
 import DetailPageScreen from '../components/Home/Market/DetailPage';
 import QuotationForm from '../components/Home/Quotation/QuotationForm';
 import RegistrationPage from '../components/Home/Market/ServiceRegistration';
+import TempStorage from '../components/Home/Market/TempStorage';
 
 export type HomeStackParams = {
   Home: undefined;
@@ -24,6 +25,7 @@ export type HomeStackParams = {
   };
   Quotation: undefined;
   RegistrationPage: undefined;
+  TempStorage: undefined;
 };
 
 const HomeStack = createStackNavigator<HomeStackParams>();
@@ -42,6 +44,7 @@ const HomeScreen = ({
       <HomeStack.Screen name='DetailPage' component={DetailPageScreen} />
       <HomeStack.Screen name='Quotation' component={QuotationForm} />
       <HomeStack.Screen name='RegistrationPage' component={RegistrationPage} />
+      <HomeStack.Screen name='TempStorage' component={TempStorage} />
     </HomeStack.Navigator>
   );
 };