(19).이정환_react.js강의_감정일기장_프로젝트_5강_Home 페이지 구현1

1_ 컴포넌트 구조 설계 :

2_ Home 컴포넌트에 전 수업때 만들어놨던 Header 컴포넌트 import + 배치 :

○ Header 컴포넌트의 props에 대입할 값들 :

- text : '2024년 2월'

- LeftChild : Button 컴포넌트 '<'

- RighttChild : Button 컴포넌트 '>'

3_ DiaryList 컴포넌트 구현 : //내가 부족한 부분만 기록함

○ DiaryList 컴포넌트 내부에 : 최신순 , 정렬 순 메뉴바 , '새 일기쓰기' 버튼 || items 들 render 부분 으로 한꺼번에 했음

내가 한 코드

function Home() {
  const diaries = useContext(DiaryContext) || [];
  return (
    <div className="Home">
      <Header />
      <div className="Home-Top">
        <select>
          <option>최신순</option>
          <option>오래된순</option>
        </select>
        <Button text={"새 일기쓰기"} type={"POSITIVE"} />
      </div>
      <div className="Home-Contents">
        {diaries.map((diary) => {
          return <DiaryList key={diary.id} diary={diary} />; //return 뺴먹는거 조심하셈셈
        })}
      </div>
    </div>
  );
}

○ section 태그의 option태그의 value 설정 , cursor css 적용

- '최신 순'의 value : 'latest'

- '오래된 순'의 value : 'oldest'

- select 태그에다가도 "cursor" 특성을 적용

○_ Date() 객체의 날짜 출력 메소드 : toLocaleDateString() //시발 자꾸 까먹음 이건

○★★_ DiaryItem 컴포넌트의 사진에 대한 코드 작성 : //이거 진짜 존나 좆같았음

내생각에 핵심은 : css 적용 순서 : .setion 1,2,3,4,5 따로 구현할 CSS 적용=> .setion 1,2,3,4,5 의 공통 css =>img 로 해야하는 게 중요했다.

/*색깔별로 배경색 적용*/

.DiaryList .Diary-List-img_section_1 {
  background-color: rgb(100, 201, 100);
}

.DiaryList .Diary-List-img_section_2 {
  background-color: rgb(157, 215, 114);
}

.DiaryList .Diary-List-img_section_3 {
  background-color: rgb(253, 206, 23);
}

.DiaryList .Diary-List-img_section_4 {
  background-color: rgb(253, 132, 70);
}

.DiaryList .Diary-List-img_section_5 {
  background-color: rgb(253, 86, 95);
}

/*다른 공통 css를 이렇게 동시에 적용 코드 작성*/
.DiaryList .Diary-List-img_section_1,
.DiaryList .Diary-List-img_section_2,
.DiaryList .Diary-List-img_section_3,
.DiaryList .Diary-List-img_section_4,
.DiaryList .Diary-List-img_section_5 {
  /* 기존의 공통 속성은 여기서 재적용 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 200px;
  height: 120px;
}

/*section의 자식인 img에 대한 css 적용*/

.DiaryList img {
  display: inline;
  width: 100px;
}

 

◎_ 출력 결과 :