Refactor: coupon page 리팩토링 (#244)

Upjuyanolja · Jan 31, 2024 · 69a35c3 · 69a35c3
1 parent 041dea7
commit 69a35c3
Show file tree

Hide file tree

Showing 7 changed files with 319 additions and 189 deletions.
diff --git a/src/components/domain/coupon/coupon-status-tag/index.tsx b/src/components/domain/coupon/coupon-status-tag/index.tsx
diff --git a/src/components/domain/coupon/coupon-status-tag/type.ts b/src/components/domain/coupon/coupon-status-tag/type.ts
diff --git a/src/components/domain/coupon/table-cell/index.tsx b/src/components/domain/coupon/table-cell/index.tsx
@@ -2,11 +2,19 @@ import { TextBox } from '@components/atom/text-box';
 import { Input, Tooltip } from 'antd';
 import styled from 'styled-components';
 import {
+  CouponTagProps,
+  StyledCouponTagProps,
   couponNameContainerProps,
   dayLimitInputProps,
   roomContainerProps,
 } from './type';
 import { InfoCircleOutlined } from '@ant-design/icons';
+import { colors } from '@/constants/colors';
+import {
+  COUPON_STATUS_DISABLE,
+  COUPON_STATUS_ENABLE,
+  COUPON_STATUS_SOLD_OUT,
+} from '@/constants/coupon';
 
 export const RoomContainer = ({ room }: roomContainerProps) => {
   return (
@@ -115,3 +123,47 @@ const StyledDayLimitTitle = styled.div`
   display: flex;
   gap: 4px;
 `;
+
+export const CouponStatusTag = ({ status }: CouponTagProps) => {
+  let borderColor = '';
+  let backgroundColor = colors.primary;
+  let color = colors.white;
+  let text: string = COUPON_STATUS_ENABLE.label;
+
+  if (status === COUPON_STATUS_SOLD_OUT.value) {
+    borderColor = colors.orange;
+    backgroundColor = colors.white;
+    color = colors.orange;
+    text = COUPON_STATUS_SOLD_OUT.label;
+  }
+
+  if (status === COUPON_STATUS_DISABLE.value) {
+    backgroundColor = colors.black600;
+    text = COUPON_STATUS_DISABLE.label;
+  }
+  return (
+    <StyledCouponStatusTag
+      backgroundColor={backgroundColor}
+      borderColor={borderColor}
+      color={color}
+    >
+      <TextBox typography="body2" fontWeight={700} data-testid="coupon-status">
+        {text}
+      </TextBox>
+    </StyledCouponStatusTag>
+  );
+};
+
+const StyledCouponStatusTag = styled.div<StyledCouponTagProps>`
+  width: 75px;
+  height: 28px;
+
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.color};
+  border: 1px solid ${(props) => props.borderColor || ''};
+  border-radius: 2px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/components/domain/coupon/table-cell/type.ts b/src/components/domain/coupon/table-cell/type.ts
@@ -22,3 +22,11 @@ export type dayLimitInputProps = {
     key: number,
   ) => void;
 };
+export type StyledCouponTagProps = {
+  backgroundColor: string;
+  borderColor: string;
+  color: string;
+};
+export type CouponTagProps = {
+  status: string;
+};
diff --git a/src/components/domain/coupon/table/index.tsx b/src/components/domain/coupon/table/index.tsx
@@ -3,11 +3,11 @@ import Table, { ColumnsType } from 'antd/lib/table';
 import styled from 'styled-components';
 import {
   CouponNameContainer,
+  CouponStatusTag,
   DayLimitInput,
   DayLimitTitle,
   RoomContainer,
 } from '../table-cell';
-import { CouponStatusTag } from '../coupon-status-tag';
 import { Select } from 'antd';
 import { TextBox } from '@components/atom/text-box';
 import { TableProps, couponTableProps, tableData } from './type';