feat: GlobalStyle, styleToken 적용 및 공통 Button 컴포넌트 구현

package.json

@@ -41,6 +41,7 @@
     "@storybook/test": "^8.1.5",
     "@tanstack/eslint-plugin-query": "^5.35.6",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import { Home } from './pages/Home';
+import { Home } from '@/pages';
 
 function App() {
   return <Home />;

src/features/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './Page';
+export * from './sum';

src/main.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { GlobalStyles } from '@/shared';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <GlobalStyles />
     <App />
   </React.StrictMode>,
 );

src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { Button, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
+import { BaseButton } from '@/shared';
 
 export const Home = () => (
   <>
@@ -19,6 +20,7 @@ export const Home = () => (
       <Circle>
         <img src="src/assets/react.svg" alt="icon" />
       </Circle>
+      <BaseButton type="button">AI로 질문을 생성해 보세요</BaseButton>
     </Flex>
   </>
 );

src/shared/index.ts

@@ -2,4 +2,5 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './Page';
+export * from './styles/index';
+export * from './ui/index';

src/shared/styles/GlobalStyles.tsx

@@ -0,0 +1,23 @@
+import { Global, css } from '@emotion/react';
+import { styleToken } from '@/shared/styles';
+
+export const GlobalStyles = () => (
+  <Global
+    styles={css`
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: ${styleToken.color.white};
+        margin: 0 auto;
+      }
+    `}
+  />
+);

src/shared/styles/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './GlobalStyles';
+export * from './styleToken';

src/shared/styles/styleToken.ts

@@ -0,0 +1,62 @@
+const colors = {
+  white: '#fff',
+  black: '#222',
+  gray100: '#f7f7f7',
+  gray200: '#E3E3E3',
+  gray300: '#C7C7C7',
+  gray400: '#707070',
+  gray500: '#262626',
+  gray600: '#131313',
+  shadow: 'rgba(0, 0, 0, 0.25)',
+  background: '#f1f4f8',
+} as const;
+
+const fontSize = {
+  caption: '12px',
+  body: '14px',
+  subtitle: '16px',
+  title: '18px',
+  headline: '20px',
+  display: '24px',
+} as const;
+
+const fontWeight = {
+  regular: 400,
+  medium: 500,
+  bold: 700,
+} as const;
+
+const spacing = {
+  mt10: '2.5rem',
+  mt20: '5rem',
+  mt30: '7.5rem',
+  mt40: '10rem',
+  mt50: '12.5rem',
+  mb10: '2.5rem',
+} as const;
+
+const width = {
+  w100: '100%',
+  w75: '75%',
+  w50: '50%',
+  w25: '25%',
+  w15: '15%',
+} as const;
+
+export const zIndex = {
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  toast: 1600,
+  tooltip: 1700,
+  loading: 1800,
+} as const;
+
+export const styleToken = {
+  color: colors,
+  fontSize,
+  fontWeight,
+  spacing,
+  width,
+  zIndex,
+} as const;

src/shared/ui/BaseButton.tsx

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+import { Button } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { styleToken } from '@/shared';
+
+type ButtonProps = {
+  type: 'button' | 'submit' | 'reset';
+  children: string;
+  onClick?: () => void;
+} & HTMLAttributes<HTMLButtonElement>;
+
+export const BaseButton = ({ type, children, onClick }: ButtonProps) => (
+  <Container>
+    <Button
+      type={type}
+      style={{
+        width: '100%',
+        padding: '15px 23px',
+        textAlign: 'left',
+        cursor: 'pointer',
+        backgroundColor: `${styleToken.color.white}`,
+        overflow: 'hidden',
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  </Container>
+);
+
+const Container = styled.div`
+  min-width: 230px;
+  margin: 20px 0 22px;
+  border-radius: 10px;
+  border: 1px solid ${styleToken.color.gray200};
+  box-sizing: border-box;
+`;

src/shared/ui/Input.tsx

@@ -0,0 +1 @@
+export const Input = () => <div>Input</div>;

src/shared/ui/Typography.tsx

@@ -0,0 +1 @@
+export const Typography = () => <div>Typography</div>;

src/shared/ui/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './BaseButton';
+export * from './Input';
+export * from './Typography';

tsconfig.json

@@ -24,7 +24,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": [
-        "./src/*"
+        "src/*"
       ]
     }
   },

vite.config.ts

@@ -1,4 +1,5 @@
 /// <reference types="vitest" />
+import path from 'path';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
@@ -11,4 +12,9 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 });

yarn.lock

@@ -4890,6 +4890,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^20.14.2":
+  version: 20.14.2
+  resolution: "@types/node@npm:20.14.2"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 10c0/2d86e5f2227aaa42212e82ea0affe72799111b888ff900916376450b02b09b963ca888b20d9c332d8d2b833ed4781987867a38eaa2e4863fa8439071468b0a6f
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.4
   resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -11618,6 +11627,7 @@ __metadata:
     "@tanstack/eslint-plugin-query": "npm:^5.35.6"
     "@tanstack/react-query": "npm:^5.40.0"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
+    "@types/node": "npm:^20.14.2"
     "@types/react": "npm:^18.2.66"
     "@types/react-dom": "npm:^18.2.22"
     "@typescript-eslint/eslint-plugin": "npm:^7.2.0"