메뉴 배너 관리

src/styles/ModuleComponents.js

@@ -614,6 +614,10 @@ export const FormInput = styled.input`
 		color: ${props => props.color || '#cccccc'};
 		background: ${props => props.background_color || '#f6f6f6'};
 	}
+	
+    ${props => props.suffix && `
+		padding-right: 60px; // 라벨 영역을 위한 여백 확보
+	`}
 `;
 
 export const FormRowInput = styled.input`
@@ -691,6 +695,30 @@ export const FormTextAreaWrapper = styled.div`
   position: relative;
 `;
 
+export const FormInputSuffixWrapper = styled.div`
+  position: relative;
+  width: ${props => props.width || '100%'};
+  display: inline-block;
+`;
+
+export const FormInputSuffix = styled.div`
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 100%;
+    width: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #f1f5f9;
+	color: #475569;
+	font-size: 14px;
+	font-weight: 500;
+	padding: 0 12px;
+	border-radius: 0 8px 8px 0;
+	border-left: 1px solid #e2e8f0;
+`;
+
 export const TitleItem = styled.div`
 	display: flex;
 	align-items: center;
@@ -740,6 +768,7 @@ export const StatusWapper = styled.td`
     display: flex;
     gap: 0.35rem;
     align-items: center;
+    justify-content: center;
 `;
 
 export const ExcelDownButton = styled.button`