feat(loading): 로딩 페이지 추가 #80
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
테스트 방법
RPReplay_Final1720445789.mp4 |
nnyouung
approved these changes
Jul 16, 2024
seungholee-dev
force-pushed
the
feat/friends-list
branch
from
f12011d to
ba47b08
Compare
seungholee-dev
force-pushed
the
feat/loading-icon
branch
from
41e7964 to
06eb272
Compare
개요 - 채팅 생성창에서 친구목록을 가져올 수 있도록 한다. 수정 사항 - `FriendList.jsx` - default value 삭제 - api.js - 현재 멤버의 커넥트 가져오는 함수 구현 - `ChatRoomPage.jsx` - 현재의 멤버Id와 커넥트를 가져오는 부분 `useEffect`에 구현 - `FriendListPage.jsx` - `filterAcceptedConnects`: 성사된 커넥트만 보여줌 - `getOtherMemberFromConnect`: 커넥트에서 상대방의 정보를 가져옴 - 정보를 바탕으로 친구목록을 보여줌 - `secureStoreUtils.js` - 본인 ID를 secure store에서 가져오는 과정이 계속 반복되어, 유틸 함수로 추출
seungholee-dev
force-pushed
the
feat/friends-list
branch
from
ba47b08 to
dbe6a62
Compare
개요 - 디자인 명세서에 따라 로딩 화면을 구현한다. - https://www.figma.com/design/mWNXToJWQFleMlVHUshgnF/Dife_design?node-id=1953-18902&m=dev 수정 사항 - DifeYelloDotLogo.jsx - 디프 로고 (노란점있는 버전) SVG 생성 - Dot.jsx - 로딩의 점 컴포넌트이며 재활용을 위해 외부 컴포넌트로 작성 - Loading.jsx - 점 + 로고로 이루어진 로딩 컴포넌트 - useRef로 세개의 점에 대한 애니메이션 값(Opacity 값)을 생성함 - 그것을 배열로 보관하여, 개수만큼(3개) Dot 컴포넌트를 생성하고, Opacity의 값이 애니메이션으로 변하면서 동시에, Animated.interpolate를 사용해서 translateY 값도 0부터 -10으로 변할 수 있도록 한다. 즉, 점의 색이 진해질수록, translateY의 값이 -10의 위치로 이동 - WebSocketContext.js - 기존의 임시 로딩 텍스트를 삭제하고 생성한 Loading 컴포넌트 적용
seungholee-dev
force-pushed
the
feat/loading-icon
branch
from
06eb272 to
e0a97a2
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
개요
수정 사항
DifeYelloDotLogo.jsxDot.jsxLoading.jsxOpacity값)을 생성함Opacity의 값이 애니메이션으로 변하면서 동시에,Animated.interpolate를 사용해서translateY값도 0부터 -10으로 변할 수 있도록 한다. 즉, 점의 색이 진해질수록,translateY의 값이 -10의 위치로 이동WebSocketContext.jsLoading컴포넌트 적용