💐 꽃 쇼핑몰 페이지

📝 과제 설명

• Vanila JavaScript로만 구현한 과제.
• 영상, 애니메이션, 팝업 등 다양한 기능을 구현할 수 있었던 과제.

⚙️ 기술 스택

• HTML5, SCSS, JavaScript
• Git & GitHub

💻 기능 구현

• 배너, 팝업 창

🗂 배너

• 홈페이지 하단 배너 좌, 우측 background-image를 넣어주고 마우스 hover 시
  text는 움직이지 않고 background-image만 확대되는 기능을 구현.

	<section id="banner-section">
        <article class="left-banner"> 
          <span class="banner-bg"></span>
          <div class="banner-text">
            <p class="banner-name">꾸까 브랜드 이야기</p>
            <span class="banner-desc">
              꽃으로 라이프스타일을 만들어가는 <br />
              kukka의 문화를 소개해요.
            </span>
            <p class="banner-more">Brand story</p>
          </div>
        </article>
        <article class="right-banner"> 
          <span class="banner-bg"></span>
          <div class="banner-text">
            <button class="banner-name">꾸까 오프라인 쇼룸</button>
            <span class="banner-desc">
              꽃을 가까이서 만져보고 향기도 맡아보고, <br />
              꽃 속에서 작은 휴식을 누릴 수 있는 kukka의 오프라인 쇼룸
            </span>
            <button class="banner-more">꾸까 쇼룸 안내</button>
          </div>
        </article>
      </section>

• SCSS를 통해서 아래와 같은 bgPosition의 이름으로 이미지의 형태를 잡아준 상태로 banner.scss로 import해서 사용했다.

@mixin bgPosition($position, $url) {
  background-size: cover;
  background-position: $position;
  background-repeat: no-repeat;
  background-image: url($url);
}

🔐 팝업 창

• 렌더링 시 팝업 창을 맨 앞에 띄워 닫기 혹은 오늘은 더 이상 보지 않기 체크 + 닫기
  를 사용하여 쿠키 값 저장 여부에 따라 재표시 및 안보이는 기능 구현.

document.addEventListener('DOMContentLoaded', function () {
  checkCookie();
});    // 화면을 불러올 때 checkCookie 함수를 실행시킨다.

• 쿠키에 값이 들어가 있으면 리렌더링 시 display를 'none' 해주며
  아닐 시에는 'block'을 통해서 화면에 팝업 창을 계속 표시한다.

function checkCookie() {
  if (getCookie('maindiv') == 'done') {
    document.getElementById('modal').style.display = 'none';
  } else {
    document.getElementById('modal').style.display = 'block';
  }
}

• X표시 눌렀을 때의 함수, 쿠기에 저장하고, 가져오는 함수를 통해서 기능 구현.

function closeWin() {
  if (document.getElementById('popup_close_check').checked) {
    setCookie('maindiv', 'done', 1);
  }
  document.getElementById('modal').style.display = 'none';
}

function setCookie(name, value, expiredays) {
  const todayDate = new Date();
  todayDate.setDate(todayDate.getDate() + expiredays);
  document.cookie =
    name +
    '=' +
    escape(value) +
    '; path=/; expires=' +
    todayDate.toGMTString() +
    ';';
}

function getCookie(name) {
  const nameOfCookie = name + '=';
  let x = 0;
  while (x <= document.cookie.length) {
    const y = x + nameOfCookie.length;
    let endOfCookie = '';
    if (document.cookie.substring(x, y) == nameOfCookie) {
      if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
        endOfCookie = document.cookie.length;
      return unescape(document.cookie.substring(y, endOfCookie));
    }
    x = document.cookie.indexOf(' ', x) + 1;
    if (x == 0) break;
  }
  return '';
}

🌅 최종 구현

Vanila JavaScript로만 프로젝트를 구현하는 것은 이번 온보딩 과제에서 처음이자 마지막이었다.
스스로에게 지금의 공부방향에 대해서 정확하게 다시 되물어보고 생각해볼수있는 시간이었다.
프론트엔드 기술의 가장 기본이 되는 JavaScript에 대해서 안일한 생각을 하고 있었던 것 같다.
눈 앞의 React에만 집중을 했었는데, 기본기에 조금 더 집중을 해야겠다는 것을 느낄 수 있었던 프로젝트였다.🖋