feat : 배너 생성, 삭제, 리스트 조회 연동

package.json

@@ -6,6 +6,7 @@
 		"@team-return/design-system": "^1.1.13",
 		"axios": "^1.3.4",
 		"file-saver": "^2.0.5",
+		"html2canvas": "^1.4.1",
 		"react": "^18.2.0",
 		"react-beautiful-dnd": "^13.1.1",
 		"react-cookie": "^4.1.1",

src/Apis/Banners/index.ts

@@ -0,0 +1,55 @@
+import { MutationOptions, useMutation, useQuery } from 'react-query';
+import { instance } from '../axios';
+
+const router = '/banners';
+
+export const useCreateBanners = (
+	banner_url: string,
+	banner_type: string,
+	start_date: string,
+	end_date: string,
+	options: MutationOptions
+) => {
+	const data = {
+		banner_url,
+		banner_type,
+		start_date,
+		end_date,
+	};
+	return useMutation(async () => instance.post(`${router}`, data), {
+		...options,
+	});
+};
+
+export const useGetBannerList = (
+	is_opened: boolean,
+	options: MutationOptions
+) => {
+	const params = {
+		is_opened,
+	};
+	return useMutation(
+		async () =>
+			instance.get(`${router}/teacher`, {
+				params: params,
+			}),
+		{
+			...options,
+		}
+	);
+};
+
+export const useDeleteBanner = (
+	banner_id: number,
+	options: MutationOptions
+) => {
+	return useMutation(
+		async () => {
+			const { data } = await instance.delete(`${router}/${banner_id}`);
+			return data;
+		},
+		{
+			...options,
+		}
+	);
+};

src/Apis/Banners/request.ts

@@ -0,0 +1,10 @@
+export interface DateProps {
+	banner_url: string;
+	start_date: string;
+	end_date: string;
+	banner_type: string;
+}
+
+export interface BannerProps {
+	banner_id: number;
+}

src/Apis/Banners/response.ts

@@ -0,0 +1,19 @@
+export interface BannerListProps {
+	banner_id: number;
+	banner_url: string;
+	start_date: string;
+	end_date: string;
+	banner_type: string;
+}
+
+export interface BannerListResponse {
+	banners: BannerListProps[];
+}
+
+export interface BannerNameType {
+	RECRUITMENT: string;
+	BOOKMARK: string;
+	NONE: string;
+	INTERNSHIP: string;
+	COMPANY: string;
+}

src/Components/Banner/BannerDetail.tsx/index.tsx

@@ -1,22 +1,73 @@
 import * as _ from './style';
-import banner from '../../../Assets/PNG/banner.png';
+import { useEffect, useState } from 'react';
+import { useGetBannerList } from '../../../Apis/Banners';
+import { BannerListProps } from '../../../Apis/Banners/response';
+import { BannerNameType } from '../../../Apis/Banners/response';
+import deleteimg from '../../../Assets/SVG/delete.svg';
+interface Props {
+	onDelete: (id: number) => void;
+}
+
+export function BannerDetail({ onDelete }: Props) {
+	const [banners, setBanners] = useState<BannerListProps[]>([]);
+	const [isOpen, setIsOpen] = useState<boolean>(true);
+
+	const BannersAPI = useGetBannerList(isOpen, {
+		onSuccess: (data: any) => {
+			setBanners(data.data.banners);
+		},
+		onError: () => {},
+	});
+	console.log(BannersAPI);
+
+	useEffect(() => {
+		if (isOpen) BannersAPI.mutate();
+	}, [isOpen]);
+
+	const BannerType = {
+		RECRUITMENT: '모집의뢰서',
+		BOOKMARK: '북마크',
+		NONE: '페이지 이동 안함',
+		INTERNSHIP: '체험형 현장실습 페이지',
+		COMPANY: '기업 상세 페이지',
+	};
+
+	Object.freeze(BannerType);
 
-export function BannerDetail() {
 	return (
 		<_.Container>
-			<_.BannerImg src={banner} />
-			<_.Wrapper>
-				<_.TextWrapper>
-					<_.Text>이동 되는 페이지</_.Text>
-					<_.TextContent>체험형 현장실습</_.TextContent>
-				</_.TextWrapper>
-				<_.TextWrapper>
-					<_.Text>표시 기간</_.Text>
-					<_.TextContent>
-						2024년 2월 24일 ~ 2024년 2월 27일
-					</_.TextContent>
-				</_.TextWrapper>
-			</_.Wrapper>
+			{banners &&
+				banners.length > 0 &&
+				banners.map((banner, index) => (
+					<_.BannerDetails key={index}>
+						<_.BannerImg src={banner.banner_url} />
+						<_.DeleteBackground
+							onClick={() => {
+								onDelete(banner.banner_id);
+							}}
+						>
+							<_.deleteImg src={deleteimg} />
+						</_.DeleteBackground>
+						<_.Wrapper>
+							<_.TextWrapper>
+								<_.Text>이동 되는 페이지</_.Text>
+								<_.TextContent>
+									{
+										BannerType[
+											banner.banner_type as keyof BannerNameType
+										]
+									}
+								</_.TextContent>
+							</_.TextWrapper>
+							<_.TextWrapper>
+								<_.Text>표시 기간</_.Text>
+								<_.TextContent>
+									{banner.start_date} ~ {banner.end_date}
+								</_.TextContent>
+							</_.TextWrapper>
+						</_.Wrapper>
+					</_.BannerDetails>
+				))}
 		</_.Container>
 	);
 }

src/Components/Banner/BannerDetail.tsx/style.ts

@@ -3,9 +3,34 @@ import styled from 'styled-components';
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
+	gap: 36px;
+`;
+
+export const BannerDetails = styled.div`
+	display: flex;
+	flex-direction: column;
+	position: relative;
 	gap: 20px;
 `;
 
+export const DeleteBackground = styled.div`
+	position: absolute;
+	top: 15px;
+	right: 15px;
+	width: 36px;
+	height: 36px;
+	border-radius: 50px;
+	background: var(--primary-30, #0f4c82);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+
+export const deleteImg = styled.img`
+	width: 32px;
+	height: 32px;
+`;
+
 export const Wrapper = styled.div`
 	width: 1000px;
 	display: flex;