sdp-tech#14 feat : period slider

youngsikkk · Feb 10, 2024 · 6ed54ca · 6ed54ca
1 parent fa05a7e
commit 6ed54ca
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-community/slider": "^4.5.0",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",

diff --git a/src/components/Home/Market/GoodsRegistration.tsx b/src/components/Home/Market/GoodsRegistration.tsx
@@ -12,6 +12,7 @@ import Filter from "../../../common/Filter";
 import Hashtag from "../../../common/Hashtag";
 import Photo from "../../../assets/common/Photo.svg"
 import TempStorage from "./TempStorage";
+import Slider from "@react-native-community/slider";
 
 const statusBarHeight = getStatusBarHeight(true);
 
@@ -147,7 +148,7 @@ const GoodsRegistrationPage = ({ navigation, route }: StackScreenProps<HomeStack
   const category = ["아우터", "상의", "하의", "가방", "모자", "잡화"]
   const fit = ["노멀", "타이트", "오버사이즈", "와이드"]
   const detailStyle = ["지퍼", "단추", "셔링", "포켓", "워싱", "집업", "프릴","보(리본)", "크롭","칼라", "금속", "비즈"]
-  const [makingTime, setMakingTime] = useState<string>("")
+  const [makingTime, setMakingTime] = useState<number>(0);
   const [name, setName] = useState<string>('');
   const [hashTag, setHashTag] = useState<string>('');
   const [price, setPrice] = useState<string>('1000');
@@ -209,16 +210,18 @@ const GoodsRegistrationPage = ({ navigation, route }: StackScreenProps<HomeStack
         <View style={{flexDirection:"row", alignItems:"center"}}>
           <Body16B style={{margin: 10}}>제작기간</Body16B>
           <View style={{margin: 10, flex:1}}>
-            <TextInput
-            style={{
-              flex:1,
-              borderWidth: 1,
-              borderColor: BLACK2,
-              borderRadius: 5,
-              paddingHorizontal: 16,
-              paddingTop: 10
-            }}
-            value={makingTime} onChangeText={setMakingTime} placeholder='제작 기간을 선택하세요'/>
+            <Slider
+              style={{flex:1, height: 40}}
+              value={makingTime}
+              onValueChange={setMakingTime}
+              minimumValue={0}
+              step={1}
+              maximumValue={5}
+              minimumTrackTintColor="#612FEF"
+              maximumTrackTintColor="#612FEF"
+              thumbTintColor="#612FEF"
+            />
+            <Text>{makingTime}</Text>
           </View>
         </View>
         <Body16B style={{margin: 10}}>상품 상세</Body16B>

diff --git a/src/components/Home/Market/ServiceRegistration.tsx b/src/components/Home/Market/ServiceRegistration.tsx
@@ -12,6 +12,7 @@ import Filter from "../../../common/Filter";
 import Hashtag from "../../../common/Hashtag";
 import Photo from "../../../assets/common/Photo.svg"
 import TempStorage from "./TempStorage";
+import Slider from "@react-native-community/slider";
 
 const statusBarHeight = getStatusBarHeight(true);
 
@@ -147,7 +148,7 @@ const ServiceRegistrationPage = ({ navigation, route }: StackScreenProps<HomeSta
   const category = ["아우터", "상의", "하의", "가방", "모자", "잡화"]
   const fit = ["노멀", "타이트", "오버사이즈", "와이드"]
   const detailStyle = ["지퍼", "단추", "셔링", "포켓", "워싱", "집업", "프릴","보(리본)", "크롭","칼라", "금속", "비즈"]
-  const [makingTime, setMakingTime] = useState<string>("")
+  const [makingTime, setMakingTime] = useState<number>(0);
   const [name, setName] = useState<string>('');
   const [hashTag, setHashTag] = useState<string>('');
   const [price, setPrice] = useState<string>('1000');
@@ -207,19 +208,21 @@ const ServiceRegistrationPage = ({ navigation, route }: StackScreenProps<HomeSta
         <FilterSection label='재질' items={materials} />
         <FilterSection label='핏' items={fit} />
         <FilterSection label='디테일' items={detailStyle} />
-        <View style={{flexDirection:"row", alignItems:"center"}}>
+        <View style={{flex:1}}>
           <Body16B style={{margin: 10}}>제작기간</Body16B>
           <View style={{margin: 10, flex:1}}>
-            <TextInput
-            style={{
-              flex:1,
-              borderWidth: 1,
-              borderColor: BLACK2,
-              borderRadius: 5,
-              paddingHorizontal: 16,
-              paddingTop: 10
-            }}
-            value={makingTime} onChangeText={setMakingTime} placeholder='제작 기간을 선택하세요'/>
+            <Slider
+              style={{flex:1, height: 40}}
+              value={makingTime}
+              onValueChange={setMakingTime}
+              minimumValue={0}
+              step={1}
+              maximumValue={5}
+              minimumTrackTintColor="#612FEF"
+              maximumTrackTintColor="#612FEF"
+              thumbTintColor="#612FEF"
+            />
+            <Text>{makingTime}</Text>
           </View>
         </View>
         <Body16B style={{margin: 10}}>서비스 상세</Body16B>

diff --git a/yarn.lock b/yarn.lock
@@ -1735,6 +1735,11 @@
   resolved "https://registry.npmjs.org/@react-native-community/eslint-plugin/-/eslint-plugin-1.3.0.tgz"
   integrity sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==
 
+"@react-native-community/slider@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.5.0.tgz#5c55488ee30060cd87100fb746b9d8655dbab04e"
+  integrity sha512-pyUvNTvu5IfCI5abzqRfO/dd3A009RC66RXZE6t0gyOwI/j0QDlq9VZRv3rjkpuIvNTnsYj+m5BHlh0DkSYUyA==
+
 "@react-native/[email protected]":
   version "0.73.1"
   resolved "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.73.1.tgz"