분류 전체보기 (105) 썸네일형 리스트형 WelKo ( 마이 페이지 오류 해결 ) 한 컴포넌트 내에서 같은 테이블을 참조하지만 불러오는 데이터의 양이 다르면서 불일치 발생 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: [.. WelKo flex-shrink-0: 이 속성은 flex 요소가 축소되지 않도록 방지하여, 부모 요소의 크기에 따라 이미지가 축소되는 문제를 방지합니다.object-cover: 이미지를 크기에 맞게 채우도록 합니다. 이 속성을 통해 이미지의 비율을 유지하면서 지정된 크기 안에 맞출 수 있습니다. WelKo 반응형 CSS 적용 중 아직 디자인이 일부밖에 나오지 않아 임시 적용되거나 적용하지 못 한 페이지가 많음 WelKo ( 앱 디자인 ) 헤더 여백 수정과 가운데 정렬 , 뒤로가기 버튼 크기 수정 등 자잘한 부분 이외에 거의 마무리 헤더를 layout으로 통일 되게끔 개선 필요 -> 수정 필요 시 일괄 적용 간편하도록그외에 똑같이 쓰이는 버튼 ( 기능은 조금 다를 수 있으니 우선 css만 ) 별도 생성 등쓰이는 곳이 여러 곳일 경우 수정 시 번거로움이 있어서 그간 미뤄뒀으나 수정 하면서 별도 생성해서 적용하도록 계획 중 WelKo 라인 높이 (line-height) 또는 패딩 문제: text-[18px]와 text-[12px]은 서로 다른 폰트 크기를 가지고 있습니다. 이로 인해 기본 라인 높이가 달라질 수 있습니다. line-height가 자동으로 설정되어 있을 경우, 텍스트가 가운데 정렬될 수 있습니다.플렉스 정렬 문제: flex를 사용하여 items-start 클래스를 적용했지만, profile.name과 profile.region의 폰트 크기 차이 때문에 텍스트가 시각적으로 동일한 줄에 정렬되지 않을 수 있습니다. 이미지 옆에 닉네임과 주소 높이가 일치하지 않는 문제 발생 {profile.name} {profile.region ? ( .. WelKo 기존에는 채팅에 시각이 나오기만 하였으나메시지를 그룹화 하는 함수를 사용하여 디자인 개선 const groupedMessages = messages.reduce( (groups, msg) => { const date = format(new Date(msg.created_at), 'MMMM dd, yyyy'); if (!groups[date]) { groups[date] = []; } groups[date].push(msg); return groups; }, {} as Record );1. reduce 함수:reduce는 배열의 각 요소에 대해 반복적으로 호출되어 하나의 최종 결과를 생성하는 고차 함수입니다. 여기서 message.. WelKo line-clamp-1 만 사용 시 이미지처럼 어색하게 적용되는 문제 확인 {postDetails.title} {new Date(firstMessage?.created_at).toLocaleString()} 영향 받는 코드에 flex-shrink-0을 추가하여 해결flex-shrink 속성 값flex-shrink 속성은 숫자 값으로 설정할 수 있으며, 이 숫자 값은 다른 요소들과의 상대적인 축소 비율을 나타냅니다.기본값: 1기본적으로 요소는 축소될 .. WelKo 텍스트 정렬 {data.map((reservation) => ( Number {reservation.id} Nickname {reservation.users.name} Email {reservation.users.email} Date {new Date(reservation.created_at).toLocaleString()} .. 이전 1 2 3 4 5 ··· 14 다음
