Skip to content

Commit 64a0c61

Browse files
d0422d0422
authored
merge: Login View 및 Stack Navigator 구성 (#3)
merge: Login View 및 Stack Navigator 구성 (#3)
2 parents f71e062 + 3264af2 commit 64a0c61

31 files changed

+543
-34
lines changed

‎.yarn/install-state.gz

4.44 KB
Binary file not shown.

‎packages/design-system/.storybook/preview.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const preview: Preview = {
1010
},
1111
},
1212
backgrounds: {
13-
default: 'gray',
13+
default: 'black',
1414
values: [
1515
{
1616
name: 'gray',

‎packages/design-system/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './src/Button';
22
export * from './src/Font';
3+
export { SocialLogin } from './src/SocialLogin';

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const FONT_TYPE_PREFIX = {
1818
title1: 'text-[22px] leading-[30px]',
1919
};
2020

21-
type Color = keyof typeof COLOR_PREFIX;
21+
export type Color = keyof typeof COLOR_PREFIX;
2222
type FontType = keyof typeof FONT_TYPE_PREFIX;
2323

2424
interface FontProps {
@@ -31,22 +31,28 @@ const FontRegular = ({ type, color, children }: FontProps) => {
3131
const fontType = FONT_TYPE_PREFIX[type];
3232
const colorStyle = COLOR_PREFIX[color];
3333
const fontStyle = FONT_PREFIX.MEDIUM;
34-
return <Text className={`${fontStyle} ${fontType} ${colorStyle}`}>{children}</Text>;
34+
return (
35+
<Text className={`${fontStyle} ${fontType} ${colorStyle}`}>{children}</Text>
36+
);
3537
};
3638

3739
const FontBold = ({ type, color, children }: FontProps) => {
3840
const fontType = FONT_TYPE_PREFIX[type];
3941
const colorStyle = COLOR_PREFIX[color];
4042
const fontStyle = FONT_PREFIX.BOLD;
41-
return <Text className={`${fontStyle} ${fontType} ${colorStyle}`}>{children}</Text>;
43+
return (
44+
<Text className={`${fontStyle} ${fontType} ${colorStyle}`}>{children}</Text>
45+
);
4246
};
4347

4448
const FontLight = ({ type, color, children }: FontProps) => {
4549
const fontType = FONT_TYPE_PREFIX[type];
4650
const colorStyle = COLOR_PREFIX[color];
4751
const fontStyle = FONT_PREFIX.LIGHT;
4852

49-
return <Text className={`${fontType} ${fontStyle} ${colorStyle}`}>{children}</Text>;
53+
return (
54+
<Text className={`${fontType} ${fontStyle} ${colorStyle}`}>{children}</Text>
55+
);
5056
};
5157

5258
export const Font = Object.assign(FontRegular, {

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { View } from 'react-native';
2+
import { TouchableOpacity } from 'react-native-gesture-handler';
3+
import AppleIcon from './assets/AppleIcon';
4+
import { Color, Font } from 'design-system';
5+
import KakaoIcon from './assets/KakaoIcon';
6+
7+
type SocialLogin = 'apple' | 'kakao';
8+
type SocialLoginConstant<T = string> = {
9+
[key in SocialLogin]: T;
10+
};
11+
12+
interface SocialLoginButtonProps {
13+
onPress: () => void;
14+
}
15+
16+
interface LoginButtonProps extends SocialLoginButtonProps {
17+
type: SocialLogin;
18+
}
19+
20+
const BG_COLOR: SocialLoginConstant = {
21+
apple: 'bg-[#616161]',
22+
kakao: 'bg-[#FEE502]',
23+
};
24+
25+
const MESSAGE: SocialLoginConstant = {
26+
apple: 'Apple로 계속하기',
27+
kakao: 'Kakao로 계속하기',
28+
};
29+
30+
const COLOR: SocialLoginConstant<Color> = {
31+
apple: 'white',
32+
kakao: 'black',
33+
};
34+
const ICON: SocialLoginConstant<React.JSX.Element> = {
35+
apple: <AppleIcon />,
36+
kakao: <KakaoIcon />,
37+
};
38+
39+
export function LoginButton({ type, onPress }: LoginButtonProps) {
40+
return (
41+
<TouchableOpacity
42+
className={`relative p-4 ${BG_COLOR[type]} rounded-[10px] justify-center items-center w-full`}
43+
onPress={onPress}
44+
>
45+
<View className="absolute left-0 top-0 right-0 bottom-0 h-full p-4 flex justify-start items-start">
46+
{ICON[type]}
47+
</View>
48+
<Font.Bold type="body1" color={COLOR[type]}>
49+
{MESSAGE[type]}
50+
</Font.Bold>
51+
<View />
52+
</TouchableOpacity>
53+
);
54+
}
55+
56+
export const SocialLogin = {
57+
Apple: ({ onPress }: SocialLoginButtonProps) => (
58+
<LoginButton type="apple" onPress={onPress} />
59+
),
60+
Kakao: ({ onPress }: SocialLoginButtonProps) => (
61+
<LoginButton type="kakao" onPress={onPress} />
62+
),
63+
};

‎packages/design-system/src/assets/AppleIcon.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 AppleIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '24'}
7+
height={height || '24'}
8+
viewBox="0 0 24 24"
9+
fill="none"
10+
>
11+
<Path
12+
d="M21.2806 18.424C20.9328 19.2275 20.5211 19.9672 20.0441 20.6472C19.3939 21.5743 18.8615 22.216 18.4512 22.5724C17.8151 23.1573 17.1337 23.4568 16.4039 23.4739C15.8801 23.4739 15.2483 23.3248 14.5129 23.0224C13.7751 22.7214 13.097 22.5724 12.477 22.5724C11.8268 22.5724 11.1294 22.7214 10.3835 23.0224C9.63647 23.3248 9.03466 23.4824 8.57453 23.498C7.87475 23.5278 7.17725 23.2197 6.48102 22.5724C6.03665 22.1848 5.48084 21.5204 4.81499 20.5791C4.1006 19.5739 3.51326 18.4084 3.05313 17.0795C2.56035 15.6442 2.31332 14.2543 2.31332 12.9087C2.31332 11.3673 2.64639 10.0379 3.31351 8.92385C3.83781 8.029 4.53531 7.32312 5.40829 6.80493C6.28127 6.28674 7.22453 6.02267 8.24033 6.00578C8.79614 6.00578 9.52502 6.1777 10.4308 6.51559C11.334 6.85462 11.914 7.02655 12.1682 7.02655C12.3583 7.02655 13.0026 6.82552 14.0948 6.42473C15.1276 6.05305 15.9993 5.89916 16.7134 5.95978C18.6485 6.11595 20.1023 6.87876 21.0691 8.25303C19.3385 9.30163 18.4824 10.7703 18.4994 12.6544C18.5151 14.122 19.0474 15.3432 20.0938 16.3129C20.568 16.7629 21.0975 17.1107 21.6867 17.3578C21.5589 17.7283 21.424 18.0832 21.2806 18.424ZM16.8426 0.960131C16.8426 2.11039 16.4224 3.18439 15.5848 4.17847C14.5739 5.36023 13.3513 6.04311 12.0254 5.93536C12.0085 5.79736 11.9987 5.65213 11.9987 5.49951C11.9987 4.39526 12.4794 3.21349 13.3331 2.24724C13.7593 1.75801 14.3014 1.35122 14.9587 1.02671C15.6146 0.707053 16.235 0.530273 16.8185 0.5C16.8355 0.653772 16.8426 0.807554 16.8426 0.960116V0.960131Z"
13+
fill={color || 'white'}
14+
/>
15+
</Svg>
16+
);
17+
}

‎packages/design-system/src/assets/KakaoIcon.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 KakaoIcon({ width, height, color }: SvgProps) {
4+
return (
5+
<Svg
6+
width={width || '27'}
7+
height={height || '24'}
8+
viewBox="0 0 27 24"
9+
fill="none"
10+
>
11+
<G clip-path="url(#clip0_189_905)">
12+
<Path
13+
d="M13.0628 0C5.84714 0 0 4.62159 0 10.3258C0 14.0368 2.47756 17.2926 6.19654 19.1111C5.9239 20.1301 5.20657 22.8062 5.06364 23.378C4.88629 24.0873 5.32304 24.0794 5.60891 23.8888C5.8339 23.738 9.1876 21.4563 10.6355 20.4742C11.4216 20.5907 12.2316 20.6516 13.0601 20.6516C20.2731 20.6516 26.1229 16.03 26.1229 10.3258C26.1229 4.62159 20.2757 0 13.0628 0Z"
14+
fill={color || '#191600'}
15+
/>
16+
</G>
17+
<Defs>
18+
<ClipPath id="clip0_189_905">
19+
<Rect width="26.1229" height="24" fill="white" />
20+
</ClipPath>
21+
</Defs>
22+
</Svg>
23+
);
24+
}

‎packages/design-system/stories/Configure.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# Design System For SPOT!
22

33
SPOT을 위한 모바일 앱 디자인 시스템
4+
5+
![image](https://github.com/user-attachments/assets/1256d97f-a485-4373-b3e5-ab8d6722bbce)

‎packages/design-system/stories/Font.stories.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import Font from '../src/Font';
2+
import { Font } from '../src/Font';
33

44
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
55
const meta = {
6-
title: 'Example/Font',
6+
title: 'Spots/Font',
77
component: Font,
88
parameters: {
99
layout: 'centered',
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
2020
export const defaultStory: Story = {
2121
args: {
2222
type: 'body1',
23-
children: '프리텐다드',
23+
children: 'SPOT!',
2424
color: 'red',
2525
},
2626
};

‎packages/design-system/stories/Button.stories.ts renamed to ‎packages/design-system/stories/SocialLogin.stories.tsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { Button } from '../src/Button';
2+
import { LoginButton } from '../src/SocialLogin';
3+
import { View } from 'react-native';
34

45
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
56
const meta = {
6-
title: 'Example/Button',
7-
component: Button,
7+
title: 'Spots/SocialLogin',
8+
component: ({ type, onPress }) => (
9+
<View
10+
style={{
11+
width: 300,
12+
}}
13+
>
14+
<LoginButton type={type} onPress={onPress} />
15+
</View>
16+
),
817
parameters: {
918
layout: 'centered',
1019
},
1120
tags: ['autodocs'],
12-
21+
argTypes: {
22+
type: {
23+
options: ['apple', 'kakao'],
24+
control: 'radio',
25+
},
26+
},
1327
args: { onPress: () => {} },
14-
} satisfies Meta<typeof Button>;
28+
} satisfies Meta<typeof LoginButton>;
1529

1630
export default meta;
1731
type Story = StoryObj<typeof meta>;
1832

1933
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
2034
export const defaultStory: Story = {
2135
args: {
22-
text: 'TEST',
36+
type: 'kakao',
2337
},
2438
};

0 commit comments

Comments
 (0)