Skip to content

Commit ff6ef85

Browse files
d0422d0422
authored
�merge: maps 로그 페이지 UI구성 (#15)
�merge: maps 로그 페이지 UI구성 (#15)
2 parents c23d39c + 75be8a1 commit ff6ef85

26 files changed

+488
-49
lines changed

‎packages/react-native/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@
4545
"react-native-vision-camera": "^4.5.0",
4646
"reanimated-color-picker": "^3.0.4",
4747
"tailwind-config": "workspace:*",
48-
"tinycolor2": "^1.6.0"
48+
"tinycolor2": "^1.6.0",
49+
"zustand": "^4.5.5"
4950
},
5051
"devDependencies": {
5152
"@babel/core": "^7.20.0",

‎packages/react-native/src/assets/DotMenuIcon.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Path, Svg, SvgProps } from 'react-native-svg';
2+
3+
export default function DotMenuIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '25'}
7+
height={height || '24'}
8+
viewBox="0 0 25 24"
9+
fill="none"
10+
>
11+
<Path
12+
d="M12.3982 11.6484H13.1013M12.3982 12.3515H13.1013M5.83571 11.6484H6.53883M5.83571 12.3515H6.53883M18.9607 11.6484H19.6638M18.9607 12.3515H19.6638M13.6875 12C13.6875 12.5178 13.2678 12.9375 12.75 12.9375C12.2322 12.9375 11.8125 12.5178 11.8125 12C11.8125 11.4822 12.2322 11.0625 12.75 11.0625C13.2678 11.0625 13.6875 11.4822 13.6875 12ZM7.125 12C7.125 12.5178 6.70527 12.9375 6.1875 12.9375C5.66973 12.9375 5.25 12.5178 5.25 12C5.25 11.4822 5.66973 11.0625 6.1875 11.0625C6.70527 11.0625 7.125 11.4822 7.125 12ZM20.25 12C20.25 12.5178 19.8303 12.9375 19.3125 12.9375C18.7947 12.9375 18.375 12.5178 18.375 12C18.375 11.4822 18.7947 11.0625 19.3125 11.0625C19.8303 11.0625 20.25 11.4822 20.25 12Z"
13+
stroke={color || 'white'}
14+
stroke-width="1.5"
15+
stroke-linecap="round"
16+
/>
17+
</Svg>
18+
);
19+
}

‎packages/react-native/src/assets/PlusButtonIcon.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Circle, Path, Svg, SvgProps } from 'react-native-svg';
2+
3+
export default function PlusButtonIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '56'}
7+
height={height || '56'}
8+
viewBox="0 0 56 56"
9+
fill="none"
10+
>
11+
<Circle opacity="0.2" cx="28" cy="28" r="28" fill={color || '#FF1919'} />
12+
<Path
13+
opacity="0.7"
14+
fill-rule="evenodd"
15+
clip-rule="evenodd"
16+
d="M29.5 18C29.5 17.1716 28.8284 16.5 28 16.5C27.1716 16.5 26.5 17.1716 26.5 18V26.3965H18C17.1716 26.3965 16.5 27.0681 16.5 27.8965C16.5 28.725 17.1716 29.3965 18 29.3965H26.5V38C26.5 38.8284 27.1716 39.5 28 39.5C28.8284 39.5 29.5 38.8284 29.5 38V29.3965H38C38.8284 29.3965 39.5 28.725 39.5 27.8965C39.5 27.0681 38.8284 26.3965 38 26.3965H29.5V18Z"
17+
fill={color || '#FF1919'}
18+
/>
19+
</Svg>
20+
);
21+
}

‎packages/react-native/src/assets/SortIcon.tsx

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 SortIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '18'}
7+
height={height || '12'}
8+
viewBox="0 0 18 12"
9+
fill="none"
10+
>
11+
<Path
12+
d="M7 12V10H11V12H7ZM3 7V5H15V7H3ZM0 2V0H18V2H0Z"
13+
fill={color || '#E8EAED'}
14+
/>
15+
</Svg>
16+
);
17+
}

