Skip to content

Commit 02c239f

Browse files
d0422d0422
authored
merge: nickname 입력 뷰 및 Signup 라우팅 구성 (#4)
merge: nickname 입력 뷰 및 Signup 라우팅 구성 (#4)
2 parents 64a0c61 + 9c2a1d5 commit 02c239f

File tree

12 files changed

+205
-16
lines changed

12 files changed

+205
-16
lines changed

‎packages/design-system/src/Font.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const COLOR_PREFIX = {
1616
const FONT_TYPE_PREFIX = {
1717
body1: 'text-[16px] leading-[24px]',
1818
title1: 'text-[22px] leading-[30px]',
19+
mainTitle: 'text-[26px] leading-[30px]',
20+
body2: 'text-[14px] leading-[18px]',
1921
};
2022

2123
export type Color = keyof typeof COLOR_PREFIX;

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ClipPath, Defs, G, Path, Rect, Svg, SvgProps } from 'react-native-svg';
2+
3+
export default function BackIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '12'}
7+
height={height || '21'}
8+
viewBox="0 0 12 21"
9+
fill="none"
10+
>
11+
<G clip-path="url(#clip0_189_922)">
12+
<Path
13+
d="M10.1868 20.3735L0 10.1868L10.1868 0L12 1.81324L3.6163 10.1868L12 18.5705L10.1868 20.3837V20.3735Z"
14+
fill={color || 'white'}
15+
/>
16+
</G>
17+
<Defs>
18+
<ClipPath id="clip0_189_922">
19+
<Rect width={width || '12'} height="20.3735" fill={'white'} />
20+
</ClipPath>
21+
</Defs>
22+
</Svg>
23+
);
24+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Svg, Path, SvgProps } from 'react-native-svg';
2+
3+
export default function CancelIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '18'}
7+
height={height || '18'}
8+
viewBox="0 0 18 18"
9+
fill="none"
10+
>
11+
<Path
12+
d="M1.8 18L0 16.2L7.2 9L0 1.8L1.8 0L9 7.2L16.2 0L18 1.8L10.8 9L18 16.2L16.2 18L9 10.8L1.8 18Z"
13+
fill={color || '#E8EAED'}
14+
/>
15+
</Svg>
16+
);
17+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Back from '@/assets/BackIcon';
2+
import Cancel from '@/assets/CancelIcon';
3+
import { View } from 'react-native';
4+
import { TouchableOpacity } from 'react-native-gesture-handler';
5+
6+
interface HeaderProps {
7+
onBack: () => void;
8+
onCancel: () => void;
9+
}
10+
11+
export default function Header({ onBack, onCancel }: HeaderProps) {
12+
return (
13+
<View className="w-full flex-row justify-between">
14+
<TouchableOpacity onPress={onBack}>
15+
<Back />
16+
</TouchableOpacity>
17+
<TouchableOpacity onPress={onCancel}>
18+
<Cancel />
19+
</TouchableOpacity>
20+
</View>
21+
);
22+
}

‎packages/react-native/src/components/signup/Overlay.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ReactNode } from 'react';
2+
import LinearGradient from 'react-native-linear-gradient';
3+
import { SafeAreaView } from 'react-native-safe-area-context';
4+
5+
export default function Overlay({ children }: { children: ReactNode }) {
6+
return (
7+
<LinearGradient
8+
colors={['#FF1919', '#000000']}
9+
start={{ x: 0, y: -0.6 }}
10+
end={{ x: 0, y: 0.3 }}
11+
>
12+
<SafeAreaView className="w-full h-full items-center p-4 flex">
13+
{children}
14+
</SafeAreaView>
15+
</LinearGradient>
16+
);
17+
}

‎packages/react-native/src/pages/Login/Login.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import { SafeAreaView, View } from 'react-native';
22
import LinearGradient from 'react-native-linear-gradient';
33
import SPOTLogo from '@assets/SPOTLogo';
4-
import { LoginScreenProps } from '@routes/StackNavigator';
4+
import { RootStackNavigation } from '@routes/StackNavigator';
55
import { SocialLogin } from 'design-system';
66

