Skip to content

Commit 7ee0d12

Browse files
authored
merge: record post form 추가 (#23)
merge: record post form 추가 (#23)
2 parents 24de4f0 + ed869c7 commit 7ee0d12

File tree

12 files changed

+333
-11
lines changed

12 files changed

+333
-11
lines changed

packages/design-system/src/TextField.tsx

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
import { useState } from 'react';
2-
import { TextInput } from 'react-native';
2+
import { Platform, TextInput } from 'react-native';
33

44
interface TextField {
55
value: string;
66
onChange: (value: string) => void;
77
onSubmit?: () => void;
88
placeholder: string;
9+
multiline?: boolean;
910
isCorrect?: boolean;
11+
numberOfLines?: number;
1012
}
1113

12-
export function TextField({ value, onChange, placeholder, onSubmit, isCorrect }: TextField) {
14+
export function TextField({
15+
value,
16+
onChange,
17+
placeholder,
18+
onSubmit,
19+
isCorrect,
20+
multiline,
21+
numberOfLines,
22+
}: TextField) {
1323
const defaultClassName =
1424
'text-SPOT-black text-body2 rounded-md p-4 bg-SPOT-white/60 border-[2px] border-bg-SPOT-white/60';
1525
const incorrectClassName = 'border-SPOT-red border-[2px]';
@@ -22,15 +32,23 @@ export function TextField({ value, onChange, placeholder, onSubmit, isCorrect }:
2232

2333
return 'border-none';
2434
};
25-
35+
console.log(numberOfLines, Platform.OS);
2636
return (
2737
<TextInput
38+
multiline={multiline}
2839
value={value}
2940
onChangeText={onChange}
3041
placeholder={placeholder}
31-
placeholderTextColor='#ffffff'
42+
placeholderTextColor="#ffffff"
3243
className={`${defaultClassName} ${getBorderClassName()}`}
3344
onSubmitEditing={onSubmit}
45+
numberOfLines={Platform.OS === 'ios' ? undefined : numberOfLines}
46+
style={{
47+
minHeight:
48+
Platform.OS === 'ios' && numberOfLines && numberOfLines
49+
? 30 * numberOfLines
50+
: undefined,
51+
}}
3452
/>
3553
);
3654
}

packages/react-native/ios/Podfile.lock

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -958,6 +958,8 @@ PODS:
958958
- ReactCommon/turbomodule/bridging
959959
- ReactCommon/turbomodule/core
960960
- Yoga
961+
- react-native-date-picker (5.0.4):
962+
- React-Core
961963
- react-native-image-picker (7.1.2):
962964
- DoubleConversion
963965
- glog
@@ -1347,6 +1349,7 @@ DEPENDENCIES:
13471349
- React-logger (from `../../../node_modules/react-native/ReactCommon/logger`)
13481350
- React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`)
13491351
- "react-native-cameraroll (from `../../../node_modules/@react-native-camera-roll/camera-roll`)"
1352+
- react-native-date-picker (from `../../../node_modules/react-native-date-picker`)
13501353
- react-native-image-picker (from `../../../node_modules/react-native-image-picker`)
13511354
- react-native-pager-view (from `../../../node_modules/react-native-pager-view`)
13521355
- react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
@@ -1453,6 +1456,8 @@ EXTERNAL SOURCES:
14531456
:path: "../../../node_modules/react-native/ReactCommon"
14541457
react-native-cameraroll:
14551458
:path: "../../../node_modules/@react-native-camera-roll/camera-roll"
1459+
react-native-date-picker:
1460+
:path: "../../../node_modules/react-native-date-picker"
14561461
react-native-image-picker:
14571462
:path: "../../../node_modules/react-native-image-picker"
14581463
react-native-pager-view:
@@ -1557,6 +1562,7 @@ SPEC CHECKSUMS:
15571562
React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304
15581563
React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
15591564
react-native-cameraroll: a9138c165c9975da773d26945591d313992c799b
1565+
react-native-date-picker: 6891317e850deae5b53d51355226e07a495aba61
15601566
react-native-image-picker: c3afe5472ef870d98a4b28415fc0b928161ee5f7
15611567
react-native-pager-view: f848f89049a8e888d38f10ff31588eb63292a95f
15621568
react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371

packages/react-native/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"nativewind": "^2.0.11",
3232
"react": "18.2.0",
3333
"react-native": "0.74.3",
34+
"react-native-date-picker": "^5.0.4",
3435
"react-native-gesture-handler": "^2.17.1",
3536
"react-native-image-picker": "^7.1.2",
3637
"react-native-linear-gradient": "^2.8.3",
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useMutation } from '@tanstack/react-query';
2+
3+
interface PostRecordRequest {
4+
record: {
5+
name: string;
6+
description: string;
7+
region: string;
8+
};
9+
images: string[];
10+
}
11+
12+
export default function usePostRecordMutation() {
13+
return useMutation({
14+
mutationFn: async (requestParams: PostRecordRequest) => {
15+
return requestParams;
16+
},
17+
});
18+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Path, Svg, SvgProps } from 'react-native-svg';
2+
3+
export default function ({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '18'}
7+
height={height || '20'}
8+
viewBox="0 0 18 20"
9+
fill="none"
10+
>
11+
<Path
12+
d="M5 12C4.72 12 4.48 11.9 4.29 11.71C4.1 11.52 4 11.28 4 11C4 10.72 4.1 10.48 4.29 10.29C4.48 10.1 4.72 10 5 10C5.28 10 5.52 10.1 5.71 10.29C5.9 10.48 6 10.72 6 11C6 11.28 5.9 11.52 5.71 11.71C5.52 11.9 5.28 12 5 12ZM9 12C8.72 12 8.48 11.9 8.29 11.71C8.1 11.52 8 11.28 8 11C8 10.72 8.1 10.48 8.29 10.29C8.48 10.1 8.72 10 9 10C9.28 10 9.52 10.1 9.71 10.29C9.9 10.48 10 10.72 10 11C10 11.28 9.9 11.52 9.71 11.71C9.52 11.9 9.28 12 9 12ZM13 12C12.72 12 12.48 11.9 12.29 11.71C12.1 11.52 12 11.28 12 11C12 10.72 12.1 10.48 12.29 10.29C12.48 10.1 12.72 10 13 10C13.28 10 13.52 10.1 13.71 10.29C13.9 10.48 14 10.72 14 11C14 11.28 13.9 11.52 13.71 11.71C13.52 11.9 13.28 12 13 12ZM2 20C1.45 20 0.98 19.8 0.59 19.41C0.2 19.02 0 18.55 0 18V4C0 3.45 0.2 2.98 0.59 2.59C0.98 2.2 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.02 2.2 17.41 2.59C17.8 2.98 18 3.45 18 4V18C18 18.55 17.8 19.02 17.41 19.41C17.02 19.8 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6Z"
13+
fill={color || 'white'}
14+
/>
15+
</Svg>
16+
);
17+
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Path, Svg } from 'react-native-svg';
2+
3+
export default function PlusIcon() {
4+
return (
5+
<Svg width="23" height="23" viewBox="0 0 23 23" fill="none">
6+
<Path
7+
opacity="0.7"
8+
fill-rule="evenodd"
9+
clip-rule="evenodd"
10+
d="M13 1.5C13 0.671573 12.3284 0 11.5 0C10.6716 0 10 0.671573 10 1.5V9.89655H1.5C0.671573 9.89655 0 10.5681 0 11.3965C0 12.225 0.671573 12.8965 1.5 12.8965H10V21.5C10 22.3284 10.6716 23 11.5 23C12.3284 23 13 22.3284 13 21.5V12.8965H21.5C22.3284 12.8965 23 12.225 23 11.3965C23 10.5681 22.3284 9.89655 21.5 9.89655H13V1.5Z"
11+
fill="white"
12+
/>
13+
</Svg>
14+
);
15+
}
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { useState } from 'react';
2+
import { TouchableOpacity, View } from 'react-native';
3+
import DatePicker from 'react-native-date-picker';
4+
import { Font } from 'design-system';
5+
6+
const getDisplayDate = (displayDate: Date) => {
7+
return `${displayDate.getFullYear()}-${displayDate.getMonth() + 1}-${displayDate.getDate()}`;
8+
};
9+
10+
export default function DatePickers() {
11+
const [date, setDate] = useState({
12+
start: new Date(),
13+
end: new Date(),
14+
});
15+
16+
const [selectionMode, setSelectionMode] = useState<'start' | 'end'>();
17+
18+
const [open, setOpen] = useState(false);
19+
return (
20+
<>
21+
<View className="justify-evenly flex-row flex-1">
22+
<View>
23+
<Font color="black" type="ui-text">
24+
From
25+
</Font>
26+
<TouchableOpacity
27+
onPress={() => {
28+
setOpen(true);
29+
setSelectionMode('start');
30+
}}
31+
>
32+
<Font color="black" type="body1">
33+
{getDisplayDate(date.start)}
34+
</Font>
35+
</TouchableOpacity>
36+
</View>
37+
<View>
38+
<Font color="black" type="ui-text">
39+
To
40+
</Font>
41+
<TouchableOpacity
42+
onPress={() => {
43+
setOpen(true);
44+
setSelectionMode('end');
45+
}}
46+
>
47+
<Font color="black" type="body1">
48+
{getDisplayDate(date.end)}
49+
</Font>
50+
</TouchableOpacity>
51+
</View>
52+
</View>
53+
{selectionMode && (
54+
<DatePicker
55+
modal
56+
open={open}
57+
date={date[selectionMode]}
58+
mode="date"
59+
onConfirm={(selectedDate) => {
60+
setOpen(false);
61+
setDate((prev) => ({
62+
...prev,
63+
[selectionMode]: selectedDate,
64+
}));
65+
}}
66+
onCancel={() => {
67+
setOpen(false);
68+
}}
69+
/>
70+
)}
71+
</>
72+
);
73+
}

packages/react-native/src/hooks/useGallery.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,24 @@ export default function useGallery() {
5757
return CameraRoll.saveAsset(uri);
5858
};
5959

60-
const getPhoto = async () => {
60+
const getPhoto = async (selectionLimit?: number) => {
6161
const hasPermission = await hasGalleryPermission();
6262
if (!hasPermission) return Promise.reject();
6363

6464
const response = await launchImageLibrary({
6565
mediaType: 'photo',
66-
selectionLimit: 1,
66+
selectionLimit: selectionLimit || 1,
6767
});
6868

6969
if (response.didCancel) return null;
7070

71-
return response.assets?.[0]?.uri;
71+
if (!response.assets) return null;
72+
73+
if (!selectionLimit) return response.assets[0]?.uri;
74+
75+
return response.assets
76+
.map((asset) => asset.uri)
77+
.filter((url) => url !== undefined);
7278
};
7379

7480
return { savePhoto, getPhoto };

0 commit comments

Comments
 (0)