[Feat/#27] home section6 scroll 부분 구현

[zzz-myam]

📑 이슈 번호

• [feat] home section 6 스크롤 컴포넌트 구현 #27

✨️ 작업 내용

• 홈 화면 section 6 스크롤 부분 구현

🌊 코멘트

• 근데 피그마에 비해 전반적으로 왜 이렇게 거대한 것 같을까요?

📸 구현 결과

[ocahs9]

첫 합세 퍼블리싱 PR !!! 지유 고생했어~~
근데 한 가지 보완해야할 점이 있어서 어푸는 안했어!

슬라이딩 기능이 구현 되긴 했지만, 터치를 하지 않는 이상 드래그가 되지 않더라고!(나는 터치 모니터라서 터치해서 움직이면 드래그되는 건 확인했어)

따라서 클릭해서 좌,우로 드래그 할 수 있도록 만들면 좋을 것 같아! 혹은 해당 div에 마우스를 올린 뒤, 휠을 돌리면 좌/우로 움직이도록 ! onWheel 이벤트나, onMouseDown, onMouseMove, onMouseEnter, onMouseLeave 과 같은 이벤트 등등을 사용해서 구현해야할 것 같은데 한번 보완해보자!!

이벤트리스너 여기서 더 익숙해질 수 있는 기회다 화이팅🔥🔥

+) 근데 피그마에 비해 전반적으로 왜 이렇게 거대한 것 같을까요? -> 실제 우리 환경의 width값이 더 넓어서 그래..!
일단 피그마에 있는 값들로 구현하면 되고, 화면 너비 전체를 차지하는 것만 좀 특별하게 관리해주자(width: 100% 등등을 사용해서)

[ocahs9]

엇 이거 아마 scpt 단축어를 사용하면 ${({theme}) => theme.fonts.head_b_24}; 과 같이 사용할 수 있을텐데
이렇게 props로 받아서 작성한 이유가 혹시 있을까요?!? 물론 잘못된 방법은 아니지만 혹시나 일일히 치고 있는건 아닌가 하는 걱정이 들어 여쭤봅니다 !

[zzz-myam]

scp까지만 치면 저렇게 나오더라고요!! scpt까지 쳐서 활용해보겠습니다!

[ocahs9]

사실 몇개 없기도 하니까 이렇게 복사 + 붙여넣기 해도 되지만(나도 그러기도 했고..) 공부하는 입장이니까 한번 간단하게 리팩토링 해보자!! 지금 이 코드를 보면 거의 대부분의 코드가 똑같고, 다른 부분은 이미지랑 라벨 텍스트 2개 뿐이니까

const cardData = [
  { img: <Img61 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '15pt 중고매장 FAQ' },
  { img: <Img62 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '책모양 오르골' },
  { img: <Img63 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '북슬리브' },
  { img: <Img64 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '퀄팅 북슬리브' },
  { img: <Img65 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '미니 토트백' },
  { img: <Img66 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '아크릴 스탠드' },
  { img: <Img67 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '데스크 매트' },
  { img: <Img68 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '아크릴 램프' },
  { img: <Img69 style={{ flexShrink: 0, borderRadius: '1rem' }} />, label: '스틸 북엔드' },
];

const Section6CardLayout = () => {
  return (
    <S.Section6CardLayout>
      {cardData.map((card, index) => (
        <S.Section6CardContainer key={index}>
          {card.img}
          <S.CardLabel>{card.label}</S.CardLabel>
        </S.Section6CardContainer>
      ))}
    </S.Section6CardLayout>
  );
};

이런 식으로 개선할 수 있겠네! 혹은 imgSrc와 Label을 하나의 객체로 묶어서 그 객체들을 담는 배열을 만들고, 그 배열을 map 함수 돌려서 컴포넌트를 생성할 수 있을 것 같기도 하고.. 시간되면 꼭 도전해보자 !!! 깔끔하고 가독성 좋은 코드를 작성하기 좋아 👍

[zzz-myam]

이번 기회에 map에 대해 제대로 공부했습니닷!!!

[ocahs9]

잘 반영해뒀네~ 어푸해둡니다

두 개인것만 좀 없애봐 ㅋㅋㅋ