## 개요나를 읽는 4개의 축은 단 4개의 질문으로 자신의 MBTI를 알 수 있는 무료 성격유형 테스트다. 주소는 mbti.lexcode.com 이고, 한국어·영어·일본어·중국어 네 개 언어 지원. ## 기존 MBTI 테스트와 다른 점보통의 MBTI 검사는 100개 안팎의 문항에 답해야 결과가 나오는데, 이 테스트는 문항이 4개! 네 개의 축(내향·외향 / 감각·직관 / 사고·감정 / 판단·인식)에서 "평소 어느 쪽을 먼저 쓰는지"를 한 번씩만 고르면 된다. 문항을 줄이면 결과가 거칠어지는 게 보통인데, 여기서는 선택의 일관성을 한 단계 더 받는다.각 축에서 "거의 늘 그렇다"와 "대체로 그렇다" 중 하나를 고르게 하고, 그 차이를 알파벳 대소문자로 기록.INFJ — 네 축 모두 "거의 늘"iNfJ — ..

⚠️문제로그인을 한 후 해당 컨텐츠를 스크랩하면 마이페이지에서는 스크랩 목록에 잘 들어와있는 걸 확인할 수 있다.하지만, 다시 해당 컨텐츠 페이지로 가면 스크랩이 안된 상태의 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은 기본적으로 하나의 컬럼만 차지하기 때문에, ..