feat: SettingGroup & SettingItem 컴포넌트 개발 (#49)

* feat(shared): next svg icon 추가

* feat(shared): settingItem 컴포넌트 개발

* feat(shared): settingGroup 컴포넌트 개발

* design(shared): settingGroup, settingItem padding, margin 변경

* design(common): settingItem, settingGroup 여백 수정

packages/shared/components/SettingGroup.tsx

@@ -0,0 +1,25 @@
+import { Box, Text } from '@chakra-ui/react';
+
+import type { SettingItemProps } from './SettingItem';
+import SettingItem from './SettingItem';
+
+type SettingProps = {
+  groupTitle: string;
+  settingItems: SettingItemProps[];
+};
+
+export default function SettingGroup({
+  groupTitle,
+  settingItems,
+}: SettingProps) {
+  return (
+    <Box>
+      <Text pb={2} color="gray.500">
+        {groupTitle}
+      </Text>
+      {settingItems.map((item, index) => (
+        <SettingItem key={index} {...item} />
+      ))}
+    </Box>
+  );
+}

packages/shared/components/SettingItem.tsx

@@ -0,0 +1,25 @@
+import { Flex, Image, Text } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+
+import Next from '../assets/icon_next.svg';
+
+export type SettingItemProps = {
+  itemTitle: string;
+  path: string;
+};
+export default function SettingItem({ itemTitle, path }: SettingItemProps) {
+  return (
+    <Flex
+      justify="space-between"
+      py="18px"
+      px={4}
+      borderBottom="1px solid"
+      borderColor="gray.200"
+    >
+      <Text fontWeight="medium">{itemTitle}</Text>
+      <Link to={path}>
+        <Image src={Next} cursor="pointer" />
+      </Link>
+    </Flex>
+  );
+}