🖥️ 장욱진 미술관

• 사이트명 : 장욱진 미술관
• 제작기간 : 22.12.23 ~ 23.01.20 (28일 소요)
• 사용언어 : html, css, javascript, node, MySql
• 라이브러리 : swiper
• 분류 : 반응형, 팀프로젝트 리뉴얼 사이트
• 장욱진 미술관 사이트 배포 : https://teambogoproject.herokuapp.com/
• 장욱진 미술관 깃허브 주소 : https://github.com/yoonchungah/bogo.git

🙄기존 웹사이트 분석

전체적인 사이트의 UI는단순하지만 목적성이 부족해 사용자가 이용하기 부적절하다고 느꼈다

특히 일정 크기까지는 적용되나 완벽하지 않은 반응형으로 사이트가 금방 무너진다는 것을 확인했으며

디자인적으로 정형화된 틀에 고정 되어 있어 유지 보수가 힘들다고 느꼈다

🤓웹사이트 리뉴얼 방향

단순한 UI를 유지하고 목적성이 뚜렷하게 나타나도록 디자인한다

정보 전달을 위주로 구성된 홈페이지기에 화려한 메인 컬러보다 무채색 컬러에 블루 포인트 컬러를 주어

안정된 효과를 주고자 한다

기본으로 보여지는 메인페이지에서 서브페이지들에 대한 내용을 확인할 수 있도록하여

동선에 낭비가 없게끔 한다

동적인 요소를 사용하여 사용자의 시선을 끌도록 한다

모바일 사용자를 고려하여 반응형으로 작업한다

👩🏻‍💻 Code Review

1. 탭메뉴를 활용한 공지사항 페이지

🔎 코드분석

function noticeTabOpen(event, tabName) {

  let noticeTabContent = document.getElementsByClassName('notice_tabcont');
  for (i = 0; i < noticeTabContent.length; i++) {
    noticeTabContent[i].style.display = 'none';
  }
  document.getElementById(tabName).style.display = "block";

  let noticeTabLink = document.getElementsByClassName("notice_tablink");
  for (i = 0; i < noticeTabLink.length; i++) {
    noticeTabLink[i].className = noticeTabLink[i].className.replace(' notice_tab_active', '');
  }
  event.currentTarget.className += ' notice_tab_active';
}

리스트를 클릭했을때마다 탭형식으로 보여지는 화면을 구현하려고 했다

onclick을 이용해서 html에서 클릭 이벤트를 실행시켜주었다

e, event, evt 모두 이벤트를 가르키며 이때는 event를 사용해주었다

tabName에는 매개변수로 notice_tab1,notice_tab2,notice_tab3 이 들어가며

하나는 이벤트가 되고 하나는 탭이 되는 형식이다

list를 담고 있는 notice_tabcont를 변수로 선언하고 for문을 돌려 dispaly를 none으로 바꾸어준다

이어서 나머지 매개변수에는 dispaly를 block으로 주어 화면상에 보이도록 해주었다

또 클릭할 버튼에 동일한 notice_tablink라는 클래스명을 주고 이것을 변수로 선언하여

클릭시 notice_tab_active라는 클래스명이 추가되고 빠지는 점을 활용하여

탭 클릭시 background-color가 바뀌어 어느 영역을 보고 있는지 쉽게 알 수 있도록 했다

2. 라이브러리를 활용한 슬라이드 구현

🔎 코드분석

var swiper = new Swiper(".main6_collection", {
  slidesPerView: 5,
  scrollbar: {
    el: ".swiper-scrollbar",
    hide: false,
  },
});

이 부분은 swiper라는 라이브러리를 사용해주었다

아래와 같이 swiper에서 지정한 특정 클래스를 그대로 사용하며 (swiper, swiper-wrapper, swipper-slide)

swiper 에 클래스명을 추가하여 조정할 수 있다

scrollbar 속성을 사용하여 마우스를 통해 좌우로 이동할 수 있게 구현하여 좀 더 갤러리 스러운 느낌이 들도록 했다

3. 스크롤시 왼쪽에서 차례대로 나오는 박스

🔎 코드분석

let floorMap1 =  document.querySelector('.floor_map1');
let floorMap2 =  document.querySelector('.floor_map2');
let floorMap3 =  document.querySelector('.floor_map3');

window.addEventListener("scroll",()=>{
  resizeF1();
  resizeF2();
  resizeF3();
})

function resizeF1(){
  if (window.innerWidth >= 690){
    floorMap1.classList.add('floor1_active');
    floorMap1.style.opacity = "1";
    floorMap1.style.left = "0";
    floorMap1.style.transition = "2s";
  } else{
    floorMap1.classList.remove('floor1_active');
    floorMap1.style.opacity = "1";
    floorMap1.style.left = "0";
    floorMap1.style.transition = "none";
  }
}

function resizeF2(){
  if (window.innerWidth >= 690){
    floorMap2.classList.add('floor2_active');
    floorMap2.style.opacity = "1";
    floorMap2.style.left = "0";
    floorMap2.style.transition = "2.3s";
  } else{
    floorMap2.classList.remove('floor2_active');
    floorMap2.style.opacity = "1";
    floorMap2.style.left = "0";
    floorMap2.style.transition = "none";
  }
}

