[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1)

1️⃣ 프로젝트 소개

우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 

크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다.

 

주요 페이지 - 메인페이지, 지역별로 보기 페이지, 주류 MBTI 페이지, 주류 페스티벌 페이지

부가 페이지 - 로그인 및 회원가입 페이지, 상품후기 페이지, 공지사항 페이지, 1:1문의 페이지, FAQ 페이지

 

이렇게 나눈 페이지를 각각 나눠서 맡고 메인페이지만 같이 만들었다. 메인페이지를 만들때도 서로 코드가 겹치지 않게 section별로 나눠서 각각 만들었다. 

 

나는 이중에서 Main페이지의 section-2를 만들었고 주류 페스티벌 페이지, 상품후기 페이지, 1:1 문의 페이지를 만들었다. 뒤로 갈 수록 페이지의 퀄리티가 떨어진다...😂(JS 거의없음)

---

2️⃣ Main페이지 슬라이드 제작

먼저 디자인을 생각해야 했는데 마침 내가 이전부터 구현하고 싶은 디자인이 있었다. 

 

오설록 이야기

오설록 이야기의 슬라이드 모션이다. 디자인이 깔끔하고 지금까지는 보지 못한 슬라이드 모션이라 구현해보고 싶은 마음이 있었다.  양쪽의 박스가 약간 기울어져 있는 모습이 내 마음에 쏙 들었다😊

디자인과 작동 방식까지 생각했으니 이젠 구현만 하면 된다. 

🔴 HTML, CSS로 틀 잡기

현재 오설록이야기 페이지에는 이미지와 내용을 포함한 DIV가 7개 존재한다. 이 중 3개의 DIV만 사용자에게 보여지고 나머지는 안보이게 하고 있다. 그리고 다음 버튼을 누르면 다음 DIV가 보이고 이전 버튼을 누르면 이전 DiV가 보이게 하는 원리이다. 지금까지는 흔히 보이는 슬라이드와 같지만 양 옆이 약간 기울어져 있어서 둥글게 회전하는 방식을 사용해 차별점을 주었다. 

<ul class="img_content">
    <li>
        <div class="section2_title">
            <h1 class="maintitle">경상도의 술</h1>
            <h2 class="subtitle">다양한 꽃향기의 맛</h2>
        </div>
        <img src="./image/경상도이미지.png" alt="경상">
        <div class="section2_intro">알코올 도수가 높은 편인데도 맛이 부드럽고, 강한 증류주의 향이 아닌 곡물에서 나오는 다양한 꽃향기가 입 안을
            감돌며 코를 자극합니다.
        </div>
    </li>
    <li>
        <div class="section2_title">
            <h1 class="maintitle">경기도의 술</h1>
            <h2 class="subtitle">여러 농산물을 가진 힘</h2>
        </div>
        <img src="./image/경기도이미지.jpg" alt="경기">
        <div class="section2_intro">경기도 전통주는 도내 우수한 농산물을 이용해 술을 만들었기 때문에 기본적으로 맛이 좋은 게 특징입니다.
        </div>
    </li>
    ...
    <li>
        <div class="section2_title">
            <h1 class="maintitle">경상도의 술</h1>
            <h2 class="subtitle">다양한 꽃향기의 맛</h2>
        </div>
        <img src="./image/경상도이미지.png" alt="경상">
        <div class="section2_intro">알코올 도수가 높은 편인데도 맛이 부드럽고, 강한 증류주의 향이 아닌 곡물에서 나오는 다양한 꽃향기가 입 안을
            감돌며 코를 자극합니다.
        </div>
    </li>
    <li>
        <div class="section2_title">
            <h1 class="maintitle">경기도의 술</h1>
            <h2 class="subtitle">여러 농산물을 가진 힘</h2>
        </div>
        <img src="./image/경기도이미지.jpg" alt="경기">
        <div class="section2_intro">경기도 전통주는 도내 우수한 농산물을 이용해 술을 만들었기 때문에 기본적으로 맛이 좋은 게 특징입니다.
        </div>
    </li>
</ul>

이렇게 <ul> 태그 안에 <li>태그를 총 5개 넣어줬다. 

❗경기도-강원도-충청도-전라도-경상도 순으로 반복되야 하기 때문에 맨앞에 경상도와 맨뒤에 경기도를 추가해준다❗

이래야 슬라이드가 무한으로 돌아간다.

 

section의 넓이와 높이를 정해주고 <ul>태그에 display:flex 속성을 넣어줬다. 그리고 넘어가는 부분은 

