⚠️문제로그인을 한 후 해당 컨텐츠를 스크랩하면 마이페이지에서는 스크랩 목록에 잘 들어와있는 걸 확인할 수 있다.하지만, 다시 해당 컨텐츠 페이지로 가면 스크랩이 안된 상태의 ui로 남아있는 문제 발견..UX상 자연스럽지 않아서 해결하기로 ! 🔎 사고컨텐츠 page.tsx에서 SSR로 session을 꺼내서 view에 props로 전달하는 형태. const { data } = await supabase.auth.getUser(); const session = { user: data.user ? { id: data.user.id, email: data.user.email, name: data.user.user_metadata.name, ..

⚠️ 문제 .Content { z-index: 1000; outline: none; } 우선순위를 높이겠다고 그저 1000이라는 숫자로 z-index를 사용했는데 이렇게 고정하면 해당 컴포넌트를 사용하는 곳에서 z-index를 수정하고싶을때 공통 컴포넌트 코드를 건드려야하는 문제 발생. 좋은 컴포넌트 설계 규칙은 '컴포넌트는 합리적 기본값을 주되, 사용처가 필요하면 덮어쓸 여지를 남긴다' 🔎 해결그래서 사용처에서 '위로도,아래로도' 상황에 맞게 조정 가능하도록 z-index 외부화 패턴을 사용하는 것이 좋다 ! .Content { z-index: var(--floating-anchor-z, 1000); outline: none; } 이렇게 설정해두면 사용처에서 컴포넌트 ..

⚠️ 문제React.useEffect(() => { if(!open || !closeOnOutsideClick) return; const handler = (e:MouseEvent) => { const target = e.target as Node | null; if(!target) return; if(anchorEl?.contains(target)) return; if(floatingEl?.contains(target)) return; setOpen(false); }; document.addEventListener("mousedown",handler); return ()=> document.removeEventListener("mousedown",handler); ..

이번 프로젝트에서 처음으로 모노레포(Monorepo) 환경을 도입하게 되었다.이전까지는 client와 admin을 각각 다른 레포에서 관리하는 멀티레포(Multirepo) 방식이었지만, 공통 컴포넌트와 타입을중복 관리하는 비용이 커져 모노레포 전환을 결정했다. 마이그레이션 전후 비교기존에는 각 앱마다 컴포넌트를 따로 관리했기 때문에, import 경로가 분산되어 있고 다른 앱에서 같은 컴포넌트를 쓰려면 코드를 복사해야 했다.// Beforeimport Title from "@/components/Title/Title";import { NumberPagination } from "@/components/Pagination"; 모노레포 도입 후에는 공통 컴포넌트를 packages/ui로 옮기고, 모든 앱에서..

⚠️ 문제1 목록 섹션을 grid 레이아웃으로 관리하고있어서 만약 해당 데이터가 없을 경우 '해당 내용이 없습니다'라는 화면을 보이게 처리하는 도중계속 정중앙이 아니라 왼쪽에 배치되는 문제 발견 🔎 해결알고보니 List가 grid안에 있어서 grid item으로 취급되어 첫번째 컬럼 하나만 차지하기때문에 이렇게 justify-content:center를 해도 그 하나의 컬럼 안에서만 적용되는것이다.. grid-column: 1 / -1 | col 1 | col 2 | col 3 |^ ^1 -1 첫번째 컬럼 라인부터 마지막 컬럼 라인까지 span 한다는 뜻.즉, grid item은 기본적으로 하나의 컬럼만 차지하기 때문에, ..

⚠️ 문제모바일 반응형 화면일 경우에 이미지가 여러개일때 해당 섹션이 스크롤이 생기면서 부모 요소 안에 잘 들어와야하는데 자꾸 자식 요소가 부모 요소를 벗어나는 문제 발생.. // 전체적인 구조 .ProfileContent가 flex-grow: 1로 늘어나고 있으며, 그 안에 .ImageWrapper가 있어서 부모 너비에 맞게 제한되버려서 자꾸 자식요소가 부모 요소를 벗어나고 있었던 것. 🔎 해결제일 상위 부모 요소인 ProfileWrapper에 Overflow:hidden을 부여해야하고, ProfileContent에는 min-width:0 로최소 너비 제한이 없게 해야한다. min-width의 기본값은 auto인데, flex 자식 요소에서 auto는 내용..