Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

페이지 UI: 메인 페이지 #76

Merged
merged 11 commits into from
Jan 16, 2024
Merged

페이지 UI: 메인 페이지 #76

merged 11 commits into from
Jan 16, 2024

Conversation

bottlewook
Copy link
Collaborator

해당 사항 (중복 선택)

  • FEAT : 새로운 기능 추가 및 개선
  • TEST : 테스트 추가 및 리팩토링
  • FIX : 버그 수정
  • REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
  • STYLE : 코드 스타일에 관련된 변경 사항
  • DOCS : 코드가 아닌 문서를 수정한 경우
  • REMOVE : 파일을 삭제하는 작업만 수행
  • RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
  • CHORE : 패키지 매니저 설정, 코드 수정 없이 설정 변경(eslint) 등 기타 사항

설명

Key Changes

  1. 메인 페이지 UI 제작
  2. 캐러셀 컴포넌트 분리
  3. Header 컴포넌트 classname 추가
  4. 메인 페이지에서 사용되는 Radio 컴포넌트 filter 타입 추가

How it Works

To Reviewers

  • 메인 페이지 진입 시 캐러셀이 layout shift가 발생하는 문제점이 있습니다.
    추후에 라이브러리를 지우고 새로 제작하거나 멘토분께 여쭤볼 예정입니다!

@bottlewook bottlewook added 🎨 Html&css 마크업 & 스타일링 🐞 BugFix Something isn't working labels Jan 16, 2024
@bottlewook bottlewook self-assigned this Jan 16, 2024
@bottlewook bottlewook requested a review from seoye0ng as a code owner January 16, 2024 06:48
@bottlewook bottlewook linked an issue Jan 16, 2024 that may be closed by this pull request
1 task
Copy link

vercel bot commented Jan 16, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
f1-wash-pedia-fe ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 16, 2024 6:53am

const Banner = dynamic(() => { return import('@components/shared/carousel/Banner'); }, {
loading: () => { return <h2>안녕핫[ㅔ요</h2>; },
});
const RecommandList = dynamic(() => { return import('@components/shared/carousel/RecommandList'); });
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://blog.rhostem.com/posts/2020-05-10-nextjs-and-dynamic-import
next.js에서 dynamic import 사용하는 이유: 위 링크 한번 보시면 좋을 것 같아요!
swiper.js를 이용한 컴포넌트는 dynamic import를 사용해야 'use client' 없이 main 페이지에서 사용할 수 있습니다!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 신기하네요😲 dynamic import는 'use client' 없을 때 사용하면 될까요?

Copy link
Collaborator Author

@bottlewook bottlewook Jan 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아뇨!! 그건 'use client'가 사용된 컴포넌트도 'use client'가 없는 페이지에서 사용할 수 있어요!
하지만 swiper.js의 경우는 dynamic import를 해야 에러가 발생하지 않아서 설정해뒀어요~

Copy link
Collaborator

@seoye0ng seoye0ng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다! 고생하셨습니닷👍

@bottlewook bottlewook merged commit 2ebc097 into develop Jan 16, 2024
6 checks passed
@bottlewook bottlewook deleted the ui-main-page branch January 16, 2024 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 BugFix Something isn't working 🎨 Html&css 마크업 & 스타일링
Projects
None yet
Development

Successfully merging this pull request may close these issues.

페이지 UI: 메인 페이지
2 participants