juni

supabase에서 realtime 적용이 필요한 테이블에만 설정  export const fetchMessages = async (senderId: string, receiverId: string, postId: string) => { const { data, error } = await supabase .from('messages') .select( ` *, sender:users!messages_sender_id_fkey ( id, name, avatar ), receiver:users!messages_receiver_id_fkey ( id, name, avatar ) ` ) .eq('post_id', postId) .or( ..

const [error, setError] = useState('');상태를 문자열이 아닌 JSX 요소로 처리하도록 변경하거나, 상태는 문자열로 유지하고 렌더링 단계에서 JSX 요소로 변환하여 아래 코드 처럼 함수 내에서 html 태그 사용  if (value.length >= 15 && !isMobile) { setError(Nickname cannot exceed 15 characters.); } else { setError(''); }  let toastId = null; const handleNicknameChange = (e: React.ChangeEvent) => { const value = e.target.value; const isMobi..

SweetAlert2의 customClass에서 bg-* 클래스는 제대로 적용되지만, text-* 클래스가 예상대로 동작하지 않는 경우가 있을 수 있습니다. 이 문제는 SweetAlert2의 HTML 구조와 Tailwind CSS의 유효성 검사 또는 적용 방식 사이의 차이에서 발생할 수 있습니다.  const result = await MySwal.fire({ title: 'Do you want to delete your post?', text: 'If you delete, you can always rewrite it later', icon: 'warning', showCancelButton: true, confirmButtonText: 'Delete ..

한 컴포넌트 내에서 같은 테이블을 참조하지만 불러오는 데이터의 양이 다르면서 불일치 발생 const { data: reservationsData, error, isPending } = useQuery & { users: { id: string }; posts: { id: string; user_id: string | null; title: string; image: string | null; price: number | null; startDate: string | null; endDate: string | null; }; })[] >({ queryKey: [..

flex-shrink-0: 이 속성은 flex 요소가 축소되지 않도록 방지하여, 부모 요소의 크기에 따라 이미지가 축소되는 문제를 방지합니다.object-cover: 이미지를 크기에 맞게 채우도록 합니다. 이 속성을 통해 이미지의 비율을 유지하면서 지정된 크기 안에 맞출 수 있습니다.

반응형 CSS 적용 중 아직 디자인이 일부밖에 나오지 않아 임시 적용되거나 적용하지 못 한 페이지가 많음

헤더 여백 수정과 가운데 정렬 , 뒤로가기 버튼 크기 수정 등 자잘한 부분 이외에 거의 마무리        헤더를 layout으로 통일 되게끔 개선 필요 -> 수정 필요 시 일괄 적용 간편하도록그외에 똑같이 쓰이는 버튼 ( 기능은 조금 다를 수 있으니 우선 css만 ) 별도 생성 등쓰이는 곳이 여러 곳일 경우 수정 시 번거로움이 있어서 그간 미뤄뒀으나 수정 하면서 별도 생성해서 적용하도록 계획 중