‎packages/react-native/src/assets/mapData.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1157,7 +1157,7 @@ const mapData = {
11571157
CTPRVN_CD: '42',
11581158
CTP_ENG_NM: 'Gangwon-do',
11591159
CTP_KOR_NM: '강원도',
1160-
},
1160+
} as const,
11611161
},
11621162
{
11631163
type: 'Feature',
@@ -1606,7 +1606,7 @@ const mapData = {
16061606
CTPRVN_CD: '41',
16071607
CTP_ENG_NM: 'Gyeonggi-do',
16081608
CTP_KOR_NM: '경기도',
1609-
},
1609+
} as const,
16101610
},
16111611
{
16121612
type: 'Feature',
@@ -2194,7 +2194,7 @@ const mapData = {
21942194
CTPRVN_CD: '48',
21952195
CTP_ENG_NM: 'Gyeongsangnam-do',
21962196
CTP_KOR_NM: '경상남도',
2197-
},
2197+
} as const,
21982198
},
21992199
{
22002200
type: 'Feature',
@@ -2840,7 +2840,7 @@ const mapData = {
28402840
CTPRVN_CD: '47',
28412841
CTP_ENG_NM: 'Gyeongsangbuk-do',
28422842
CTP_KOR_NM: '경상북도',
2843-
},
2843+
} as const,
28442844
},
28452845
{
28462846
type: 'Feature',
@@ -2968,7 +2968,7 @@ const mapData = {
29682968
CTPRVN_CD: '29',
29692969
CTP_ENG_NM: 'Gwangju',
29702970
CTP_KOR_NM: '광주광역시',
2971-
},
2971+
} as const,
29722972
},
29732973
{
29742974
type: 'Feature',
@@ -3207,7 +3207,7 @@ const mapData = {
32073207
CTPRVN_CD: '27',
32083208
CTP_ENG_NM: 'Daegu',
32093209
CTP_KOR_NM: '대구광역시',
3210-
},
3210+
} as const,
32113211
},
32123212
{
32133213
type: 'Feature',
@@ -3284,7 +3284,7 @@ const mapData = {
32843284
CTPRVN_CD: '30',
32853285
CTP_ENG_NM: 'Daejeon',
32863286
CTP_KOR_NM: '대전광역시',
3287-
},
3287+
} as const,
32883288
},
32893289
{
32903290
type: 'Feature',
@@ -3611,7 +3611,7 @@ const mapData = {
36113611
CTPRVN_CD: '26',
36123612
CTP_ENG_NM: 'Busan',
36133613
CTP_KOR_NM: '부산광역시',
3614-
},
3614+
} as const,
36153615
},
36163616
{
36173617
type: 'Feature',
@@ -3826,7 +3826,7 @@ const mapData = {
38263826
CTPRVN_CD: '11',
38273827
CTP_ENG_NM: 'Seoul',
38283828
CTP_KOR_NM: '서울특별시',
3829-
},
3829+
} as const,
38303830
},
38313831
{
38323832
type: 'Feature',
@@ -4103,7 +4103,7 @@ const mapData = {
41034103
CTPRVN_CD: '36',
41044104
CTP_ENG_NM: 'Sejong-si',
41054105
CTP_KOR_NM: '세종특별자치시',
4106-
},
4106+
} as const,
41074107
},
41084108
{
41094109
type: 'Feature',
@@ -4184,7 +4184,7 @@ const mapData = {
41844184
CTPRVN_CD: '31',
41854185
CTP_ENG_NM: 'Ulsan',
41864186
CTP_KOR_NM: '울산광역시',
4187-
},
4187+
} as const,
41884188
},
41894189
{
41904190
type: 'Feature',
@@ -4315,7 +4315,7 @@ const mapData = {
43154315
CTPRVN_CD: '28',
43164316
CTP_ENG_NM: 'Incheon',
43174317
CTP_KOR_NM: '인천광역시',
4318-
},
4318+
} as const,
43194319
},
43204320
{
43214321
type: 'Feature',
@@ -5774,7 +5774,7 @@ const mapData = {
57745774
CTPRVN_CD: '46',
57755775
CTP_ENG_NM: 'Jellanam-do',
57765776
CTP_KOR_NM: '전라남도',
5777-
},
5777+
} as const,
57785778
},
57795779
{
57805780
type: 'Feature',
@@ -6867,7 +6867,7 @@ const mapData = {
68676867
CTPRVN_CD: '45',
68686868
CTP_ENG_NM: 'Jeollabuk-do',
68696869
CTP_KOR_NM: '전라북도',
6870-
},
6870+
} as const,
68716871
},
68726872
{
68736873
type: 'Feature',
@@ -6919,7 +6919,7 @@ const mapData = {
69196919
CTPRVN_CD: '50',
69206920
CTP_ENG_NM: 'Jeju-do',
69216921
CTP_KOR_NM: '제주특별자치도',
6922-
},
6922+
} as const,
69236923
},
69246924
{
69256925
type: 'Feature',
@@ -7364,7 +7364,7 @@ const mapData = {
73647364
CTPRVN_CD: '44',
73657365
CTP_ENG_NM: 'Chungcheongnam-do',
73667366
CTP_KOR_NM: '충청남도',
7367-
},
7367+
} as const,
73687368
},
73697369
{
73707370
type: 'Feature',
@@ -8697,7 +8697,7 @@ const mapData = {
86978697
CTPRVN_CD: '43',
86988698
CTP_ENG_NM: 'Chungcheongbuk-do',
86998699
CTP_KOR_NM: '충청북도',
8700-
},
8700+
} as const,
87018701
},
87028702
],
87038703
};

