[개발 일지] 메인 페이지 레이아웃 잡기 (크로스 슬라이더)

yesung·2024년 1월 11일

첫 진입 시 보여지는 마케팅(소개) 페이지 레이아웃을 디자이너분과 같이 잡았고
페이지 내에서 분리해야할 컴포넌트를 나열 후 이를 토대로 섹션을 잡았다. 현재는 추가 구현 중인 상태이다.

헤더

const Header = () => {
  return (
    <header className={styles.headerWrapper}>
      <Link href="/">Magic Pos</Link>
    </header>
  );
};

헤더의 역할은 로고 뿐이었다..

푸터

const Footer = () => {
  return (
    <footer className={styles.wrapper}>
      <Link href="/">Magic Pos</Link>
      <div className={styles.info}>
        <p>사업자등록번호: 123-45-678910 서울시 강남구 역삼동 대표: OOO</p>
        <p>E-MAIL: ...</p>
        <div className={styles.textArea}>
          <p>COPYRIGHT © 2024 MAGICPOS. ALL RIGHTS RESERVED.</p>
          <p className={styles.bold}>DESIGN BY ...</p>
        </div>
      </div>
    </footer>
  );
};

콘텐츠 슬라이더

const SliderArea = () => {
  const dataChunks = [data.slice(0, 10), data.slice(10, 20)];

  return (
    <section>
      {dataChunks.map((chunk, chunkIndex) => (
        <div key={chunkIndex} className={styles.cardWrapper}>
          <ul className={chunkIndex === 0 ? styles.cardList : styles.cardListDynamic}>
            {chunk.map(list => (
              <li key={list.id + chunkIndex * 10}>
                <p>{list.icon}</p>
                <p>{list.title}</p>
                <p>{list.description}</p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </section>
  );
};

css

.card-list,
.card-list-dynamic {
  animation-duration: 20s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.card-list {
  animation-name: slidedown;
}
.card-list-dynamic {
  animation-name: slideup;
}

@keyframes slidedown {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideup {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

임시 더미 데이터를 생성해서 가운데 영역의 들어갈 빈 내용물들은 채워줬다.

데이터는 위 이미지처럼 크로스 형식의 애니메이션으로 구현해서 총 20개의 데이터들을 10개 단위로 분리 후 이중 map으로 처리했다.

더미는 추후 DB에 있는 사업장 로고 및 이모지 등으로 채워질 예정이다.

고정 서브 바

const StickBar = () => {
  return (
    <div className={styles.wrapper}>
      <Link className={styles.logo} href="/">
        Magic pos
      </Link>

      <div className={styles.tabArea}>
        <Link href="/auth/login">로그인</Link>
        <Link href="/auth/signup">회원가입</Link>
      </div>
    </div>
  );
};