merge: iOS, AOS, Storybook 프리텐다드 글꼴 적용 (#1)

merge: iOS, AOS, Storybook 프리텐다드 글꼴 적용 (#1)

Author: d0422

.yarn/install-state.gz

@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: 'Pretendard-Medium';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff')
+    format('woff');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard-Light';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff')
+    format('woff');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard-Bold';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff')
+    format('woff');
+  font-style: normal;
+}

packages/design-system/.storybook/global.css

@@ -9,6 +9,23 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: 'gray',
+      values: [
+        {
+          name: 'gray',
+          value: '#F3F5FB',
+        },
+        {
+          name: 'white',
+          value: '#FFFFFF',
+        },
+        {
+          name: 'black',
+          value: '#000000',
+        },
+      ],
+    },
   },
 };
 

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

@@ -1 +1,2 @@
 export * from './src/Button';
+export * from './src/Font';

packages/design-system/index.ts

@@ -12,6 +12,6 @@ export const Button = ({ text, onPress }: ButtonProps) => (
     onPress={onPress}
     activeOpacity={0.8}
   >
-    <Text className="text-white text-base font-bold">{text}</Text>
+    <Text className="text-white text-base font-pb">{text}</Text>
   </TouchableOpacity>
 );

packages/design-system/src/Button.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { Text } from 'react-native';
+
+const FONT_PREFIX = {
+  MEDIUM: 'font-Pretendard-Medium',
+  BOLD: 'font-Pretendard-Bold',
+  LIGHT: 'font-Pretendard-Light',
+} as const;
+
+const COLOR_PREFIX = {
+  red: 'text-SPOT-red',
+  black: 'text-SPOT-black',
+  white: 'text-SPOT-white',
+} as const;
+
+const FONT_TYPE_PREFIX = {
+  body1: 'text-base leading-6',
+  title1: 'text-[1.375rem] leading-[1.875rem]',
+};
+
+type Color = keyof typeof COLOR_PREFIX;
+type FontType = keyof typeof FONT_TYPE_PREFIX;
+
+interface FontProps {
+  children: ReactNode;
+  type: FontType;
+  color: Color;
+}
+
+const FontBase = ({ type, color, children }: FontProps) => {
+  const fontType = FONT_TYPE_PREFIX[type];
+  const colorStyle = COLOR_PREFIX[color];
+  const fontStyle = FONT_PREFIX.MEDIUM;
+  return (
+    <Text className={`${fontStyle} ${fontType} ${colorStyle}`}>{children}</Text>
+  );
+};
+
+const FontBold = ({ type, color, children }: FontProps) => {
+  const fontType = FONT_TYPE_PREFIX[type];
+  const colorStyle = COLOR_PREFIX[color];
+  const fontStyle = FONT_PREFIX.BOLD;
+  return (
+    <Text className={`${fontStyle} ${fontType} ${colorStyle}`}>{children}</Text>
+  );
+};
+
+const FontLight = ({ type, color, children }: FontProps) => {
+  const fontType = FONT_TYPE_PREFIX[type];
+  const colorStyle = COLOR_PREFIX[color];
+  const fontStyle = FONT_PREFIX.LIGHT;
+
+  return (
+    <Text className={`${fontType} ${fontStyle} ${colorStyle}`}>{children}</Text>
+  );
+};
+
+const Font = Object.assign(FontBase, {
+  Bold: FontBold,
+  Light: FontLight,
+});
+
+export default Font;

packages/design-system/src/Font.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Font from '../src/Font';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Font',
+  component: Font,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+
+  args: {},
+} satisfies Meta<typeof Font>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const defaultStory: Story = {
+  args: {
+    type: 'body1',
+    children: '프리텐다드',
+    color: 'red',
+  },
+};