kimsi519 · gxxhxx0224 · Sep 13, 2024
diff --git a/윤건희/ex1/book-edit.html b/윤건희/ex1/book-edit.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tailwind CSS Demo</title>
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        /* Custom styles to ensure footer stays at the bottom */
+        html, body {
+            height: 100%;
+            margin: 0;
+        }
+
+        #wrap {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        footer {
+            margin-top: auto;
+            background-color: #f5f5f5;
+            text-align: center;
+            padding: 1rem;
+            border-top: 1px solid #e5e7eb; /* Light gray border for separation */
+        }
+
+        /* Custom styles */
+        .sidebar {
+            background-color: #f5f5f5; /* Light gray background */
+            padding: 1rem;
+        }
+
+        .main-content {
+            background-color: #ffffff; /* White background */
+        }
+
+        .add-book-btn {
+            background-color: #000000; /* Black background */
+            color: #ffffff; /* White text */
+        }
+
+        /* Border styles */
+        .border-bottom {
+            border-bottom: 1px solid #e5e7eb; /* Light gray border for separation */
+        }
+
+        .border-top {
+            border-top: 1px solid #e5e7eb; /* Light gray border for separation */
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <div id="wrap">
+        <nav class="bg-white shadow-lg border-bottom">
+            <div class="max-w-7xl mx-auto px-4">
+                <div class="flex justify-between">
+                    <div class="flex space-x-4">
+                        <a href="#" class="py-5 px-3 text-green-600 bg-green-100 hover:text-green-800 rounded-md">BookMark</a>
+                    </div>
+                    <div class="flex space-x-4 ml-auto">
+                        <a href="https://github.com/gxxhxx0224?tab=repositories" class="py-5 px-3 text-gray-700 hover:text-gray-900">GitHub Repos</a>
+                        <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Sign Up</a>
+                        <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Rights</a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <section class="flex flex-grow border-bottom">
+            <div class="w-1/4 sidebar">
+                <input type="text" placeholder="Enter address" class="block w-full mb-4 p-2 border border-gray-300 rounded-md">
+                <div class="flex items-center mb-4">
+                    <input type="checkbox" id="auto-delete" class="mr-2">
+                    <label for="auto-delete">이동 시 자동 삭제</label>
+                </div>
+                <div class="flex space-x-2">
+                    <button class="bg-blue-500 text-white py-2 px-4 rounded-md">새로 고침</button>
+                    <button class="bg-green-500 text-white py-2 px-4 rounded-md">저장</button>
+                </div>
+            </div>
+            <div class="w-3/4 main-content p-4">
+                <button class="add-book-btn mt-4 py-2 px-4 rounded-md">+Add Book</button>
+            </div>
+        </section>
+        <footer>
+            <p>&copy; 2024 Your Company</p>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/윤건희/ex1/index.html b/윤건희/ex1/index.html
diff --git a/윤건희/ex1/register.html b/윤건희/ex1/register.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tailwind CSS Demo</title>
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        /* Custom styles to ensure footer stays at the bottom */
+        html, body {
+            height: 100%;
+            margin: 0;
+        }
+
+        #wrap {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        footer {
+            margin-top: auto;
+        }
+
+        /* Custom styles */
+        .sidebar {
+            background-color: #f5f5f5; /* Light gray background */
+            padding: 1rem; /* Same as ml-3 */
+        }
+
+        .main-content {
+            background-color: #ffffff; /* White background */
+        }
+
+        .add-book-btn {
+            background-color: #000000; /* Black background */
+            color: #ffffff; /* White text */
+        }
+
+        /* Border styles */
+        .border-bottom {
+            border-bottom: 1px solid #e5e7eb; /* Light gray border for separation */
+        }
+
+        .border-top {
+            border-top: 1px solid #e5e7eb; /* Light gray border for separation */
+        }
+
+        /* Padding for the content area */
+        .container {
+            margin: 0 2.5rem; /* Left and right margin to adjust width */
+            padding: 2rem 0; /* Top and bottom padding */
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <div id="wrap">
+        <nav class="bg-white shadow-lg border-bottom w-full">
+            <div class="flex justify-between">
+                <div class="flex space-x-4">
+                    <a href="#" class="py-5 px-3 text-green-600 bg-green-100 hover:text-green-800 rounded-md">BookMark</a>
+                </div>
+                <div class="flex space-x-4 ml-auto">
+                    <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">GitHub Repos</a>
+                    <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Sign Up</a>
+                    <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Rights</a>
+                </div>
+            </div>
+        </nav>
+        <section class="flex flex-grow flex-col border-bottom container mx-auto text-center">
+            <h2 class="text-2xl font-semibold mb-4">Sign Up</h2>
+            <form class="mx-auto">
+                <div class="mb-4">
+                    <label for="nickname" class="block text-gray-700">NickName</label>
+                    <input type="text" id="nickname" placeholder="nickname" class="mt-1 block w-[20%] mx-auto p-2 border border-gray-300 rounded-md" />
+                </div>
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700">Email</label>
+                    <input type="email" id="email" placeholder="email" class="mt-1 block w-[20%] mx-auto p-2 border border-gray-300 rounded-md" />
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700">Password</label>
+                    <input type="password" id="password" placeholder="password" class="mt-1 block w-[20%] mx-auto p-2 border border-gray-300 rounded-md" />
+                </div>
+                <div class="mb-4">
+                    <label for="password-confirm" class="block text-gray-700">Password Confirm</label>
+                    <input type="password" id="password-confirm" placeholder="password confirm" class="mt-1 block w-[20%] mx-auto p-2 border border-gray-300 rounded-md" />
+                </div>
+                <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded-md">Register</button>
+            </form>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/윤건희/ex1/src/input.css b/윤건희/ex1/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/윤건희/ex1/src/output.css b/윤건희/ex1/src/output.css
@@ -0,0 +1,51 @@
+/* Custom styles to ensure footer stays at the bottom */
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+#wrap {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  margin-top: auto;
+}
+
+/* Custom styles */
+.sidebar {
+  background-color: #f5f5f5; /* Light gray background */
+  padding: 1rem; /* Same as ml-3 */
+}
+
+.main-content {
+  background-color: #ffffff; /* White background */
+}
+
+.add-book-btn {
+  background-color: #000000; /* Black background */
+  color: #ffffff; /* White text */
+}
+
+.bookmark-menu {
+  background-color: #d9f7be; /* Light green background */
+}
+
+.bookmark-menu a {
+  color: #00bfae; /* Green text */
+}
+<nav class="bg-white shadow-lg border-bottom">
+    <div class="max-w-7xl mx-auto px-4">
+        <div class="flex justify-between items-center">
+            <div class="flex space-x-4">
+                <a href="#" class="py-5 px-3 text-green-600 bg-green-100 hover:text-green-800 rounded-md">BookMark</a>
+            </div>
+            <div class="flex items-center space-x-4 ml-auto">
+                <a href="https://github.com/gxxhxx0224?tab=repositories" class="py-5 px-3 text-gray-700 hover:text-gray-900">GitHub Repos</a>
+                <img src="https://via.placeholder.com/150" alt="User Image" class="w-10 h-10 rounded-full"> <!-- Replace with actual image URL -->
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/윤건희/ex1/tailwind.config.js b/윤건희/ex1/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/윤건희/ex10.test.ts b/윤건희/ex10.test.ts
@@ -1,4 +1,32 @@
 import { ArrayList } from './ex10';
