[FEAT] 메인페이지 퍼블리싱

[maylh]

🛰️ 관련 이슈

해결한 이슈 번호를 작성해주세요
close #114

🧑‍💻 작업 내용

작업한 내용을 간략히 작성해주세요

• 메인페이지 퍼블리싱 완료했습니다

🗯️ PR 포인트

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

• 각 컴포넌트 사이의 간격이 일정하지 않아서, 일일히 gap을 주려면 div가 너무 많아질 것 같아, 재사용되지 않고 메인페이지 내에서만 사용되는 컴포넌트 (템플스테이 보러가기 버튼, 지도 등) 자체에 margin을 설정해준 부분이 있습니다. 괜찮을까용 ?

🚀 알게된 점

기록하며 개발하기!

📖 참고 자료 (선택)

참고했던 문서들 공유하기!

📸 스크린샷 (선택)

2025-01-20.8.31.56.mov

[github-actions]

🪷 Storybook 확인 🪷
🔗 https://677fa9af1269762b7858c29f-ccvfyoskhc.chromatic.com/

[seong-hui]

화면 이쁘네용!! 현재 캐러셀 터치 로직에서 드래그 시 화면이 같이 밀리는 현상이 있어서 touch-action: none 을 추가해서 해당 동작을 막는 로직을 추가해주시면 더욱 좋을 것 같습니다!! 짱짱 !!

[seong-hui]

해당 스타일에서 flex스타일이 반복적으로 사용중이라서

import { style } from '@vanilla-extract/css';

const flexCenterColumn = style({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
});

export const homeWrapper = flexCenterColumn;

export const curationCarouselStyle = style([
  flexCenterColumn, 
  {
    gap: '0.8rem',
    marginTop: '5.4rem',
  },
]);

export const popularCarouselStyle = style([
  flexCenterColumn,
  {
    gap: '0.8rem',
    margin: '5.4rem 0 28rem 0',
  },
]);

이런식으로 정의해서 반복되는 스타일을 빼면 더욱 좋을 것 같아요!!

[maylh]

3c9128c 90fcf60 말씀해주신 부분들 반영했습니다 ~!

[Taew00k]

성희님이 말한 것 처럼 화면 같이 움직이는 현상만 확인해주시면 될 것 같아요 고생하셨슴다~~ 뷰 예쁘네요

[bykbyk0401]

커서!! 포인터!! 커서!! 포인터!!
반영헤줘잉
통일성 가지자요

[maylh]

커서!! 포인터!! 커서!! 포인터!! 반영헤줘잉 통일성 가지자요

이미 반영되어있어잉