TIL 31일차

• 10:30 | Group Project - BR-Sariwon Custom Checkbox, Custom Selectbox
• 15:00 | Group Project - BR-Sariwon PR
• 15:30 | Code Kata
• 16:00 | Group Project - BR-Sariwon Code Update

Group Project | BR-Sariwon 4일 차

오늘 한 일

• 네비게이션바 구현
• 네비게이션바 버튼에 마우스 올렸을 때 화면 하단으로 확장되는 기능 구현
• Modal창 구현 (우측 검색 버튼 클릭시 나타남)
• Modal창 내 custom Select list, custom checkbox 구현

피드백

• import statement 중 스타일 관련 코드는 가장 아래에 작성

  import React, { Component } from "react";
  import "Components/Nav/nav-bottom.scss";

• 인라인 스타일 대신 css에 정의해서 클래스명으로 스타일 적용 하기

• 삼항 연산자 사용 goood

  className={`monthly-icecream ${
          this.state.isHover === true
            ? "monthly-icecream-on"
            : "monthly-icecream-off"
        }`}

• 데이터는 같은 파일에서 작성하지 않고 js파일에 담아서 import 해오거나, public-data-data.json 파일에 담아서 fetch 함수 사용해서 불러오는 방법으로 시도해 보기

  const store = [
  { link: "", title: "매장 찾기" },
  { link: "", title: "고객센터" }
  ];
  const about = [
  { link: "", title: "공지사항" },
  { link: "", title: "보도자료" },
  { link: "", title: "채용정보" },
  { link: "", title: "점포개설문의" },
  { link: "", title: "CONTACT US" }
  ];

• SASS는 다른 파일에 영향이 갈 수 있기 때문에 nesting을 잘 해주기 가장 바깥 요소는 클래스명을 컴포넌트 이름으로 해주고, 그 안에 전부 nesting될 수 있도록 바꾼다.

• &:first-child 이런식으로 li 태그 안으로 nesting 해주기

  /* before */
  li {
      text-align: center;
      padding-bottom: 12px;
  }
  li:first-child {
      padding-top: 40px;
  }
  /* after */
  li {
      text-align: center;
      padding-bottom: 12px;
  
    &:first-child {
      padding-top: 40px;
    }
  }

mock data

mock data

PR 이후 수정 사항

• 상단 우측 buttons 배치 수정
• 카테고리 목록 펼쳤을 때 하단 화면 밀리는 현상 수정 ( position: absolute로 수정)