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

✨ feat: 메인 페이지 모바일 UI 구현 및 modal 추가 #201

Merged
merged 10 commits into from
Sep 15, 2024

Conversation

KKYHH
Copy link
Member

@KKYHH KKYHH commented Sep 14, 2024

✅ 체크리스트

  • 모바일 UI 구현
  • modal 추가
  • 콜 아웃 컴포넌트 추가, 수정

📝 작업 상세 내용

SVG

메인 페이지 버튼 svg 추가

스크린샷 2024-09-15 오전 6 41 01

1️⃣ 모바일 UI 구현

메인 페이지 부분 TopSection MiddleSection BottomSection 등 모바일 UI를 구현했습니다.

모바일UI메인페이지


2️⃣ 메인 페이지 모달

아직 개발 중인 테마 상점, 회고 기능에 모달을 추가 했습니다.

스크린샷 2024-09-15 오전 8 04 11


3️⃣ 콜 아웃 컴포넌트

메인 페이지 하단에 콜 아웃 문구가 추가 되었습니다.

스크린샷 2024-09-15 오전 8 05 51

수정

모바일 화면에서 Callout 컴포넌트의 svg가 깨져서 미디어 쿼리를 모바일UI와 같이 적용하고 스타일을 분리 했습니다.

스크린샷 2024-09-15 오전 8 09 34 스크린샷 2024-09-15 오전 8 10 15


🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

  • 브랜치 확인하기
  • 불필요한 코드가 들어가지 않았는지 재확인하기
  • issue 닫기
  • reiewers, assignees, Lables 등록 확인하기

이슈 번호: #195

@KKYHH KKYHH added ✨feature 구현, 개선 사항 관련 부분 👩🏻‍💻frontend 프론트엔드 작업 labels Sep 14, 2024
@KKYHH KKYHH requested review from rkdcodus and ccconac September 14, 2024 23:15
@KKYHH KKYHH self-assigned this Sep 14, 2024
Copy link
Collaborator

@rkdcodus rkdcodus left a comment

Choose a reason for hiding this comment

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

모바일 UI 너무 좋습니다! 코드도 깔끔해보여요 ㅎㅎ 수고하셨습니다 용호님!! 👍👍
궁금한 거 하나 달아두었습니다!

Comment on lines 14 to 28
const { modal } = useModal();

const themeModal = () => {
const setting = {
title: MAIN_MESSAGES.modal.preparation_notice,
content: MAIN_MESSAGES.modal.modal_notice('테마 상점은'),
};

const button1 = {
active: true,
text: MAIN_MESSAGES.modal.confirm_button,
color: semantic.light.accent.solid.alternative,
};
modal(setting, button1);
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

몬가 사용되는걸 보니 굉장히 뿌듯하군요 ✨✨✨😤

Comment on lines +3 to +11
const Spacer = () => {
return (
<>
<S.Section />
</>
);
};

export default Spacer;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 컴포넌트는 무슨 용도인가요??

@rkdcodus rkdcodus merged commit e122b80 into JECT-Study:dev Sep 15, 2024
1 check passed
@KKYHH KKYHH deleted the refactor/MainMobileUI branch September 15, 2024 16:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨feature 구현, 개선 사항 관련 부분 👩🏻‍💻frontend 프론트엔드 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants