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 구현 #33

Merged
merged 8 commits into from
Feb 16, 2024

Conversation

ParkSohyunee
Copy link
Contributor

@ParkSohyunee ParkSohyunee commented Feb 15, 2024

개요

  • 로그인 페이지를 모달 형태로 구현했습니다.

작업 사항

  • 공통 컴포넌트 LoginModal 제작
  • 공통 컴포넌트 Modal size prop 추가한 확장
  • /login 페이지에 로그인 모달 연동

참고 사항 (optional)

  • 로그인 모달 연동 방법
...
const { isOn, handleSetOff, handleSetOn } = useBooleanOutput();

return (
     ...
      {isOn && (
        <Modal handleModalClose={handleSetOff} size='large'> // size
          <LoginModal />
        </Modal>
      )}
)

스크린샷

  • 로그인 버튼 -> 리다이렉트 페이지 -> 탐색페이지
    ㄴ 로그인 후 현재는 탐색페이지(/)로 이동하지만, 로그인을 시도했던 페이지로 이동하도록 수정 예정
    ㄴ 리다이렉트 페이지로 이동하면서 모달은 자동으로 닫힘

Feb-15-2024 14-19-52

  • 모달 크기 확인
image

리뷰어에게

  • 현재 카카오 로그인만 구현된 상태로 [카카오 로고]만 클릭하여 로그인 부탁드립니다.
  • 로그인이 필요한 곳에서 로그인 모달을 연동하기 전까지 로그인을 위해 기존처럼 /login에서 로그인 부탁드립니다.
  • 링크 모달 등은 basic 사이즈 / 로그인 모달은 large 사이즈입니다.

Copy link

vercel bot commented Feb 15, 2024

@ParkSohyunee is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

Comment on lines 8 to 16
interface ModalMainProps {
size?: 'basic' | 'large';
children?: ReactNode;
handleModalClose: () => void;
}

function ModalMain({ children, handleModalClose }: ModalMainProps) {
function ModalMain({ size = 'basic', children, handleModalClose }: ModalMainProps) {
const { ref } = useOnClickOutside(() => {
handleModalClose();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

(참고) 현재 size가 옵셔널로 되어있는데, 기존 모달을 사용하는 코드에서 size prop을 모두 지정후에 옵셔널을 지울 생각입니다!

Copy link
Contributor

@seoyoung-min seoyoung-min left a comment

Choose a reason for hiding this comment

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

일정 후에 빠르게 작업까지ㅠㅠ 감사합니다!! LGTM👍👍

Comment on lines +30 to +32
interface SizeVariantsType {
[key: string]: ComplexStyleRule;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

노트노트⭐️ 감사합니다!!🥹👍

Copy link
Contributor

@Nahyun-Kang Nahyun-Kang left a comment

Choose a reason for hiding this comment

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

오매낫 어떻게 이렇게 빨리 만드셨나요?!!🤩 제 상세 페이지에 당장 반영해야겠습니당..👀 너무 고생하셨습니다!! LGTM

}}
>
<button onClick={() => handleSetOn()}>
누르면 로그인 모달 등장
Copy link
Contributor

Choose a reason for hiding this comment

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

친절한 주석 설명 감사합니다..!🥰

</div>
</div>
<div className={styles.buttonContainer}>
<Link href={`${baseUrl}/auth/${oauthType.naver}`}>
Copy link
Contributor

Choose a reason for hiding this comment

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

와... 저도 링크 쓸 수 있는 건 그냥 링크 써도 됐는데.. 완전 까먹고 있었어요👀 감사합니다..!

export const text = style({
color: vars.color.black,

// TODO Body Regular로 변경하기
Copy link
Contributor

Choose a reason for hiding this comment

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

todo란 이렇게 쓰는 것이다.. 메모메모

@ParkSohyunee ParkSohyunee merged commit 99ea06d into 8-Sprinters:dev Feb 16, 2024
0 of 2 checks passed
@ParkSohyunee ParkSohyunee deleted the feature/login-ui branch August 3, 2024 02:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design UI 수정 Feat 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants