EFUB · dearosmar · Mar 20, 2026 · Mar 20, 2026 · Mar 28, 2026 · May 26, 2026
diff --git a/efub6-frontend-assignment-1 b/efub6-frontend-assignment-1
diff --git a/onboarding/css/style.css b/onboarding/css/style.css
@@ -0,0 +1,39 @@
+header {
+    color: white;
+}
+
+body {
+    display: flex;
+    flex-direction: column;  
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #2c3e50;
+    margin: 0;
+    gap: 40px; 
+}
+
+main {
+    width: 90%;
+    max-width: 500px;
+    background-color: white; 
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+    text-align: center;     
+}
+
+
+nav ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: #3498db;
+    font-weight: bold;
+}
diff --git a/onboarding/index.html b/onboarding/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>h2e 포트폴리오</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+    <header>
+        <h1>h2e's Profile</h1>
+        <nav>
+            <ul>
+                <li><a href="#about">소개</a></li>
+                <li><a href="https://github.com/dearosmar" target="_blank">GitHub</a></li>
+                <li><a href="dear.ros.mar@gmail.com" target="_blank">mail</a></li>
+                <li><a href="https://dear-ros-mar.tistory.com/" target="_blank">deVlog</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section id="who?">
+            <h2>About Me</h2>
+            <p>이화여자대학교 22학번 3학년 재학 중</p>
+            <p>웹 프론트와 앱 iOS에 관심을 가지고 있습니다.</p>
+            <p>현재 React 공부 중!</p>
+        </section>
+
+
+        <section id="활동">
+           <br>
+            <h2>활동</h2>
+            <p>게임 개발 동아리 KING</p>
+            <p>웹 개발 동아리 EFUB</p>
+        </section>
+
+        <section id="skills">
+            <br>
+            <h2>Skills</h2>
+                <p>C, JAVA</p>
+                <p>Frontend: HTML, CSS, React</p>
+                <p>Game: Unity, Unreal</p>
+                <p>iOS: spring</p>
+                <p>Tools: Git, Adobe Premiere Pro, Adobe illustrator</p>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2026 h2e. All rights reserved.</p>
+    </footer>
+
+</body>
+</html>
diff --git a/onboarding/sample.md b/onboarding/sample.md
diff --git a/week03/index.html b/week03/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>가위바위보 게임</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="game-board">
+            <h1>가위바위보</h1>
+
+            <div class="score-board">
+                <span id="user-score">0</span> : <span id="computer-score">0</span>
+            </div>
+
+            <div class="choice-buttons">
+                <button onclick="play('가위')">가위</button>
+                <button onclick="play('바위')">바위</button>
+                <button onclick="play('보')">보</button>
+            </div>
+
+            <div class="result-display">
+                <p id="match-up">준비!</p>
+                <h2 id="verdict">게임 시작</h2>
+            </div>
+
+            <button id="reset-btn" onclick="resetGame()">reset</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/week03/sample.md b/week03/sample.md
diff --git a/week03/script.js b/week03/script.js
@@ -0,0 +1,36 @@
+let userScore = 0;
+let computerScore = 0;
+
+function play(userChoice) {
+    const choices = ['가위', '바위', '보'];
+    const computerChoice = choices[Math.floor(Math.random() * 3)];
+
+    let result = "";
+    if (userChoice === computerChoice) {
+        result = "무승부";
+    } else if (
+        (userChoice === "가위" && computerChoice === "보") ||
+        (userChoice === "바위" && computerChoice === "가위") ||
+        (userChoice === "보" && computerChoice === "바위")
+    ) {
+        result = "승리!!";
+        userScore++;
+    } else {
+        result = "패배";
+        computerScore++;
+    }
+
+    document.getElementById("match-up").innerText = `${userChoice} vs ${computerChoice}`;
+    document.getElementById("verdict").innerText = result;
+    document.getElementById("user-score").innerText = userScore;
+    document.getElementById("computer-score").innerText = computerScore;
+}
+
+function resetGame() {
+    userScore = 0;
+    computerScore = 0;
+    document.getElementById("user-score").innerText = userScore;
+    document.getElementById("computer-score").innerText = computerScore;
+    document.getElementById("match-up").innerText = "준비!";
+    document.getElementById("verdict").innerText = "게임 시작";
+}
diff --git a/week03/style.css b/week03/style.css
@@ -0,0 +1,62 @@
+
+body {
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    font-family: 'Arial', sans-serif;
+}
+
+.game-board {
+    background-color: #007bff;
+    color: #ffffff;
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    text-align: center;
+    width: 350px;
+}
+
+.score-board {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin: 20px 0;
+}
+
+.choice-buttons button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    margin: 5px;
+    cursor: pointer;
+    border: 2px solid #ffffff;
+    background: transparent;
+    color: white;
+    border-radius: 8px;
+    transition: 0.3s;
+}
+
+.choice-buttons button:hover {
+    background: white;
+    color: #007bff;
+}
+
+.result-display {
+    margin: 30px 0;
+    min-height: 100px;
+}
+
+#reset-btn {
+    background-color: #ff4757;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+#reset-btn:hover {
+    background-color: #ff6b81;
+}
diff --git a/week03/test3.html b/week03/test3.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>EFUB JS 비동기 실습</title>
+</head>
+<body>
+    <h1>☕ 커피 리스트 출력 실습 (Console을 확인하세요!)</h1>
+    <p>F12를 눌러 <strong>Console</strong> 탭을 보시면 0.5초 간격으로 커피가 추가됩니다.</p>
+
+    <script>
+        const addCoffee = function (name) {
+            return function (prevName) {
+                return new Promise(function (resolve) {
+                    setTimeout(function () {
+                        let newName = prevName ? prevName + ', ' + name : name; 
+                        console.log(newName);
+                        resolve(newName); 
+                    }, 500);
+                });
+            };
+        };
+
+        async function makeCoffee() {
+            let coffee = await addCoffee('에스프레소')();
+            coffee = await addCoffee('아메리카노')(coffee);
+            coffee = await addCoffee('카페모카')(coffee);
+            await addCoffee('카페라떼')(coffee);
+
+            console.log("모든 커피가 준비되었습니다! ✨");
+        }
+
+        makeCoffee();
+    </script>
+</body>
+</html>
diff --git a/week04/sample.md b/week04/sample.md
diff --git a/week04/todolist/.gitignore b/week04/todolist/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week04/todolist/README.md b/week04/todolist/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/week04/todolist/eslint.config.js b/week04/todolist/eslint.config.js
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
diff --git a/week04/todolist/index.html b/week04/todolist/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>todolist</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>