overflow:hidden 속성을 줘서 안보이게 해줬다. 

 

🟡 JS로 기능 추가하기

let slideIndex = 1;

3개의 DIV중 가운데 DIV의 위치를 slideIndex에 저장한다.

 

if (slideIndex < 1) {
    slideIndex = 5;
  } else if (slideIndex >= slides.length-1) {
    slideIndex = 1;
  }

만약 해당 위치가 범위를 벗어나면 다시 처음으로 오거나 맨뒤로 가게끔 조건문을 설정해줬다.

 

for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

그리고 모든 슬라이드를 일단 안보이게 해준다.

 

//   현재 슬라이드
  slides[slideIndex].style.display = "flex";
  slides[slideIndex].style.flexDirection = "column";
  slides[slideIndex].style.marginTop = "0px";
  slides[slideIndex].style.transform = "rotate(0deg)";

  // 이전 슬라이드
  let prevIndex = slideIndex - 1 < 0 ? slides.length - 1 : slideIndex - 1;
  slides[prevIndex].style.display = "flex";
  slides[prevIndex].style.flexDirection = "column";
  slides[prevIndex].style.marginTop = "70px";
  slides[prevIndex].style.transform = "rotate(-15deg)";

  // 다음 슬라이드
  let nextIndex = slideIndex + 1 >= slides.length ? 0 : slideIndex + 1;
  slides[nextIndex].style.display = "flex";
  slides[nextIndex].style.flexDirection = "column";
  slides[nextIndex].style.marginTop = "70px";
  slides[nextIndex].style.transform = "rotate(15deg)";

화면에 보이는 3개의 Div의 위치를 각각 나눠서 저장해줬다. 그리고 이 3개의 Div만 화면에 보이게 하기 위해 CSS속성을 변경해줬다. 

 

// 이전 버튼
prevBtn.addEventListener("click", function () {
  slideIndex--;
  showSlide(slideIndex);
});

// 다음 버튼
nextBtn.addEventListener("click", function () {
  slideIndex++;
  showSlide(slideIndex);
});

각각의 버튼을 누르면 가운데 Div의 위치값이 변경하고 위에서 만들어줬던 함수가 실행된다.

 

3️⃣ 결과화면

지금보니 디자인을 너무 똑같이 한거 같기도...😅

아쉬운점이 있다면 슬라이드의 위치나 구도는 비슷하게 구현했으나 모션에서 차이가 있다. 

오설록이야기에서는 슬라이드가 작동할 때 애니메이션을 구현했으나 나는 구현못했다..ㅠ

나는 display가 없어졌다가 생기는 구조로 만들어서 애니메이션을 넣을 수가 없었다.

(오설록이야기의 페이지는 어떻게 만들었나 구조를 뜯어봤는데.. 잘 모르겠다...😂)

다음에 만들 땐 모션까지 되는 슬라이드를 만들어야 겠다고 생각했다.

 

4️⃣ 깨달은 점

슬라이드 모션을 구현 할 때 약간의 버그가 있었다. 

처음 슬라이드에서 이전 버튼을 눌렀을 때, 마지막 슬라이드에서 다음 버튼을 눌렀을 때 양 쪽의 DIV가 깨지는 현상이 발생했다. 

// 이전 버전
function showSlide(index) {
  if (index < 0) {
    slideIndex = slides.length - 1;
  } else if (index >= slides.length) {
    slideIndex = 0;
  }

이전 코드를 보니 양 끝지점에서 버튼을 클릭하면 슬라이드가 맨 앞이나 뒤로 가도록 지정해 뒀었다. 하지만 나는 총 3개의 DIV가 보이려고 의도했기 때문에 넘어가는 기준을 바꿀 필요가 있었다. 

// 수정한 버전
function showSlide(index) {
  if (index < 1) {
    slideIndex = 5;
  } else if (index >= slides.length-1) {
    slideIndex = 1;
  }

넘어가는 기준을 한칸씩 앞으로 땡겨주고 바뀌는 슬라이드도 양 옆 끝지점이 아닌 ±1을 해줬다. 

잘 나오는 모습을 볼 수 있었다. ㅎㅎ

앞으로 슬라이드를 만들때는 넘어가는 곳은 어디고, 나올 슬라이드는 어딘지 확실히 기준을 잘 잡아야 겠다고 생각했다.

 

------------------------------------------------------------------------------끝--------------------------------------------------------------------------------