‎packages/react-native/src/components/common/Header.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { TouchableOpacity } from 'react-native-gesture-handler';
2+
import React, { ReactElement, useEffect, useMemo } from 'react';
3+
import { View } from 'react-native';
4+
import { AllRouteNavigation } from '@/types/navigation';
5+
import BackIcon from '@/assets/BackIcon';
6+
import { useHeaderState } from '@/stores/header';
7+
import { HEADER_STYLE } from '@/constants/HEADER_STYLE';
8+
9+
interface HeaderProps {
10+
navigation: AllRouteNavigation;
11+
title?: string;
12+
RightActionButton?: ReactElement;
13+
onBack?: () => void;
14+
}
15+
16+
export default function Header({
17+
title,
18+
navigation,
19+
RightActionButton,
20+
onBack,
21+
}: HeaderProps) {
22+
const { showHeader } = useHeaderState();
23+
24+
const Right = useMemo(
25+
() => <View className="px-4">{RightActionButton}</View>,
26+
[RightActionButton],
27+
);
28+
29+
const Left = useMemo(
30+
() => (
31+
<TouchableOpacity
32+
onPress={onBack ? () => onBack() : () => navigation.goBack()}
33+
className="px-4"
34+
>
35+
<BackIcon />
36+
</TouchableOpacity>
37+
),
38+
[onBack],
39+
);
40+
41+
useEffect(() => {
42+
if (!navigation) {
43+
return;
44+
}
45+
46+
showHeader();
47+
48+
navigation.setOptions({
49+
...HEADER_STYLE,
50+
headerShown: true,
51+
headerRight: () => Right,
52+
headerLeft: () => Left,
53+
title: title || '',
54+
});
55+
}, [title, RightActionButton, onBack]);
56+
57+
return null;
58+
}

‎packages/react-native/src/components/maps/FloatingPlusButton.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { View } from 'react-native';
2+
import { TouchableOpacity } from 'react-native-gesture-handler';
3+
import PlusButtonIcon from '@/assets/PlusButtonIcon';
4+
5+
interface FloatingPlusButtonProps {
6+
onPress: () => void;
7+
top?: number;
8+
bottom?: number;
9+
right?: number;
10+
left?: number;
11+
}
12+
13+
export default function FloatingPlusButton({
14+
onPress,
15+
top,
16+
bottom,
17+
right,
18+
left,
19+
}: FloatingPlusButtonProps) {
20+
return (
21+
<View
22+
style={{
23+
position: 'absolute',
24+
top,
25+
bottom,
26+
right,
27+
left,
28+
}}
29+
>
30+
<TouchableOpacity onPress={onPress}>
31+
<PlusButtonIcon />
32+
</TouchableOpacity>
33+
</View>
34+
);
35+
}

‎packages/react-native/src/components/maps/LogCard.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Dimensions, ImageBackground, View } from 'react-native';
2+
import { Font } from 'design-system';
3+
import DotMenuIcon from '@/assets/DotMenuIcon';
4+
5+
interface CardProps {
6+
title: string;
7+
location: string;
8+
date: string;
9+
backgroundImage: string;
10+
}
11+
12+
const { width } = Dimensions.get('window');
13+
export const LOG_PADDING_X = 16;
14+
export const CARD_GAP = 8;
15+
16+
export default function LogCard({
17+
title,
18+
location,
19+
date,
20+
backgroundImage,
21+
}: CardProps) {
22+
return (
23+
<ImageBackground
24+
source={{ uri: backgroundImage }}
25+
className="h-[240px] rounded-lg overflow-hidden"
26+
style={{
27+
width: (width - 2 * LOG_PADDING_X - CARD_GAP) / 2,
28+
height: 240,
29+
}}
30+
>
31+
<View className="flex-1 justify-between px-3 py-1.5 bg-black/20">
32+
<View className="flex items-end w-full">
33+
<DotMenuIcon />
34+
</View>
35+
<View className="p-2.5 gap-2">
36+
<Font.Bold type="body1" color="white">
37+
{title}
38+
</Font.Bold>
39+
<Font.Light type="body1" color="white">
40+
{location}
41+
</Font.Light>
42+
<Font.Light type="body1" color="white">
43+
{date}
44+
</Font.Light>
45+
</View>
46+
</View>
47+
</ImageBackground>
48+
);
49+
}

0 commit comments

Comments
 (0)