diff --git a/src/components/BannerSetting/BannerList/BannerItem/index.tsx b/src/components/BannerSetting/BannerList/BannerItem/index.tsx index 527c790..1cb6742 100644 --- a/src/components/BannerSetting/BannerList/BannerItem/index.tsx +++ b/src/components/BannerSetting/BannerList/BannerItem/index.tsx @@ -1,32 +1,27 @@ -import { Switch } from "@mui/material"; -import * as S from "./style"; -import { Banner } from "../../../../types/Banner/banner.type"; -import dateTransform from "../../../../utils/dateTransform"; -import useHandleBanner from "../../../../hooks/Banner/useHandleBanner"; +import { Switch } from '@mui/material'; +import * as S from './style'; +import { Banner } from '../../../../types/Banner/banner.type'; +import dateTransform from '../../../../utils/dateTransform'; +import useHandleBanner from '../../../../hooks/Banner/useHandleBanner'; interface Props { data: Banner; } const BannerItem = ({ data }: Props) => { - const handleDateTime = dateTransform.hyphen(data.expireAt); - const { handleChangeBannerAllow, isAllowed, handleDeleteBanner } = - useHandleBanner({ - id: data.id, - status: data.status, - }); + const handleDateTime = dateTransform.hyphen(data.expireAt); + const { handleChangeBannerAllow, isAllowed, handleDeleteBanner } = useHandleBanner({ + id: data.id, + status: data.status, + }); return ( - + {handleDateTime} - {data.title} + {data.title} (window.location.href = data.redirectUrl)} src={data.imageUrl} diff --git a/src/components/BannerSetting/BannerList/BannerItem/style.ts b/src/components/BannerSetting/BannerList/BannerItem/style.ts index 515db19..f231b8c 100644 --- a/src/components/BannerSetting/BannerList/BannerItem/style.ts +++ b/src/components/BannerSetting/BannerList/BannerItem/style.ts @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const BannerItemWrap = styled.div` width: 100%; @@ -10,14 +10,13 @@ export const BannerItemWrap = styled.div` padding: 10px 0 10px 0; border-bottom: 1px solid #ddd; - `; export const BannerItemText = styled.p` overflow: hidden; - text-overflow: ellipsis; font-weight: 500; font-size: 14px; + text-overflow: ellipsis; color: #282828; `; diff --git a/src/components/BannerSetting/index.tsx b/src/components/BannerSetting/index.tsx index 2f46bd6..fc8f941 100644 --- a/src/components/BannerSetting/index.tsx +++ b/src/components/BannerSetting/index.tsx @@ -1,20 +1,17 @@ -import * as S from "./style"; -import BannerUpload from "./BannerUpload"; -import BannerList from "./BannerList"; -import BannerHandler from "./BannerHandler"; +import * as S from './style'; +import BannerUpload from './BannerUpload'; +import BannerList from './BannerList'; +import BannerHandler from './BannerHandler'; +import SectionHeader from 'components/Common/SectionHeader'; const BannerSetting = () => { return ( - {/* - - 배너 관리 - */} + - diff --git a/src/components/BannerSetting/style.ts b/src/components/BannerSetting/style.ts index a607d71..0e558a4 100644 --- a/src/components/BannerSetting/style.ts +++ b/src/components/BannerSetting/style.ts @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const BannerTopWrap = styled.div` width: 100%; @@ -35,14 +35,16 @@ export const Column = styled.div` `; export const Row = styled.div` + width: 100%; display: flex; - column-gap: 16px; + justify-content: space-around; `; export const BannerContainer = styled.div` - width: 100%; - height: 100%; - display: flex; - padding: 16px 30px; - flex-direction: column; -` \ No newline at end of file + width: 100%; + height: 100%; + display: flex; + padding: 16px 30px; + flex-direction: column; + align-items: center; +`; diff --git a/src/components/Common/Box/style.ts b/src/components/Common/Box/style.ts index 128068f..8ab2c4c 100644 --- a/src/components/Common/Box/style.ts +++ b/src/components/Common/Box/style.ts @@ -1,9 +1,5 @@ -import styled, { - CSSObject, - FlattenSimpleInterpolation, - css, -} from "styled-components"; -import { SizeType } from "./types"; +import styled, { CSSObject, FlattenSimpleInterpolation, css } from 'styled-components'; +import { SizeType } from './types'; export const BannerContentBox = styled.div<{ size: SizeType; @@ -19,7 +15,7 @@ export const BannerContentBox = styled.div<{ const sizeStyle: Record = { lg: css` - width: 700px; + width: 750px; height: 680px; overflow-y: hidden; `,