개인 프로젝트 요구사항

React를 사용해 주어진 요구사항을 만족하는 상품리스트 페이지와 사용자가 북마크 한 상품들을 조회할 수 있는 북마크 페이지를 포함하는 SPA 앱을 구현다.

• React 사용한다
• 로딩, 애니메이션, 등의 명시되지 않는 부분은 자유롭게 구현한다
• 본인을 잘 나타낼 수 있는 가장 깔끔하고 효율적인 구조로 작성한다
• Readme.md 를 이용하여 프로젝트 구조 설명 및 프로젝트 관리 방법에 대한 기본적인 문서화(documentation)도 함께 진행
• Figma Design 참고해서 구현한다
• Github + Git Flow 활용

github

오늘 수업에서 구현하기 전에 계획 단계의 중요성을 알려주셨다. Github에 있는 Project tab을 활용해 새로운 프로젝트 생성하고 구체적으로 프로젝트 관리를 하는 것이다.

Page Layout

• Main page
  - Header + Footer Components
• Products List page
• Bookmarks page

Header Component

오늘은 페이지 상단에 위치한 Header Component를 구현하였다.

• Figma 디자인을 참고 헤더를 똑같인 구현한다.
• 페이지에서 이동해도 항상 상단에 위치하고, scrolling해도 위에 고정이 된다
• 상단 우측에 햄버거에 hover하면 list가 나타나다

나의 Header.jsx

import "./header.css";
import { FaBars } from "react-icons/fa6";
import { useState } from "react";

export const Header = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);


  return (
    <nav>
      <div className="nav__items">
        <div className="nav__logo">
          <img src="imges" alt="codestates logo" />
          <h1>COZ Shopping</h1>
        </div>
        <div className="nav__toggle">
          <FaBars
            size={34}
            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
          />

          {isDropdownOpen && (
            <div
              className="toggle__list"
              onMouseLeave={() => setIsDropdownOpen(false)}
            >
              <div className="toggle__list__item">이지원님, 안녕하세요!</div>
              <div className="toggle__list__item" id="item__middle">
                상품리스트 패이지
              </div>
              <div className="toggle__list__item">북마크 페이지</div>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
};

header branch 생성

-git switch -c header
git switch -c header 명령어를 사용해 새로운 branch를 생성했다. 여기서 -c를 사용하지 않으면 header가 존재하지 않으므로 header branch로 switch가 발생하지 않는다. 그리고 header branch에서 Header.jsx 기능구현을 진행하였고 마지막으로 main branch와 merge를 실행했다.

Hamburger Toggle

나는 useState hook을 활용해 Toggle 기능을 구현했다. 우선, setIsDropdownOpen의 상태를 false로 설정하고, onClick 시 (이벤트 발생) setIsDropdownOpen(!isDropdownOpen)로 true로 변경하게 구현했다. 그래서 중괄호로 {} setIsDropdownOpen이 true인 경우, 해당 요소들을 출력하게 조건문을 걸었다. 만약 부모 요소 div에서 마우스가 벗어나면 자동으로 setIsDropdownOpen 상태를 다시 false로 변경하여 toggle 기능을 정상적으로 구현하게 되었다.

  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  
          <FaBars
            size={34}
            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
          />
   
   {isDropdownOpen && (
            <div
              className="toggle__list"
              onMouseLeave={() => setIsDropdownOpen(false)}
            >
              <div className="toggle__list__item">이지원님, 안녕하세요!</div>
              <div className="toggle__list__item" id="item__middle">
                상품리스트 패이지
              </div>
              <div className="toggle__list__item">북마크 페이지</div>
            </div>
          )}

나의 생각

아직 프로젝트 초기 단계여서 어려움을 겪은 점은 없었습니다. 다만, toggle 기능을 구현하는 데 useState를 사용해야겠다는 생각이 들어서 신기했다. useState hook을 처음 배웠을 때 도대체 어떻게 사용해야 하는지 감이 안 잡혀서 계속 연습해왔었는데, toggle 기능에 사용할 수 있다는 생각이 바로 떠올라서 신기했다.