feat: 메인 홈 추가

MechanicKim · Aug 21, 2024 · 4929869 · 4929869
1 parent 477ccff
commit 4929869
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 16 deletions.
diff --git a/jason-lab/src/home/App.tsx b/jason-lab/src/home/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import '../index.css';
+
+import Item from './items/Item';
+
+import img1 from './imgs/project1.png';
+
+function App() {
+  return (
+    <main className="w-screen h-screen">
+      <section className="mx-auto" style={{ width: '800px' }}>
+        <Item title="광고 없이 깔끔한 오늘의 뉴스" img={img1} />
+      </section>
+    </main>
+  )
+}
+
+export default App;
diff --git a/jason-lab/src/home/imgs/github-mark.png b/jason-lab/src/home/imgs/github-mark.png
diff --git a/jason-lab/src/home/imgs/project1.png b/jason-lab/src/home/imgs/project1.png
diff --git a/jason-lab/src/home/index.html b/jason-lab/src/home/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Every day in every way, I am getting better and better.</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/jason-lab/src/home/index.tsx b/jason-lab/src/home/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const domNode = document.getElementById('root');
+if (domNode) {
+  const root = createRoot(domNode);
+  root.render(<App />);
+}
diff --git a/jason-lab/src/home/items/Item.tsx b/jason-lab/src/home/items/Item.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Spec from './Spec';
+
+import githubMark from '../imgs/github-mark.png';
+
+type TProps = {
+  title: string;
+  img: string;
+};
+
+function Item({ title, img }: TProps) {
+  return (
+    <div className="p-3 flex border-y">
+      <img className="w-60 h-48 object-cover" src={img} />
+      <div className="px-3 flex-1 flex flex-col">
+        <h4 className="font-semibold text-xl text-gray-900">{title}</h4>
+        <Spec items={['Electron', 'React', 'Typescript', 'Tailwind']} />
+        <p className="mt-2 flex-1 text-gray-800">
+          RSS 뉴스피드로 목록을 불러옵니다. 기사를 클릭하면 본문을 가져와 보여줍니다. 광고 없이 기사 내용에 집중하고 싶은 분들을 위한 앱
+        </p>
+        <p className="flex justify-end">
+          <a href="https://github.com/MechanicKim/rss-news-reader/tree/main" target="_blank">
+            <img className="w-6" src={githubMark} />
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Item;
diff --git a/jason-lab/src/home/items/Spec.tsx b/jason-lab/src/home/items/Spec.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+type TProps = {
+  items: string[];
+};
+
+function Spec({ items }: TProps) {
+  return (
+    <p className="mt-1">
+      {items.map((item, i) => (
+        <span key={i} className="py-1 px-2 mr-1 text-xs rounded bg-gray-200">{item}</span>
+      ))}
+    </p>
+  );
+}
+
+export default Spec;
diff --git a/jason-lab/webpack.config.js b/jason-lab/webpack.config.js
@@ -3,9 +3,10 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    ['bundle/dailyLog']: path.resolve(__dirname, 'src', 'dailyLog', 'index.tsx'),
-    ['bundle/dailyLimit']: path.resolve(__dirname, 'src', 'dailyLimit', 'index.tsx'),
-    ['bundle/shop_masmarulez']: path.resolve(__dirname, 'src', 'shop', 'masmarulez', 'index.tsx'),
+    ['bundle/home']: path.resolve(__dirname, 'src', 'home', 'index.tsx'),
+    // ['bundle/dailyLog']: path.resolve(__dirname, 'src', 'dailyLog', 'index.tsx'),
+    // ['bundle/dailyLimit']: path.resolve(__dirname, 'src', 'dailyLimit', 'index.tsx'),
+    // ['bundle/shop_masmarulez']: path.resolve(__dirname, 'src', 'shop', 'masmarulez', 'index.tsx'),
   },
   output: {
     path: path.resolve(__dirname, '../'),
@@ -40,20 +41,25 @@ module.exports = {
     ],
   },
   plugins: [
-		new HtmlWebpackPlugin({
-      filename: 'dailyLog/index.html',
-      chunks: ['bundle/dailyLog'],
-			template: path.resolve(__dirname, 'src', 'dailyLog', 'index.html'),
-		}),
-    new HtmlWebpackPlugin({
-      filename: 'dailyLimit/index.html',
-      chunks: ['bundle/dailyLimit'],
-			template: path.resolve(__dirname, 'src', 'dailyLimit', 'index.html'),
-		}),
     new HtmlWebpackPlugin({
-      filename: 'shop/masmarulez.html',
-      chunks: ['bundle/shop_masmarulez'],
-			template: path.resolve(__dirname, 'src', 'shop', 'masmarulez', 'index.html'),
+      filename: 'index.html',
+      chunks: ['bundle/home'],
+			template: path.resolve(__dirname, 'src', 'home', 'index.html'),
 		}),
+		// new HtmlWebpackPlugin({
+    //   filename: 'dailyLog/index.html',
+    //   chunks: ['bundle/dailyLog'],
+		// 	template: path.resolve(__dirname, 'src', 'dailyLog', 'index.html'),
+		// }),
+    // new HtmlWebpackPlugin({
+    //   filename: 'dailyLimit/index.html',
+    //   chunks: ['bundle/dailyLimit'],
+		// 	template: path.resolve(__dirname, 'src', 'dailyLimit', 'index.html'),
+		// }),
+    // new HtmlWebpackPlugin({
+    //   filename: 'shop/masmarulez.html',
+    //   chunks: ['bundle/shop_masmarulez'],
+		// 	template: path.resolve(__dirname, 'src', 'shop', 'masmarulez', 'index.html'),
+		// }),
 	],
 };