Toast, BadgeList 컴포넌트 추가

.storybook/preview-body.html

@@ -1,4 +1,5 @@
 <div id="__next"></div>
 <div id="loading-start" aria-live="assertive"></div>
 <div id="loading-end" aria-live="assertive"></div>
-<div id="dialog"></div>
+<div id="dialog"></div>
+<div id="toast"></div>

src/components/Badge/Badge.types.ts

@@ -1,4 +1,4 @@
-type IconType =
+export type IconType =
   | 'dairyFree'
   | 'lactoOvo'
   | 'lactoOvoVegetarian'

src/components/BadgeList/BadgeList.styled.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const StyledUl = styled.ul`
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+`;

src/components/BadgeList/BadgeList.types.ts

@@ -0,0 +1,5 @@
+import { IconType } from 'components/Badge/Badge.types';
+
+export interface BadgeListProps {
+  tags: IconType[];
+}

src/components/Header/Header.styled.tsx

@@ -1,16 +1,16 @@
 import styled from '@emotion/styled';
 import { IconButton } from 'components';
 import { StyledHeaderProps } from './Header.types';
-
-export const headerHeight = 70;
+import { HEADER_HEIGHT } from 'styles/GlobalStyle';
+import { pxToRem } from 'utils';
 
 export const StyledHeader = styled.header<StyledHeaderProps>`
   background-color: ${({ theme }) => theme.color.white};
   box-shadow: 0 4px 10px rgba(0 0 0 / 10%);
   padding: 0 10px 0 20px;
   position: fixed;
   top: 0;
-  ${({ $hide }) => $hide && `top: ${-1 * headerHeight}px;`}
+  ${({ $hide }) => $hide && `top: ${-1 * HEADER_HEIGHT}px;`}
   left: 0;
   right: 0;
   transition: top 0.2s ease-in-out;
@@ -23,7 +23,7 @@ export const StyledDiv = styled.div`
   align-items: center;
   max-width: 1500px;
   margin: 0 auto;
-  height: ${headerHeight}px;
+  height: ${pxToRem(HEADER_HEIGHT)};
 `;
 
 export const StyledIconButton = styled(IconButton)`

src/components/Layout/Layout.styled.tsx

@@ -1,15 +1,16 @@
 import styled from '@emotion/styled';
-import { headerHeight } from 'components/Header/Header.styled';
-import { media, pxToRem } from 'utils';
+import { HEADER_HEIGHT } from 'styles/GlobalStyle';
+import { pxToRem, media } from 'utils';
 
 export const StyledMain = styled.main`
-  margin-top: ${headerHeight}px;
+  margin: ${pxToRem(HEADER_HEIGHT)} auto 0;
+
   ${media.mobile} {
     padding: ${pxToRem(10)};
     min-width: 320px;
   }
+
   ${media.desktop} {
     max-width: 1500px;
-    margin: ${headerHeight}px auto 0;
   }
 `;

src/components/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import { Header } from '..';
+import { Header } from 'components';
 import { StyledMain } from './Layout.styled';
 import { LayoutProps } from './Layout.types';
 

src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Toast } from './Toast';
+
+export default {
+  title: 'Toast',
+  component: Toast,
+  args: {
+    message: 'message',
+  },
+} as ComponentMeta<typeof Toast>;
+
+const Template: ComponentStory<typeof Toast> = (args) => <Toast {...args} />;
+
+export const Default = Template.bind({});
+
+export const LongMessage = Template.bind({});
+
+LongMessage.args = {
+  message:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+};
+
+export const Copied = Template.bind({});
+
+Copied.args = {
+  message: 'Copied',
+};

src/components/Toast/Toast.styled.tsx

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const StyledP = styled.p`
+  background: rgba(36, 36, 36, 0.8);
+  backdrop-filter: blur(2px);
+  color: ${({ theme }) => theme.color.white};
+  width: fit-content;
+  padding: 10px 30px;
+  border-radius: 15px;
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 80%;
+  word-break: break-all;
+  text-align: center;
+`;

src/components/Toast/Toast.tsx

@@ -0,0 +1,7 @@
+import { createPortal } from 'react-dom';
+import { StyledP } from './Toast.styled';
+import { ToastProps } from './Toast.types';
+
+export const Toast = ({ message }: ToastProps) => {
+  return createPortal(<StyledP>{message}</StyledP>, document.getElementById('toast')!);
+};

src/components/Toast/Toast.types.ts

@@ -0,0 +1,3 @@
+export interface ToastProps {
+  message: string;
+}

src/pages/_document.tsx

@@ -10,6 +10,7 @@ export default function Document() {
         <div id="loading-start" aria-live="assertive"></div>
         <div id="loading-end" aria-live="assertive"></div>
         <div id="dialog"></div>
+        <div id="toast"></div>
         <NextScript />
       </body>
     </Html>

src/styles/GlobalStyle.tsx

@@ -1,6 +1,8 @@
 import { css, Global } from '@emotion/react';
 import emotionNormalize from 'emotion-normalize';
 
+export const HEADER_HEIGHT = 70;
+
 export const GlobalStyle = () => (
   <Global
     styles={css`

src/utils/misc.ts

@@ -1 +1,3 @@
 export const excludeTags = (content: string) => content.replace(/<[^>]*>/g, '');
+
+export const camelCase = (data: string) => data.replace(/\s\w/g, (match) => match.toUpperCase().trim());