LC-2789 admin 배너 관리

[yeeun426]

연관 작업

• LC-2789

[gemini-code-assist]

Summary of Changes

Hello @yeeun426, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 관리자가 여러 위치의 배너를 효율적으로 관리할 수 있도록 통합 배너 관리 시스템을 도입합니다. 관리자 페이지에서 배너를 생성, 편집, 삭제할 수 있는 완전한 기능을 제공하며, 사용자에게 노출되는 기존 배너 섹션들은 이 새로운 통합 시스템을 통해 데이터를 가져오도록 업데이트되었습니다. 이를 통해 배너 관리 프로세스가 간소화되고 일관성이 강화됩니다.

Highlights

• 통합 배너 관리 시스템 도입: 관리자가 홈 상단, 홈 하단, 프로그램, 마이페이지 등 다양한 위치의 배너를 한 곳에서 통합적으로 관리할 수 있는 새로운 시스템이 추가되었습니다.
• 관리자 페이지 CRUD 기능 구현: 통합 배너의 생성, 조회, 수정, 삭제 기능을 제공하는 관리자 페이지가 구현되었습니다. 노출 중인 배너와 전체 배너를 탭으로 구분하여 볼 수 있습니다.
• 기존 배너 컴포넌트 통합 API 연동: 홈 상단, 홈 하단, 프로그램, 마이페이지 등 사용자 화면에 노출되는 기존 배너 컴포넌트들이 새로운 통합 배너 API를 사용하도록 변경되었습니다.
• 파일 업로드 기능 개선: 파일 업로드 시 파일 ID를 반환하는 새로운 유틸리티 함수가 추가되어 배너 이미지 관리의 유연성이 향상되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/api/banner.ts
  • 파일 ID 업로드 유틸리티 함수 uploadFileForId를 임포트했습니다.
  • 새로운 CommonBannerType 및 관련 Zod 스키마(commonBannerAdminListItemSchema, commonBannerAdminAllItemSchema, commonBannerAdminListSchema, commonBannerAdminArrayListSchema)를 정의했습니다.
  • 통합 배너를 위한 새로운 쿼리 키(getCommonBannerForAdminQueryKey, getActiveBannersForAdminQueryKey)를 추가했습니다.
  • bannerType에 'COMMON'을 추가하여 확장했습니다.
  • 통합 배너를 위한 새로운 React Query 훅(useGetCommonBannerForAdmin, useGetActiveBannersForAdmin, usePostCommonBannerForAdmin, useGetCommonBannerDetailForAdmin, useEditCommonBannerForAdmin, useToggleCommonBannerVisibility, useDeleteCommonBannerForAdmin)을 구현했습니다.
  • useDeleteBannerForAdmin에서 타입이 'COMMON'일 경우 통합 배너 쿼리를 무효화하도록 업데이트했습니다.
  • 사용자 화면용 통합 배너 API(commonBannerUserItemRawSchema, commonBannerUserListRawSchema, useGetCommonBannerListForUser)를 추가했습니다.
• src/api/file.ts
  • fileType enum에 COMMON_BANNER를 추가했습니다.
  • 파일을 업로드하고 파일 ID를 반환하는 uploadFileForId 함수를 추가했습니다.
• src/app/admin/AdminSidebar.tsx
  • 기존 홈 배너 관리 링크('홈 상단 배너 관리', '홈 하단 배너 관리')를 제거했습니다.
  • '프로그램 배너 관리'를 '통합 배너 관리'로 변경하고 URL을 /admin/banner/common-banners로 업데이트했습니다.
• src/app/admin/banner/common-banners/[id]/edit/page.tsx
  • 통합 배너 수정 페이지를 새로 추가했습니다. 배너 상세 정보를 가져와 폼 값으로 매핑하고 업데이트를 처리하는 로직을 포함합니다.
• src/app/admin/banner/common-banners/new/components/CommonBannerInputContent.tsx
  • 통합 배너 입력 필드(제목, 랜딩 URL, 노출 여부, 기간, 노출 위치, 이미지 업로드)를 위한 재사용 가능한 컴포넌트를 새로 생성했습니다.
