Skip to content

[프론트엔드 개발 기초] 과제 제출합니다. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kkx7787 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[프론트엔드 개발 기초] 과제 제출합니다. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d500e16
Solve ex2, ex3, ex4
Sep 12, 2024
29a7eef
Refactor ex3, ex4 && Solve ex5, ex6, ex7, ex8
Sep 12, 2024
88d2722
Implement ex1
Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,13 @@
"TS"
],
"author": "indiflex",
"license": "ISC"
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.4.11",
"ts-node": "^10.9.2",
"typescript": "^5.6.2"
},
"dependencies": {
"@types/node": "^22.5.4"
}
}
70 changes: 70 additions & 0 deletions 한성민/ex1/book-edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script
src="https://kit.fontawesome.com/b238b55b06.js"
crossorigin="anonymous"
></script>
<link href="dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<!-- Container -->
<div class="max-w-3xl mx-auto p-4">
<!-- Header -->
<header class="flex justify-between mb-6 border-b-2 border-gray-400 pb-4">
<div class="flex rounded-lg bg-gray-300">
<i class="mt-5 mr-3 ml-3 fa-solid fa-bookmark text-green-500"></i>
<h1 class="mt-2 mr-3 text-3xl font-bold text-green-500 mb-2">BookMark</h1>
</div>
<div class="flex mt-3 justify-between">
<a href="https://github.com/kkx7787" target="_blank" class="mr-4 text-gray-600 hover:text-black">
<i class="fa-brands fa-github text-2xl"></i>
</a>
<div>
<a href="#" class="bg-blue-500 text-white hover:text-black px-4 py-2 rounded-lg mr-2">Sign In</a>
<a href="#" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Sign Up</a>
</div>
</div>
</header>
<!-- Bookmark List -->
<section class="flex bg-white rounded-lg shadow-md p-6">
<aside class="w-2/5 bg-gray-200 h-screen p-4">
<label for="url-input" class="block text-gray-700 mb-2">Enter URL</label>
<input
type="text"
id="url-input"
value="https://naver.com"
class="w-full p-2 mb-4 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
/>
<!-- Auto-delete Checkbox -->
<div class="flex items-center mb-4">
<input
type="checkbox"
id="auto-delete"
class="mr-2 h-4 w-4 text-blue-600"
/>
<label for="auto-delete" class="text-gray-700">Auto-delete after navigation</label>
</div>
<!-- Buttons (Refresh & Save) -->
<div class="flex justify-end">
<button class="bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 flex items-center mr-2">
<i class="fa-solid fa-rotate mr-2"></i> Refresh
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 flex items-center">
<i class="fa-solid fa-save mr-2"></i> Save
</button>
</div>
<p class="flex justify-center mt-2 font-bold">There is no marks</p>
</aside>
<h2 class="text-2xl ml-2 font-semibold mb-4">Bookmarks</h2>
</section>
<footer class="flex justify-center mt-2">
ⓒ Hanaro 2024
</footer>
</div>
</body>
</html>
151 changes: 151 additions & 0 deletions 한성민/ex1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script
src="https://kit.fontawesome.com/b238b55b06.js"
crossorigin="anonymous"
></script>
<link href="dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<!-- Container -->
<div class="h-screen max-w-3xl mx-auto p-4">
<!-- Header -->
<header class="flex justify-between mb-6 border-b-2 border-gray-400 pb-4">
<div class="flex rounded-lg bg-gray-300">
<i class="mt-5 mr-3 ml-3 fa-solid fa-bookmark text-green-500"></i>
<h1 class="mt-2 mr-3 text-3xl font-bold text-green-500 mb-2">BookMark</h1>
</div>
<div class="flex mt-3 justify-between">
<a href="https://github.com/kkx7787" target="_blank" class="mr-4 text-gray-600 hover:text-black">
<i class="fa-brands fa-github text-2xl"></i>
</a>
<div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mt-0.5">
<!-- Round User Icon -->
<i class="fa-solid fa-user text-xl text-gray-500"></i>
</div>
</div>
</header>
<!-- Bookmark List -->
<!-- Bookmark & Study List -->
<section class="flex justify-between gap-2 bg-white rounded-lg shadow-md p-6">

