[Day4] 4-1. 다시 시작!

저번 노답코드는 놔두고 새로 코드를 받아서 다시 처음부터 작성할 예정이다.

---

📋 주의사항

•  CSS를 한곳에서 수정하기
  너무 여러 페이지에서 CSS를 수정하다 보니 화면이 엉망이 되었다.🥲 
  수정을 위해서 최소한의 페이지에서 CSS를 수정하기
  
  
• 컴포넌트 구분을 파일단위로 하기
  저번 코드에서는 제일 최소한의 컴포넌트 파일위에 슬라이드를 겹쳐서 작성해서 재사용을 할수가 없게 되었다.
  많은 요소들을 만든 이후에 이 사실을 알게되어서 난감했다. 🤯
  
  
• 미리 요소들을 구상하기
  구현할 요소들을 미리 생각해두고 개발을 진행해야겠다.
  피그마에 러프하게 먼저 스케치하기
  코드 작성중에 필요한 다른 요소들을 떠올렸을때는 어디에 들어가야하는지 정한 후에 개발을 이어나가기

 

저번 파일을 작성하면서 느낀 주의사항은 일단 이정도가 있다.

레퍼런스 코드를 참고해서 다시 처음부터 열심히 해보기 ❗️

---

# 피그마 러프 스케치

✔️ 참고사이트

 

 

---

# 초기화면

npm install
npm start

---

# Header

✔️ Header.jsx 기본코드

import logo from '../assets/coz_logo_192.png';

export default function Header() {
  return (
    <header>
      <div className='logo_container'>
        <img alt='logo' src={logo} />
        <h1>COZ SHOPPING</h1>
      </div>
      <label>
        <input placeholder='원하는 상품을 찾아보세요!' type='text' name='search' />
        <span>
          <i className='fa-solid fa-magnifying-glass'></i>
        </span>
      </label>
    </header>
  );
}

 

✔️ App.css의 Header 부분 기본코드

header {
  height: 8vh;
  background: white;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  justify-content: space-around;
  flex-wrap: wrap;
}

.logo_container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.logo_container>img {
  width: 2.5rem;
}

header>label {
  display: flex;
  gap: 1rem;
  background: white;
  padding: .5rem 1rem;
  border-radius: 1rem;
  border: 1px solid blue;
}

header>label>input {
  border: none;
}

header>label>input:active {
  outline: none;
}

 Header은 일단 기본 상태로 놔두고

메인영역의 틀을 만들어 준 이후에 수정할것이다.