[ 전체 레이아웃 ] CSS 구조변경

[ahrrrl]

close #344

✅ 작업 내용

1. 네브 작동 상태관리 및 컴포넌트 정리
   • 상태관리 축소
   • 컴포넌트를 왼쪽네브, 모바일용헤더, 모바일용시트로 나눔
   • 에니메이션 정리

• 네브가 자동으로 펴지거나 접혀질 때 애니메이션 작동합니다.(debounce로 0.2초 동안 화면 크기 변화가 없고 1024px 분기점을 지나야 작동)

https://github.com/user-attachments/assets/0b1f7992-bd92-4a6c-8462-bc7bf3091dad

• 테블릿 사이즈에서도 네브가 시트로 안나오고 폈을 때 원래 네브가 나오게했습니다.

https://github.com/user-attachments/assets/15c9f76f-2809-46fe-9496-813d67e568e8

기존 모바일 사이즈에서 모바일 헤더만큼의 높이가 추가되는 것을 조정했습니다. 적용 페이지(노트생성, 수정, 목표상세, 대시보드, 모든 할 일)

• before

• after

2. 네브 리팩토링에 따라 모달과 sheet에 z-index를 추가했습니다.

3. 루트레이아웃의 높이를 수정하였습니다

   • HTML의 스크롤 상속
   • history.scrollRestoration를 자동 적용 받음(뒤로가기 앞으로가기 시 스크롤 위치 자동으로 복구)

• before

https://github.com/user-attachments/assets/01bd3f9f-61c3-4ceb-b486-886e248b15b8

• after

https://github.com/user-attachments/assets/ce5390c3-8b80-4182-83a0-bd9a4cd78ed6

4. 대시보드 페이지 레이아웃 조정했습니다.

https://github.com/user-attachments/assets/fa63e159-5593-4d67-9650-93a9483ff1e3

📌 이슈 사항

[ahrrrl]

태블릿 sheet를 아예 없애셨네요?? 왜죠?

기존 태블릿 사이즈에서 sheet가 나오는게 이상해서요 테블릿과 데스크탑의 컴포넌트와 네브 상태는 공유하는게 사용자에게 덜이질적인 거같고 모바일은 아예 헤더와 시트를 따로 만들어서 컴포넌트와 상태를 따로 관리하는게 좋아보여서 두개로 나눴습니다. 기존

https://github.com/user-attachments/assets/6256a6d1-1c71-4c0a-9caa-521853c4c855

변경

https://github.com/user-attachments/assets/820753c1-aced-4716-ac3d-511ff02aeb1b

[MinaRoh]

태블릿 sheet를 아예 없애셨네요?? 왜죠?

기존 태블릿 사이즈에서 sheet가 나오는게 이상해서요 테블릿과 데스크탑의 컴포넌트와 네브 상태는 공유하는게 사용자에게 덜이질적인 거같고 모바일은 아예 헤더와 시트를 따로 만들어서 컴포넌트와 상태를 따로 관리하는게 좋아보여서 두개로 나눴습니다.

상태 나눠서 기존에 태블릿에서 화면 확장하면 시트 오류 생기던거 수정하신건 좋습니다. 모바일까지 제가 다 같이 관리하려고 해서 복잡한 구조였으니 따로 관리하도록 수정하신것도 좋아요. 시트 부분에 대해서는 저는 태블릿에 시트 나와도 괜찮고 지금 수정해주신것처럼 데스크탑처럼 나와도 괜찮은데, 시트를 제거하신 이유를 좀 더 납득 가능하게 설명 해 주실 수 있을까요? 회의 없이 진행된 기존 기획을 수정하는 부분이라 설명을 좀 더 해주시면 좋을 것 같습니다.

[ahrrrl]

태블릿 sheet를 아예 없애셨네요?? 왜죠?

기존 태블릿 사이즈에서 sheet가 나오는게 이상해서요 테블릿과 데스크탑의 컴포넌트와 네브 상태는 공유하는게 사용자에게 덜이질적인 거같고 모바일은 아예 헤더와 시트를 따로 만들어서 컴포넌트와 상태를 따로 관리하는게 좋아보여서 두개로 나눴습니다.

