Merge pull request #28 from parksil0/seal

Seal 1주차

packages/seal/src/constant/index.js

@@ -0,0 +1,29 @@
+export const BASE_URL = 'http://localhost:3000/api';
+
+export const INDEX_PAGE = 'http://localhost:5510';
+
+export const RANDOM_IMAGE_URL = 'https://randomfox.ca/images';
+
+export const LOCAL_STORAGE_KEY = {
+  USER_TOKEN: 'user_token',
+};
+
+export const ERROR_MESSAGE = {
+  WRONG_PASSWORD: '패스워드를 확인해주세요.',
+  INVALID_EMAIL_FORMAT: '옳지 않은 이메일 형식입니다.',
+};
+
+export const SUCCESS_MESSAGE = {
+  SIGNUP: '회원가입이 완료되었습니다.\n로그인해주세요.',
+};
+
+export const MAIN_VIEW_TAB = {
+  EXPLORE: 'explore',
+  SAVED: 'saved',
+};
+
+export const MAX_IMAGE_NUMBER = 123;
+
+export const INFINITE_SCROLL_Y_AXIS_LOAD_LIMIT = 0.8;
+
+export const MAIN_EXPLORE_PAGE_PER_AMOUNT = 10;

packages/seal/src/helper/dom.js

@@ -3,3 +3,6 @@ export const $ = selector => document.querySelector(selector);
 export const $all = selector => document.querySelectorAll(selector);
 
 export const toggleLoading = () => $('.loading').classList.toggle('hidden');
+
+export const setDisplay = (element, display) =>
+  (element.style.display = display);

packages/seal/src/helper/localstorage.js

@@ -0,0 +1,11 @@
+export const setLocalStorage = (key, value) => {
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const getLocalStorage = key => {
+  const item = localStorage.getItem(key);
+
+  if (!item || item === 'undefined') return null;
+
+  return JSON.parse(item);
+};

packages/seal/src/helper/random.js

@@ -0,0 +1,3 @@
+export const getRandomNumber = maxNumber => {
+  return Math.floor(Math.random() * maxNumber) + 1;
+};

packages/seal/src/login.js

@@ -1,48 +1,4 @@
 import '../assets/page/login.css';
-import { login, signup } from './api/index.js';
-import { $, $all } from './helper/index.js';
+import LoginView from './views/LoginView.js';
 
-$all('.message a').forEach(tag => {
-  tag.addEventListener('click', () => {
-    $all('.forms').forEach(form => {
-      form.classList.toggle('hidden');
-    });
-  });
-});
-
-$('button[data-submit="signup"]').addEventListener('click', async event => {
-  event.preventDefault();
-
-  const email = $('#signup-email').value;
-  const password = $('#signup-password').value;
-  const passwordConfirm = $('#signup-password-confirm').value;
-
-  if (password !== passwordConfirm) return alert('패스워드를 확인해주세요.');
-  const regEmail =
-    /^[0-9a-zA-Z]([-_\\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
-  if (!regEmail.test(email)) return alert('옳지 않은 이메일 형식입니다.');
-
-  await signup('http://localhost:3000/api/user', {
-    email,
-    password,
-    status: 0,
-  });
-
-  alert('회원가입이 완료되었습니다.\n로그인해주세요.');
-});
-
-$('button[data-submit="login"]').addEventListener('click', async event => {
-  event.preventDefault();
-
-  const email = $('#login-email').value;
-  const password = $('#login-password').value;
-
-  const data = await login('http://localhost:3000/api/user/login', {
-    email,
-    password,
-  });
-  const { _id, email: userEmail } = data[0];
-  alert(`환영합니다, ${userEmail}님!`);
-  localStorage.setItem('user_token', _id);
-  location.replace('http://localhost:5510/');
-});
+new LoginView();

packages/seal/src/main.js

@@ -1,110 +1,4 @@
 import '../assets/index.css';
-import { addBookmark, getBookmarkList } from './api';
-import { $, toggleLoading, debounce } from './helper/index.js';
+import MainView from './views/MainView';
 
-(() => {
-  const isLogin = localStorage.getItem('user_token');
-  if (isLogin !== null) return;
-
-  location.replace('./login.html');
-})();
-
-let globalIndex = 0;
-
-const createPin = () => {
-  toggleLoading();
-  const pin = document.createElement('div');
-  const buttonWrapper = document.createElement('div');
-  const image = document.createElement('img');
-  const random = Math.floor(Math.random() * 123) + 1;
-  image.src = `https://randomfox.ca/images/${random}.jpg`;
-  buttonWrapper.setAttribute('class', 'button-wrapper');
-  buttonWrapper.innerHTML = `
-  <div class="anim-icon anim-icon-md heart">
-    <input type="checkbox" id="heart${globalIndex}" />
-    <label for="heart${globalIndex}" key=${random}></label>
-  </div>
-  `;
-  pin.classList.add('pin');
-  pin.appendChild(buttonWrapper);
-  pin.appendChild(image);
-  toggleLoading();
-  return pin;
-};
-
-const loadMore = debounce(() => {
-  const container = $('.container');
-  const pinList = [];
-  for (let i = 10; i > 0; i--) {
-    pinList.push(createPin(++globalIndex));
-  }
-  container.append(...pinList);
-}, 500);
-
-loadMore();
-
-window.addEventListener('scroll', () => {
-  const loader = $('.loader');
-  if (loader === null) return;
-  if (loader.getBoundingClientRect().top > window.innerHeight) return;
-  loadMore();
-});
-
-$('nav').addEventListener('click', async event => {
-  event.stopPropagation();
-  if (!event.target.matches('input')) return;
-
-  const $main = $('main');
-  $main.innerHTML = '';
-
-  if (event.target.matches('#explore')) {
-    $main.classList.remove('saved');
-    $main.innerHTML = `
-      <div class="container"></div>
-      <div class="loader"></div>
-    `;
-
-    globalIndex = 0;
-    loadMore();
-  }
-
-  if (event.target.matches('#saved')) {
-    $main.classList.add('saved');
-    const _id = localStorage.getItem('user_token');
-    const result = await getBookmarkList(
-      'http://localhost:3000/api/user/bookmark',
-      { _id },
-    );
-    const $content = `
-    <div class="container">
-    ${result
-      .map(
-        ({ _id, url }, index) => `
-      <div class="pin">
-        <div class="button-wrapper">
-          <div class="anim-icon anim-icon-md heart">
-            <input type="checkbox" id="heart${index}" checked>
-            <label for="heart${index}" key=${_id}></label>
-          </div>
-        </div><img src="https://randomfox.ca/images/${url}.jpg">
-      </div>`,
-      )
-      .join('')}
-    </div>
-    `;
-
-    $main.innerHTML = $content;
-  }
-});
-
-$('main').addEventListener('click', async event => {
-  if (!event.target.matches('label[for^="heart"]')) return;
-  const _id = localStorage.getItem('user_token');
-  await addBookmark(
-    `http://localhost:3000/api/user/bookmark/${event.target.getAttribute(
-      'key',
-    )}`,
-    { _id },
-  );
-  console.log('북마크에 저장되었습니다.');
-});
+new MainView();

packages/seal/src/signup.js

@@ -0,0 +1,4 @@
+import '../assets/page/login.css';
+import SignupView from './views/SignupView';
+
+new SignupView();