[Feature] - Layout Shift 개선 #454
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
Test Results11 tests 11 ✅ 13s ⏱️ Results for commit 2801971. ♻️ This comment has been updated with latest results. |
jinyoung234
requested changes
Sep 25, 2024
| @@ -3,5 +3,5 @@ import styled from "@emotion/styled"; | |||
| export const Layout = styled.div` | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 2rem; | |||
| gap: ${({ theme }) => theme.spacing.m}; | |||
There was a problem hiding this comment.
역시 css의 시모 예리하네요,,, 덕분에 아코디언 여러 개일 때 스타일 일관성이 보장 되었네요 감사합니다 ㅎㅎ
| @@ -15,7 +15,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>( | |||
| return ( | |||
| <S.InputContainer> | |||
| <S.Input variant={variants} {...props} ref={ref} /> | |||
| {count && maxCount ? <CharacterCount count={count} maxCount={maxCount} /> : null} | |||
| {maxCount ? <CharacterCount count={count} maxCount={maxCount} /> : null} | |||
There was a problem hiding this comment.
count가 사라지니까 PlaceTodoItem의 경우 maxCount만 설정하기 때문에 CharacterCount가 보여서 다음과 같이 레이아웃이 깨지는 문제가 발생합니다 ㅜ
There was a problem hiding this comment.
헉 제가 다른 부분 확인한다고는 했는데 이 부분을 놓쳤군요 바로 확인하겠습니다 고마워요!
0jenn0
approved these changes
Sep 25, 2024
jinyoung234
approved these changes
Sep 25, 2024
jinyoung234
added a commit
that referenced
this pull request
Sep 26, 2024
* [Feature] - e2e 테스트 초기 설정 및 여행 계획 등록, 로그인, 메인 페이지 e2e 테스트 구현 (#412) * chore: cypress & eslint-plugin-cypress 의존성 설치 * chore: eslint-plugin-cypress 설정 추가 * chore: cypress 사전 세팅 추가 1. baseUrl 및 viewport 설정 추가 2. root tsconfig.json 내 exclude 옵션에 cypress 추가(__tests__ 내 테스트들 type 보장을 위해) 3. cypress 관련 declaration 설정 추가 4. cypress 내부 tsconfig.json 추가 5. e2e.ts 추가 * feat: 여행 계획 등록 테스트 코드 구현 * feat: 카카오 로그인 테스트 코드 구현 * feat: 메인 페이지 테스트 코드 구현 * refactor(travelPlanRegister): path alias 적용 * chore: ci e2e 테스트 추가 * fix: ci 스크립트 수정 ci 스크립트에서 e2e 테스트 제거(로컬 환경과 ci 환경에서의 테스트 차이로 인해 일단 보류) * [Feature] - 여행 계획 등록 페이지 리팩터링 (#414) * refactor: 여행 계획 등록 페이지 내 상태 정리 form, ui, server, authorization, router 상태에 맞게 정리 * chore: immer, use-immer 의존성 추가 * refactor(useTravelPlanDays): use-immer를 활용하여 코드 리팩터링 * refactor(useTravelPlanDays): travelPlanDays에 게으른 초기화 적용 * refactor(useTravelPlanDays): 장소 내 todo 추가 시 기존 todos에 추가만 하도록 변경 1. 여행 변환, 수정, 추가 모두 todos가 존재하기 때문에 todos 필드 여부를 확인하지 않아도 되어 다음과 같이 변경 * fix: 폰트 import path 수정 (#429) * [Feature] - kakao bundle lazy loading 적용 (#430) * refactor(index.html): 카카오 sdk script body 태그로 이동 * fix: kakao sdk defer 제외 defer 추가로 인해 카카오 로그인 버튼을 누를 시 에러가 발생하여 제거 * [Feature] - 데모데이 피드백 반영(지니) (#418) * refactor(GoogleMapView): 코드 리팩터링 * chore(package.json): test-e2e:run 스크립트 수정 chrome이 기본 브라우저로 테스트 되도록 수정 * test(travelPlanRegister): force click으로 변경 * fix(useTravelPlanDays): todo가 제대로 삭제되지 않는 문제 해결 * fix(Input): 모바일 화면에서 확대되는 현상 해결 Input font-size를 16px로 변경 * refactor(Calendar): 캘린더 ui에서 지난 날짜에 대한 별도 처리 추가 이전 or 다음 달에 대한 날짜를 제공하지 않고 오늘 기준 이전 날짜에 대해 gray text 처리 및 disable 처리 하도록 변경 * refactor(GoogleMapView): 불필요한 console 제거 * test(travelPlanRegister): 불필요한 only 제거 * [Feature] - webpack 캐시 버스팅 설정 (#447) * refactor(webpack): 캐시 버스팅 적용 빌드 할 때마다 번들 파일 이름을 변경 시켜 캐시 무효화 시키도록 변경 * refactor(webpack): chunkFilename 제거 * refactor(webpack): asset들에 대한 파일 경로 및 해시 값 설정 변경 1. assets 내 위치 시키도록 변경 2. hash를 contenthash로 지정하여 파일이 변경될 때만 hash 값이 변경되도록 지정 * [Feature] - 코드 스플리팅 설정 (#450) * chore: webpack-bundle-analyzer 의존성 추가 * refactor: 코드 스플리팅 적용 * refactor: 코드 스플리팅 필요한 부분만 적용하는 것으로 변경 스켈레톤이 없는 페이지인 검색 시작 페이지, 여행기 & 여행 계획 수정/등록 페이지만 적용하는 것으로 변경 * refactor: BundleAnalyzerPlugin 주석 추가 * [Feature] - 여행 계획 상세 페이지 성능 최적화 (#453) * refactor(GoogleMapLoadScript): LoadScript 사용 대신 useJsApiLoader로 변경 * refactor(index.html): google map에 대한 preconnect 및 dns-prefetch 옵션 관련 link 태그 추가 * refactor: 불필요한 빈문자열 제거 * [Feature] - Layout Shift 개선 (#454) * refactor(AccordionRoot): gap 값 수정 * refactor(TravelogueRegisterPage): layout shift 문제 해결 * refactor(TravelogueEditPage): layout shift 문제 해결 * refactor(TravelPlanRegisterPage): layout shift 문제 해결 * refactor(TravelPlanEditPage): layout shift 문제 해결 * refactor(Input): count 있는 경우 미리 공간 차지하도록 수정 * refactor(Input): input 내부에 있던 characterCount 분리 * test(Input): input 속성 변경에 따른 storybook 속성 수정 * [Feature] - 이미지 최적화 (#455) * feat(resizeAndConvertImage): 이미지 리사이즈,포맷 변환 해주는 util 함수 구현 * feat(TravelogueRegisterPage): 썸네일 이미지 업로드시 리사이즈 및 변환하도록 수정 * feat(useMultiImageUpload): 여행장소 이미지 업로드시 이미지 리사이즈 및 변환하도록 수정 * refactor(resizeAndConvertImage): 2 depth if문 개선 * refactor(resizeAndConvertImage): 함수 책임 분리 * v1.1.0 --------- Co-authored-by: simorimi <[email protected]> Co-authored-by: choi river <[email protected]> Co-authored-by: choi river <[email protected]> Co-authored-by: simorimi <[email protected]> Co-authored-by: simhorim <[email protected]>
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.
✅ 작업 내용
📸 스크린샷
수정전
Layout.Shift.mov
수정후
Layout.Shift.mov
수정전
Layout.Shift.mov
수정후
Layout.Shift.mov
🙈 참고 사항
input의 경우에도 count가 있는 경우 미리 값을 차지하도록 수정하였습니다 :)