function resizeF3(){
  if (window.innerWidth >= 690){
    floorMap3.classList.add('floor3_active');
    floorMap3.style.opacity = "1";
    floorMap3.style.left = "0";
    floorMap3.style.transition = "2.6s";
  } else{
    floorMap3.classList.remove('floor3_active');
    floorMap3.style.opacity = "1";
    floorMap3.style.left = "0";
    floorMap3.style.transition = "none";
  }
}

💣 문제발생

처음에는 AOS 라이브러리로 구현하려고 하였으나 왜인지 AOS 라이브러리가 적용되지 않았다

💊 문제해결

차례대로 등장할 박스들을 변수로 선언한 뒤 addEventListener scroll을 사용하였다

resizeF1,resizeF2,resizeF3 함수가 차례대로 실행되는데

반응형으로 크기가 줄어들었을 때는 효과를 적용하지 않으려는 점을 고려하여 if문으로 잡아주었다

클래스명이 추가 되기 전에는 모든 박스들의 left 값에 -100%를 주어 화면상에 보이지 않게 한 뒤

자연스럽게 보이는 효과를 주기 위해 opacity를 0으로 설정해 두었다

그리고 클래스명이 추가 되면 left값을 0으로 바꾸고 opacity 또한 1로 설정해두어 원래 위치로 돌아오도록 만들었다

4. 스크롤시 아래에서 차례대로 올라오는 박스

🔎 코드분석

let mapAddr =  document.querySelector('.map_addr');

window.addEventListener("scroll",()=>{
  resizeMap();
  resizeTraffic();
})

function resizeMap(){
    if (window.innerWidth >= 690){
      mapAddr.classList.add('map_addr_active');
      mapAddr.style.opacity = "1";
      mapAddr.style.top = "0";
      mapAddr.style.transition = "2s";
    } else{
      mapAddr.classList.remove('map_addr_active');
      mapAddr.style.opacity = "1";
      mapAddr.style.top = "0";
      mapAddr.style.transition = "none";
    }
}

let trafficWrap =  document.querySelector('.traffic_infor_wrap');
function resizeTraffic(){
  if(window.innerWidth >= 690){
    trafficWrap.classList.add('traffic_active');
    trafficWrap.style.opacity = "1";
    trafficWrap.style.top = "0";
    trafficWrap.style.transition = "2.5s";
  } else{
    trafficWrap.classList.remove('traffic_active')
    trafficWrap.style.opacity = "1";
    trafficWrap.style.top = "0";
    trafficWrap.style.transition = "none";
  }
}

💣 문제발생

이 부분 또한 AOS 라이브러리로 구현하려고 하였으나 왜인지 AOS 라이브러리가 적용되지 않았다

💊 문제해결

차례대로 등장할 박스들을 변수로 선언한 뒤 addEventListener scroll을 사용하였다

resizeMap,resizeTraffic 함수가 차례대로 실행되는데

반응형으로 크기가 줄어들었을 때는 효과를 적용하지 않으려는 점을 고려하여 if문으로 잡아주었다

클래스명이 추가 되기 전에는 모든 박스들의 top 값에 50px을 주어 기존의 위치에서 살짝 내려가게

해두었다가 클래스명이 추가 되면 top값을 0으로 바꾸고 opacity를 1로 설정해두어

아래에서 위로 올라오는 듯한 느낌이 들도록 만들었다

5. 검색을 이용한 필터링 효과

🔎 코드분석

function filter1(){

  var value, name, item, i;

  value = document.getElementById("exhibition_search_txt").value.toUpperCase();
  item = document.getElementsByClassName("exhibition_list");

  for(i=0;i<item.length;i++){
    name = item[i].querySelectorAll(".exhibition_list_text_box>h5");
    if(name[0].innerHTML.toUpperCase().indexOf(value) > -1){
      item[i].style.display = "";
    }else{
      item[i].style.display = "none";
    }
  }
}

💣 문제발생

필더라는 것을 몰라서 어떻게하면 구현할 수 있는지 바로 떠오르지 않았다

💊 문제해결

구글링을 통해 filter 함수에 대해 알게 되었다

여러가지 블로그와 글을 참고하여 검색 기능을 담고 있는 form 태그에

onkeyup으로 filter1이라고 만들어둔 함수를 넣었고

배열에서 조건에 해당하는 값만을 추출해 낼 수 있었다

하지만 아직 이해하기 힘든 부분이 많아서 차근차근 복습해야겠다

<form onkeyup="filter1()" method="post"  id="exhibition_main_form">
    <select name="exhibition_search_box" id="exhibition_search_box">
      <option value="전시명">전시명</option>
      <option value="전시장소">전시장소</option>
      <option value="상세내용">상세내용</option>
    </select>
    <label for="exhibition_search_txt"></label>
    <input type="text" name="exhibition_search_txt" id="exhibition_search_txt" placeholder="검색어를 입력해주세요">
    <input type="submit" value="검색" id="exhibition_search_check">
  </form>

6. DB를 이용한 페이지 연결

🔎 코드리뷰

node와 db를 이용하여 페이지를 연결하고 그 값을 받아 수정, 삭제하는 페이지를 만들었다

화면 클릭시 작업해둔 썸네일 페이지가 보이며 하단의 버튼을 통해 수정, 삭제를 할 수 있다