Merge pull request #7 from GitHub-Practice-Together/차크라-ui를-이용해서-box-…

…layout-적용

차크라 UI를 이용해서 box layout 적용

vite-project/.prettierrc

@@ -3,6 +3,5 @@
   "trailingComma": "none",
   "endOfLine": "auto",
   "bracketSameLine": false,
-  "semi": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "semi": true
 }

vite-project/package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@types/node": "^20.8.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

vite-project/src/App.tsx

@@ -1,10 +1,17 @@
+import Button from '@/components/Button';
+import { Box } from '@chakra-ui/react';
 function App() {
-
   return (
     <>
       <div>프로젝트 초기 세팅 완료</div>
+      <Box bg="tomato" w="100%" p={4} color="white">
+        This is the Box
+      </Box>
+      <Button />
+      <h1>아무거나 쓰기</h1>
+      <div>프로젝트 초기 세팅 완료!!!!!!!!우히히</div>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

vite-project/src/components/Button.tsx

@@ -0,0 +1,7 @@
+const Button = () => {
+  return (
+    <button>버튼</button>
+  )
+}
+
+export default Button

vite-project/src/pages/temp.tsx

@@ -0,0 +1,5 @@
+import { Box } from '@chakra-ui/react'
+
+<Box bg='tomato' w='100%' p={4} color='white'>
+  This is the Box
+</Box>

vite-project/tsconfig.json

@@ -1,5 +1,11 @@
 {
   "compilerOptions": {
+    // alias
+    "baseUrl": "./src", 
+    "paths": {
+      "@/*": ["*"]
+    },
+
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],

vite-project/vite.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }]
+  },
 })