From b4eb2049b83890375ee77d2ef5642780f33d0ee5 Mon Sep 17 00:00:00 2001
From: Choi Won Suk <sukvvon@gmail.com>
Date: Sat, 4 Nov 2023 00:47:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20InfoTextList,=20InfoTextItem=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20DateText=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20(#38)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <jdh981118@naver.com>
---
 apps/shelter/src/App.tsx                      |  2 +-
 apps/volunteer/src/App.tsx                    |  2 +-
 commitlint.config.js                          |  1 +
 packages/ui/components/InfoTextItem.tsx       | 47 +++++++++++++++++++
 packages/ui/components/InfoTextList.tsx       | 42 +++++++++++++++++
 .../{LabetText.tsx => LabelText.tsx}          |  0
 6 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/components/InfoTextItem.tsx
 create mode 100644 packages/ui/components/InfoTextList.tsx
 rename packages/ui/components/{LabetText.tsx => LabelText.tsx} (100%)

diff --git a/apps/shelter/src/App.tsx b/apps/shelter/src/App.tsx
index 4845f3b7..611a2c19 100644
--- a/apps/shelter/src/App.tsx
+++ b/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>
   );
diff --git a/apps/volunteer/src/App.tsx b/apps/volunteer/src/App.tsx
index 4845f3b7..611a2c19 100644
--- a/apps/volunteer/src/App.tsx
+++ b/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>
   );
diff --git a/commitlint.config.js b/commitlint.config.js
index b888378b..0a107507 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
+    'subject-case': [0],
     'type-enum': [
       2,
       'always',
diff --git a/packages/ui/components/InfoTextItem.tsx b/packages/ui/components/InfoTextItem.tsx
new file mode 100644
index 00000000..f0b34e9c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/ui/components/InfoTextList.tsx b/packages/ui/components/InfoTextList.tsx
new file mode 100644
index 00000000..9cfb428c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/ui/components/LabetText.tsx b/packages/ui/components/LabelText.tsx
similarity index 100%
rename from packages/ui/components/LabetText.tsx
rename to packages/ui/components/LabelText.tsx