• src/app/admin/banner/common-banners/new/page.tsx
  • 통합 배너 생성 페이지를 새로 추가했습니다. 폼 값 초기화 및 새 배너 생성을 위한 폼 제출 로직을 구현합니다.
• src/app/admin/banner/common-banners/page.tsx
  • 메인 통합 배너 관리 페이지를 새로 추가했습니다. '노출 중' 및 '전체' 탭, 활성 배너를 위한 커스텀 테이블, 전체 배너를 위한 DataGrid, 배너 수정, 노출 여부 토글, 삭제 기능을 포함합니다.
• src/domain/admin/program/ui/editor/EditorTemplate.tsx
  • 에디터 템플릿의 너비를 w-[36rem]에서 w-[45rem]으로 확장했습니다.
  • 폼의 상단 마진을 mt-4에서 mt-10으로 조정했습니다.
• src/domain/admin/ui/table/TableLayout.tsx
  • 탭 내비게이션을 지원하기 위해 TableLayout에 선택적 tabs prop을 추가했습니다.
  • 제공된 경우 헤더 아래에 탭을 렌더링하도록 변경했습니다.
• src/domain/home/banner/BottomBannerSection.tsx
  • useGetBannerListForUser를 useGetCommonBannerListForUser로 교체하여 HOME_BOTTOM 타입의 배너를 가져오도록 변경했습니다.
  • 새로운 통합 배너 구조에 맞춰 배너 데이터 접근 및 링크/이미지 속성을 업데이트했습니다.
• src/domain/home/banner/MainBannerSection.tsx
  • useGetBannerListForUser를 useGetCommonBannerListForUser로 교체하여 HOME_TOP 타입의 배너를 가져오도록 변경했습니다.
  • 새로운 통합 배너 구조에 맞춰 배너 데이터 접근 및 링크/이미지 속성을 업데이트했습니다.
• src/domain/mypage/MyPageBanner.tsx
  • useGetBannerListForUser를 useGetCommonBannerListForUser로 교체하여 MY_PAGE 타입의 배너를 가져오도록 변경했습니다.
  • 새로운 API가 관련 데이터를 직접 제공하므로 배너 필터링을 위한 useMemo를 제거했습니다.
  • 새로운 통합 배너 구조에 맞춰 배너 데이터 접근 및 링크/이미지 속성을 업데이트했습니다.
• src/domain/program/Banner.tsx
  • useGetUserProgramBannerListQuery를 useGetCommonBannerListForUser로 교체하여 PROGRAM 타입의 배너를 가져오도록 변경했습니다.
  • 새로운 통합 배너 구조에 맞춰 배너 데이터 접근 및 링크/이미지 속성을 업데이트했습니다.

Activity

• 관리자 배너 관리를 위한 새로운 기능이 도입되었습니다.
• 기존 배너 관련 API 호출 및 UI 컴포넌트에 대한 상당한 리팩토링이 포함되었습니다.
• 관리자 패널에서 통합 배너 생성, 편집 및 목록 기능을 지원하기 위해 새로운 파일들이 추가되었습니다.
• 사용자 화면에 노출되는 기존 배너 컴포넌트들이 새로운 통합 배너 API를 사용하도록 업데이트되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This PR reorganizes the existing distributed banner management system into a 'unified banner' system, introducing new API hooks, components, and pages for administrators and user-facing sections. A critical Stored Cross-Site Scripting (XSS) vulnerability was identified, as the landingUrl input lacks validation on the admin side and is directly rendered into href attributes on the user side, potentially allowing malicious scripts via javascript: URIs. It is recommended to implement strict URL protocol validation (allowing only http: and https:) and sanitize these URLs before rendering. Additionally, several code-related improvements are needed, primarily concerning API design, efficiency, and potential UI logic bugs. These include ensuring unique IDs in API responses for list rendering, optimizing mutation hooks to prevent unnecessary requests, and fixing bugs related to image processing and data display.