210907 Mock Data 다루게 되었다!

헤더영역에 나오는 텍스트를 mock data로 만들어서 해당하는 화면에 나오도록 구현했다

const textAreaObj = {
  0: {
    textTitle: '출근하지',
    textComment: '않아도 돼',
    textSmallComment: '노트북으로 재택근무해요',
  },
  1: {
    textTitle: '집에서도',
    textComment: '심심하지 않아',
    textSmallComment: '나만의 DLY작품을 만들어요',
  },
  2: {
    textTitle: '혼자하는',
    textComment: '힐링타임',
    textSmallComment: '침대에서 뒹굴어요',
  },
  3: {
    textTitle: '심심할 땐',
    textComment: '요리해요',
    textSmallComment: '사먹지 않고 만들어 먹어요',
  },
  4: {
    textTitle: '혼자하는',
    textComment: '홈 트레이닝',
    textSmallComment: '나가지 않아도 운동할 수 있어요',
  },
  5: {
    textTitle: '여가생활은',
    textComment: '게임 속에서',
    textSmallComment: '집에서도 시간이 너무 잘 가요',
  },
};

이렇게 객체형식으로 만들었는데 어떻게 접근해야 되나 싶었지만
일단 MDN 객체 접근법 이 문서를 참고하고 runJS를 이용해서 테스트를 해봤다

종택님이 runJS가 좋다고 하셨는데 이렇게 테스트 할 때 도움을 많이 받는다..!

1. 우선 textAreaObj라는 객체에서 0이라는 key값에 접근을 하는데
   0은 문자열이 아니기 때문에 dot 연산자로 접근은 못하고
   배열마냥 대괄호를 통해 접근을 했다

2. 그리고 다시 textTitle이라는 key의 속성값에 접근하면 되는데
   key가 문자열인 만큼 두가지방법모두 사용할 수 있다

따라서 아래처럼 mock data의 프로퍼티에 접근해서 화면에 글자를 띄우도록 지정했다

<div className="textArea">
  <h1>{textAreaObj[currentSlide].textTitle}</h1>
  <h1>{textAreaObj[currentSlide].textComment}</h1>
  <p>{textAreaObj[currentSlide].textSmallComment}</p>
</div>

그리고 이러한 텍스트들은 헤더에 레이아웃 순서와는 상관없이 배치하기 위해서
position: absolute로 스타일 지정했고

.main {
  .textArea {
    position: absolute;
    width: 650px;
    height: 150px;
    top: 220px;
    left: 100px;
    opacity: 1;
    z-index: 1;

    h1 {
      display: block;
      height: 40px;
      margin: 10px 0;
      font-size: xx-large;
      font-weight: bold;
      opacity: 1;
    }
  }

배경은 투명하게 글씨는 불투명하게(진하게) 보이기 위해서
headers요소 안에 textArea를 넣는게 아니라 각각 따로 위치를 지정했다

/* scss */
.main {
    .textArea {
        position: absolute;
        width: 650px;
        height: 150px;
        top: 220px;
        left: 100px;
        opacity: 1;
        z-index: 1;

        h1 {
            display: block;
            height: 40px;
            margin: 10px 0;
            font-size: xx-large;
            font-weight: bold;
            opacity: 1;
        }
    }
    .headers {
        position: relative;
        height: 600px;
        margin-bottom: 80px;
        padding-right: 20px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.6;
    }

<div className="main">
  <div className="textArea">
    <h1>{textAreaObj[currentSlide].textTitle}</h1>
    <h1>{textAreaObj[currentSlide].textComment}</h1>
    <p>{textAreaObj[currentSlide].textSmallComment}</p>
  </div>
  <div
   className={`headers ${this.makeClass(currentSlide)}`}
   style={{ backgroundImage: imgArr[currentSlide] }}
  ></div>
  
  {/* 이하 생략 */}
</div>