fix :: BannerTools UI #34

Team-B1ND · Dec 17, 2024 · a0c4987 · a0c4987
1 parent 2cf26a5
commit a0c4987
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 44 deletions.
diff --git 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 (
     <S.BannerItemWrap>
       <S.BannerItemFirstBox>
-        <Switch
-          checked={isAllowed}
-          onChange={handleChangeBannerAllow}
-          size="small"
-        />
+        <Switch checked={isAllowed} onChange={handleChangeBannerAllow} size="small" />
         <S.BannerItemText>{handleDateTime}</S.BannerItemText>
       </S.BannerItemFirstBox>
-      <S.BannerItemText style={{width:'30px',height:'13px',}}>{data.title}</S.BannerItemText>
+      <S.BannerItemText style={{ width: '40px', height: '13px' }}>{data.title}</S.BannerItemText>
       <S.BannerItemImg
         onClick={() => (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
@@ -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
@@ -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 (
     <S.BannerContainer>
-      {/* <S.BannerTopWrap>
-        <FcDocument size={29} />
-        <S.BannerTitle>배너 관리</S.BannerTitle>
-      </S.BannerTopWrap> */}
+      <SectionHeader title="배너 관리" subTitle="배너 등록 및 수정을 진행할 수 있습니다." />
       <S.Row>
         <BannerList />
         <S.Column>
           <BannerUpload />
-          <BannerHandler />
         </S.Column>
       </S.Row>
     </S.BannerContainer>

diff --git 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;
-`
+  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
@@ -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<SizeType, FlattenSimpleInterpolation> = {
   lg: css`
-    width: 700px;
+    width: 750px;
     height: 680px;
     overflow-y: hidden;
   `,