[Design] Mobile ver. - 로그인, 비밀번호 페이지 구현

[lydiacho]

Related Issue : Closes #351

---

🧑‍🎤 Summary

• SignInPage Tab, Mob 반응형 구현
• PasswordPage Tab, Mob 반응형 구현
• 그 외 피그마 데탑뷰와 디자인 살짝 다른 부분들 수정

🧑‍🎤 Screenshot

SignInPage

아직 header는 구현하지 않아서, 레이아웃 꺠지게 하는 nav는 주석처리해놓고 녹화했습니다!

2024-08-07.5.12.37.mov

PasswordPage

2024-08-07.5.13.45.mov

🧑‍🎤 Comment

🚀 breakPoint 기준

지원서 서비스의 breakPoint는

• w ~769
• w768~429
• w428~375

이렇게 범위가 나뉘게 됩니다.
편의상 desktop, tablet, mobile 이라고 분류하였어요

🚀 react-responsive 패키지

공홈 프로젝트에서 사용 중인 방식을 차용했어요

반응형 웹을 구현하기 위해 react-responsive 패키지를 추가했어요.
의존성 추가 이유는 다음과 같아요

• 조건부 스타일링 뿐만 아니라 반응형에 따라 조건부 렌더링도 필요해서 media query로 부족함
• resize 이벤트핸들러를 만들어 이모저모 구현해줄 수 있겠지만, 해당 방식은 성능 최적화를 필요로 하고 지금은 그렇게까지 구현할 여유가 없는 상황이라고 판단하여 우선 라이브러리로 편리하게 개발함. 만약 라이브러리를 지양하고자 할 경우, 추후 걷어내고 리팩 가능

🚀 useDevice 공통 hook 추가

공홈 프로젝트에서 사용 중인 방식을 차용했어요.

react-responsive를 통해 동적으로 창크기를 측정하여 mobile인지, tablet인지를 판단하는 공통 hook을 추가했어요.
commit 보러 가기 1
commit 보러 가기 2

공홈에서는 단순히 isMobile, isTablet과 같은 boolean값을 반환받아 사용하고 있지만,
저희는 vanilla extract 특성상 style variants로 대부분의 반응형을 구현하고 있기 때문에 저희가 사용하기 더 편리하도록 type을 반환시켜주는 useDevice 함수를 추가했어요.

export function useDevice(): 'TAB' | 'MOB' | 'DESK' {
  const isTablet = useIsTablet();
  const isMobile = useIsMobile();

  return isTablet ? 'TAB' : isMobile ? 'MOB' : 'DESK';
}

앞서 말했듯, 반응형의 기준은 breakpoint 범위에 따라

• DESK : 데스크탑
• TAB : 태블릿
• MOB : 모바일

로 나뉩니다.

🚀 SignInPage, PasswordPage 반응형 작업

로그인 페이지와 비밀번호 페이지 등 대부분이 공통 컴포넌트로만 이루어져있기 때문에, 대부분의 작업이 공통 컴포에 styleVary를 추가해주는 방식이었어요.
작업 사이즈가 커지게 되어 컴포넌트별로 커밋을 쪼개며 작업했어요.
아래는 제가 작업하기 전에 피그마 보고 정리한 반응형 요소들이고, 각 제목에 commit 링크 걸어두었으니 필요 시 참고해주세요!

1️⃣ Callout 반응형 작업
이미 styleVariant로 sm, lg에 따라 크기를 다르게 부여해주고 있어서,
DESKTOP일 때는 sm, lg에 따라, TAB/MOB일 때는 반응형 사이즈로 보여지게 추가했어요

width, padding, font, gap

• 데탑 : 466, '28px 28px', heading 18, 22
• 탭 : 367, '28px 16px', heading 16, 8
• 모바일 : 312, '28px 16px', title 14, 8

2️⃣ TextBox 반응형

• 너비
  • 데탑 : 466
  • 탭 : 367
  • 모바일 : 312
• 라벨
  • 데탑 : title 18
  • 탭 : title 18
  • 모바일 : title 16

3️⃣ InputLine 반응형

• inputLine gap
  • 데탑 : 10
  • 탭, 모바일 : 5
• input 내부 font size

  inputFontVar : inputVar처럼 variant와 중첩해주고 싶은 순간들이 참많았는데.. 이걸 하려면 또 새로운 vanilla 패키지 하나를 추가로 다운받아야 하더라고요? 그래서 그냥 classList로 처리해줬어요

  • 데탑 : body 16r
  • 탭 : body 16r
  • 모바일 : body 13r

4️⃣ InputButton 반응형

fontSize는 Button공컴에서 주고 있길래 공컴에 작업!

얘도 buttonFontSize classList로 추가!

padding은 어제 건영오빠 제보 이슈로 제거! -> 근데 언석오빠가 어제 이슈 해결한거 pull 안땡겨서 ㅠㅠ 직접 추가해둠!

• 데탑 : title 18, padding 15 32, width 146
• 탭 : title 18, padding 15 17, width 116
• 모바일 : title 16, padding 14 13, width 99

5️⃣ Description 반응형

• 데탑 : Label 16
• 탭 : label 16
• 모바일 : label 14

6️⃣ Timer 반응형

• input 내부 fontsize와 동일
• right 값
  • 데탑 : 172
  • 탭: 21 + 116 = 137
  • 모바일 : 23 + 99 = 122

7️⃣ InpuTheme → 이메일 인증번호 전송 메시지

• 데탑 : label 16
• 탭 : label 16
• 모바일 : label 14

8️⃣ Heading (Title) 반응형

• 데탑, 탭 : heading 40 (mds 없음)
• 모바일 : heading 24

9️⃣ SignInPage 반응형

• 데탑
  • gap 50
  • margin 90px 0 168px 0
  • width 466
• 탭
  • gap 50
  • margin 90px 0 172px 0
  • width 367
• 모바일
  • gap 30
  • margin 43px 0 115px 0
  • width 312

🔟 PasswordPage 반응형

• SignInPage와 동일

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[eonseok-jeon]

오우 너무 좋은데용~~~
완전 고생 많으셨어요!!