[Team Project] 크록스(Crocs) 1

기간 :  6월 20일 ~ 7월 1일

팀원: 프런트엔드 3명, 백엔드 1명

 

담당 페이지 : 상품 상세 페이지

 

HTML, CSS, Javascript

라이브러리 : React

 

중간 점검

 

제작 중

 

이번 주 5일 동안의 주요 기능

- 공식 홈페이지를 참고한 클론 레이아웃

- MockData를 이용하여 데이터 활용

- 캐러셀(슬라이드) UI 기능 구현

 

1. 공식 홈페이지를 참고한 클론 레이아웃

 

크록스 공식 홈페이지를 참고하여 레이아웃을 구성하고 HTML과 CSS를 적용시켜 보았다

처음부터 미디어 쿼리를 이용한 반응형을 제일 후위 순위로 놓았기 때문에 px단위를 사용하여 웹 pc 뷰에서는 UI가

늘어나거나 줄어 나지 않게 하였으며 이후 반응형 페이지 작업을 진행할 시 미디어 쿼리를 이용해서 단계별로 UI를 

수정하는 방향으로 하려고 한다

 

작업 중 겪은 문제 점

• HTML 하드코딩을 할 때 React를 사용한 것을 고려해 Component단위로 쪼갤 수 있는 영역을 잘 구분해서 설계하지 못한 점
• 오른쪽 상단 상품 정보를 선택하는 곳이 position: Sticky라는 CSS 속성 애니메이션을 사용한 것으로 보이는데 Sticky를 사용하는 영역의 세로 값을 px로 고정하여 다른 영역에서 이미지 크기가 변경되거나 text를 사용한 곳이 두줄, 세줄이 되면 Sticky영역이 맞지 않는다는 점
• 페이지 하단 캐러셀 기능이 들어갈 추천 제품과, 신제품 소식에서 캐러셀 기능을 위해 필요한 박스 영역을 제대로 설계하지 못한 점

컴포넌트 별로 scss파일을 나눈 모습

 

 

캐러셀 기능 구현을 위한 div영역 분리

 

2. MockData를 이용하여 데이터 활용

백엔드 분과 소통을 통해 받아온 데이터 form을 통해 넣은 데이터를 이용하여 임의로 내가 만들었던 json파일을 제거하고

정식으로 사용될 데이터 양식으로 나온 데이터를 이용하여 상품의 이미지, 타이틀, 컬러, 사이즈 등등 다시 데이터를 넣는 작업을 진행했다 앞으로 어떤 식으로 상품 데이터를 보여주는지 공부가 더 필요하지만 상품 한 개의 데이터를 잘 생각해서 프런트단에 넣어야 한다는 걸 알게 되었다 결론은 내가 테스트 삼아 막 만들었던 데이터조차도 생각해서 만들어야 한다

 

상품 상세 페이지에서 필요한 상품 한 개의 데이터

{
    "product_id": 1,
    "product_name": "클래식 크록스 플립",
    "price": 31000,
    "productImage_url": "/images/crocs_03.jpg",
    "colors": [
      {
        "color_id": 1,
        "color_name": "black",
        "image_url": "/images/crocs_03.jpg"
      },
      {
        "color_id": 2,
        "color_name": "white",
        "image_url": "/images/crocs_04.jpg"
      },
      {
        "color_id": 3,
        "color_name": "blue",
        "image_url": "/images/crocs_05.jpg"
      }
    ],
    "size": [
      { "size_id": 1, "size": "210" },
      { "size_id": 2, "size": "220" },
      { "size_id": 3, "size": "230" },
      { "size_id": 4, "size": "240" },
      { "size_id": 5, "size": "250" },
      { "size_id": 6, "size": "260" },
      { "size_id": 7, "size": "270" },
      { "size_id": 8, "size": "280" },
      { "size_id": 9, "size": "290" },
      { "size_id": 10, "size": "300" },
      { "size_id": 11, "size": "175" },
      { "size_id": 12, "size": "180" },
      { "size_id": 13, "size": "190" },
      { "size_id": 14, "size": "200" }
    ]
  }

 

작업 중 겪은 문제 점

• 프런트 마음대로 만든 데이터 파일들과 백엔드 분과 소통 후 받은 데이터 형식의 형태가 너무 달라 마치 처음부터 데이터를 다시 넣어야 하는 느낌으로 작업하게 됨
• 상품 한 개의 데이터라도 뿌려지는 UI가 많다 보니 상당히 많은 코드가 상품 한개의 데이터가 될 수 있음
• 다들 처음 배우고 적용시켜 보는 프로젝트라 프런트, 백 모두 앞으로 어떻게 데이터를 주고받아야 하는지 모름

3. 캐러셀(슬라이드) UI 기능 구현

캐러셀 구현은 캐러셀을 움직일 div(박스)의 영역부터 잘 설계해야 한다

 

• 캐러셀을 위한 div영역 

- 여기서 자주 하는 실수 

image들을 Carousel 영역에 쭉 넣으려고 한다

캐러셀을 움직이기 위해서 image들을 담을 Carousel-box를 만들어 Carousel-box를 좌우로 움직여라 하면 된다

 

• image들을 넣고 css 줘서 확인해보기

• trasform translateX()

.carousel-box {
  display: flex;
  width: 1300px;
  height: 400px;
  background-color: beige;
  transition: all 1s;
  transform: translateX(-500px);
}

• React 식으로 풀어 적용시키기

리액트에서는 useState를 이용하여 UI스위치 개념으로 이용할 수 있다

State안에 있는 값이 ture면 UI 보여주거나 바꿔줘라 이런 식이다

 

• 작업 중 겪은 문제 점

이렇게 3단계 과정을 거치면 크게 어려움 없이 캐러셀 UI를 구현해 볼 수 있다

다만 이 과정에서의 큰 단점이 하나 있는데 지금은 px단위를 이용하여 image를 이동시키지만 실제로 상품들의 개수가

늘어나거나 줄게 되면 상품의 개수만 큰 Carousel-box가 늘어나야 하는데 지금은 고정값을 사용하고 있다

 

한창 고생하고 있는 우리 팀원들 파이팅