Loading 컴포넌트 마이그레이션

README.md

@@ -3,6 +3,7 @@
 [hanspoon](https://github.com/TeamCooks/hanspoon) 프로젝트의 페이지 개선을 목표로 하는 프로젝트입니다.
 
 원본 페이지: https://spoonacular.com/
+hanspoon 페이지: https://hanspoon-31cd9.web.app/
 
 ## 🛠 사용기술
 

public/index.html

@@ -27,5 +27,9 @@ <h1>The service is not available normally.</h1>
     <![endif]-->
 
     <div id="root"></div>
+
+    <div id="dialog"></div>
+    <div id="loading-start" aria-live="assertive"></div>
+    <div id="loading-end" aria-live="assertive"></div>
   </body>
 </html>

src/components/CookingInfo/CookingInfo.styled.tsx

@@ -7,7 +7,7 @@ export const StyledDL = styled.dl`
   color: #cbcbcb;
   font-size: ${pxToRem(24)};
   padding: ${pxToRem(10)} 0;
-  max-width: ${pxToRem(400)};
+  width: 100%;
 `;
 
 export const StyledDiv = styled.div`

src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Loading } from './Loading';
+
+export default {
+  title: 'Loading',
+  component: Loading,
+  args: {
+    message: 'Loading..',
+  },
+} as ComponentMeta<typeof Loading>;
+
+const Template: ComponentStory<typeof Loading> = (args) => <Loading {...args} />;
+
+export const Default = Template.bind({});

src/components/Loading/Loading.styled.tsx

@@ -0,0 +1,10 @@
+import LoadingIcons from 'react-loading-icons';
+import styled from 'styled-components';
+
+export const StyledLoadingThreeDots = styled(LoadingIcons.ThreeDots)`
+  z-index: 400;
+  position: fixed;
+  top: 50vh;
+  left: 50vw;
+  transform: translate(-50%, -50%);
+`;

src/components/Loading/Loading.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { $ } from 'utils';
+import { StyledLoadingThreeDots } from './Loading.styled';
+import { LoadingProps } from './Loading.types';
+
+const loadingStartNode = $<HTMLDivElement>('loading-start');
+const loadingEndNode = $<HTMLDivElement>('loading-end');
+
+export const Loading = ({ message, showBackground }: LoadingProps) => {
+  useEffect(() => {
+    loadingStartNode.setAttribute('role', 'alert');
+    loadingStartNode.insertAdjacentHTML('beforeend', `<span class="a11yHidden">${message}</span>`);
+
+    return () => {
+      loadingStartNode.removeAttribute('role');
+      loadingStartNode.innerHTML = '';
+
+      loadingEndNode.insertAdjacentHTML('beforeend', `<span class="a11yHidden">Finished Loading.</span>`);
+      setTimeout(() => {
+        loadingEndNode.innerHTML = '';
+      }, 800);
+    };
+  }, [message]);
+
+  return (
+    <>
+      {showBackground ? (
+        <div
+          style={{
+            zIndex: '300',
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            background: 'rgba(36, 36, 36, 0.8)',
+            backdropFilter: 'blur(3px)',
+            minHeight: '100%',
+          }}
+        />
+      ) : null}
+      <StyledLoadingThreeDots fill="#e56a18" height="1em" />;
+    </>
+  );
+};

src/components/Loading/Loading.types.ts

@@ -0,0 +1,4 @@
+export interface LoadingProps {
+  message: string;
+  showBackground: boolean;
+}

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './App/App';
 export * from './CookingInfo/CookingInfo';
+export * from './Loading/Loading';

src/styles/GlobalStyle.ts

@@ -122,4 +122,15 @@ export const GlobalStyle = createGlobalStyle`
     figure {
     margin: 0;
     }
+
+    /* 접근성 관련 css */
+    .a11yHidden {
+    overflow: hidden;
+    position: absolute !important;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    }
 `;

src/utils/dom.ts

@@ -0,0 +1,4 @@
+export const $ = <T extends HTMLElement>(selector: string) => {
+  const element = document.querySelector(selector);
+  return element as T;
+};

src/utils/index.ts

@@ -1 +1,2 @@
 export * from './style';
+export * from './dom';