[Feat/#22] 관리자 대시보드 퍼블리싱

[sinji2102]

📌 관련 이슈번호

• Closes [ Feat ] 관리자 대시보드 페이지 퍼블리싱 #22

🎟️ PR 유형

어떤 변경 사항이 있나요?

• 새 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 리팩토링

Check List

• 🔀 PR 제목의 형식을 잘 작성했나요?
• 🏗️ yarn build는 성공했나요?
• 🧹 불필요한 코드는 제거했나요? (TODO, 주석, clg... etc.)
• ✅ 컨벤션을 지켰나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?
• 🙇‍♂️ 리뷰어를 지정했나요?

✅ Key Changes

관리자 대시보드 페이지 퍼블리싱했습니다~

1. 작업 내용

📢 To Reviewers

• 대시보드에 svg 아이콘이 들어가야 하는데, Image를 쓰는 걸 next에서 권장하지만, Image로 svg를 받아오는 건 권장하지 않는다고 합니다. Image를 svg로 사용하려면 config 파일에서 강제해야 하는데, 이런 방식으로 진행하면 보안에 안 좋아서 svg 외부 링크를 사용할 때는 오히려 img를 사용하는 걸 권장한다는 글도 읽었어서... 고민되어서 주석 남겨두었습니다! 다운이는 Image를 선호한다고 써주긴 했는데 현진 언니 의견도 듣고 싶어용

📸 스크린샷

[Choi-Jiwon-38]

@sinji2102
저도 Next/Image를 사용하면서 비슷한 고민을 한 적이 있어서, 빌릴게 프론트 팀의 의견을 정리하는 데 조금이라도 도움이 되었으면 하는 마음에 몇 자 적어봅니다!
Next/Image에서 기본적으로 SVG 이미지에 대한 최적화를 지원하지 않는 이유로 공식 문서에서 아래 두 가지를 제시하고 있습니다.

1. SVG가 벡터 형식이어서 손실 없이 리사이징이 가능함.
2. 신지님께서 말씀주신 것처럼 CSP 헤더 없이는 취약점이 발생할 수 있음.

그럼에도 Next/Image에서 제공하는 이미지 최적화가 필요한 경우라면 dangerouslyAllowSvg를 활성화하는 방향을 원하는 것 같다는 생각이 드네요.

물품 아이콘에 사용되는 svg 확장자 이미지 파일이 이미 충분히 최적화 되어있고, 리사이징을 통한 최적화 정도로도 충분하다면 Image 컴포넌트의 unoptimized 속성을 활성화하거나 img 태그를 사용하는 것이 방법이 될 수 있어보입니다.

그래서 결론적으로,
1️⃣ Next/Image의 최적화를 사용하지 않는 방향(dangerouslyAllowSvg 비활성화)
2️⃣ unoptimized 옵션을 활성화한 Next/Image vs 태그 비교 후 적용

이 두 가지를 검토해보면 어떨까 싶어요! 🙂

cc. @hyeonjin6530 , @daun-up

[sinji2102]

헉 고민이 많던 부분이었는데 감사합니다... 💭

언젠가 지원님한테 한 번 코드리뷰 받아보고 싶다는 생각은 있었는데 빌릴게는 제가 Next로 처음 진행하는 프로젝트라 제 실력이 너무 부끄러워서 부탁드리지 못했거든요! 😢

특히 이 부분이 고민이 많았던 부분은 공식 문서에서는 SVG를 권장하지 않고 있지만, 아티클을 찾아보니 dangerouslyAllowSvg로 사용하시는 분들도 많더라고요!

Image 컴포넌트의 unoptimized 속성을 사용하는 방법은 이번에 알게 되었는데, 개발을 잘 모르는 1,2학년 학생회 사람들이 사용할 서비스라 매번 최적화 후에 svg를 업로드하긴 어려울 것 같아 조금 더 고민해본 후 결정하겠습니다! 좋은 의견 너무너무 감사해요! 🔗

[Choi-Jiwon-38]

빌릴게 프론트분들만 괜찮으시다면 편하게 리뷰어 달아주세요! 저도 항상 많이 배우고 있습니다.

사실 저는 svg를 아이콘과 같이 가벼운 이미지에만 사용하기 때문에리사이징 정도만 진행한 뒤, unoptimzed가 적용된 Image를 사용하긴 합니다(물론 unoptimized를 적용하면 Next/Image의 많은 기능들에 제약이 생겨서 <img> 태그를 사용하는 것과 큰 차이가 없는 것으로 알고 있어요).

마지막 코멘트를 보아 콘텐츠 보안 정책을 추가하여 Next/Image를 사용하는 방향으로 작업해주셨던데 좋은 방향 같습니다!

[daun-up]

제가 Image 사용을 말씀 드린 이유는, 현재 회사에서 그렇게 사용하고 있었기 때문인데요! 찾아보니 지원 님 말씀대로 dangerouslyAllowSvg 를 활성화하면서 약간의 보안 조치를 취하는 방법이 있어서, 이 방법을 사용해보는 것도 좋을 것 같네요!

// next.config.js

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; img-src 'self' data: https:;"
  },
}

(제 카톡 캡처본은... 첨부 제외해주시면 감사하겠습니다...정말 한 마디 개인적인 경험 기반 제안이었는데 공식적인 피알에 올라오니 좀 창피하네요)

[hyeonjin6530]

저는 현재 대여 기록 페이지를 제작하면서 받아온 svg 파일을 Image를 사용하여 띄우고 있었는데

다운님이 말씀해주신 것처럼 보안처리를 해서 Image 태그를 사용하는 방법도 좋은 거 같고, 지원님이 말씀해주신 것 중 하나인 img 태그를 사용하는 방향도 좋은 거 같습니다!

[sinji2102]

제가 Image 사용을 말씀 드린 이유는, 현재 회사에서 그렇게 사용하고 있었기 때문인데요! 찾아보니 지원 님 말씀대로 dangerouslyAllowSvg 를 활성화하면서 약간의 보안 조치를 취하는 방법이 있어서, 이 방법을 사용해보는 것도 좋을 것 같네요!

// next.config.js

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; img-src 'self' data: https:;"
  },
}

(제 카톡 캡처본은... 첨부 제외해주시면 감사하겠습니다...정말 한 마디 개인적인 경험 기반 제안이었는데 공식적인 피알에 올라오니 좀 창피하네요)

위에 지원님 코멘트에 답글 단대로, 매번 사용자가 svg를 최적화시킨 후 업로드하는 방식은 어려울 것 같다고 생각했는데 이렇게 보안 조치를 취하는 방법이 있는지 알게 되었네요 참고해서 작성하겠습니다!

첨부한 카톡은... 빌릴게 톡방에서 한 얘기가 너무 많아서 현진 언니가 팔로업하기 힘들 것 같아 첨부했는데 바로 삭제하겠습니다~