feat: 전역 스타일링 설정 및 스타일 관련 util함수 추가와 Label 컴포넌트 마이그레이션

package.json

@@ -15,10 +15,14 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.2.3",
+    "react-icons": "^4.3.1",
+    "react-loading-icons": "^1.0.8",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
+    "styled-normalize": "^8.0.7",
     "typescript": "^4.6.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Label/Label.stories.tsx

@@ -0,0 +1,34 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Label from './Label';
+
+export default {
+  title: 'Label',
+  component: Label,
+  args: {
+    type: 'time',
+    value: 0,
+  },
+} as ComponentMeta<typeof Label>;
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
+
+export const DefaultTimeLabel = Template.bind({});
+
+export const TimeLabel = Template.bind({});
+
+TimeLabel.args = {
+  value: 255,
+};
+
+export const DefaultBookMarkLabel = Template.bind({});
+
+DefaultBookMarkLabel.args = {
+  type: 'bookmark',
+  value: 0,
+};
+
+export const BookMarkLabel = Template.bind({});
+
+BookMarkLabel.args = {
+  type: 'bookmark',
+  value: 10,
+};

src/components/Label/Label.styled.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const StyledLabel = styled.p`
+  color: #cbcbcb;
+  font-size: rem(24px);
+  display: block;
+  padding: rem(10px) 0;
+`;
+
+export const StyledStrong = styled.strong`
+  font-weight: bolder;
+`;

src/components/Label/Label.tsx

