인테리어 사진과 제품 조합 프로젝트

► 인테리어 사진과 가구 조합 컴포넌트 구현

• 레포지토리 주소 
Javascript로 개발  - repo < 바로가기
Typescript로 개발 - repo < 바로가기

 

► Project 소개

집꾸미기( https://www.ggumim.co.kr/star ) 집소개 기능에 포함되어 있는 사진과 가구 정보를 조합하는 컴포넌트 구현하기. React 컴포넌트 JavaScript와 TypeScript 두 가지 방법으로 구현. 

작업 기간

Javascript로 구현한 기간

2022-08-01 ~ 2022-08-04

 

Typescript로 구현한 기간

2022-08-10 ~ 2022-08-19

 

Technlogies

Front-end   HTML | CSS | JAVASCRIPT | TYPESCRIPT | REACT | STYLED-COMPONENTS

 

사진과 가구에 대한 정보는 API를 통해서 호출

• cdn.ggumim.co.kr/test/image_product_link.json

api 응답 내용

{
    "id" : 89776,
    "imageUrl" : "//cdn.ggumim.co.kr/cache/star/1000/2022011017094316oRcWeb8R.jpeg",
    "productList": [
        {
            "productId": 219762,
            "productName": "애틱 타일 이지케어 발수러그",
            "outside" : true,
            "pointX": 486,
            "pointY": 197.667,
            "priceOriginal": 76000,
            "priceDiscount": 76000,
            "discountRate": 0,
            "imageUrl": "//cdn.ggumim.co.kr/cache/furniture/300/20220110174102naCtctXTxY.png"
        },
        {
            "productId": 83544,
            "productName": "플로윙 화이트 원형 테이블",
            "outside" : false,
            "pointX": 319,
            "pointY": 170.667,
            "priceOriginal": 120000,
            "priceDiscount": 74000,
            "discountRate": 38,
            "imageUrl": "//cdn.ggumim.co.kr/cache/furniture/300/20200916133257f6yBWCxVRR.jpg"
        },
        ...
    ]
}

 

구현 기능 사항

 

‣ 인테리어 사진 속 가구 정보가 있는 곳에 돋보기 모양의 버튼 구현.

• 돋보기를 클릭하면 상품정보 tool tip 출력되면서 돋보기 모양이 닫기 버튼으로 변경.
• 닫기 버튼을 클릭하면 tool tip을 없애고 돋보기 버튼으로 변경.
• tool tip은 하나만 노출. tool tip이 노출되고 있는 상태에서 다른 가구를 선택하면 노출되고 있던 tool tip은 닫히고 새로 클릭한 가구 tool tip만 노출.
• API에서 할인율이 존재하는 경우 (입점 브랜드)에는 tool tip에서 할인율(ex. 38%) 표시, 존재하지 않는 경우 (비입점 브랜드)에는 ‘예상가’ 텍스트 표시.

 

‣ 인테리어 사진 하단에 가구 상품목록 구현.

• 상품목록에서 해당 가구 선택 시 해당 이미지 border 생성.
• 상품목록에서 해당 가구가 선택되었으면 인테리어 사진 속 해당 가구 상품정보 tool tip 출력.
• API에서 할인율이 존재하는 경우에는 할인율 표시.

 

‣ 가구 정보는 2가지 형식이 존재 (입점 / 비입점 가구)

• 입점되어 있는 가구 (product 정보에 outside가 false 이 가구)
  • 상품 이미지 (product 정보 imageUrl)
  • 상품명 (product 정보 name)
  • 할인율 (product 정보 discount)
  • 가격 (product 정보 priceDiscount)

• 입점되지 않는 가구
  • 상품 이미지 (product 정보 imageUrl)
  • 상품명 (product 정보 name)
  • 예상 가격 (product 정보 priceDiscount)

 

‣ Typescript는 추가적으로 모바일 반응형 구현.

• media query를 이용하여 모바일 반응형 구현.

 

► Project Review

기록하고 싶은  부분

 

프로젝트 후기

 

 

 

Reference
이 프로젝트는 집꾸미기 사이트를 참조하여 학습 목적으로 만들었습니다.
실무 수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제 될 수 있습니다. 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.

•