feat: 푸터 구현

Author: Devinix00

src/assets/images/footer/footer-image.png

@@ -0,0 +1 @@
+export { default as FooterImage } from './footer-image.png';

src/assets/images/footer/index.ts

@@ -9,4 +9,3 @@ export { default as Fruit } from './grade/fruit.png';
 export { default as Harvest } from './grade/harvest.png';
 export { default as Farmer } from './grade/farmer.png';
 export { default as PcFab } from './fab/pc_fab.png';
-export { default as UserGrade } from './grade/user-grade.png';

src/assets/images/grade/user-grade.png

@@ -0,0 +1,19 @@
+import { Box, Show } from '@chakra-ui/react';
+
+import MobileFooter from './MobileFooter';
+import PcFooter from './PcFooter';
+
+const Footer = () => {
+  return (
+    <Box bgColor={'#131313'} textColor={'white'}>
+      <Show below="tablet">
+        <MobileFooter />
+      </Show>
+      <Show above="tablet">
+        <PcFooter />
+      </Show>
+    </Box>
+  );
+};
+
+export default Footer;

src/assets/images/index.ts

@@ -0,0 +1,28 @@
+import { Box, Flex, Img, Text } from '@chakra-ui/react';
+
+import { FooterImage } from '@/assets/images/footer';
+
+const MobileFooter = () => {
+  const footerArr = [
+    '내 주변 분양',
+    '속닥속닥',
+    '채팅',
+    '로그인 / 회원가입',
+    '글쓰기',
+    '유저의 소리함',
+  ];
+
+  return (
+    <Box py={'80px'} px={'40px'}>
+      <Img src={FooterImage} h={'25px'} />
+      <Text mt={'22px'}>사업자 등록번호: 595-64-00704 | 대표: 박진겸</Text>
+      <Flex flexDir={'column'} mt={'114px'} gap={'20px'}>
+        {footerArr.map((el) => (
+          <Text key={el}>{el}</Text>
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+
+export default MobileFooter;

src/components/Footer/Footer.tsx

@@ -0,0 +1,36 @@
+import { Box, Flex, Grid, Img, Text } from '@chakra-ui/react';
+
+import { FooterImage } from '@/assets/images/footer';
+
+const PcFooter = () => {
+  const footerArr = [
+    '내 주변 분양',
+    '로그인 / 회원가입',
+    '속닥속닥',
+    '글쓰기',
+    '채팅',
+    '유저의 소리함',
+  ];
+
+  return (
+    <Box maxW="1194px" px={'20px'} mx={'auto'} h={'248px'}>
+      <Flex justifyContent={'space-between'} h={'100%'} alignItems={'center'}>
+        <Box>
+          <Img src={FooterImage} h={'25px'} />
+          <Text mt={'22px'}>사업자 등록번호: 595-64-00704 | 대표: 박진겸</Text>
+        </Box>
+        <Grid
+          gridTemplateColumns={'1fr 1fr'}
+          gridRowGap="18px"
+          gridColumnGap="46px"
+        >
+          {footerArr.map((el) => (
+            <Text key={el}>{el}</Text>
+          ))}
+        </Grid>
+      </Flex>
+    </Box>
+  );
+};
+
+export default PcFooter;

src/components/Footer/MobileFooter.tsx

@@ -3,19 +3,23 @@ import Banner from './components/Banner';
 import MonthlyCrop from './components/MonthlyCrop';
 import RecentPosts from './components/RecentPosts/RecentPosts';
 import Weather from './components/Weather/Weather';
+import Footer from '@/components/Footer/Footer';
 
 const Main = () => {
   return (
-    <Flex
-      flexDir="column"
-      pb={{ mobile: '50px', tablet: '120px' }}
-      gap={{ mobile: '36px', tablet: '80px' }}
-    >
-      <Banner />
-      <RecentPosts />
-      <MonthlyCrop />
-      <Weather />
-    </Flex>
+    <>
+      <Flex
+        flexDir="column"
+        pb={{ mobile: '50px', tablet: '120px' }}
+        gap={{ mobile: '36px', tablet: '80px' }}
+      >
+        <Banner />
+        <RecentPosts />
+        <MonthlyCrop />
+        <Weather />
+      </Flex>
+      <Footer />
+    </>
   );
 };