✨ 라인프렌즈 프로젝트 후기

주히 🌼·2020년 9월 28일
5

프로젝트 후기 🎡

목록 보기
2/3


1차 프로젝트였던 ✨ 라인프렌즈 클론 프로젝트 ✨ 후기를 써보려고 한다.

🎈 프로젝트 기간 🎈

2020.09.14 - 2020.09.25

💻 프로젝트

주제 : 라인프렌즈 클론

🤼‍♂️ 팀 BT21

  • FrontEnd : 윤시훈, 장주희, 최예원, 정원태
  • BackEnd : 김성진, 이도길

🌍 협업 툴

  • Github
  • Trello

🌈 기술 스택

💻 프론트엔드

  • HTML,CSS
  • JavaScript(ES6+)
  • React
  • SCSS

💻 백엔드

  • Python
  • Django
  • MySQL
  • Linux

✍ Github

https://github.com/wecode-bootcamp-korea/12-BT21-frontend
https://github.com/wecode-bootcamp-korea/12-BT21-backend

🙋‍♀️ 내가 맡은 부분

나는 메인 페이지 부분을 맡았다.

① Slick을 사용한 슬라이드

② 카테고리 클릭시 아이템 리스트 페이지로 이동

③ js를 이용한 슬라이드

④ map 함수를 이용한 아이템 정렬


👻 기억에 남는 코드

① js로 슬라이드 만들기

.wrapSlideShowItem {
        display: flex;
        margin-left: 40px;
        width: 1300px;
        height: 800px;
        overflow: hidden;
        &.prePage {
          .slideShowItem {
            left: 0px;
            transition-duration: 0.3s;
          }
        }

        &.nextPage {
          .slideShowItem {
            left: -870px;
            transition-duration: 0.3s;
          }
        }

메인에서 슬라이드를 구현해볼 기회가 많았다.
처음에는 Slick을 사용했는데, 다른 슬라이드는 js로 직접 만들어보는게 어떻냐는 팀원분의 말을 듣고 혹하기도 했고, Slick을 사용하면서 불편한 점도 있었기에 한번 직접 만들어보았다.

보여주는 공간을 지정한 후 뒤로가기 버튼을 누르면 그만큼 left로 이동하고, 앞으로 가는 버튼을 누르면 원위치로 이동한다.
(슬라이드가 2페이지만 있어서 이렇게 구현하였다)

overflow, trasition 속성을 사용해 봐서 좋았다!
아 그리고, 또 기억에 남는 부분은 display:flex는 바로 뒤에 있는 자식요소에게만 적용된다는 것..!

② 도자기속 사랑스러움

import React, { Component } from 'react';
import './MainCeramicAdvertisingBanner.scss';

class MainCeramicAdvertisingBanner extends Component {
  constructor() {
    super();
    this.state = {
      buttonOnImage: 'buttonOnImage',
      current: 1,
      borderNumber: 1,
    };
  }

  viewInfo = (index) => {
    this.setState({
      borderNumber: index + 1,
    });
  };

  render() {
    const { borderNumber } = this.state;
    return (
      <div className="MainCeramicAdvertisingBanner">
        <div className="bannerTitle">
          <strong className="title"># 도자기속 사랑스러움</strong>
        </div>
        <div className="wrapContent">
          <div className="wrapPicture">
            <img
              className="mainPicture"
              src="https://shop-phinf.pstatic.net/20200623_43/1592886184295uGTdC_PNG/30247726864450234_1100508093.png?type=f640"
              alt="도자기속 사랑스러움"
            />
            {CeramicAdvertisingItems.map((item, index) => (
              <div key={item.id}>
                <ul>
                  <div
                    className={
                      borderNumber - 1 === index
                        ? `buttonOnImage ${item.productName} active`
                        : `buttonOnImage ${item.productName}`
                    }
                    onClick={() => this.viewInfo(index)}
                  />
                  <div
                    className={
                      borderNumber - 1 === index
                        ? `wrapPricePannel ${item.productName}Pannel`
                        : `wrapPricePannel ${item.productName}Pannel pannelNotActive`
                    }

                    <div className="pricePannelLeft" />
                    <div className="pricePannel">
                      <span>{item.price}</span>
                    </div>
                    <div className="pricePannelRight" />
                  </div>
                </ul>
              </div>
            ))}
          </div>
          <div className="wrapContent">
            <div className="contentTitle">광주요 | 브라운앤프렌즈</div>
            <p>단아한 청색으로 브라운과 샐리가 새겨진 특별한 에디션</p>
            <div className="wrapContentPictures">
              {CeramicAdvertisingItems.map((item, index) => (
                <div key={item.id}>
                  <li>
                    <img
                      className={
                        this.state.borderNumber - 1 === index
                          ? 'contentPictures borderColor'
                          : 'contentPictures'
                      }
                      src={item.img}
                      alt={item.productName}
                    />
                  </li>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default MainCeramicAdvertisingBanner;

이 코드가 기억에 남는 이유는 크게 두 가지가 있는데,

첫 번째로는 map을 돌려서 이미지 뿐만 아니라 div를 여러 개로 만들고, 그것을 index 값과 borderNumber 를 통해 하나하나 제어했기 때문이다.

큰 이미지 속에 각각의 div를 주고, index 값과 borderNumber 를 비교해서 해당 div를 선택했을 시 가격과 옆에 작은 이미지에 border를 주었는데, 개인적으로 만들고 많이 놀랬고 뿌듯했다.

두 번째로는 클래스명을 통해 style 속성을 제어한 점이다.

map을 돌려서 컴포넌트를 반복하니까 처음에는 클래스 명을 클래스명1 클래스명2 이런식으로 숫자를 붙혀서 만들었는데, 클래스 명에 숫자를 붙이는 거는 조금 아니라는 생각이 들어서 주변 동기분들께 물어봤더니 해당 제품에 맞는 클래스를 만들고 그것을 조건을 통해 주면 어떻냐는 대답을 들었다.

예전에도 사용해본 방법이었긴 하지만, 생각이 전혀 나지 않았었는데 이번 기회에 그 방법을 사용해보기도 하였고, 또한 이후로 클래스명을 통한 style을 제어하였기에 여러모로 기억에 남는다.

profile
하면 된다! 프론트앤드 공부 중 입니당 🙆‍♀️

2개의 댓글

comment-user-thumbnail
2020년 9월 30일

PM님 짱짱

답글 달기
comment-user-thumbnail
2020년 9월 30일

라인 PM이 주희님이였군요!!!! 라인 정말 진짜같아서 놀랐어요!

답글 달기