design : 판매자 홈에서 보여질 이달의 아트 디자인 & 등록여부에 따른 ui분기처리

🔥 Issues

🎯 작업 내용

[Mock data추가 & 카메라 icon추가]

🤡 이달의아트 가상정보 추가 & 카메라 아이콘 추가

BE측에게 요청한 데이터형태로 Mock데이터 추가했습니다. 또한 카메라 아이콘이 필요해서 NTIcon에 추가했습니다.

[홈에서 보여질 이달의 아트 구성]

현재 ui가 준비되지 않아서 어떤 ui로 보여주면 좋을지 고민을 많이해봤습니다. woody님에게 의견받은대로 작업을 해봤는데요

위의 ui를 참고해서 저희 프로젝트에 적용해봤습니다. 왼쪽에 확대된 이미지가 보여질 컴포넌트를 ImageViewrBox 오른쪽 이미지리스트가 보여질 컴포넌트를 AOMImageList로 구성했습니다.

[ImageViewerBox]

🎨 ImageViewrBox

ImageViewerBox는 2가지의 역할을 수행합니다.

등록된 아트가 있을경우 => 확대된 사진을 보여줍니다. 등록된 아트가 없는경우 => 아트를 등록할 버튼을 제공합니다.

[AOMImageList]

🎨 AOMImageList

기본5개의 image list가 보여지고 >아이콘 클릭시 다음 5개의 그룹이 보여집니다. overflow-hidden을 사용해 먼저 모든 이미지를 불러오고 , trasnformX를 통해 애니메이션으로 다음 그룹을 보여주도록 코드를 작성했습니다. animation을 통해 다음 image 그룹을 보여주도록 한 이유는 reflow 과정없이 repaint만 발생시키기 위함입니다.

[결과물]

### Case 등록된 아트가 없는 경우

### Case 등록된 아트가 있는 경우 https://github.com/user-attachments/assets/76faf8d6-1dbe-4d51-a059-266ba2d98b37

✅ 체크 리스트

[x] Main 브랜치 Pull 받기
[x] Issue 번호 설정 확인
[x] Label 확인
[x] Assignees 설정 확인
[x] Reviewers 설정 확인

🙏 꼭 리뷰 남겨주세요.!!

아래 양식에 맞게 리뷰 부탁드립니다..!!
수정을 요구하는 게 아니라면, "Description" 을 꼭 남기지 않아도 좋습니다. 👍

# Request Level

<!--
  - [x] "🚨 꼭 수정해주세요.!"
-->

<!--
  - [x] "🚧 재고해주시길.."
-->

<!--
  - [x] "✅ LGTM"
-->

# Description

mobi-projects / nail-case-client

design : 판매자 홈에서 보여질 이달의 아트 디자인 & 등록여부에 따른 ui분기처리 #211

🔥 Issues

🎯 작업 내용

[Mock data추가 & 카메라 icon추가]

[홈에서 보여질 이달의 아트 구성]

[ImageViewerBox]

[AOMImageList]

[결과물]

✅ 체크 리스트

🙏 꼭 리뷰 남겨주세요.!!