feat: Footer 컴포넌트 추가 (#23)

* chore: 서버 실행 포트 8080, 8081, 8082로 수정

* fix: style -> styles 수정

* feat: Footer 컴포넌트 추가

* fix: Badge 컴포넌트 border-radius 수정

* chore: 오타 수정

apps/admin/vite.config.ts

@@ -3,6 +3,9 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 8080,
+  },
   plugins: [
     react({
       jsxImportSource: '@emotion/react',

apps/preview/src/App.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button, TextButton, BooltiUIProvider } from '@boolti/ui';
+import { Badge, Button, TextButton, BooltiUIProvider, Footer } from '@boolti/ui';
 import {
   AppleIcon,
   ArrowLeftIcon,
@@ -229,6 +229,7 @@ const App = () => {
           <CloseIcon size={20} /> <CloseIcon size={24} />
         </div>
       </h1>
+      <Footer />
     </BooltiUIProvider>
   );
 };

apps/preview/vite.config.ts

@@ -3,6 +3,9 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 8081,
+  },
   plugins: [
     react({
       jsxImportSource: '@emotion/react',

apps/super-admin/vite.config.ts

@@ -3,6 +3,9 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 8082,
+  },
   plugins: [
     react({
       jsxImportSource: '@emotion/react',

packages/ui/package.json

@@ -9,6 +9,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@boolti/icon": "*",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "nanoid": "^5.0.4",

packages/ui/src/components/Badge/Badge.style.ts → packages/ui/src/components/Badge/Badge.styles.ts

@@ -10,7 +10,7 @@ const Container = styled.span<BadgeProps>`
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border-radius: 24px;
+  border-radius: 4px;
   padding: 3px 8px;
   ${({ theme }) => theme.typo.b1};
   ${({ colorTheme, theme }) => {

packages/ui/src/components/Badge/index.tsx

@@ -1,4 +1,4 @@
-import Styled, { BadgeProps } from './Badge.style';
+import Styled, { BadgeProps } from './Badge.styles';
 
 const Badge = ({ colorTheme, children }: React.PropsWithChildren<BadgeProps>) => {
   return <Styled.Container colorTheme={colorTheme}>{children}</Styled.Container>;

packages/ui/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import Styled, { ButtonProps } from './Button.style';
+import Styled, { ButtonProps } from './Button.styles';
 
 type Props = React.HTMLAttributes<HTMLButtonElement> & ButtonProps;
 

packages/ui/src/components/Footer/Footer.styles.ts

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+const Container = styled.footer`
+  padding: 60px 20px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  margin: 0 auto;
+  justify-content: space-between;
+  width: ${({ theme }) => theme.breakpoint.desktop};
+`;
+
+const TextGroup = styled.div`
+  color: ${({ theme }) => theme.palette.grey.g70};
+`;
+
+const Text = styled.span`
+  display: block;
+  white-space: pre-line;
+  ${({ theme }) => theme.typo.b1};
+`;
+
+const BoldTtext = styled.span`
+  display: block;
+  white-space: pre-line;
+  margin-bottom: 12px;
+  ${({ theme }) => theme.typo.sh1};
+  color: ${({ theme }) => theme.palette.grey.g90};
+`;
+
+const LinkTextGroup = styled.div`
+  margin-top: 32px;
+`;
+
+const Link = styled.a`
+  cursor: pointer;
+`;
+
+const IconGroup = styled.div`
+  display: flex;
+`;
+
+const IconLink = styled.a`
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  background-color: ${({ theme }) => theme.palette.grey.g70};
+  color: ${({ theme }) => theme.palette.grey.g00};
+  &:not(:last-of-type) {
+    margin-right: 8px;
+  }
+`;
+
+export default {
+  Container,
+  Content,
+  Text,
+  Link,
+  BoldTtext,
+  TextGroup,
+  IconGroup,
+  LinkTextGroup,
+  IconLink,
+};

packages/ui/src/components/Footer/index.tsx

@@ -0,0 +1,42 @@
+import { InstagramIcon, GithubIcon, KakaotalkIcon } from '@boolti/icon';
+
+import Styled from './Footer.styles';
+
+const Footer = () => {
+  return (
+    <Styled.Container>
+      <Styled.Content>
+        <Styled.TextGroup>
+          <Styled.BoldTtext>
+            {'불티' + '\n' + 'Copyright ⓒ Boolti. All Rights Reserved'}
+          </Styled.BoldTtext>
+          <Styled.Text>
+            {'사업자 등록번호 : 120-88-01280 | 대표 : 김혜선 (더미 텍스트)' +
+              '\n' +
+              '호스팅 서비스 : 주식회사 비바리퍼블리카 | 통신판매업 신고번호 : 2014-서울강남-03377'}
+          </Styled.Text>
+          <Styled.LinkTextGroup>
+            <Styled.Text>
+              <Styled.Link>개인정보 처리방침</Styled.Link>
+              {` | `}
+              <Styled.Link>서비스 이용약관</Styled.Link>
+            </Styled.Text>
+          </Styled.LinkTextGroup>
+        </Styled.TextGroup>
+        <Styled.IconGroup>
+          <Styled.IconLink>
+            <InstagramIcon size={24} />
+          </Styled.IconLink>
+          <Styled.IconLink>
+            <GithubIcon size={24} />
+          </Styled.IconLink>
+          <Styled.IconLink>
+            <KakaotalkIcon size={24} />
+          </Styled.IconLink>
+        </Styled.IconGroup>
+      </Styled.Content>
+    </Styled.Container>
+  );
+};
+
+export default Footer;

packages/ui/src/components/TextButton/index.tsx

@@ -1,4 +1,4 @@
-import Styled from './TextButton.style';
+import Styled from './TextButton.styles';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   icon?: React.ReactNode;

packages/ui/src/components/index.ts

@@ -3,5 +3,6 @@ import Button from './Button';
 import TextButton from './TextButton';
 import Badge from './Badge';
 import Dialog from './Dialog';
+import Footer from './Footer';
 
-export { BooltiUIProvider, Button, TextButton, Badge, Dialog };
+export { BooltiUIProvider, Button, TextButton, Badge, Dialog, Footer };

yarn.lock

@@ -347,6 +347,7 @@ __metadata:
   resolution: "@boolti/ui@workspace:packages/ui"
   dependencies:
     "@boolti/eslint-config": "npm:*"
+    "@boolti/icon": "npm:*"
     "@boolti/typescript-config": "npm:*"
     "@emotion/react": "npm:^11.11.3"
     "@emotion/styled": "npm:^11.11.0"