1차 프로젝트 Day 2🔥

(meeting log와 금일 구현한 기능 정리)

Daily standing meeting log (1 차 프로젝트 Day 2)✌🏼

Back-end

Done

• 모델링 로직 구성 논의

Today's to-dos

• Django 초기 설정
• 모델링 로직 In progress (soft deadline due today)

blocker

• x

---

Front-end

아래 굵은 글씨 부분이 내가 구현한 /구현할 부분

Done

• 프로젝트 초기 셋팅
• 로그인/회원가입 component 구성
• Nav bar 레이아웃 html 구성
• Man page 레이아웃 html 구성

Today's to-dos

• 로그인/회원가입 layout
• Main page layout
• Man page layout

blocker x

• x

---

상품 페이지 구성 👚👘👞

Mock-data 사용하기

(6/26 수정 본, 이벤트가 추가 되면서 아래 설명한 이벤트를 적용하지 않았음, 업데이트된 이벤트는 최신 블로그 글에서 확인할 수 있음)

• 나중에는 백엔드에서 API받아 사용하겠지만, 아직 모델링이 되지 않았음으로 그때까지는 임의로 mock-data를 통해 리스트를 불러와서 원하는 기능을 구현해 놓는다.

1. 먼저 html이 위치한 public 폴더에 data 폴더, 그 안에 data.json 파일을 만들어 준다.
2. data.json파일 안에 json 객체 형태로 넣고자 하는 데이터를 넣어준다. (나는 구글링으로 깃헙에 있는 e-commerce mock-data repository)에서 가져왔다. 가져오고 보니 img url이 다 안되는 url이어서 손코딩으로 수정해서 올렸다.
3. 먼저 Man 컴포넌트(남성 카테고리 페이지) 에 data를 불러올 fetch 함수를 componentDidMount()에 입력한다.

constructor() {
    super();

    this.state = {
      data: [],
    };
  }
  componentDidMount() {
    fetch("http://localhost:3000/data/data.json")
      .then((res) => res.json())
      .then((res) => this.setState({ data: res.data }));
  }

4. ProductList component를 넣어 주어야 할 자리에 받은 데이터를 이렇게 입력 해주었다.

        <ProductList data={this.state.data} />

5. ProductList 에 data에서 불러와야 할 값들을 전부 map 함수를 통해 소환해 주었다.

<div className="man-collections">
        {this.props.data.map((item, idx) => {
          return (
            <Product
              key={idx}
              id={item.name}
              price={item.price}
              imageUrl={item.imageUrl}
              imageHovered={item.imageHovered}
              color1={item.color1}
              color2={item.color2}
              color3={item.color3}
            />
          );
        })}
      </div>

6. 상품 하나 하나가 보여질 Product Component에 this.props를 통해 원하는 데이터를 원하는 위치에 위치시켰다.(아래는 부분 코딩)

 <div className="text-wrapper">
            <div className="name-and-price">
              <span class="product-name">{this.props.id}</span>
              <span class="product-price">{this.props.price}</span>
            </div>

onMouseEnter와 onMouseOut 이용해서 사진 변경하기🎎

• 상품 사진에 마우스를 hover 하면 상세 사진 으로 바뀌는 이벤트를 적용시켰다.
• 먼저 마우스를 hover 할 때를 onMouseEnter로, hover하지 않을때는 onMouseOut이벤트를 적용할 텐데, 이 또한 boolean 값으로 생각해서 event를 걸어주었다.
• 먼저 state 값에 기본 시작 값을 image: false 설정 해 주었다.

class Product extends React.Component {
  constructor() {
    super();
    this.state = {
      image: false,
    };
  }

• 그 후 각 각의 event를 설정해서 MouseEnter 이벤트는 image가 true로 바뀌도록, MouseOut이벤트는 state를 false로 업데이트 하도록 설정 하였다.

  mouseEnterHandler = () => {
    return this.setState({ image: true });
  };

  mouseOutHandler = () => {
    return this.setState({ image: false });
  };

• 사진이 변경 되어야 할 img 의 src에 삼항 연산자를 사용해서 image가 hover되었을 때의 url과 기본 url를 data로부터 불러오는 코드를 작성했다.

<img className="img-original" alt="product-img"src={
this.state.image ? this.props.imageHovered : this.props.imageUrl
 } />

이렇게 하면 사진 불러오기는 완료!!!! (아직 디테일을 잡는 css 가 남아있다.. 똑같은듯 안똑같은 너.. cssㅎㅎㅎㅎㅎㅎ 내일은 hover 이벤트를 더 활용해서 색상 나오게 하는 법, 버튼에 에니메이션 구현, sort 가능한 drop down 만들기를 적용해 보려고 한다... 어제의 내가 못하던 일 을 오늘 해냈 듯, 내일의 나를 믿고 잠드는 저녁!! 화이팅!!!🔥🔥🔥 (ft.할수있어 빌리티)