모바일 UI 구현과 함께 자잘한 기능 추가들이 있습니다!
그래서 pr 내용이 조금 번잡할 수 있어 미리 죄송합니다 😔
1️⃣ 모바일 UI 구현
PC 버전 UI에 이어서 모바일 UI 구현이 완료되었습니다.
변경된 부분은 Header, Footer, 상세페이지, 공유페이지 입니다.
공유페이지
상세페이지
2️⃣ 추가/수정된 기능들
1. 최신 일기 피드 목록 디자인 레이아웃 변경
masonry 레이아웃은 벽돌처럼 쌓아올리는 느낌의 디자인입니다.
공유페이지의 최신 일기 피드들이 나열되는 레이아웃이 단순 flex 정렬에서 masonry 레이아웃으로 변경되었습니다.
피그마에서는 masonry 표현이 어려워서 디자인되어있지 않지만 디자이너분과 이야기 결과, 가능하다면 masonry 레이아웃 디자인으로 가기로 하여 변경하게 되었습니다!
구현은 react-responsive-masonry 라이브러리 사용하였습니다.
최신 일기 피드는 왼쪽 -> 오른쪽, 위 -> 아래 순으로 나열되어야하는데 css로 구현할 수 있는 방법은 위 -> 아래, 왼쪽 -> 오른쪽 순으로 피드로 나열되게 됩니다. 왼쪽 -> 오른쪽, 위 -> 아래 순으로 나열시키기 위해 라이브러리를 사용했습니다.
🚨 npm install이 필요합니다!
2. 댓글 기능 추가
상세페이지 댓글에서 줄바꿈이 가능하도록 했습니다.
3. 헤더 기능 수정
로그인 하지 않아도 공유페이지에 접근할 수 있도록 수정했습니다.
헤더에 피드 버튼을 통해 이동합니다.
로그인 하지 않았을 경우, 피드를 클릭하면 로그인 유도 모달창이 보여집니다.
4. 상세페이지 이미지 모달 닫기 기능 수정
원래 닫기 버튼을 눌러야지만 닫을 수 있었던 상태에서 이미지 외 바깥 영역을 클릭해도 닫힐 수 있도록 구현했습니다.
5. 이미지 용량 제한 토스트 알림
이미지 업로드시, 5MB 초과하는 이미지는 업로드할 수 없도록 하였습니다.
토스트 알림을 통해 업로드 불가 메시지를 전달합니다.
18MB의 이미지를 첨부할 시 토스트 알림이 나타납니다.
3️⃣ useModal 구현
재사용 가능한 모달 훅을 구현했습니다. zustand를 활용하여 상태관리하였고 모달 컴포넌트는 Toast 컴포넌트처럼 전역으로 분리하였습니다.
1. ModalStore
모달창의 title과 content 문구와 활성화 상태를 저장하는 Store입니다.
2. ModalButtonStore
모달창의 Button 에 대한 텍스트, 디자인, 함수 데이터를 저장해두는 Store입니다.
모달창의 버튼은 1개 혹은 2개로 이루어져있어 button1, button2 만 만들어두었습니다!
button1에는 단순히 모달창을 닫는 동작을 합니다.
button2는 clickHandler를 통해 특별한 동작을 지정 할 수 있습니다.
따라서 '취소', '확인' 버튼과 같은 버튼은 button1을, 로그인하기 버튼은 button2를 사용합니다.
3. useModal 훅
모달을 사용하고 싶을 경우, useModal 훅을 사용합니다.
🚨 주의할 점은 hook 폴더에 들어있는 useModal함수(@hooks/useModal)와 이름이 같습니다.
import 시 @state/modal/useModal로 해야합니다.
현재 hook 폴더의 useModal이 UI 변경 전 소개페이지에서만 사용되는 것으로 확인했습니다
로그인 모달도 아래 3-1 loginModal 함수를 사용하는 걸로 바뀐다면 제거해도 괜찮을 것 같습니다.
✅ 체크리스트
UI
기능 추가
리펙토링
📝 작업 상세 내용
모바일 UI 구현과 함께 자잘한 기능 추가들이 있습니다! 그래서 pr 내용이 조금 번잡할 수 있어 미리 죄송합니다 😔
1️⃣ 모바일 UI 구현
PC 버전 UI에 이어서 모바일 UI 구현이 완료되었습니다. 변경된 부분은
Header
,Footer
,상세페이지
,공유페이지
입니다.공유페이지
상세페이지
2️⃣ 추가/수정된 기능들
1. 최신 일기 피드 목록 디자인 레이아웃 변경
공유페이지의 최신 일기 피드들이 나열되는 레이아웃이 단순 flex 정렬에서 masonry 레이아웃으로 변경되었습니다. 피그마에서는 masonry 표현이 어려워서 디자인되어있지 않지만 디자이너분과 이야기 결과, 가능하다면 masonry 레이아웃 디자인으로 가기로 하여 변경하게 되었습니다!
구현은
react-responsive-masonry
라이브러리 사용하였습니다. 최신 일기 피드는왼쪽 -> 오른쪽
,위 -> 아래
순으로 나열되어야하는데 css로 구현할 수 있는 방법은위 -> 아래
,왼쪽 -> 오른쪽
순으로 피드로 나열되게 됩니다.왼쪽 -> 오른쪽
,위 -> 아래
순으로 나열시키기 위해 라이브러리를 사용했습니다. 🚨 npm install이 필요합니다!2. 댓글 기능 추가
상세페이지 댓글에서 줄바꿈이 가능하도록 했습니다.
3. 헤더 기능 수정
로그인 하지 않아도 공유페이지에 접근할 수 있도록 수정했습니다. 헤더에
피드
버튼을 통해 이동합니다. 로그인 하지 않았을 경우, 피드를 클릭하면 로그인 유도 모달창이 보여집니다.4. 상세페이지 이미지 모달 닫기 기능 수정
원래 닫기 버튼을 눌러야지만 닫을 수 있었던 상태에서 이미지 외 바깥 영역을 클릭해도 닫힐 수 있도록 구현했습니다.
5. 이미지 용량 제한 토스트 알림
이미지 업로드시, 5MB 초과하는 이미지는 업로드할 수 없도록 하였습니다. 토스트 알림을 통해 업로드 불가 메시지를 전달합니다. 18MB의 이미지를 첨부할 시 토스트 알림이 나타납니다.
3️⃣ useModal 구현
재사용 가능한 모달 훅을 구현했습니다. zustand를 활용하여 상태관리하였고 모달 컴포넌트는
Toast
컴포넌트처럼 전역으로 분리하였습니다.1. ModalStore
모달창의 title과 content 문구와 활성화 상태를 저장하는 Store입니다.
2. ModalButtonStore
모달창의 Button 에 대한 텍스트, 디자인, 함수 데이터를 저장해두는 Store입니다.
모달창의 버튼은 1개 혹은 2개로 이루어져있어
button1
,button2
만 만들어두었습니다!button1
에는 단순히 모달창을 닫는 동작을 합니다.button2
는 clickHandler를 통해 특별한 동작을 지정 할 수 있습니다.따라서 '취소', '확인' 버튼과 같은 버튼은
button1
을,로그인하기
버튼은button2
를 사용합니다.3. useModal 훅
모달을 사용하고 싶을 경우, useModal 훅을 사용합니다. 🚨 주의할 점은 hook 폴더에 들어있는 useModal함수(
@hooks/useModal
)와 이름이 같습니다. import 시@state/modal/useModal
로 해야합니다. 현재 hook 폴더의 useModal이 UI 변경 전 소개페이지에서만 사용되는 것으로 확인했습니다 로그인 모달도 아래 3-1 loginModal 함수를 사용하는 걸로 바뀐다면 제거해도 괜찮을 것 같습니다.useModal은
modal
함수,loginModal
함수를 가집니다.3-1. useModal의
modal
함수modal
함수는 로그인 모달을 제외한 모달에 사용하며 아래 3가지 인수를 가집니다.setting
,button1
,buttn2
는 모두 객체 형식으로 만들었습니다.color
는 적지 않을 경우 기본값인semantic.light.object.transparent.alternative
이 사용됩니다!interaction
은 적지 않을 경우 기본값인INTERACTION.default.normal()
이 사용됩니다.3-2. useModal의
loginModal
함수loginModal
함수는 소개페이지의 로그인 버튼을 클릭할 때 나타나는 모달을 위한 함수입니다. 모달의 X버튼 클릭하면 모달이 닫히고 모달의 버튼을 클릭하면 구글 로그인 창으로 이동합니다. 사용은 간단한 편입니다 아래 코드를 참고해주세요!4️⃣ useToast에
redToast
함수기존에는 검정색 배경의 toast만 가능했었지만 빨간색 배경의 toast도 사용할 수 있도록 했습니다! useToast의
redToast
함수를 이용하면 됩니다.toastStore에 boolean 타입의
isRed
상태와 상태를 변경할 수 있는setIsRed
함수를 추가해 구현했습니다.redToast
함수는 일반 toast 함수와 실행 방법이 동일합니다. 함수의 인수로 원하는 문구를 전달합니다.이미지 용량 제한 토스트 예시
5️⃣ Callout 컴포넌트 분리
용호님께서 Banner의 이름으로 만들어두셨던 콜아웃 디자인이 공유페이지에도 사용하게 되어 공통 컴포넌트로 분리했습니다.
콜아웃 메시지를 props로 전달합니다!
🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
🤔 질문 사항 (선택 사항)
📚 참고 자료 (선택 사항)
추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.
📸 스크린샷 (선택 사항)
✅ 셀프 체크리스트
이슈 번호: Close #185