From 5efe16539b9ab7431e0a684b3d6b21d396dcbdb3 Mon Sep 17 00:00:00 2001 From: hustle-dev Date: Fri, 11 Mar 2022 16:24:47 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20Loading=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A7=84=ED=96=89=EC=A4=91=20pull?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 +++ .../CookingInfo/CookingInfo.styled.tsx | 2 +- src/components/Loading/Loading.stories.tsx | 0 src/components/Loading/Loading.styled.tsx | 10 +++++++ src/components/Loading/Loading.tsx | 26 +++++++++++++++++++ src/components/Loading/Loading.types.ts | 3 +++ src/styles/GlobalStyle.ts | 11 ++++++++ src/utils/dom.ts | 4 +++ src/utils/index.ts | 1 + 9 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/components/Loading/Loading.stories.tsx create mode 100644 src/components/Loading/Loading.styled.tsx create mode 100644 src/components/Loading/Loading.tsx create mode 100644 src/components/Loading/Loading.types.ts create mode 100644 src/utils/dom.ts diff --git a/public/index.html b/public/index.html index 13efb63..7740000 100644 --- a/public/index.html +++ b/public/index.html @@ -27,5 +27,9 @@

The service is not available normally.

+ +
+
+
diff --git a/src/components/CookingInfo/CookingInfo.styled.tsx b/src/components/CookingInfo/CookingInfo.styled.tsx index 345eafa..42613c2 100644 --- a/src/components/CookingInfo/CookingInfo.styled.tsx +++ b/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` diff --git a/src/components/Loading/Loading.stories.tsx b/src/components/Loading/Loading.stories.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Loading/Loading.styled.tsx b/src/components/Loading/Loading.styled.tsx new file mode 100644 index 0000000..282761e --- /dev/null +++ b/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%); +`; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 0000000..acc7e7d --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,26 @@ +import { useEffect } from 'react'; +import { $ } from 'utils'; +import { StyledLoadingThreeDots } from './Loading.styled'; +import { LoadingProps } from './Loading.types'; + +const loadingStartNode = $('loading-start'); +const loadingEndNode = $('loading-end'); + +export const Loading = ({ message }: LoadingProps) => { + useEffect(() => { + loadingStartNode.setAttribute('role', 'alert'); + loadingStartNode.insertAdjacentHTML('beforeend', `${message}`); + + return () => { + loadingStartNode.removeAttribute('role'); + loadingStartNode.innerHTML = ''; + + loadingEndNode.insertAdjacentHTML('beforeend', `Finished Loading.`); + setTimeout(() => { + loadingEndNode.innerHTML = ''; + }, 800); + }; + }, [message]); + + return ; +}; diff --git a/src/components/Loading/Loading.types.ts b/src/components/Loading/Loading.types.ts new file mode 100644 index 0000000..1a3f8fb --- /dev/null +++ b/src/components/Loading/Loading.types.ts @@ -0,0 +1,3 @@ +export interface LoadingProps { + message: string; +} diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index c05f905..bb09b19 100644 --- a/src/styles/GlobalStyle.ts +++ b/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; + } `; diff --git a/src/utils/dom.ts b/src/utils/dom.ts new file mode 100644 index 0000000..97ac82b --- /dev/null +++ b/src/utils/dom.ts @@ -0,0 +1,4 @@ +export const $ = (selector: string) => { + const element = document.querySelector(selector); + return element as T; +}; diff --git a/src/utils/index.ts b/src/utils/index.ts index 54fcd80..42bc1cc 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1 +1,2 @@ export * from './style'; +export * from './dom'; From 8063374b61d513d604548c3304903f6a3607e578 Mon Sep 17 00:00:00 2001 From: hustle-dev Date: Fri, 11 Mar 2022 16:55:38 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20Loading=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20-=20Issue=20#11?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + src/components/Loading/Loading.stories.tsx | 14 ++++++++++++++ src/components/index.ts | 1 + 3 files changed, 16 insertions(+) diff --git a/README.md b/README.md index 13ee6f6..e32f684 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ [hanspoon](https://github.com/TeamCooks/hanspoon) 프로젝트의 페이지 개선을 목표로 하는 프로젝트입니다. 원본 페이지: https://spoonacular.com/ +hanspoon 페이지: https://hanspoon-31cd9.web.app/ ## 🛠 사용기술 diff --git a/src/components/Loading/Loading.stories.tsx b/src/components/Loading/Loading.stories.tsx index e69de29..21a3373 100644 --- a/src/components/Loading/Loading.stories.tsx +++ b/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; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({}); diff --git a/src/components/index.ts b/src/components/index.ts index 5929d65..dc91dd7 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export * from './App/App'; export * from './CookingInfo/CookingInfo'; +export * from './Loading/Loading'; From c08b5cd63a2c85b7ec376bc56da395ad4a9c0520 Mon Sep 17 00:00:00 2001 From: hustle-dev Date: Mon, 14 Mar 2022 17:47:36 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20Loading=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Loading/Loading.tsx | 23 +++++++++++++++++++++-- src/components/Loading/Loading.types.ts | 1 + 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index acc7e7d..1e101b2 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -6,7 +6,7 @@ import { LoadingProps } from './Loading.types'; const loadingStartNode = $('loading-start'); const loadingEndNode = $('loading-end'); -export const Loading = ({ message }: LoadingProps) => { +export const Loading = ({ message, showBackground }: LoadingProps) => { useEffect(() => { loadingStartNode.setAttribute('role', 'alert'); loadingStartNode.insertAdjacentHTML('beforeend', `${message}`); @@ -22,5 +22,24 @@ export const Loading = ({ message }: LoadingProps) => { }; }, [message]); - return ; + return ( + <> + {showBackground ? ( +
+ ) : null} + ; + + ); }; diff --git a/src/components/Loading/Loading.types.ts b/src/components/Loading/Loading.types.ts index 1a3f8fb..68e29f9 100644 --- a/src/components/Loading/Loading.types.ts +++ b/src/components/Loading/Loading.types.ts @@ -1,3 +1,4 @@ export interface LoadingProps { message: string; + showBackground: boolean; }