<!-- Bookmark Section -->
<aside class="w-1/2 bg-gray-200 h-screen p-4">
<h2 class="text-xl font-bold mb-4">Bookmarks</h2>

<!-- Bookmark Items -->
<div class="space-y-4">
<!-- Bookmark 1 -->
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="bookmark image" class="w-12 h-12 rounded mr-4">
<div>
<h3 class="text-lg font-semibold">Bookmark 1</h3>
<p class="text-sm text-gray-500">Description for bookmark 1</p>
</div>
</div>
<button class="text-blue-500 hover:text-blue-600">
<i class="fa-solid fa-pen"></i> <!-- 수정 아이콘 -->
</button>
</div>
<!-- Bookmark 2 -->
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="bookmark image" class="w-12 h-12 rounded mr-4">
<div>
<h3 class="text-lg font-semibold">Bookmark 2</h3>
<p class="text-sm text-gray-500">Description for bookmark 2</p>
</div>
</div>
<button class="text-blue-500 hover:text-blue-600">
<i class="fa-solid fa-pen"></i>
</button>
</div>
<!-- Bookmark 3 -->
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="bookmark image" class="w-12 h-12 rounded mr-4">
<div>
<h3 class="text-lg font-semibold">Bookmark 3</h3>
<p class="text-sm text-gray-500">Description for bookmark 3</p>
</div>
</div>
<button class="text-blue-500 hover:text-blue-600">
<i class="fa-solid fa-pen"></i>
</button>
</div>
<!-- Bookmark 4 -->
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="bookmark image" class="w-12 h-12 rounded mr-4">
<div>
<h3 class="text-lg font-semibold">Bookmark 4</h3>
<p class="text-sm text-gray-500">Description for bookmark 4</p>
</div>
</div>
<button class="text-blue-500 hover:text-blue-600">
<i class="fa-solid fa-pen"></i>
</button>
</div>
<!-- Add New Bookmark Button -->
<div class="mb-6">
<button class="bg-green-500 text-white px-6 py-2 rounded-lg shadow hover:bg-green-600">
+ Add Mark
</button>
</div>
</div>
</aside>

<!-- Study Section -->
<aside class="w-1/2 bg-gray-200 h-screen p-4">
<h2 class="text-xl font-bold mb-4">Study</h2>

<!-- Study Items -->
<div class="space-y-4">
<!-- Study 1 -->
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="study image" class="w-12 h-12 rounded mr-4">
<div>
<h3 class="text-lg font-semibold">Study 1</h3>
<p class="text-sm text-gray-500">Description for study 1</p>
</div>
</div>
<button class="text-blue-500 hover:text-blue-600">
<i class="fa-solid fa-pen"></i>
</button>
</div>
<!-- Study 2 -->
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://via.placeholder.com/50" alt="study image" class="w-12 h-12 rounded mr-4">
<div>
<h3 class="text-lg font-semibold">Study 2</h3>
<p class="text-sm text-gray-500">Description for study 2</p>
</div>
</div>
<button class="text-blue-500 hover:text-blue-600">
<i class="fa-solid fa-pen"></i>
</button>
</div>
<!-- Add New Bookmark Button -->
<div class="mb-6">
<button class="bg-green-500 text-white px-6 py-2 rounded-lg shadow hover:bg-green-600">
+ Add Mark
</button>
</div>
</div>
</aside>

</section>
<footer class="flex justify-center mt-2">
ⓒ Hanaro 2024
</footer>
</div>
</body>
</html>
77 changes: 77 additions & 0 deletions 한성민/ex1/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script
src="https://kit.fontawesome.com/b238b55b06.js"
crossorigin="anonymous"
></script>
<link href="dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<!-- Container -->
<div class="h-screen max-w-3xl mx-auto p-4">
<!-- Header -->
<header class="flex justify-between mb-6 border-b-2 border-gray-400 pb-4">
<div class="flex rounded-lg bg-gray-300">
<i class="mt-5 mr-3 ml-3 fa-solid fa-bookmark text-green-500"></i>
<h1 class="mt-2 mr-3 text-3xl font-bold text-green-500 mb-2">BookMark</h1>
</div>
<div class="flex mt-3 justify-between">
<a href="https://github.com/kkx7787" target="_blank" class="mr-4 text-gray-600 hover:text-black">
<i class="fa-brands fa-github text-2xl"></i>
</a>
<!-- Container -->
<!-- Container for Round Icon -->
<div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mt-0.5">
<!-- Round User Icon -->
<i class="fa-solid fa-user text-xl text-gray-500"></i>
</div>
</div>
</header>
<!-- Bookmark List -->
<!-- Bookmark & Study List -->
<section class="flex justify-center bg-white rounded-lg shadow-md p-6">
<div class="px-10 border border-4 border-green-500 rounded-lg solid;">
<!-- Title -->
<h2 class="font-mono text-5xl text-center font-bold text-gray-800 mb-8 mt-4 ">Sign Up</h2>