7-
export default function Login({ navigation }: LoginScreenProps) {
7+
interface LoginPageProps {
8+
navigation: RootStackNavigation<'Login'>;
9+
}
10+
11+
export default function Login({ navigation }: LoginPageProps) {
812
return (
913
<LinearGradient
1014
colors={['#FF1919', '#000000']}
@@ -15,10 +19,10 @@ export default function Login({ navigation }: LoginScreenProps) {
1519
<SPOTLogo />
1620
<View className="flex flex-col w-full px-4 gap-4">
1721
<View>
18-
<SocialLogin.Apple onPress={() => navigation.navigate('Landing')} />
22+
<SocialLogin.Apple onPress={() => navigation.navigate('Signup')} />
1923
</View>
2024
<View>
21-
<SocialLogin.Kakao onPress={() => navigation.navigate('Landing')} />
25+
<SocialLogin.Kakao onPress={() => navigation.navigate('Signup')} />
2226
</View>
2327
</View>
2428
</SafeAreaView>

‎packages/react-native/src/pages/Login/Nickname.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Header from '@/components/signup/Header';
2+
import Overlay from '@/components/signup/Overlay';
3+
import { SignupStackNavigation } from '@/routes/SignupStackNavigator';
4+
import { Font } from 'design-system';
5+
import { useState } from 'react';
6+
import { TextInput, View } from 'react-native';
7+
8+
interface NicknameProps {
9+
navigation: SignupStackNavigation<'Signup/Nickname'>;
10+
}
11+
12+
export default function Niakname({ navigation }: NicknameProps) {
13+
const [nickname, setNickname] = useState('');
14+
15+
return (
16+
<Overlay>
17+
<Header
18+
onBack={() => navigation.goBack()}
19+
onCancel={() => navigation.goBack()}
20+
/>
21+
<View className="flex w-full mt-[30px]">
22+
<Font type="mainTitle" color="white">
23+
사용할 닉네임을
24+
</Font>
25+
<Font type="mainTitle" color="white">
26+
입력하세요
27+
</Font>
28+
</View>
29+
<View className="w-full mt-[30px] flex ">
30+
<Font type="body2" color="white">
31+
닉네임
32+
</Font>
33+
<TextInput
34+
value={nickname}
35+
onChangeText={(nickname) => setNickname(nickname)}
36+
placeholder="닉네임"
37+
placeholderTextColor="#ffffff"
38+
className="text-SPOT-white text-body2 rounded-md p-4 placeholder-SPOT-white bg-SPOT-white/60 mt-[8px]"
39+
onSubmitEditing={() => {
40+
navigation.navigate('Signup/Profile', {
41+
nickname,
42+
});
43+
}}
44+
/>
45+
</View>
46+
</Overlay>
47+
);
48+
}

‎packages/react-native/src/pages/Login/Profile.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Header from '@/components/signup/Header';
2+
import Overlay from '@/components/signup/Overlay';
3+
import { SignupStackNavigation } from '@/routes/SignupStackNavigator';
4+
import { Font } from 'design-system';
5+
import { View } from 'react-native';
6+
7+
interface ProfileProps {
8+
navigation: SignupStackNavigation<'Signup/Profile'>;
9+
}
10+
11+
export default function Profile({ navigation }: ProfileProps) {
12+
return (
13+
<Overlay>
14+
<Header
15+
onBack={() => navigation.goBack()}
16+
onCancel={() => navigation.goBack()}
17+
/>
18+
<View className="flex w-full mt-[30px]">
19+
<Font type="mainTitle" color="white">
20+
사용할 프로필 사진을
21+
</Font>
22+
<Font type="mainTitle" color="white">
23+
설정하세요
24+
</Font>
25+
</View>
26+
</Overlay>
27+
);
28+
}

‎packages/react-native/src/pages/Login/Signup.tsx

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/react-native/src/routes/SignupStackNavigator.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Niakname from '@/pages/Login/Nickname';
2+
import Profile from '@/pages/Login/Profile';
3+
import {
4+
createStackNavigator,
5+
StackNavigationProp,
6+
} from '@react-navigation/stack';
7+
8+
const Stack = createStackNavigator();
9+
10+
type SignupStackParamList = {
11+
'Signup/Nickname': undefined;
12+
'Signup/Profile': {
13+
nickname: string;
14+
};
15+
};
16+
17+
export type SignupStackNavigation<T extends keyof SignupStackParamList> =
18+
StackNavigationProp<SignupStackParamList, T>;
19+
20+
export default function SignupStackNavigator() {
21+
return (
22+
<Stack.Navigator
23+
screenOptions={{
24+
headerShown: false,
25+
}}
26+
>
27+
<Stack.Screen name="Signup/Nickname" component={Niakname} />
28+
<Stack.Screen name="Signup/Profile" component={Profile} />
29+
</Stack.Navigator>
30+
);
31+
}

0 commit comments

Comments
 (0)