kimsi519 · Choeseonjeong · Sep 12, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,5 +11,12 @@
     "TS"
   ],
   "author": "indiflex",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "tailwindcss": "^3.4.11"
+  },
+  "dependencies": {
+    "@types/node": "^22.5.4",
+    "typescript": "^5.6.2"
+  }
 }
diff --git a/정중일/ex2.js b/정중일/ex2.js
@@ -1,4 +1,4 @@
 // range 함수를 작성하세요.
-const range = (start, end, step = start > end ? -1 : 1) => { };
+const range = (start, end, step = start > end ? -1 : 1) => {};
 
 module.exports = { range };
diff --git a/정중일/ex2.test.js b/정중일/ex2.test.js
@@ -1,5 +1,5 @@
-const assert = require('assert');
-const { range } = require('./ex2');
+const assert = require("assert");
+const { range } = require("./ex2");
 
 assert.deepStrictEqual(range(1, 10, 1), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 assert.deepStrictEqual(range(1, 10, 2), [1, 3, 5, 7, 9]);

diff --git a/정중일/ex5.js b/정중일/ex5.js
@@ -1,3 +1,46 @@
-module.exports = {
-  searchByKoreanInitialSound: (data, firstSounds) => {},
-};
+const CHO_SEONG = [
+  "ㄱ",
+  "ㄲ",
+  "ㄴ",
+  "ㄷ",
+  "ㄸ",
+  "ㄹ",
+  "ㅁ",
+  "ㅂ",
+  "ㅃ",
+  "ㅅ",
+  "ㅆ",
+  "ㅇ",
+  "ㅈ",
+  "ㅉ",
+  "ㅊ",
+  "ㅋ",
+  "ㅌ",
+  "ㅍ",
+  "ㅎ",
+];
+
+function getInitialSound(char) {
+  const code = char.charCodeAt(0) - 44032; // '가'의 유니코드 시작점
+  if (code < 0 || code > 11171) return char; // 한글이 아닌 경우 그대로 반환
+  const cho = Math.floor(code / 588); // 초성의 인덱스 계산
+  return CHO_SEONG[cho];
+}
+
+function searchByKoreanInitialSound(data, firstSounds) {
+  // 초성 정규식을 만들기 위해 패턴을 생성
+  const regex = new RegExp(
+    firstSounds
+      .split("")
+      .map((sound) => sound.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) // 특수문자 이스케이프
+      .join(".*") // 초성 사이의 패턴을 허용하기 위해 ".*" 추가
+  );
+
+  // 각 문자열의 초성 추출 후 정규식으로 검사
+  return data.filter((word) => {
+    const initialSound = [...word].map(getInitialSound).join("");
+    return regex.test(initialSound); // 초성 문자열과 패턴 비교
+  });
+}
+
+module.exports = { searchByKoreanInitialSound };
diff --git a/최선정/ex1/book-edit.html b/최선정/ex1/book-edit.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <title>BookMark Edit</title>
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif; 
+        }
+        .blue-filter {
+            filter: brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(497%) hue-rotate(175deg) brightness(92%) contrast(90%);
+        }
+        .hover-bright:hover {
+            filter: brightness(85%);
+        }
+        .hover-blue:hover {
+            background-color: #3B82F6; 
+            color: white; 
+        }
+    </style>
+</head>
+<body class="bg-gray-50 h-screen flex flex-col">
+    <header class="flex justify-between items-center p-4 bg-white shadow-md border-b" id="header">
+        <div class="flex items-center cursor-pointer" onclick="location.href='book-edit.html'">
+            <img src="img/book.png" alt="Book Icon" class="w-6 h-6 mr-2 blue-filter">
+            <div class="text-2xl font-bold text-blue-400">BookMark</div>
+        </div>
+        <div class="space-x-4" id="nav-links">
+            <a href="https://github.com/Choeseonjeong" target="_blank" class="text-gray-500 hover:text-blue-400">Github Repo.</a>
+            <a href="register.html" class="text-gray-500 hover:text-blue-400">SignUp</a>
+            <a href="#" class="text-gray-500 hover:text-blue-400">SignIn</a>
+        </div>
+    </header>
+
+    <main class="flex-grow flex p-1">
+        <div class="w-full max-w-md bg-white shadow rounded-lg p-6 ml-4 mt-4 mb-4">
+            <input type="text" placeholder="https://naver.com" class="w-full border rounded p-2 mb-4">
+            <div class="flex items-center mb-4">
+                <input type="checkbox" id="auto-delete" class="mr-2">
+                <label for="auto-delete" class="text-gray-600">이동 시 자동 삭제</label>
+            </div>
+            <div class="flex justify-end space-x-10 mb-4">
+                <button class="bg-white p-2 rounded shadow hover-bright">
+                    <img src="img/back.png" alt="back" class="w-6 h-6">
+                </button>
+                <button class="bg-white p-2 rounded shadow hover-bright">
+                    <img src="img/store.png" alt="store" class="w-6 h-6">
+                </button>
+            </div>
+            <p class="text-gray-600 mt-4 text-center text-lg">There is no marks.</p>
+        </div>
+        <div class="flex items-start p-6">
+            <button class="mt-4 w-full bg-blue-100 text-blue-500 py-2 px-5 rounded hover-blue transition">+ Add Book</button>
+        </div>
+    </main>
+    <footer class="relative bottom-0 w-full bg-white text-center p-4 border-t shadow-md rounded-t-lg">
+        &copy; Hanaro 2024
+    </footer>
+</body>
+</html>
diff --git a/최선정/ex1/img/back.png b/최선정/ex1/img/back.png
diff --git a/최선정/ex1/img/book.png b/최선정/ex1/img/book.png
diff --git a/최선정/ex1/img/ex1.jpg b/최선정/ex1/img/ex1.jpg
diff --git a/최선정/ex1/img/ex2.jpg b/최선정/ex1/img/ex2.jpg
diff --git a/최선정/ex1/img/ex3.jpg b/최선정/ex1/img/ex3.jpg
diff --git a/최선정/ex1/img/kakao.png b/최선정/ex1/img/kakao.png
diff --git a/최선정/ex1/img/naver.png b/최선정/ex1/img/naver.png
diff --git a/최선정/ex1/img/pro.jpg b/최선정/ex1/img/pro.jpg
diff --git a/최선정/ex1/img/store.png b/최선정/ex1/img/store.png
diff --git a/최선정/ex1/img/youtube.png b/최선정/ex1/img/youtube.png
diff --git a/최선정/ex1/index.html b/최선정/ex1/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <title>Index</title>
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .pastel-filter {
+            filter: brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(497%) hue-rotate(175deg) brightness(92%) contrast(90%);
+        }
+        .hover-blue:hover {
+            background-color: #3B82F6; 
+            color: white; 
+        }
+    </style>
+</head>
+<body class="bg-gray-50 h-screen flex flex-col">
+    <header class="flex justify-between items-center p-4 bg-white shadow-md border-b" id="header">
+        <div class="flex items-center cursor-pointer" onclick="location.href='book-edit.html'">
+            <img src="img/book.png" alt="Book Icon" class="w-6 h-6 mr-2 pastel-filter">
+            <div class="text-2xl font-bold text-blue-400">BookMark</div> 
+        </div>
+        <div class="flex items-center space-x-4" id="nav-links">
+            <span class="text-gray-500">Github Repo.</span>
+            <img src="img/pro.jpg" alt="Profile" class="w-10 h-10 rounded-full"> 
+        </div>
+    </header>
+
+    <main class="flex-grow p-8 flex space-x-6">
+        <div class="w-1/2 bg-white shadow-lg rounded-lg p-6">
+            <h2 class="font-bold text-xl mb-4 text-blue-400">BookMark BookMar...</h2> 
+            <ul class="space-y-4">
+                <li class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 transition">
+                    <img src="img/ex1.jpg" class="mr-4 w-10 h-10 rounded-full" alt="Logo">
+                    <div class="flex-grow">
+                        <p class="text-gray-700 font-semibold">55BookMark Book...</p>
+                        <p class="text-gray-500 text-sm">55년만의 북마크나만의...</p>
+                    </div>
+                    <button class="ml-auto text-gray-400 hover:text-blue-400 transition">⚙️</button>
+                </li>
+                <li class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 transition">
+                    <img src="img/naver.png" class="mr-4 w-10 h-10 rounded-full" alt="Logo">
+                    <div class="flex-grow">
+                        <p class="text-gray-700 font-semibold">네이버</p>
+                        <p class="text-gray-500 text-sm">네이버 메인에서 다양한...</p>
+                    </div>
+                    <button class="ml-auto text-gray-400 hover:text-blue-400 transition">⚙️</button>
+                </li>
+                <li class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 transition">
+                    <img src="img/kakao.png" class="mr-4 w-10 h-10 rounded-full" alt="Logo">
+                    <div class="flex-grow">
+                        <p class="text-gray-700 font-semibold">Kakao</p>
+                        <p class="text-gray-500 text-sm">기술과 사람으로 더 나은...</p>
+                    </div>
+                    <button class="ml-auto text-gray-400 hover:text-blue-400 transition">⚙️</button>
+                </li>
+                <li class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 transition">
+                    <img src="img/youtube.png" class="mr-4 w-10 h-10 rounded-full" alt="Logo">
+                    <div class="flex-grow">
+                        <p class="text-gray-700 font-semibold">YouTube</p>
+                        <p class="text-gray-500 text-sm">YouTube에서 마음에 ...</p>
+                    </div>
+                    <button class="ml-auto text-gray-400 hover:text-blue-400 transition">⚙️</button>
+                </li>
+            </ul>
+            <div class="flex justify-end mt-6">
+                <button class="w-1/2 bg-blue-100 text-blue-500 py-3 rounded-lg shadow hover-blue transition">+ Add Mark</button>
+            </div>
+        </div>
+
+        <div class="w-1/2 bg-white shadow-lg rounded-lg p-6">
+            <h2 class="font-bold text-xl mb-4 text-blue-400">Study</h2>
+            <ul class="space-y-4">
+                <li class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 transition">
+                    <img src="img/ex2.jpg" class="mr-4 w-10 h-10 rounded-full" alt="Logo">
+                    <div class="flex-grow">
+                        <p class="text-gray-700 font-semibold">Tailwind CSS - ...</p>
+                        <p class="text-gray-500 text-sm">Tailwind CSS is a ut...</p>
+                    </div>
+                    <button class="ml-auto text-gray-400 hover:text-blue-400 transition">⚙️</button>
+                </li>
+                <li class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 transition">
+                    <img src="img/ex3.jpg" class="mr-4 w-10 h-10 rounded-full" alt="Logo">
+                    <div class="flex-grow">
+                        <p class="text-gray-700 font-semibold">Create Next App - ...</p>
+                        <p class="text-gray-500 text-sm">Generated by creat...</p>
+                    </div>
+                    <button class="ml-auto text-gray-400 hover:text-blue-400 transition">⚙️</button>
+                </li>
+            </ul>
+            <div class="flex justify-end mt-6">
+                <button class="w-1/2 bg-blue-100 text-blue-500 py-3 rounded-lg shadow hover-blue transition">+ Add Mark</button>
+            </div>
+        </div>
+    </main>
+
+    <footer class="relative bottom-0 w-full bg-white text-center p-4 border-t shadow-md rounded-t-lg">
+        &copy; Hanaro 2024
+    </footer>
+</body>
+</html>
diff --git a/최선정/ex1/register.html b/최선정/ex1/register.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <title>Register</title>
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif; 
+        }
+        .blue-filter {
+            filter: brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(497%) hue-rotate(175deg) brightness(92%) contrast(90%);
+        }
+        .hover-blue:hover {
+            background-color: #3B82F6; 
+            color: white;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 h-screen flex flex-col">
+    <header class="flex justify-between items-center p-4 bg-white shadow-md border-b" id="header">
+        <div class="flex items-center cursor-pointer" onclick="location.href='book-edit.html'">
+            <img src="img/book.png" alt="Book Icon" class="w-6 h-6 mr-2 blue-filter">
+            <div class="text-2xl font-bold text-blue-400">BookMark</div>
+        </div>
+        <div class="space-x-4" id="nav-links">
+            <a href="https://github.com/Choeseonjeong" target="_blank" class="text-gray-500 hover:text-blue-400">Github Repo.</a>
+            <a href="register.html" class="text-gray-500 hover:text-blue-400">SignUp</a>
+            <a href="#" class="text-gray-500 hover:text-blue-400">SignIn</a>
+        </div>
+    </header>
+
+    <main class="flex-grow p-8 w-full max-w-2xl mx-auto bg-white mt-8 mb-16 rounded-lg shadow-lg">
+        <h1 class="text-5xl mb-8 text-center text-blue-500">Sign Up</h1>
+        <div class="mb-4">
+            <label for="nickname" class="block mb-1 font-semibold text-gray-600">Nickname</label>
+            <input type="text" id="nickname" placeholder="nickname..." class="w-full border rounded p-2">
+        </div>
+        <div class="mb-4">
+            <label for="email" class="block mb-1 font-semibold text-gray-600">Email</label>
+            <input type="email" id="email" placeholder="email..." class="w-full border rounded p-2">
+        </div>
+        <div class="mb-4">
+            <label for="password" class="block mb-1 font-semibold text-gray-600">Password</label>
+            <input type="password" id="password" placeholder="password..." class="w-full border rounded p-2">
+        </div>
+        <div class="mb-6">
+            <label for="passwordConfirm" class="block mb-1 font-semibold text-gray-600">Password Confirm</label>
+            <input type="password" id="passwordConfirm" placeholder="password confirm..." class="w-full border rounded p-2">
+        </div>
+        <button class="w-full bg-blue-100 text-blue-500 py-2 rounded hover-blue transition" onclick="redirectToIndex()">Register</button>
+    </main>
+
+    <footer class="relative bottom-0 w-full bg-white text-center p-4 border-t shadow-md rounded-t-lg">
+        &copy; Hanaro 2024
+    </footer>
+
+    <script>
+        function redirectToIndex() {
+            window.location.href = 'index.html'; 
+        }
+    </script>
+</body>
+</html>
diff --git a/최선정/ex10.test.ts b/최선정/ex10.test.ts
@@ -1,4 +1,46 @@
 import { ArrayList } from './ex10';
+
 console.log('🚀  ArrayList:', ArrayList);
+const alist = new ArrayList<number>([1, 2]); 
+
+console.log(alist.toString()); 
+
+alist.add(3);
+console.log(alist.toString()); 
+
+alist.add(5, 1);
+console.log(alist.toString()); 
+
+alist.removeValue(2);
+console.log(alist.toString()); 
+
+alist.add(22, 1);
+console.log(alist.toString()); 
+
+alist.add(33, 1);
+console.log(alist.toString()); 
+
+console.log(alist.get(2)); 
+
+console.log(alist.size()); 
+
+console.log(alist.indexOf(300)); 
+alist.set(1, 300); 
+console.log(alist.indexOf(300)); 
+
+console.log(alist.contains(300)); 
+console.log(alist.contains(301)); 
+
+console.log(alist.isEmptyList()); 
+
+console.log(alist.peek); 
+
+console.log(alist.toArray());
+
+const iterator = alist.iterator();
+console.log(iterator.next()); 
+console.log(iterator.next()); 
 
-// 여기에 테스트코드를 작성하세요.
+alist.clear();
+console.log(alist.toString());
+console.log(alist.isEmptyList());