[PWA] (16) PWA환경에서 App-push 가능?

1. 마이페이지 화면 수정

• 예약 내역 확인 부분 수정하기
• 마이페이지에 내정보, 포인트, 예약 내역 세가지 정보가 나오는데, 예약내역 부분이 짤리는 문제 -> 이부분 수정하기

✔️ max-w-3x1 에서 5x1 로 수정하여 width 크기 키우기

 return (
    <PageLayout>
      <div className="max-w-5xl mx-auto">

✔️designerName 만 반응형으로 크기 줄이면, 글씨가 세로로 출력되었는데,
살펴보니, designerName 에만 div 가 추가로 감싸져있어서 삭제함
그러니까, {designerName} 부분은 정상적으로 나옴

<td className="px-6 py-4 whitespace-nowrap text-black">
                          {reservation.shopName}
                        </td>
                        <td className="px-6 py-4">
                          <div className="text-sm text-gray-900">
                            {reservation.designerName}
                          </div>
                        </td>

✔️그런데, 테이블 목록의 디자이너가 줄바꿈 되는 현상은 여전히 남아있어서 다시 수정

th className="whitespace-nowrap" 추가해주었더니, 줄바꿈 없이 정상적으로 나옴
그러나 왜 이것만 그러는지 원인파악은 명확히 안됨. 왜냐면 오른쪽의 시술 정보는 내용이 더 긴데도 불구하고 줄바꿈없이 출력되기 때문임

2. 앱푸쉬 기능 조사하기

• PWA환경에서 App-push 기능 가능여부 확인하기

=> PWA 환경에서 백엔드 없이, DB 없이, localStorage만 사용 중
App Push(앱 푸시, 웹 푸시 알림) 기능이 가능한지?

결론 : 백엔드 없이 푸시 알림은 불가능

1. 푸시 알림 구조 요약

클라이언트(PWA)가 브라우저의 Push API를 통해 Push Subscription 정보를 생성함.
이 정보를 서버에 저장.
서버가 필요 시 푸시 서버(GCM, FCM 등)로 메시지를 전송.
브라우저가 사용자에게 푸시 알림을 띄움.

🔧 즉, 사용자의 브라우저에 알림을 보내려면 Push Subscription 정보를 저장하고 푸시 서버에 전달하는 역할을 하는 백엔드가 반드시 필요

왜 localStorage만으로는 안 될까?
localStorage는 클라이언트에만 존재하는 저장소
푸시 알림은 클라이언트가 꺼져 있거나 브라우저가 백그라운드일 때도 작동해야 하므로,
브라우저 제조사가 운영하는 푸시 서버(예: Chrome의 FCM 등)를 통해 작동되며, 이때 알림을 보낼 트리거가 클라이언트가 아니라 서버여야 한다.