@@ -0,0 +1,34 @@
+import { BsBookmarkHeartFill } from 'react-icons/bs';
+import { RiTimerFill } from 'react-icons/ri';
+import { LabelProps } from './Label.types';
+import { StyledLabel, StyledStrong } from './Label.styled';
+
+export default function Label({ type, value }: LabelProps): JSX.Element {
+  const iconStyle = {
+    marginRight: '20px',
+    fontSize: '26px',
+    verticalAlign: 'bottom',
+  };
+
+  const renderByType = (type: string) => {
+    switch (type) {
+      case 'time':
+        return (
+          <>
+            <RiTimerFill style={iconStyle} />
+            Ready in <StyledStrong>{value} minutes </StyledStrong>
+          </>
+        );
+      case 'bookmark':
+        return (
+          <>
+            <BsBookmarkHeartFill style={iconStyle} />
+            <StyledStrong>{value}</StyledStrong> saved
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+  return <StyledLabel>{renderByType(type)}</StyledLabel>;
+}

src/components/Label/Label.types.ts

@@ -0,0 +1,4 @@
+export interface LabelProps {
+  type: string;
+  value: number;
+}

src/components/index.ts

@@ -1 +1,2 @@
 export { default as App } from './App/App';
+export { default as Label } from './Label/Label';

src/index.tsx

@@ -1,12 +1,17 @@
 import { StrictMode } from 'react';
 import { render } from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+import { GlobalStyle } from 'styles/GlobalStyle';
+import { defaultTheme } from 'theme/theme';
 import { App } from './components';
 // import './reportWebVitals';
-import './styles/global.css';
 
 render(
   <StrictMode>
-    <App />
+    <ThemeProvider theme={defaultTheme}>
+      <GlobalStyle />
+      <App />
+    </ThemeProvider>
   </StrictMode>,
   document.getElementById('root'),
 );

src/styles/GlobalStyle.ts

@@ -0,0 +1,125 @@
+import { createGlobalStyle } from 'styled-components';
+import { normalize } from 'styled-normalize';
+
+export const GlobalStyle = createGlobalStyle`
+    ${normalize}
+
+    /* 시맨틱 태그 iE 맞춤 */
+    header,
+    footer,
+    main,
+    section,
+    article,
+    aside,
+    nav,
+    figure,
+    figcaption {
+    display: block;
+    }
+
+    /* 기본 스타일 */
+    /* 기본 박스 사이징 설정 */
+
+    body,
+    body::before,
+    body::after,
+    body *,
+    body *::before,
+    body *::after {
+    box-sizing: border-box;
+    }
+
+    /* 본문 기본 폰트, 글자 크기, 굵기, 배경 색상 지정 */
+    /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); */
+
+    @font-face {
+    font-family: 'Montserrat';
+    font-weight: normal;
+    font-style: normal;
+    src: url('./fonts/Montserrat-Regular.woff2') format('woff2'),
+        url('.assets/fonts/Montserrat-Bold.woff2') format('woff2');
+    font-display: block;
+    unicode-range: U+000-5FF;
+    }
+
+    body {
+    font-family: 'Montserrat', 'Roboto', sans-serif;
+    font-size: inherit;
+    position: relative;
+    }
+
+    /* 제목 글자 크기 및 굵기 재지정 */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+    font-size: 100%;
+    font-weight: inherit;
+    margin: 0;
+    }
+
+    /* 목록 안쪽 여백 및 불릿 제거 */
+    ul,
+    ol {
+    padding-left: 0;
+    list-style: none;
+    }
+
+    /* 이미지에 발생하는 갭 제거 */
+    img {
+    vertical-align: middle;
+    }
+
+    /* 링크 요소의 밑줄 및 글자 색상 재 정의 */
+    a {
+    color: inherit;
+    text-decoration: none;
+    }
+
+    /* 주소 및 강조 요소 스타일 재 정의 */
+    address,
+    em {
+    font-style: normal;
+    }
+
+    /* fieldset 요소의 테두리 및 여백 제거 */
+    fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    }
+
+    /* 버튼 마우스 스타일 설정 */
+    button {
+    cursor: pointer;
+    color: inherit;
+    font-size: inherit;
+    }
+
+    /* form 요소 스타일 설정 */
+    input::-ms-clear,
+    input::-ms-reveal {
+    display: none;
+    }
+    input::-webkit-search-decoration,
+    input::-webkit-search-cancel-button,
+    input::-webkit-search-results-button,
+    input::-webkit-search-results-decoration {
+    display: none;
+    }
+
+    input,
+    button,
+    textarea {
+    appearance: none;
+    -webkit-appearance: none;
+    }
+
+
+    /* figure 기본 스타일 제거 */
+    figure {
+    margin: 0;
+    }
+`;

src/theme/theme.d.ts

@@ -0,0 +1,40 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    color: {
+      primaryGreen: string;
+      primaryOrange: string;
+      badgePink: string;
+      badgePurple: string;
+      badgeGreen: string;
+      badgeNavy: string;
+      heartPink: string;
+      black: string;
+      white: string;
+
+      backgroundGray: string;
+      searchGray: string;
+      menuBg: string;
+
+      gray100: string;
+      gray200: string;
+      gray300: string;
+      gray400: string;
+      gray500: string;
+      gray600: string;
+      gray700: string;
+      gray800: string;
+      gray900: string;
+    };
+
+    fontSize: {
+      xs: string;
+      s: string;
+      m: string;
+      l: string;
+      xl: string;
+      xxl: string;
+    };
+  }
+}

src/theme/theme.ts

@@ -0,0 +1,39 @@
+import { DefaultTheme } from 'styled-components';
+import { pxToRem } from 'utils';
+
+export const defaultTheme: DefaultTheme = {
+  color: {
+    primaryGreen: '#529715',
+    primaryOrange: '#e56a18',
+    badgePink: '#d51754',
+    badgePurple: '#910087',
+    badgeGreen: '#349a2c',
+    badgeNavy: '#4b5aab',
+    heartPink: '#ff9d9d',
+    black: '#000000',
+    white: '#ffffff',
+
+    backgroundGray: '#fafafa',
+    searchGray: '#ebebeb',
+    menuBg: '#252525',
+
+    gray100: '#d8d8d8',
+    gray200: '#b0b0b0',
+    gray300: '#898989',
+    gray400: '#616161',
+    gray500: '#3a3a3a',
+    gray600: '#2e2e2e',
+    gray700: '#232323',
+    gray800: '#171717',
+    gray900: '#0c0c0c',
+  },
+
+  fontSize: {
+    xs: pxToRem(12),
+    s: pxToRem(14),
+    m: pxToRem(15),
+    l: pxToRem(16),
+    xl: pxToRem(18),
+    xxl: pxToRem(24),
+  },
+};

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './style';

src/utils/style.ts

@@ -0,0 +1,3 @@
+export const pxToRem = (px: number, base = 16): string => {
+  return `${px / base}rem`;
+};