⚡ 페이지 컨테이너, 모달 컴포넌트, 신고하기 모달 컴포넌트의 폴더 위치 조정

[suhwan2004]

CheckList

• gap를 이용하여 flex 컨테이너 내 자식 요소간의 간격을 제어하였나요? (iOS 14 미지원으로 gap -> space-x, space-y 적용)

작업 이유

• 어제 회의에서 토의된, 컴포넌트들 별 맞는 폴더 위치의 조정 필요로 해당 작업 진행
• 어제 회의에서 토의된, mock types 위치 조정 및 해당 내용 적용
• IOS 세팅에 대응하여, 화면 Zoom 세팅을 프로젝트 내 적용 필요로 인해 진행

작업 사항

1️⃣ 컴포넌트 별 폴더 위치 조정

어제 회의가 나왔던 내용대로 다음과 같은 폴더 위치 변동이 있었습니다.

신고하기 모달 => widgets 폴더로 이동
페이지 컨테이너, 모달 => shared/ui로 이동

또한, blindFeed 함수의 경우에는 생각해보니 다음과 같은 상황이기에...

• feedHandler에서 피드 조회하기를 하는 함수가 존재할 예정이고
• 동일한 feedMockData를 Import 하여 사용할 것이기에

blindFeed는 차주에 작업 예정인 피드 숨기기 mock & ui 구현에서 작업할 예정으로 판단하여 현재는 제거해둔 상황입니다.

2️⃣ mock types 위치 조정

마찬가지로 어제 회의가 나온 내용을 토대로 mock typs(IUser, IFeed, IImage)들의 위치 조정을 진행하였습니다!

IUser, IFeed => widgets/{user 또는 feed}/model/type.ts
IImage => shared/types/image.ts

또한, 위 타입들을 사용하는 코드들에 대한 import 또한 수정이 있었습니다.

3️⃣ IOS 세팅에 대응하여, 화면 Zoom 세팅을 프로젝트 내 적용

IOS 팀에서 보여주는 화면 UI와 통일된 UI를 제공하기 위해, 체공받은 기기별 화면 배율 설정을 저희 프로젝트에 적용해두었습니다.

SSR 환경에서도 보여야 하는 것을 고려하여, global.css에 작업을 진행해두었습니다.

실제 page.tsx에서 해당 작업이 정상 적용된 것을 확인 했고, body태그에 Zoom을 적용시켜주는 것이기 때문에 storybook에서도 해당 내용이 보이는 것을 확인해두었습니다.

리뷰어가 중점적으로 확인해야 하는 부분

• 기존 컴포넌트 및 타입의 폴더 조정 작업에 이상이 있는지
• global.css 내 정의된 Zoom 작업에 특이사항이 있는지
  
  

발견한 이슈

1. css zoom 속성을 html, body에 동시에 줄 때 오작동이 되는 이슈

• 처음 zoom을 적용시킬 때, body에까지 zoom을 줄 시에 modal 내에 두 개의 버튼의 width가 커지는 화면 배율에 따라 확대되지 않는 이슈가 있었습니다.

해당 이슈 발생 후에, safari 내 zoom 속성이 잘 동작되지 않는구나라는 이슈글 확인 및 해당 근거로 transform : scale(배율)을 사용하여 3번 개발사항을 구현하자라고 생각하였으나 동작이 원체 꼬여 다시 zoom 프로퍼티를 넣어 진행 중에 body에도 적용시킨 zoom을 뺐을 때 특이사항 없이 정상 동작이 되네요...

현재로써는, html과 body 확인 시에 사실 둘은 height가 다르며, zoom을 두 개의 자식 부모 태그에 중첩으로 부여해서 해당 이슈가 있었다라고 추측하고 있으나 명확한 이유에 대해서는 확실히 안나오는 듯 합니다... 혹시 아시는 분은 공유 부탁드립니다

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-15.d1rrzjx2upcmxq.amplifyapp.com

[Legitgoons]

원인 불명의 이슈때문에 고생이 많으셨습니다. 알다가도 모를 safari.. 쉽지 않네요 ㅋㅋㅋㅋ

[BangDori]

신고하기쪽에 빠진 부분이 있는 것 같아요! 확인부탁드려요~~

[BangDori]

고생하셨습니당~ 확인 완료했어요!