feat: InfoTextList, InfoTextItem 컴포넌트 추가 및 DateText 컴포넌트 제거 (#38)

* feat(ui): date Text 컴포넌트 제작

* feat(ui): InfoTextItem 컴포넌트 추가

* chore(common): commitlint에 subject-case 제한사항 제거

* feat(ui): infoTextList 컴포넌트 추가

* rename(ui): LabetText에서 LabelText로 이름 변경

* feat(common): volunteer, shelter의 ChakraProvider에 resetCSS 속성 추가

* remove(ui): dateText 컴포넌트 제거

* style(ui): InfoTextItemStylesProps로 type 이름 변경

* refactor(ui): InfoTextItem 삼항연산자 제거 및 속성 재정의

* refactor(ui): InfoTextList에 해당하는 styles 속성 추가

---------

Co-authored-by: DongjaJ <[email protected]>

apps/shelter/src/App.tsx

@@ -5,7 +5,7 @@ import { router } from '@/routes';
 
 export default function App() {
   return (
-    <ChakraProvider>
+    <ChakraProvider resetCSS>
       <RouterProvider router={router} />
     </ChakraProvider>
   );

apps/volunteer/src/App.tsx

@@ -5,7 +5,7 @@ import { router } from '@/routes';
 
 export default function App() {
   return (
-    <ChakraProvider>
+    <ChakraProvider resetCSS>
       <RouterProvider router={router} />
     </ChakraProvider>
   );

commitlint.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
+    'subject-case': [0],
     'type-enum': [
       2,
       'always',

packages/ui/components/InfoTextItem.tsx

@@ -0,0 +1,47 @@
+import type { FlexProps, TextProps } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
+
+type InfoTextItemStylesProps = {
+  flexStyles: FlexProps;
+  titleTextStyles: TextProps;
+  contentTextStyles: TextProps;
+};
+
+export type InfoTextItemWithoutStylesProps = {
+  title: string;
+  content: string;
+};
+
+type InfoTextItemProps = Partial<InfoTextItemStylesProps> &
+  InfoTextItemWithoutStylesProps;
+
+export default function InfoTextItem({
+  title,
+  content,
+  flexStyles,
+  titleTextStyles,
+  contentTextStyles,
+}: InfoTextItemProps) {
+  return (
+    <Flex gap={1} {...flexStyles}>
+      <Text
+        color="gray.400"
+        size="md"
+        fontWeight="medium"
+        fontSize="xs"
+        {...titleTextStyles}
+      >
+        {title}
+      </Text>
+      <Text
+        color="gray.500"
+        size="md"
+        fontWeight="semibold"
+        fontSize="xs"
+        {...contentTextStyles}
+      >
+        {content}
+      </Text>
+    </Flex>
+  );
+}

packages/ui/components/InfoTextList.tsx

@@ -0,0 +1,42 @@
+import { Box, FlexProps, TextProps } from '@chakra-ui/react';
+
+import type { InfoTextItemWithoutStylesProps } from './InfoTextItem';
+import InfoTextItem from './InfoTextItem';
+
+type InfoTextListProps = {
+  infoTextItems: InfoTextItemWithoutStylesProps[];
+};
+
+const flexStyles: FlexProps = {
+  gap: '5%',
+};
+
+const titleTextStyles: TextProps = {
+  w: '25%',
+  color: 'gray.500',
+  fontWeight: 'normal',
+  fontSize: 'sm',
+};
+
+const contentTextStyles: TextProps = {
+  w: '70%',
+  color: 'black',
+  fontWeight: 'medium',
+  fontSize: 'sm',
+};
+
+export default function InfoTextList({ infoTextItems }: InfoTextListProps) {
+  return (
+    <Box py={6} borderBottom="1px solid" borderColor="gray.200">
+      {infoTextItems.map((infoTextItem, index) => (
+        <InfoTextItem
+          key={index}
+          flexStyles={flexStyles}
+          titleTextStyles={titleTextStyles}
+          contentTextStyles={contentTextStyles}
+          {...infoTextItem}
+        />
+      ))}
+    </Box>
+  );
+}