GO-SOPT-WEB · simeunseo · May 4, 2023 · Apr 14, 2023 · Apr 14, 2023 · Apr 16, 2023
diff --git a/week2/assign1/addCard/index.html b/week2/assign1/addCard/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>✠ 마라명가 ✠ : 새 상품 추가</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <a href="../home"><h1>✠ 마라명가 ✠</h1></a>
+      <button type="button" id="header__button">
+        <i class="fa-solid fa-bars"></i>
+      </button>
+      <nav id="header__menu">
+        <h1>메뉴</h1>
+        <div id="header__menu__list">
+          <a href="../home">홈</a>
+          <a href="./">새 상품 추가</a>
+          <a href="#">찜 목록</a>
+        </div>
+      </nav>
+    </header>
+    <main>
+      <section class="heading">
+        <h1>당신이 원하는 그 어떤 재료도</h1>
+        <h1>마라명가에서는 가능합니다.</h1>
+      </section>
+      <section class="form-container">
+        <form id="add-card-form" method="post" enctype="multipart/form-data">
+          <span>
+            <label for="name"><h4>재료 이름</h4></label>
+            <input required type="text" name="name" id="name" />
+          </span>
+          <hr />
+          <span>
+            <label for="hashtag"><h4>해시태그</h4></label>
+            <input
+              required
+              placeholder="쉼표(,)로 구분"
+              type="text"
+              name="hashtag"
+              id="hashtag"
+            />
+          </span>
+          <hr />
+          <span>
+            <div class="button">
+              <label for="image"><h4>이미지 선택</h4></label>
+            </div>
+            <input
+              required
+              type="file"
+              id="image"
+              name="image"
+              accept="image/*"
+            />
+          </span>
+          <hr />
+          <span>
+            <label><h4>이미지 미리보기</h4></label>
+            <img
+              src="https://skg1891.cafe24.com/wp-content/uploads/2013/11/dummy-image-portrait.jpg"
+              id="image-thumbnail"
+            />
+          </span>
+          <hr />
+          <span>
+            <label for="cateogry"><h4>카테고리</h4></label>
+            <select required name="category">
+              <option value="">=== 선택 ===</option>
+              <option value="veg">채소</option>
+              <option value="mush">버섯</option>
+              <option value="tofu">두부</option>
+              <option value="etc">기타</option>
+            </select>
+          </span>
+          <button type="submit"><h2>재료 추가</h2></button>
+        </form>
+      </section>
+    </main>
+    <script
+      src="https://kit.fontawesome.com/6fbcf91afd.js"
+      crossorigin="anonymous"
+    ></script>
+    <script defer type="module" src="./script.js"></script>
+  </body>
+</html>
diff --git a/week2/assign1/addCard/script.js b/week2/assign1/addCard/script.js
@@ -0,0 +1,37 @@
+//select option의 vlaue를 카테고리명으로 변환하기 위한 객체
+const CATEGORY_NAME = {
+  veg: "채소",
+  mush: "버섯",
+  tofu: "두부",
+  etc: "기타",
+};
+
+const imageInput = document.getElementById("image");
+const imageThumbNail = document.getElementById("image-thumbnail");
+imageInput.addEventListener("input", () => {
+  const reader = new FileReader();
+  reader.addEventListener("load", () => {
+    imageThumbNail.src = reader.result;
+  });
+  reader.readAsDataURL(imageInput.files[0]);
+});
+
+const form = document.getElementById("add-card-form");
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const name = e.target.name.value;
+  const hashTags = e.target.hashtag.value.replace(/ /g, "").split(",");
+  const category = CATEGORY_NAME[e.target.category.value];
+
+  let localStorageData = JSON.parse(localStorage.getItem("item_data"));
+  localStorageData.push({
+    category: category,
+    name: name,
+    tags: hashTags,
+    img: imageThumbNail.src,
+  });
+
+  localStorage.setItem("item_data", JSON.stringify(localStorageData));
+
+  location.replace("../home");
+});
diff --git a/week2/assign1/addCard/style.css b/week2/assign1/addCard/style.css
@@ -0,0 +1,231 @@
+@import url("../common/reset.css");
+
+/* CSS 전역 변수 선언 */
+:root {
+  --main-color: rgb(141, 19, 19);
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* animation */
+@keyframes fadeInUp {
+  0% {
+    opacity: 0.2;
+    transform: translateY(20%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0.2;
+    transform: translateX(20%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+
+/* font setting */
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "EBSHunminjeongeumSBA";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSHunminjeongeum.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  font-family: "Pretendard-Regular", sans-serif;
+}
+
+h1 {
+  font-family: EBSHunminjeongeumSBA;
+  font-size: 2rem;
+}
+h2 {
+  font-family: EBSHunminjeongeumSBA;
+  font-size: 1.8rem;
+}
+h3,
+nav > a {
+  font-size: 1.3rem;
+}
+small {
+  font-size: 0.8rem;
+}
+
+/* header */
+header > a {
+  color: white;
+}
+header {
+  padding: 2rem;
+  width: -webkit-fill-available;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  z-index: 2;
+
+  background-color: var(--main-color);
+  color: white;
+}
+
+#header__menu {
+  display: none;
+  box-shadow: -1rem 0 1rem var(--shadow-color);
+  animation: fadeInRight 0.7s;
+}
+
+#header__button {
+  width: 2rem;
+  height: 2rem;
+}
+
+#header__button i {
+  color: white;
+  font-size: 1.2rem;
+}
+
+#header__button:hover + #header__menu,
+#header__menu:hover {
+  display: block;
+}
+
+#header__menu {
+  background-color: white;
+  color: black;
+  height: 100vh;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 2rem;
+  width: 10rem;
+}
+
+#header__menu > h1 {
+  padding-bottom: 2rem;
+  font-weight: bold;
+}
+
+#header__menu__list {
+  display: flex;
+  flex-direction: column;
+}
+
+#header__menu a {
+  color: black;
+  padding-bottom: 1.5rem;
+  cursor: pointer;
+}
+
+#header__menu a:hover {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--main-color);
+  text-underline-offset: 0.3rem;
+}
+
+/* main */
+
+main {
+  padding-top: 8rem;
+  text-align: center;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.heading {
+  padding: 1rem 0;
+}
+
+/* form */
+
+.form-container {
+  background-color: white;
+  color: black;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 3rem;
+  margin: 2rem 6rem;
+
+  border-radius: 1rem;
+
+  animation: fadeInUp 1s;
+}
+
+form {
+  width: 35vw;
+}
+
+form > span {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+}
+
+span > label {
+  margin-right: 1rem;
+}
+
+form input[type="file"] {
+  width: 10rem;
+}
+
+form > button {
+  background-color: var(--main-color);
+  color: white;
+
+  border-radius: 1rem;
+
+  padding: 1rem 0;
+  margin-top: 2rem;
+
+  width: 100%;
+}
+
+form > button > h2 {
+  font-size: 1.3rem;
+}
+
+form > button:hover {
+  background-color: black;
+  transition-duration: 0.3s;
+}
+
+form > hr {
+  margin: 1rem 0;
+  border: 0.01rem solid var(--shadow-color);
+}
+
+#image-thumbnail {
+  width: 14rem;
+}
+
+input,
+select {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 0.1rem solid var(--shadow-color);
+}