상태 나눠서 기존에 태블릿에서 화면 확장하면 시트 오류 생기던거 수정하신건 좋습니다. 모바일까지 제가 다 같이 관리하려고 해서 복잡한 구조였으니 따로 관리하도록 수정하신것도 좋아요. 시트 부분에 대해서는 저는 태블릿에 시트 나와도 괜찮고 지금 수정해주신것처럼 데스크탑처럼 나와도 괜찮은데, 시트를 제거하신 이유를 좀 더 납득 가능하게 설명 해 주실 수 있을까요? 회의 없이 진행된 기존 기획을 수정하는 부분이라 설명을 좀 더 해주시면 좋을 것 같습니다.

음 사용자 입장에서라면 말이 태블릿이지 저희가 잡은 사이즈가 1024이하가 태블릿이되잖아요 그때부터 저런 시트가 나오는데 데스크탑 하다보면 크기가 1024에서 왔다갔다 하는 경우가 종종 있을 수 있는데 어떨땐 검정 배경 시트가 나왔다가 어떨때는 안나왔다가 이질감이 들지 않을까요? 모바일은 명확하게 ui가 변해서 납득이 가는데 태블릿 데스크탑은 비슷하기도하고 breakPoint도 1024라 확 차이도 안나기도 하고요.

그리고 왔다갔다하다가 현재 배포판에는 시트 오류나서 네브가 두개 펴지거나 nav ui가 깨지는 버그가 있는데 그걸 고쳤다고 가정해도 1024를 기점으로 검정화면이 있는 시트에서 네브로 바뀌는순간이 이상하지 않을까요?

그래서 태블릿에서 굳이 시트로 할 필요 없다고 생각했고 대시보드쪽 ui도 수정했겠다 다른 페이지가 다 반응형웹으로 설계가 잘 되어있어서 고쳤습니다~

[MinaRoh]

태블릿 sheet를 아예 없애셨네요?? 왜죠?

기존 태블릿 사이즈에서 sheet가 나오는게 이상해서요 테블릿과 데스크탑의 컴포넌트와 네브 상태는 공유하는게 사용자에게 덜이질적인 거같고 모바일은 아예 헤더와 시트를 따로 만들어서 컴포넌트와 상태를 따로 관리하는게 좋아보여서 두개로 나눴습니다.

상태 나눠서 기존에 태블릿에서 화면 확장하면 시트 오류 생기던거 수정하신건 좋습니다. 모바일까지 제가 다 같이 관리하려고 해서 복잡한 구조였으니 따로 관리하도록 수정하신것도 좋아요. 시트 부분에 대해서는 저는 태블릿에 시트 나와도 괜찮고 지금 수정해주신것처럼 데스크탑처럼 나와도 괜찮은데, 시트를 제거하신 이유를 좀 더 납득 가능하게 설명 해 주실 수 있을까요? 회의 없이 진행된 기존 기획을 수정하는 부분이라 설명을 좀 더 해주시면 좋을 것 같습니다.

음 사용자 입장에서라면 말이 태블릿이지 저희가 잡은 사이즈가 1024이하가 태블릿이되잖아요 그때부터 저런 시트가 나오는데 데스크탑 하다보면 크기가 1024에서 왔다갔다 하는 경우가 종종 있을 수 있는데 어떨땐 검정 배경 시트가 나왔다가 어떨때는 안나왔다가 이질감이 들지 않을까요? 모바일은 명확하게 ui가 변해서 납득이 가는데 태블릿 데스크탑은 비슷하기도하고 breakPoint도 1024라 확 차이도 안나기도 하고요.

그리고 왔다갔다하다가 현재 배포판에는 시트 오류나서 네브가 두개 펴지거나 nav ui가 깨지는 버그가 있는데 그걸 고쳤다고 가정해도 1024를 기점으로 검정화면이 있는 시트에서 네브로 바뀌는순간이 이상하지 않을까요?

그래서 태블릿에서 굳이 시트로 할 필요 없다고 생각했고 대시보드쪽 ui도 수정했겠다 다른 페이지가 다 반응형웹으로 설계가 잘 되어있어서 고쳤습니다~

브레이크 포인트를 수정하는 생각도 해봤지만 말씀하신 대로 데스크탑에서 크기를 조절해서 쓰는 경우에 검은 오버레이가 계속 나와서 다른 기능을 못 쓰는 게 불편할 수도 있겠네요. 그럼 태블릿 크기 사이즈는 반응형으로 레이아웃 배치만 바꾸는 식으로 적용되고 nav는 데스크탑 형태로 하게 되는 거네요. 괜찮은 것 같습니다! 다음에 수정하실 때는 미리 디코에서 회의하고 해주시면 좋을 것 같습니다 👍