[Design] Mobile ver. - 결과 페이지 반응형

[lydiacho]

Related Issue : Closes #369

---

🧑‍🎤 Summary

결과페이지 반응형 작업

🧑‍🎤 Screenshot

• 최종 합격 페이지 반응형

_._2024-08-10_._5.02.08.mov

• 공용 불합격 페이지 반응형

_._2024-08-10_._5.03.32.mov

🧑‍🎤 Comment

1️⃣ SOPT makers 전용 결과 문구 반영

TF팀에서 결정한 문구대로 반영했습니다.
그런데 문구에서 makers를 SOPT makers 라고 칭하더라고요. 근데 저희는 soptName을 makers로만 설정해주었잖아요?
그래서 soptName 앞에 SOPT들을 하드하게 추가해놓았어요.
그럼 soptName을 변수처리한테 조금 의미가 없어지지만 어차피 솝트에서 쓸 땐 솝트 먼진들이 정하신 문구로 바꿔야 하기 때문에
일단 지금은 임시방편으로 이렇게 넣어놔도 될 것 같아요

2️⃣ 구글폼 링크 환경변수 분리
저번에 언석님께서 링크 수정 시 코드단으로 수정할 필요 없도록 구글폼 링크를 환경변수로 분리시켜주셨는데요,
서류 합격 화면 뿐만 아니라 최종 합격 화면에서도 구글폼 링크를 보여줘야 하기 때문에

VITE_SCREENING_PASS_LINK
VITE_FINAL_PASS_LINK

이렇게 두가지 환경변수 설정이 필요합니다!
해당 환경변수 값은 보안상 비공개되어야 하는 값이 아니므로 그냥 여기에 올립니다!

VITE_SCREENING_PASS_LINK=forms.gle/3cCidiC7ieZ3fxro8
VITE_FINAL_PASS_LINK=forms.gle/pTYTtyJ5D9kwkZZJ9

3️⃣ 디자인 반응형 작업한 내용

• 전체적인 페이지 layout 반응형 (width / marginTop / gap )

  • 데탑 : 720 / 90 / 50
  • 탭 : 367 / 90 / 50
  • 모바일 : 312 / 43 / 30

• 스크롤 추가

  • content에 paddingBottom 줘서 스크롤 내렸을 경우 아래에 여백 있도록
    • 데탑 : 202
    • 탭 :170
    • 모바일 : 107
  • contentWrapper에 overflow: auto (hidden으로 되어있는거 삭제)

• 하단 그라데이션 추가
  유저가 스크롤해야 함을 알 수 있도록 하단에 fixed된 그라데이션 박스 추가
  피그마에서는 height 220px 짜리 예시만 있었는데,
  스크롤 최하단으로 내렸을 시 맨 아래줄 내용이 그라데이션에 묻히지 않는 정도의 height로 데탑/탭/모바일 알아서 설정해놓음 !

• 합격페이지 배경 로고

  • 모바일 환경 (429px 아래)에서는 안보이도록
  • marginBottom, marginRight vw단위 활용하여 반응형 되도록

• 구글폼 주소 텍스트 줄넘김 이슈

  • 화면이 좁아질 경우 디자인 상 https:// 뒤에서 개행이 되길 바라고 있음
  • 현재 우리는 span, a태그가 사용된 구조 때문에 주소 뒤 닫힘괄호 하나만 덜렁 개행됨
  • white space 속성 활용하는 법 등등 여러 방법 시도해봤지만 결국 그냥 \n을 TAB, MOB일 때 (화면 좁아졌을 때)만 조건부 렌더링 하는 식의 방식으로 구현함
  • 이거 때문에 환경변수 링크에서는 https:// 빼놓고, 링크 텍스트에만 별도로 추가해줌

[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]

2024-08-12.12.02.35.mov

제 컴퓨터에선 하단 부분이 안 보이는데
승희님 컴퓨터에선 잘 보이나요?

[lydiacho]

@eonseok-jeon 와 정말 감사합니다
제가 스크롤 및 그라데이션 작업을 FinalResult에만 적용시켜주고 서류 페이지에서는 몇개 누락시켰네요.. ㅠㅠ
하필 서류를 ㅠㅠ 발견 너무 감사드립니다

보강해두었고,
추가로 합격 페이지에서 하단의 우웅우웅 애니메이션이 스크롤그라데이션에 가려져서 안보이길래
zIndex 높여주는 작업 추가했습니다!

RPReplay_Final1723402589.MP4

[lydiacho]

@eonseok-jeon StatusButton onClick에 모바일 접속 제한을 걸어놔서,
지원서 확인 외에 결과 확인도 모바일 접속이 안되고 있더라고요 (열심히 결과페이지 만들어놓고 헛수고 됐을 뻔 ㅜㅜ )
그래서 label로 조건 검사 후 '결과 확인'은 모바일 접속 풀어놓는 작업도 여기서 진행해주었습니다

develop 당겨와서 로그인부터 구글폼 접속까지 전체 플로우 돌려봤습니다

RPReplay_Final1723404381.MP4

결과페이지에서 스크롤이 버벅이는 모습을 볼 수 있는데 추가적인 dvh 처리가 필요한 이슈인 것 같아요
이건 일어나 해결해보겠습니다!

[eonseok-jeon]

고생하셨습니다~
작업 완료 되면 언급 해주세여 :)

[lydiacho]

dvh 스크롤 이슈 추가로 해결했습니다!

RPReplay_Final1723428855.MP4

RPReplay_Final1723428902.MP4

이거 스크롤 이슈 해결하면서 자동으로 어색한 스크롤은 사라진 것 같은데 한번 확인해보시겠어요?? @eonseok-jeon

[eonseok-jeon]

@lydiacho 너무 좋네여~~ 고생하셨습니다 :)

머지 하기 전에 my page 내용들 돌려놓는 거 잊지말아 주세여 ~~