samilHero · juchanhwang · Jun 14, 2024 · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024
@@ -1,4 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint:fix:all
+pnpm lint:fix:all
+pnpm type-check
@@ -15,6 +15,7 @@
     "stylelint:fix": "stylelint './packages/**/src/**/*.{tsx,ts,js}' --fix",
     "lint:all": "pnpm lint && pnpm prettier && pnpm stylelint",
     "lint:fix:all": "pnpm lint:fix && pnpm prettier:fix && pnpm stylelint:fix",
+    "type-check": "tsc --noEmit -p packages/design-system && tsc --noEmit -p packages/missionary-admin && tsc --noEmit -p packages/missionary-app",
     "dev:admin": "pnpm --filter missionary-admin dev",
     "dev:app": "pnpm --filter missionary-app dev",
     "dev:ds": "pnpm --filter design-system dev",

@@ -5,11 +5,11 @@ const nextConfig = {
     emotion: true,
   },
   webpack: (config) => {
-    config.module.rules.push({ // 웹팩설정에 로더 추가함
+    config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
     });
-    return config
+    return config;
   },
 };
 

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled/macro';
+import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { colors } from '@styles/color';
 import type { ButtonProps } from '.';

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ButtonHTMLAttributes } from 'react';
 import type { ButtonColorMap } from './ButtonLayout';
 import { ButtonWrapper } from './ButtonLayout';
@@ -7,7 +9,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   width: React.CSSProperties['width'];
   size: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
   color?: keyof typeof ButtonColorMap;
-  children?: React.ReactNode;
 }
 
 export function Button({

@@ -7,3 +7,4 @@ export { Checkbox } from './checkbox';
 export { CheckboxGroup } from './checkbox-group';
 export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
+export { Button } from './button';
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import type { InputHTMLAttributes } from 'react';
 import { InputLayout, InputBox, InputError } from './InputLayout';

@@ -1,3 +1,5 @@
+'use client';
+
 import { useContext } from 'react';
 import { ModalStateContext } from '@context/ModalStateContext';
 import { ModalDispatchContext } from '@context/ModalDispatchContext';

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext, type Ref, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useControllableState } from '@hooks';

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { TabLayout, TabList } from './TabLayout';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { TooltipWrapper } from './TooltipLayout';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ComponentProps } from 'react';
 import { createContext } from 'react';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ComponentProps, ComponentType } from 'react';
 import { useMemo, useState, type ReactNode } from 'react';
 import { ModalDispatchContext } from './ModalDispatchContext';

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ComponentProps, ElementType } from 'react';
 import { createContext } from 'react';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Context } from 'react';
 import { useContext } from 'react';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Context } from 'react';
 import { useContext } from 'react';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import { useRef, useState } from 'react';
 import { useEvent } from './useEvent';
 

@@ -1,11 +1,13 @@
+'use client';
+
 import React from 'react';
 import { useLatestValue } from './useLatestValue';
 
 export let useEvent =
  // TODO: Add React.useEvent ?? once the useEvent hook is available
  function useEvent<
    F extends (...args: any[]) => any,
    P extends any[] = Parameters<F>,
    R = ReturnType<F>,
  >(fn: (...args: P) => R) {
    let cache = useLatestValue(fn);

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef } from 'react';
 
 export const useLatestValue = <T,>(value: T) => {

@@ -1,3 +1,5 @@
+'use client';
+
 import { useContext } from 'react';
 import { ModalDispatchContext } from '@context/ModalDispatchContext';
 

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Context } from 'react';
 import { useContext } from 'react';
 

@@ -1,4 +1,5 @@
 import './styles/_global.scss';
+
 export * from './components';
 export * from './utils';
 export * from './hooks';
@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef } from 'react';
 
 /**

@@ -1,17 +1,44 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "baseUrl": "./src",
     "paths": {
       "@*": [
         "./*"
       ]
-    }
+    },
+    "types": [
+      "@emotion/react/types/css-prop"
+    ]
   },
-  "extends": "../../tsconfig.base.json",
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
-}
+}
@@ -11,6 +11,7 @@
     "preview": "next preview"
   },
   "dependencies": {
+    "@samilhero/design-system": "workspace:*",
     "axios": "^1.6.8"
   },
   "devDependencies": {

@@ -1,7 +1,7 @@
 import '@styles/_global.scss';
 import type { Metadata } from 'next';
 
-import { EmotionProvider } from '../lib/EmotionProvider';
+import { EmotionProvider } from 'lib/EmotionProvider';
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (

@@ -1,3 +1,12 @@
+import { Button, Checkbox } from '@samilhero/design-system';
+
 export default function Home() {
-  return <main>선교 상륙 작전1</main>;
+  return (
+    <main>
+      <Checkbox>체크박스입니다.</Checkbox>
+      <Button size="md" width={100}>
+        버튼입니다.
+      </Button>
+    </main>
+  );
 }
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from '@emotion/react';
 
-import { theme } from '@styles/theme';
+import { theme } from 'styles/theme';
 
 export function EmotionProvider({ children }: { children: React.ReactNode }) {
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;

@@ -1,17 +1,20 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
       "@*": [
-        "./*"
+        "../../design-system/src/*"
       ]
     }
   },
-  "extends": "../../tsconfig.base.json",
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }
@@ -9,6 +9,9 @@
     "start": "next start",
     "preview": "next preview"
   },
+  "dependencies": {
+    "@samilhero/design-system": "workspace:*"
+  },
   "devDependencies": {
     "sass": "^1.75.0"
   }

@@ -3,7 +3,7 @@
     "baseUrl": "./src",
     "paths": {
       "@*": [
-        "./*"
+        "../../design-system/src/*"
       ]
     }
   },
@@ -13,5 +13,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }