kyoungholee · kyoungholee · Jan 13, 2023 · Jan 13, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,5 +12,6 @@ module.exports = {
         "sourceType": "module"
     },
     "rules": {
+        "no-unused-vars": "off",
     }
 }
diff --git a/client/data/data.js b/client/data/data.js
@@ -0,0 +1,14 @@
+export function jujeobData(nickName){
+  return [
+    `대한민국 ${nickName} 보유국`,
+    `나 몰랐는데 ${nickName} 좋아하네`,
+    `${nickName} MBTI 검사하면 Cute나온다며`,
+    `${nickName}? 솔직히 거품 아닌가요? 언빌리 '버블'`,
+    `${nickName} 사진 보다가 심장 녹을까봐 냉동실에서 사진 보는 중이에요`,
+    `${nickName} 넌 뭐랄까.. 마치 베를린 같아. 왜냐하면 치명적인 독일 수도.`,
+    `${nickName} 그거 기억나요? 사람들 한테 ${nickName} 좋아하는 사람 손 접어 했더니 지구가 반으로 접힌거\n그거 겨우겨우 되돌렸잖아요 나 그 때 내 눈 앞에 브라질 있어서 깜짝 놀랐잖아`,
+    `${nickName}씨 예민한 질문일 수 도 있지만 너무 궁금해서 물어봅니다.\n${nickName}씨는 천국에서 쫓겨난 건가요 자발적으로 내려온 건가요\n아님 추락 사고 였나요?`,
+    `짜장면한테 ${nickName} 음악을 들려 줬더니 짜장면이 저절로 비벼졌습니다.`
+  ]
+}
+// 배열로 리턴한다. 
diff --git a/client/index.html b/client/index.html
@@ -5,13 +5,36 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./style.css" />
-    <script src="./main.js"></script>
-    <title>Document</title>
+    <script type="module" src="./main.js"></script>
+
+    <title>jujeob Generator</title>
   </head>
   <body>
-    <h1>
-      <span>hello</span>
-      <span>world</span>
-    </h1>
+    <div class="alert alert-error">제대로된 이름을 입력해주세요 !</div>
+    <div class="alert alert-success">클립보드에 복사 되었습니다 !</div>
+
+    <div class="container">
+      <h2>🤣 주접 생성기</h2>
+      <h3>주접 생성기를 통해 사랑을 전하세요</h3>
+
+      <form>
+        <label for="nameField"
+          >이름을 적어주세요 <span class="icon">👉</span></label
+        >
+        <input
+          type="text"
+          id="nameField"
+          placeholder="이름을 작성해주세요"
+          value=""
+        />
+
+        <input type="submit" value="주접 떨기" id="submit" />
+
+        <!-- 버튼 태그 레이어 -->
+        <div class="result">이름 작성 후 주접 떨기 버튼을 눌러주세요.</div>
+
+        <span class="notice"> 👆 클릭시 클립보드에 복사됩니다! 👆</span>
+      </form>
+    </div>
   </body>
 </html>
diff --git a/client/lib/dom/attr.js b/client/lib/dom/attr.js
@@ -0,0 +1,116 @@
+import { getNode } from "./getNode.js";
+import { typeError, syntaxError } from "../error"
+
+/* 
+
+// IIFE 패턴 
+
+const attr = (function(){
+  function getAttr(node,prop){
+    // node = '.first'
+    // prop = 'class'
+
+    if(typeof node === 'string'){
+      node = getNode(node);
+    }
+
+    return node.getAttribute(prop);
+
+  }
+
+
+
+  // computed property
+  function setAttr(node,prop,value){
+    // validation : 확인 
+    if(typeof node === 'string') node = getNode(node);
+    if(typeof prop !== 'string') throw new TypeError('setAttr 함수의 두 번째 인자는 문자 타입 이어야 합니다.')
+
+    if(prop.includes('data')){
+      let rest = prop.slice(5);
+      node.dataset[rest] = value;
+    }
+
+    if(!value) throw new SyntaxError('setAttr 함수의 세 번째 인자는 필수값입니다.')
+
+    node.setAttribute(prop,value);
+
+  }
+
+
+
+
+  // const attr = (node,prop,value) => !value ? getAttr(node,prop) : setAttr(node,prop,value);
+
+  function attr(node,prop,value){
+
+    // if(!value){
+    //   return getAttr(node,prop);
+    // }else{
+    //   setAttr(node,prop,value);
+    // }
+
+    return !value ? getAttr(node,prop) : setAttr(node,prop,value);
+
+
+  }
+
+  // incapsulation // 캡슐화 
+  // 정보 은닉 
+
+
+  return attr
+
+})()
+
+
+// incapsulation // 캡슐화
+// 정보 은닉
+
+
+attr()
+
+ */
+
+function getAttr(node, prop) {
+  // node = '.first'
+  // prop = 'class'
+
+  if (typeof node === 'string') {
+    node = getNode(node);
+  }
+
+  return node.getAttribute(prop);
+}
+
+// computed property
+function setAttr(node, prop, value) {
+  // validation : 확인
+  if (typeof node === 'string') node = getNode(node);
+  if (typeof prop !== 'string')
+    throw new TypeError(
+      'setAttr 함수의 두 번째 인자는 문자 타입 이어야 합니다.'
+    );
+
+  if (prop.includes('data')) {
+    let rest = prop.slice(5);
+    node.dataset[rest] = value;
+  }
+
+  if (!value)
+    throw new SyntaxError('setAttr 함수의 세 번째 인자는 필수값입니다.');
+
+  node.setAttribute(prop, value);
+}
+
+// const attr = (node,prop,value) => !value ? getAttr(node,prop) : setAttr(node,prop,value);
+
+export function attr(node, prop, value) {
+  // if(!value){
+  //   return getAttr(node,prop);
+  // }else{
+  //   setAttr(node,prop,value);
+  // }
+
+  return !value ? getAttr(node, prop) : setAttr(node, prop, value);
+}
diff --git a/client/lib/dom/bindEvent.js b/client/lib/dom/bindEvent.js
@@ -0,0 +1,19 @@
+import { getNode } from "./getNode.js";
+import { typeError, syntaxError } from "../error"
+
+
+export function bindEvent(node,type,handler){
+  if(typeof node === 'string'){
+    node = getNode(node);
+  }
+
+  if(!(/mouseenter|click|mousemove|mouseleave/g.test(type))){
+    typeError('bindEvent 함수의 두 번째 인자는 유효한 이벤트 타입 이어야 합니다.')
+  }
+
+
+  node.addEventListener(type,handler);
+
+  return ()=> node.removeEventListener(type,handler);
+
+}
diff --git a/client/lib/dom/clearContents.js b/client/lib/dom/clearContents.js
@@ -0,0 +1,6 @@
+import { getNode } from "./getNode.js";
+
+export function clearContents(node){
+  if(typeof node === 'string') node = getNode(node);
+  node.textContent = '';
+}
diff --git a/client/lib/dom/css.js b/client/lib/dom/css.js
@@ -0,0 +1,88 @@
+import { getNode } from "./getNode.js";
+import { typeError, syntaxError } from "../error"
+
+
+
+export function addClass(node,className){
+
+  if(typeof node === 'string') node = getNode(node);
+
+  if(typeof className !== 'string'){
+    typeError('addClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.');
+  }
+
+  node.classList.add(className)
+
+}
+
+// 변경하기 : 대상의 클래스를 지운다.
+export function removeClass(node,className){
+  if(typeof node === 'string') node = getNode(node);
+
+  if(!className){
+    node.className = ''
+    return;
+  }
+
+  if(typeof className !== 'string'){
+    typeError('removeClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.');
+  }
+
+  node.classList.remove(className)  
+}
+
+
+export function toggleClass(node,className){
+  if(typeof node === 'string') node = getNode(node);
+  if(typeof className !== 'string'){
+    typeError('toggleClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.');
+  }
+
+  node.classList.toggle(className)
+}
+
+
+
+
+
+
+function getCss(node,prop){
+  if(typeof node === 'string'){
+    node = getNode(node);
+  }
+
+  if(!(prop in document.body.style)){
+    syntaxError('getCSS 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다.')
+  }
+  return getComputedStyle(node)[prop]
+}
+
+
+// jQuery
+
+// 대상에게 원하는 css 속성을 추가 = set
+function setCss(node,prop,value){
+  if(typeof node === 'string'){
+    node = getNode(node);
+  }
+  if(!(prop in document.body.style)){
+    syntaxError('setCSS 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다.')
+  }
+  if(!value){
+    syntaxError('setCSS 함수의 세 번째 인자는 필수값 입니다.')
+  }
+
+  // if(value.replace(/\s+/g,'') === ''){
+
+  // }
+
+  node.style[prop] = value;
+
+}
+
+
+export const css = (node,prop,value) => { 
+  return !value ? getCss(node,prop) : setCss(node,prop,value) 
+}
+
+
diff --git a/client/lib/dom/getInputValue.js b/client/lib/dom/getInputValue.js
@@ -0,0 +1,9 @@
+import { getNode } from "./getNode.js";
+import { typeError, syntaxError, refError} from "../error"
+
+
+export function getInputValue(node){
+  if(typeof node === 'string') node = getNode(node);
+  if(node.tagName !== 'INPUT') refError('getInputValue 함수는 INPUT ELEMENT만 허용합니다.')
+  return node.value
+}
diff --git a/client/lib/dom/getNode.js b/client/lib/dom/getNode.js
@@ -0,0 +1,22 @@
+
+export function getNode(node){
+  if(typeof node !== 'string'){
+    throw new Error('getNode 함수의 인자는 문자 타입 이여야 합니다.');
+  }
+
+  // if(!isString(node)) typeError('에러가 발생했습니다.');
+
+  return document.querySelector(node)
+}
+
+
+function getNodes(node){
+  if(typeof node !== 'string'){
+    throw new Error('getNode 함수의 인자는 문자 타입 이여야 합니다.');
+  }
+
+  return document.querySelectorAll(node)
+}
+
+
+
diff --git a/client/lib/dom/index.js b/client/lib/dom/index.js
@@ -0,0 +1,11 @@
+
+// re-export 
+
+
+export * from './css.js'
+export * from './attr.js'
+export * from './insert.js'
+export * from './getNode.js'
+export * from './bindEvent.js'
+export * from './getInputValue.js'
+export * from './clearContents.js'
diff --git a/client/lib/dom/insert.js b/client/lib/dom/insert.js
@@ -0,0 +1,36 @@
+import { getNode } from "./getNode.js";
+import { typeError, syntaxError, refError } from "../error"
+
+
+export function insertBefore(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+
+  if (node.nodeType !== document.ELEMENT_NODE) {
+    typeError('insertBefore 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  }
+
+  node.insertAdjacentHTML('beforebegin', text);
+}
+
+export function insertFirst(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+  if (node.nodeType !== document.ELEMENT_NODE) typeError('insertFirst 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  node.insertAdjacentHTML('afterbegin', text);
+}
+
+
+export function insertLast(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+  if (node.nodeType !== document.ELEMENT_NODE) {
+    refError('insertLast 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  }
+  node.insertAdjacentHTML('beforeend', text);
+}
+
+export function insertAfter(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+  if (node.nodeType !== document.ELEMENT_NODE) {
+    refError('insertAfter 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  }
+  node.insertAdjacentHTML('afterend', text);
+}