-console.log('🚀  ArrayList:', ArrayList);
+import assert from 'assert';
 
-// 여기에 테스트코드를 작성하세요.
+const alist = new ArrayList(1, 2);
+
+alist.add(3);
+alist.add(5, 1);
+alist.removeByValue(2);
+alist.add(22, 1);
+alist.add(33, 1);
+
+console.log(alist.toString());  //ArrayList(4) { 1, 33, 22, 5 }
+
+alist.set(1, 300);
+assert.strictEqual(alist.get(1), 300);
+assert.strictEqual(alist.get(2), 22);
+assert.strictEqual(alist.size(), 4);
+
+assert.strictEqual(alist.indexOf(300), 1); //인덱스 1에 300
+assert.strictEqual(alist.contains(300), true);  //300 존재
+assert.strictEqual(alist.contains(301), false); //301은 x
+
+assert.strictEqual(alist.isEmpty, false);  //배열에 요소가 존재 
+assert.strictEqual(alist.peek, 5); //마지막 요소=5
+
+console.log(alist.toArray());  //[1, 300, 22, 5]
+
+assert.strictEqual(alist.iterator().next().value, 5);
+alist.clear();  // 모두 제거
+
+assert.strictEqual(alist.isEmpty, true);  //배열이 비었음
+console.log('All tests passed.');
diff --git a/윤건희/ex10.ts b/윤건희/ex10.ts
@@ -1,71 +1,30 @@
-class Collection<T> {
-  private readonly arr = Array<T>();
+import { ArrayList } from './ex10';
+import assert from 'assert';
 
-  constructor(...args: T[]) {
-    this.arr.push(...args);
-  }
+const alist = new ArrayList(1, 2);
+alist.add(3);
+alist.add(5, 1);
+alist.removeByValue(2);
+alist.add(22, 1);
+alist.add(33, 1);
+console.log(alist.toString());  // ArrayList(4) { 1, 33, 22, 5 }
 
-  get _arr() {
-    return this.arr;
-  }
+alist.set(1, 300);
+assert.strictEqual(alist.get(1), 300);
+assert.strictEqual(alist.get(2), 22);
+assert.strictEqual(alist.size(), 4);
 
-  push(...args: T[]) {
-    this.arr.push(...args);
-    return this.arr;
-  }
+assert.strictEqual(alist.indexOf(300), 1);
+assert.strictEqual(alist.contains(300), true);
+assert.strictEqual(alist.contains(301), false);
 
-  get peek(): T | undefined {
-    return this.isQueue() ? this.arr[0] : this.arr.at(-1);
-  }
+assert.strictEqual(alist.isEmpty, false);
+assert.strictEqual(alist.peek, 5);
 
-  get poll(): T | undefined {
-    return this.isQueue() ? this.arr.shift() : this.arr.pop();
-  }
+console.log(alist.toArray());
 
-  remove() {
-    return this.poll;
-  }
+assert.strictEqual(alist.iterator().next().value, 5);  // 이제 오류 없이 반복기에서 첫 요소를 확인 가능
+alist.clear();
 
-  get length() {
-    return this.arr.length;
-  }
-
-  get isEmpty() {
-    return !this.arr.length;
-  }
-
-  clear() {
-    this.arr.length = 0;
-  }
-
-  iterator() {
-    return this[Symbol.iterator]();
-  }
-
-  // [1, 2, 3]
-  *[Symbol.iterator]() {
-    for (let i = this.length - 1; i >= 0; i -= 1) {
-      yield this.toArray()[i];
-    }
-  }
-
-  toArray() {
-    return this.isQueue() ? this.arr.toReversed() : this.arr;
-  }
-
-  print() {
-    console.log(`<${this.constructor.name}: [${this.toArray()}]>`);
-  }
-
-  private isQueue() {
-    return this instanceof Queue;
-  }
-}
-
-class Stack<T> extends Collection<T> {}
-class Queue<T> extends Collection<T> {}
-
-// ArrayList 클래스를 작성하세요.
-class ArrayList<T> extends Collection<T> {}
-
-export { Stack, Queue, ArrayList };
+assert.strictEqual(alist.isEmpty, true);
+console.log('All tests passed.');