내일 할 것
- supabase realtime docs 읽어보기
https://supabase.com/docs/reference/javascript/subscribe
1. 모달 UI 작업
https://ui.shadcn.com/docs/components/dialog
=> 여기서 실시간 채팅이 가능할지 확인
1-1. 해당 모달에서 정보 받아오는 게 가능할지 확인
CSS 속성
absolute와 transform 속성, 그리고 -translate-y-1/2 클래스는 CSS에서 요소의 위치와 정렬을 제어하는 데 사용됩니다. 이들 속성을 이해하면 복잡한 레이아웃을 보다 쉽게 구현할 수 있습니다.
absolute 속성
정의: position: absolute; 속성은 요소를 일반적인 흐름에서 제거하고, 가장 가까운 위치가 설정된 조상 요소를 기준으로 배치합니다.
용도: 요소를 문서의 흐름과는 별개로 위치를 지정할 때 사용됩니다. 예를 들어, 모달의 닫기 버튼을 모달의 오른쪽 상단에 배치할 때 유용합니다.
transform
정의: transform 속성은 요소를 이동, 회전, 크기 조정 등의 변형을 적용하는 데 사용됩니다.
용도: 요소의 위치, 크기, 회전 등을 조절할 수 있어 복잡한 애니메이션이나 정확한 배치를 구현하는 데 유용합니다.
-translate-y-1/2
정의: Tailwind CSS에서 -translate-y-1/2는 transform: translateY(-50%);의 단축 클래스입니다.
용도: 요소를 자신의 높이의 50%만큼 위로 이동시킵니다. 주로 요소를 수직 중앙에 정렬할 때 사용됩니다.
relative: 부모 요소에 relative를 설정하여 자식 요소의 절대 위치를 기준으로 합니다.
absolute: 자식 요소가 부모의 위치를 기준으로 배치됩니다.
top-1/2: 자식 요소의 상단을 부모 요소의 중앙에 맞춥니다. (부모 요소의 높이의 50% 지점)
transform -translate-y-1/2: 자식 요소를 자신의 높이의 50%만큼 위로 이동시켜서 수직으로 중앙 정렬합니다.
테일윈드
패딩 없이 w 이어서 연결 + 마진 음수 설정
w 설정하기...
w-[calc(100%+48px)] -mx-6
쉐도우 설정하기...
shadow-[rgba(31,30,30,0.08)0px-2px_8px_0px]
플레이스 홀더 텍스트 색상 설정하기
placeholder:text-label-assistive
트러블 슈팅
[id] 에서는 조건부 식
다이나믹 라우터에서 조건부 레이아웃 쓰기
- JavaScript의 논리 연산자
연산자는 왼쪽 표현식이 true면 그 값을 반환하고, false면 오른쪽 표현식 평가
레이아웃에 use client 넣고 조건부 연산자 쓰면 될 듯 미들웨어 잘 보는 습관 들여서 다행인데, 혹시 서버로 할 수 있는 방법 있는지 좀 더 생각해보기! 가능할 거 같기도 ,,,, 하고,,,,, !
메타데이터 때문에 불안불안 하다잉... 레이아웃을 안에 하나 더 파면 가능하려나....... 레이아웃 진심 1202391개구나,,,,,
