feat: 컴포넌트 추가, 스타일 수정

web-app/app/shared/components/descriptions/items/DescriptionsItem.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+
+export type DescriptionsItemProps = {
+  title: React.ReactNode;
+  content: React.ReactNode;
+  span?: number | 'filled';
+  isFirstRow?: boolean;
+  titleWidth?: number;
+  titleClassName?: string;
+  contentClassName?: string;
+};
+
+export const DescriptionsItem = (props: DescriptionsItemProps) => {
+  const { title, content, span, isFirstRow = false, titleWidth, titleClassName, contentClassName } = props;
+
+  const gridColumnStyle =
+    span === 'filled' ? { gridColumn: '1 / -1' } : span && span > 0 ? { gridColumn: `span ${span}` } : {};
+
+  return (
+    <div className="flex" style={gridColumnStyle}>
+      <div
+        className={`flex w-25 min-h-10 items-center px-4 bg-primary-tertiary01 text-primary-secondary text-sm font-semibold border-b border-white ${titleClassName || ''}`}
+        style={{ width: titleWidth }}
+      >
+        {title}
+      </div>
+      <div
+        className={clsx(
+          'relative flex flex-1 items-center pl-4 pr-3 py-2 text-sm font-medium text-kc-black-22 overflow-x-auto after:content-[\'\'] after:absolute after:left-0 after:right-0 after:bottom-0 after:h-px after:bg-primary-tertiary01',
+          contentClassName,
+          isFirstRow &&
+          'before:content-[\'\'] before:absolute before:left-0 before:right-0 before:top-0 before:h-px before:bg-primary-tertiary01'
+        )}
+      >
+        {content}
+      </div>
+    </div>
+  );
+};