From 94a81801fc7cf74607cb476c836e4d329526b445 Mon Sep 17 00:00:00 2001 From: leejiho9898 Date: Mon, 9 Oct 2023 19:11:26 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/DrinkCommentContainer.tsx | 3 +- .../src/app/map/components/MapContainer.tsx | 41 +++++++++++---- .../src/app/vote/[id]/components/Comment.tsx | 51 +++++++++++++++---- .../vote/[id]/components/CommentContainer.tsx | 3 +- .../[id]/services/useCommentDeleteService.ts | 20 ++++++++ apps/jurumarble/src/lib/apis/comment.ts | 21 ++++++++ apps/jurumarble/src/lib/apis/vote.ts | 2 +- 7 files changed, 118 insertions(+), 23 deletions(-) create mode 100644 apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts diff --git a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkCommentContainer.tsx b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkCommentContainer.tsx index 4eae62ee..d64d52fb 100644 --- a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkCommentContainer.tsx +++ b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkCommentContainer.tsx @@ -79,6 +79,8 @@ function DrinkCommentContainer() { index, ) => ( void 0} mutateLike={() => mutateLike(id)} mutateHate={() => mutateHate(id)} key={`comment_id_${index}`} diff --git a/apps/jurumarble/src/app/map/components/MapContainer.tsx b/apps/jurumarble/src/app/map/components/MapContainer.tsx index aba97bae..6d185204 100644 --- a/apps/jurumarble/src/app/map/components/MapContainer.tsx +++ b/apps/jurumarble/src/app/map/components/MapContainer.tsx @@ -17,6 +17,7 @@ import SvgIcPin from "src/assets/icons/ic_pin.svg"; import Image from "next/image"; const MapContainer = () => { + const [onMap, toggleMap] = useToggle(); const { error, location, toggleOnLocation, onLocation } = useGeoLocation(); const [on, toggle] = useToggle(); const mapRef = useRef(null); @@ -27,7 +28,11 @@ const MapContainer = () => { endY: 132.02500466772065, }); - console.log(location); + useEffect(() => { + setTimeout(() => { + toggleMap(); + }, 600); + }, []); const { drinksList } = useDrinksMapService({ startX: mapXY.startX, @@ -51,12 +56,22 @@ const MapContainer = () => { level: 13, }); - useEffect(() => { - // 윈도우 리사이즈 실행 - setTimeout(() => { - window.dispatchEvent(new Event("resize")); - }, 1000); - }, []); + // useEffect(() => { + // const kakaoMapScript = document.createElement("script"); + // kakaoMapScript.async = false; + // kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=700d399006256f95732f06b19c046ba5&autoload=false`; + // document.head.appendChild(kakaoMapScript); + + // const onLoadKakaoAPI = () => { + // window.kakao.maps.load(() => { + // var container = document.getElementById("map"); + + // var map = new window.kakao.maps.Map(container); + // }); + // }; + + // kakaoMapScript.addEventListener("load", onLoadKakaoAPI); + // }, []); const onIdleMap = () => { const map = mapRef.current; @@ -103,8 +118,15 @@ const MapContainer = () => { -
+
{ + window.dispatchEvent(new Event("resize")); + }} + onLoad={() => { + mapRef.current?.getNode(); + }} center={state.center} isPanto={state.isPanto} style={{ @@ -155,8 +177,9 @@ const MapContainer = () => { /> */} - {drinksList.map(({ drinkId, name, latitude, longitude, image, manufacturer }) => ( + {drinksList.map(({ drinkId, name, latitude, longitude, image, manufacturer }, index) => ( ) => { + setCommentForm(e.target.value); + }; + const onSubmitComment = () => {}; + return ( {nickName} - {content} - {userId === userInfo?.userId && ( - - - + {isModifying ? ( + + ) : ( + <> + {content} + {userId === userInfo?.userId && ( + + + + )} + )} +
{createdDate.slice(0, 10)}
❤️ 좋아요 {likeCount ?? 0} ・ @@ -113,7 +136,13 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
)} - {toggleMenu && } + {toggleMenu && ( + setIsModifying((prev) => !prev)} + right="20px" + /> + )} {toggleNonWriterMenu && ( { diff --git a/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx b/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx index ba397750..1e3c8a04 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx @@ -83,6 +83,8 @@ function CommentContainer({ postId }: Props) { index, ) => ( void 0} mutateLike={() => mutateLike(id)} mutateHate={() => mutateHate(id)} key={`comment_id_${index}`} diff --git a/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts b/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts new file mode 100644 index 00000000..aa76a809 --- /dev/null +++ b/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts @@ -0,0 +1,20 @@ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { deleteComment } from "lib/apis/comment"; +import { reactQueryKeys } from "lib/queryKeys"; + +export default function useCommentDeleteService( + commentType: "votes" | "drinks", + typeId: number, + commentId: number, +) { + const queryClient = useQueryClient(); + const { mutate } = useMutation(() => deleteComment(commentType, typeId, commentId), { + onSuccess: () => { + alert("댓글이 삭제되었습니다."); + queryClient.invalidateQueries([reactQueryKeys.detailCommentList]); + }, + }); + return { + onDelete: mutate, + }; +} diff --git a/apps/jurumarble/src/lib/apis/comment.ts b/apps/jurumarble/src/lib/apis/comment.ts index ffd2f95d..c53757f9 100644 --- a/apps/jurumarble/src/lib/apis/comment.ts +++ b/apps/jurumarble/src/lib/apis/comment.ts @@ -92,3 +92,24 @@ export const postComment = async ( const response = await http.post(`/api/${commentType}/${voteId}/comments/create`, body); return response.data; }; + +export const deleteComment = async ( + commentType: "votes" | "drinks", + typeId: number, + commentId: number, +) => { + const response = await http.delete(`/api/${commentType}/${typeId}/comments/${commentId}`); + return response.data; +}; + +export const putComment = async ( + commentType: "votes" | "drinks", + typeId: number, + commentId: number, + content: string, +) => { + const response = await http.put(`/api/${commentType}/${typeId}/comments/${commentId}`, { + content, + }); + return response.data; +}; diff --git a/apps/jurumarble/src/lib/apis/vote.ts b/apps/jurumarble/src/lib/apis/vote.ts index e62205ea..0b294c39 100644 --- a/apps/jurumarble/src/lib/apis/vote.ts +++ b/apps/jurumarble/src/lib/apis/vote.ts @@ -170,6 +170,6 @@ export const getHotDrinkVote = async () => { }; export const deleteVote = async (voteId: number) => { - const response = await http.delete(`api/votes/${voteId}`); + const response = await http.delete(`api/votes/${voteId}/`); return response.data; }; From 31153c8ceae0786be65b489178ae872b0feac682 Mon Sep 17 00:00:00 2001 From: leejiho9898 Date: Mon, 9 Oct 2023 19:11:38 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=ED=97=88=EC=9A=A9=20=EB=8F=84?= =?UTF-8?q?=EB=A7=A4=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/next.config.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/jurumarble/next.config.js b/apps/jurumarble/next.config.js index 56433112..bbd85efd 100644 --- a/apps/jurumarble/next.config.js +++ b/apps/jurumarble/next.config.js @@ -9,6 +9,15 @@ const nextConfig = { domains: [ "shopping-phinf.pstatic.net", "elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com", + "img.danawa.com", + "sulsulsul.com", + "shop-phinf.pstatic.net", + "www.sulseam.com", + "mblogthumb-phinf.pstatic.net", + "sogoodk.com", + "modo-phinf.pstatic.net", + "cdn-pro-web-251-115.cdn-nhncommerce.com", + "lh3.googleusercontent.com", ], }, }; From b6c010a48d57405800f475777d8074ea513f0019 Mon Sep 17 00:00:00 2001 From: leejiho9898 Date: Mon, 9 Oct 2023 19:11:52 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=20=EB=A9=94=EC=9D=B8=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/app/map/page.tsx | 7 ------- apps/jurumarble/src/app/page.tsx | 7 +++++++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/jurumarble/src/app/map/page.tsx b/apps/jurumarble/src/app/map/page.tsx index 150032e1..1c10c7b4 100644 --- a/apps/jurumarble/src/app/map/page.tsx +++ b/apps/jurumarble/src/app/map/page.tsx @@ -4,8 +4,6 @@ import BottomBar from "components/BottomBar"; import Header from "components/Header"; import React from "react"; import MapContainer from "./components/MapContainer"; -import { KAKAO_MAP_API_KEY } from "lib/constants"; -import Script from "next/script"; declare global { interface Window { @@ -15,11 +13,6 @@ declare global { const MapPage = () => { return ( <> -
diff --git a/apps/jurumarble/src/app/page.tsx b/apps/jurumarble/src/app/page.tsx index 0c674708..82f0fcf2 100644 --- a/apps/jurumarble/src/app/page.tsx +++ b/apps/jurumarble/src/app/page.tsx @@ -3,7 +3,9 @@ import BottomBar from "components/BottomBar"; import DivideLine from "components/DivideLine"; import Header from "components/Header"; +import { KAKAO_MAP_API_KEY } from "lib/constants"; import Image from "next/image"; +import Script from "next/script"; import { MainBannerImage } from "public/images"; import styled from "styled-components"; import HotDrinkContainer from "./main/components/HotDrinkContainer"; @@ -13,6 +15,11 @@ import SearchInputWrapper from "./main/components/SearchInputWrapper"; function MainPage() { return ( <> +
From f908413b31f53ae24e518563908e99fe7dca128f Mon Sep 17 00:00:00 2001 From: leejiho9898 Date: Mon, 9 Oct 2023 23:12:06 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/vote/[id]/components/Comment.tsx | 64 +++++++++++++----- .../vote/[id]/components/CommentPutForm.tsx | 66 +++++++++++++++++++ .../[id]/services/useCommentDeleteService.ts | 18 ++++- 3 files changed, 130 insertions(+), 18 deletions(-) create mode 100644 apps/jurumarble/src/app/vote/[id]/components/CommentPutForm.tsx diff --git a/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx b/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx index aea0f661..113aba02 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx @@ -5,7 +5,7 @@ import { Button } from "components/button"; import { CommentResponse } from "lib/apis/comment"; import Image from "next/image"; import { ExImg1 } from "public/images"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { toast } from "react-toastify"; import useGetUserInfo from "services/useGetUserInfo"; import SvgIcMenu from "src/assets/icons/components/IcMenu"; @@ -15,6 +15,7 @@ import useCommentReportService from "../services/useCommentReportService"; import CommentDeleteModal from "./CommentDeleteModal"; import CommentForm from "./CommentForm"; +import CommentPutForm from "./CommentPutForm"; interface Props { voteType: "drinks" | "votes"; @@ -60,14 +61,21 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) { toggleNonWriterMenu, onToggleNonWriterMenu, ); - const { onDelete } = useCommentDeleteService(voteType, postId, id); + const { onDelete, onPutComment } = useCommentDeleteService(voteType, postId, id); const [isModifying, setIsModifying] = useState(false); const [commentForm, setCommentForm] = useState(""); - const onChangeCommentForm = (e: React.ChangeEvent) => { + const onChangeCommentForm = (e: React.ChangeEvent) => { setCommentForm(e.target.value); }; - const onSubmitComment = () => {}; + const onSubmitComment = (content: string) => { + onPutComment(content); + setIsModifying(false); + }; + + useEffect(() => { + setCommentForm(content); + }, [comment]); return ( @@ -103,11 +111,26 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) { {nickName} {isModifying ? ( - + <> + + + + + + + ) : ( <> {content} @@ -118,14 +141,14 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) { )} + +
{createdDate.slice(0, 10)}
・ + ❤️ 좋아요 {likeCount ?? 0}{" "} + ・ + 🖤 싫어요 {hateCount ?? 0}{" "} +
)} - - -
{createdDate.slice(0, 10)}
・ - ❤️ 좋아요 {likeCount ?? 0} ・ - 🖤 싫어요 {hateCount ?? 0}{" "} -
{userId === userInfo?.userId ? (
@@ -253,4 +276,15 @@ const AddRestaurants = styled.div` const BigFont = styled.span` font-size: 17px; `; + +const PutFormWrapper = styled.div` + display: flex; + align-items: center; + justify-content: right; +`; + +const InputWrapper = styled.div` + padding: 12px 0 8px 0; +`; + export default Comment; diff --git a/apps/jurumarble/src/app/vote/[id]/components/CommentPutForm.tsx b/apps/jurumarble/src/app/vote/[id]/components/CommentPutForm.tsx new file mode 100644 index 00000000..ca17ab2f --- /dev/null +++ b/apps/jurumarble/src/app/vote/[id]/components/CommentPutForm.tsx @@ -0,0 +1,66 @@ +// import { Input } from "@monorepo/ui"; +import Image from "next/image"; +import { ExImg1 } from "public/images"; +import React from "react"; +import styled, { css } from "styled-components"; + +interface Props { + commentForm: string; + onChangeCommentForm(e: React.ChangeEvent): void; + onSubmitComment(content: string): void; +} + +function CommentPutForm({ commentForm, onChangeCommentForm, onSubmitComment }: Props) { + const onSubmit = (e: React.FormEvent) => { + e.preventDefault(); + onSubmitComment(commentForm); + }; + + return ( + +
+ + 수정 +
+
+ ); +} + +const Container = styled.div` + display: flex; + align-items: center; + gap: 6px; +`; + +const Form = styled.form` + display: flex; + flex: 1 1 auto; +`; + +const Input = styled.textarea` + border-right: none; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + width: 100%; + padding: 14px; + resize: none; + ${({ theme }) => css` + border: 1px solid ${theme.colors.black_05}; + color: ${theme.colors.black_02}; + `} +`; + +const SubmitButton = styled.button` + width: 60px; + padding: 16px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + white-space: nowrap; + ${({ theme }) => css` + border: 1px solid ${theme.colors.black_05}; + color: ${theme.colors.main_01}; + background-color: ${theme.colors.white}; + `} +`; + +export default CommentPutForm; diff --git a/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts b/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts index aa76a809..155fd2e6 100644 --- a/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts +++ b/apps/jurumarble/src/app/vote/[id]/services/useCommentDeleteService.ts @@ -1,6 +1,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import { deleteComment } from "lib/apis/comment"; -import { reactQueryKeys } from "lib/queryKeys"; +import { deleteComment, putComment } from "lib/apis/comment"; +import { queryKeys, reactQueryKeys } from "lib/queryKeys"; export default function useCommentDeleteService( commentType: "votes" | "drinks", @@ -11,10 +11,22 @@ export default function useCommentDeleteService( const { mutate } = useMutation(() => deleteComment(commentType, typeId, commentId), { onSuccess: () => { alert("댓글이 삭제되었습니다."); - queryClient.invalidateQueries([reactQueryKeys.detailCommentList]); + queryClient.invalidateQueries([queryKeys.DETAIL_COMMENT_LIST]); }, }); + + const { mutate: onPutComment } = useMutation( + (comment: string) => putComment(commentType, typeId, commentId, comment), + { + onSuccess: () => { + alert("댓글이 수정되었습니다."); + queryClient.invalidateQueries([queryKeys.DETAIL_COMMENT_LIST]); + }, + }, + ); + return { onDelete: mutate, + onPutComment, }; } From ac11b008e2d0bff292a40570c294c22322d400f3 Mon Sep 17 00:00:00 2001 From: leejiho9898 Date: Mon, 9 Oct 2023 23:53:19 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/DrinkInfoContainer.tsx | 7 +- apps/jurumarble/src/app/page.tsx | 2 + apps/jurumarble/src/app/vote/[id]/page.tsx | 3 +- apps/jurumarble/src/app/vote/page.tsx | 3 +- apps/jurumarble/src/components/Loading.tsx | 106 ++++++++++++++++++ 5 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 apps/jurumarble/src/components/Loading.tsx diff --git a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx index df3fd1a5..273d8867 100644 --- a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx +++ b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx @@ -1,6 +1,7 @@ import { useQuery } from "@tanstack/react-query"; import { Button } from "components/button"; import Chip from "components/Chip"; +import Loading from "components/Loading"; import VoteHeader from "components/VoteHeader"; import Image from "next/image"; import { useParams, useRouter } from "next/navigation"; @@ -22,9 +23,9 @@ const DrinkInfoContainer = () => { const { colors } = useTheme(); const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05; - if (isLoading) return
loading...
; - if (isError) return
error...
; - if (!data) return
no data...
; + if (isLoading) return ; + if (isError) return <>; + if (!data) return <>; const { name, diff --git a/apps/jurumarble/src/app/page.tsx b/apps/jurumarble/src/app/page.tsx index 82f0fcf2..712c42c6 100644 --- a/apps/jurumarble/src/app/page.tsx +++ b/apps/jurumarble/src/app/page.tsx @@ -20,7 +20,9 @@ function MainPage() { type="text/javascript" src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_API_KEY}&libraries=services&autoload=false`} > +
+ 배너 diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx index 07cc3da2..8eefc86f 100644 --- a/apps/jurumarble/src/app/vote/[id]/page.tsx +++ b/apps/jurumarble/src/app/vote/[id]/page.tsx @@ -17,6 +17,7 @@ import useFilteredStatisticsService from "./services/useFilterStatisticsService" import VoteAnalyzeBar from "./components/VoteAnalyzeBar"; import { useState } from "react"; import useBookmarkService from "services/useBookmarkService"; +import Loading from "components/Loading"; function Detail() { const params = useParams(); @@ -50,7 +51,7 @@ function Detail() { isError: isStatisticsError, } = voteStatisticsQuery; - if (isLoading || isStatisticsLoading) return
로딩중
; + if (isLoading || isStatisticsLoading) return ; if (isError || isStatisticsError) return
에러
; if (!data || !statistics) return
; const { diff --git a/apps/jurumarble/src/app/vote/page.tsx b/apps/jurumarble/src/app/vote/page.tsx index e8ea5193..77fd5190 100644 --- a/apps/jurumarble/src/app/vote/page.tsx +++ b/apps/jurumarble/src/app/vote/page.tsx @@ -15,6 +15,7 @@ import useExecuteVoteService from "./[id]/services/useExecuteVoteService"; import useInfiniteMainListService from "./services/useGetVoteListService"; import { toast } from "react-toastify"; import useBookmarkService from "services/useBookmarkService"; +import Loading from "components/Loading"; export type Drag = "up" | "down" | null; @@ -58,7 +59,7 @@ function VoteHomePage() { mutate(select); }; - if (isLoading) return 로딩중; + if (isLoading) return ; if (isError) return 에러; return ( diff --git a/apps/jurumarble/src/components/Loading.tsx b/apps/jurumarble/src/components/Loading.tsx new file mode 100644 index 00000000..3ac81af8 --- /dev/null +++ b/apps/jurumarble/src/components/Loading.tsx @@ -0,0 +1,106 @@ +"use client"; + +import React from "react"; +import styled from "styled-components"; + +const Loading = () => { + return ( + +
+
+ ); +}; + +const Box = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #4a3c3c53; + z-index: 999; + transition: all 0.2s ease; + + .loader4 { + position: relative; + width: 150px; + height: 20px; + top: 45%; + top: -webkit-calc(50% - 10px); + top: calc(50% - 10px); + left: 25%; + left: -webkit-calc(50% - 75px); + left: calc(50% - 75px); + + background-color: #fff; + } + + .loader4:before { + content: ""; + position: absolute; + background-color: ${({ theme }) => theme.colors.main_01}; + top: 0px; + left: 0px; + height: 20px; + width: 0px; + z-index: 0; + opacity: 1; + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + -webkit-animation: loader4 10s ease-in-out infinite; + animation: loader4 2s ease-in-out infinite; + } + + .loader4:after { + content: "LOADING ..."; + color: ${({ theme }) => theme.colors.main_01}; + font-weight: 200; + font-size: 16px; + position: absolute; + width: 100%; + height: 20px; + line-height: 20px; + left: 0; + display: flex; + justify-content: center; + top: 0; + } + + @-webkit-keyframes loader4 { + 0% { + width: 0px; + } + 70% { + width: 100%; + opacity: 1; + } + 90% { + opacity: 0; + width: 100%; + } + 100% { + opacity: 0; + width: 0px; + } + } + + @keyframes loader4 { + 0% { + width: 0px; + } + 70% { + width: 100%; + opacity: 1; + } + 90% { + opacity: 0; + width: 100%; + } + 100% { + opacity: 0; + width: 0px; + } + } +`; + +export default Loading;