<!-- Email Input -->
<div class="mb-4">
<label for="nickname" class="block text-lg font-semibold text-gray-700 mb-2">Nickname</label>
<input id="nickname" type="email" placeholder="Enter your nickname" class="w-96 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>

<!-- Email Input -->
<div class="mb-4">
<label for="email" class="block text-lg font-semibold text-gray-700 mb-2">Email</label>
<input id="email" type="email" placeholder="Enter your email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>

<!-- Password Input -->
<div class="mb-6">
<label for="password" class="block text-lg font-semibold text-gray-700 mb-2">Password</label>
<input id="password" type="password" placeholder="Enter your password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>

<!-- Password Confirm Input -->
<div class="mb-6">
<label for="password_confirm" class="block text-lg font-semibold text-gray-700 mb-2">Password Confirm</label>
<input id="password_confirm" type="password" placeholder="Enter your password again" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>

<!-- Register Button -->
<div class="flex justify-center">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg w-1/4 mb-4 ">Login</button>
</div>
</div>
</section>
<footer class="flex justify-center mt-2">
ⓒ Hanaro 2024
</footer>
</div>
</body>
</html>
3 changes: 3 additions & 0 deletions 한성민/ex1/src/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
8 changes: 8 additions & 0 deletions 한성민/ex1/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
27 changes: 25 additions & 2 deletions 한성민/ex2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,27 @@
// range 함수를 작성하세요.
const range = (start, end, step = start > end ? -1 : 1) => { };
const range = (start, end, step = start > end ? -1 : 1) => {
const result = [];
if (start === end) return [start];
if (end === undefined) {
step = 1;
if (start > 0) {
end = start;
start = 1;
} else if (start === 0) return [start];
else {
end = -1;
}
}

module.exports = { range };
if ((start < end && step === 0) || (start > end && step === 0)) return [start];
if ((start < end && step < 0) || (start > end && step > 0)) return [];

for (let i = start; (step > 0) ? i <= end : i >= end; i += step) {
i = Math.round(i * 10) / 10
result.push(i);
}

return result;
};

module.exports = {range};
14 changes: 13 additions & 1 deletion 한성민/ex3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
Array.prototype.sortBy = function (sortProp = '') {
return this;
const props = sortProp.split(','); // 정렬 요소 split

return this.slice().sort((a, b) => {
for (const prop of props) {
const [sortKey, order] = prop.split(':');
const direction = order === 'desc' ? -1 : 1;

if (a[sortKey] > b[sortKey]) return direction;
if (a[sortKey] < b[sortKey]) return -direction;
}
return 0; // 모든 정렬 기준이 동일하면 0 반환
});
};

6 changes: 3 additions & 3 deletions 한성민/ex3.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ const users = [lee, hong, kim];

assert.deepStrictEqual(users.sortBy('id'), [hong, kim, lee]);
assert.deepStrictEqual(users.sortBy('name:desc'), [lee, kim, hong]);
assert.deepStrictEqual(users.sortBy('dept:desc,city:asc'), [hong, lee, kim]);
assert.deepStrictEqual(users.sortBy('dept:desc,city:asc'), [lee, kim, hong]);
assert.deepStrictEqual(users.sortBy('dept:desc,city:desc'), [kim, lee, hong]);
assert.deepStrictEqual(users.sortBy('name:desc,id:,dept:desc'), [
kim,
lee,
kim,
hong,
]);
assert.deepStrictEqual(users.sortBy('dept:desc,id'), [hong, kim, lee]);
assert.deepStrictEqual(users.sortBy('dept:desc,id'), [kim, lee, hong]);
Loading