공지사항 미리보기

배경

관리사무소가 공지사항을 올릴 때, 입주민 앱에서 실제로 어떻게 보이는지 확인할 방법이 없었음. 2026-05-15에 상세 화면에 첨부 이미지 미리보기를 먼저 붙이고, 2026-06-17에 앱 화면과 같은 비율의 별도 팝업으로 바꿈.

변경 내용

1단계 — 상세 화면 이미지 미리보기 (2026-05-15)

백엔드 변경 없음. 기존 POST /api/v1/apicomn/fileDownload(= cmnApi.fetchFile())가 blob을 반환하므로 그대로 씀.

useRsdNc.js — imagePreviewUrl ref 추가. 상세 조회가 끝나면 첨부 파일명이 이미지면 blob URL을 만듦.
RsdNcDtl.vue — v-if="imagePreviewUrl"인 미리보기 영역 추가. 언마운트 시 URL.revokeObjectURL() 호출.

이미지 판별은 파일명(otxtFlNm) 확장자로 함. i 플래그라 .JPG, .Png도 잡힘.

const isImageFile = (fileName) => /\.(jpe?g|png)$/i.test(fileName ?? '')

blob URL은 반드시 onUnmounted에서 해제함. 안 하면 메모리 누수임.

2단계 — 팝업으로 변경 (2026-06-17)

표 안의 행이 아니라 앱과 같은 크기(450 x 915)의 새 창으로 띄움.

라우터(apt-mng.js)에 layout: 'full' 전용 화면을 추가함.

{
  path: '/apt-mng/rsd-nc/RsdNcPreview',
  name: 'RsdNcPreview',
  component: () => import('@/views/apt-mng/rsd-nc/RsdNcPreview'),
  meta: { layout: 'full' },
},

RsdNcDtl.vue의 미리보기 버튼은 router.resolve()로 URL만 계산해서 window.open으로 엶.

const { href } = router.resolve({
  path: '/apt-mng/rsd-nc/RsdNcPreview',
  query: { anncFctsSn: route.value.query.anncFctsSn }
})
window.open(href, '_blank', 'width=450, height=915')

RsdNcPreview.vue는 제목 → 등록일 → 구분선 → 이미지 → 내용 순으로 앱과 같은 순서로 보여줌. 이미지를 못 불러오면 “이미지를 불러올 수 없습니다.”를 대신 표시함.

확인 방법

jpg/png를 첨부한 공지사항 상세에서 미리보기 버튼을 누름 → 새 창에 제목·사진·내용이 앱 순서대로 뜸.
첨부가 없는 공지사항 → 이미지 영역이 아예 안 뜸.
파일명이 .JPG, .Png여도 뜸.
창을 닫았다 여러 번 열어도 브라우저 메모리가 계속 늘지 않음(blob URL 해제 확인).

미리보기가 같아도 앱에 안 보일 수 있음 (2026-09-18 확인)

미리보기는 화면 모양만 보여 줌. 앱에 실제로 노출될지는 앱 서버가 따로 걸러내므로, 미리보기가 잘 떠도 입주민에게 안 보일 수 있음. 아래 세 가지를 같이 확인할 것.

노출 대상 코드(annc_trg_mch_cd)가 ALL 또는 APP이어야 함. 그 외 값(월패드 전용 등)은 미리보기에는 떠도 앱 목록에서 빠짐
단지 임대유형에 따라 조회 범위가 갈림 — 건설임대(01)는 단지 공지만, 매입임대(02)는 단지·거점관리소·시군구 공지를 함께 봄. 임대유형이 01도 02도 아닌 단지는 공지가 하나도 안 보임
매입임대에서 거점·시군구 공지가 안 보이면 공지 행의 단지 ID·시군구가 비어 있어야 할 자리에 다른 값이 들어갔는지 확인할 것

첨부 이미지가 앱에서만 안 보이면 ① 파일 공유 경로 마운트 ② 첨부 테이블 행 ③ 디스크 파일 순으로 봄. 앱에 내려가는 첨부 주소는 서버가 http를 https로 강제 치환함.

서버 쪽 규격은 공개노트/개발/모듈/MAW 세대·헬스케어 API “공지사항”.

tags	공지사항, 관리사무소, 프론트엔드
aliases	공지사항 미리보기, 이미지 미리보기, 공지 팝업, RsdNcPreview, 첨부 이미지 안 보임, 공지가 앱에 안 보임, 공지 노출 대상

스마트홈 위키

탐색기