From a13617e2c157c6910afbe7485317a964c7230ee0 Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 12:28:46 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Style:=20=EB=82=B4=20=ED=95=98=EB=A3=A8?= =?UTF-8?q?=EC=9D=BC=EC=A7=80=20=ED=99=95=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/mypage/diary/MyDiary.jsx | 63 +++++----- src/pages/mypage/skeleton/DiarySkeleton.jsx | 21 ++++ .../mypage/skeleton/DiarySkeleton.style.js | 110 ++++++++++++++++++ 3 files changed, 166 insertions(+), 28 deletions(-) create mode 100644 src/pages/mypage/skeleton/DiarySkeleton.jsx create mode 100644 src/pages/mypage/skeleton/DiarySkeleton.style.js diff --git a/src/pages/mypage/diary/MyDiary.jsx b/src/pages/mypage/diary/MyDiary.jsx index a34b0391..521dc268 100644 --- a/src/pages/mypage/diary/MyDiary.jsx +++ b/src/pages/mypage/diary/MyDiary.jsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import { useNavigate } from 'react-router-dom'; +import DiarySkeleton from '../skeleton/DiarySkeleton'; import * as S from './MyDiary.style'; import BannerDiary from '@/components/banner/BannerMyDiary'; import { MOOD_ICON_LIST, WEATHER_ICON_LIST } from '@/constants/dailyRecord'; @@ -29,35 +30,41 @@ const MyDiary = () => { - {diaryList?.map((page, pageIndex) => ( - - {page?.data?.data?.diaries?.map((diary, index) => ( - - navigate(`/dailyrecord?scheduleId=${diary?.scheduleId}`) - }> - - {diary?.title} - {diary?.place} - - {WEATHER_ICON_LIST.map(item => { - if (item.iconName === diary?.weather) { - return ; - } - })} - {MOOD_ICON_LIST.map(item => { - if (item.iconName === diary?.mood) { - return ; - } - })} - - {diary.date} - {diary.content} - + {isFetching + ? new Array(10).fill(0).map(() => ) + : diaryList?.map((page, pageIndex) => ( + + {page?.data?.data?.diaries?.map((diary, index) => ( + + navigate(`/dailyrecord?scheduleId=${diary?.scheduleId}`) + }> + + {diary?.title} + {diary?.place} + + {WEATHER_ICON_LIST.map(item => { + if (item.iconName === diary?.weather) { + return ( + + ); + } + })} + {MOOD_ICON_LIST.map(item => { + if (item.iconName === diary?.mood) { + return ( + + ); + } + })} + + {diary.date} + {diary.content} + + ))} + ))} - - ))}
{ + return ( + <> + + + + + + + + + + + + + ); +}; + +export default DiarySkeleton; diff --git a/src/pages/mypage/skeleton/DiarySkeleton.style.js b/src/pages/mypage/skeleton/DiarySkeleton.style.js new file mode 100644 index 00000000..34a53c59 --- /dev/null +++ b/src/pages/mypage/skeleton/DiarySkeleton.style.js @@ -0,0 +1,110 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const Header = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; +`; + +const StyledMyDiary = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + padding: 40px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + grid-template-columns: repeat(1, 1fr); + padding: 10px; + } +`; + +const Container = styled.div` + ${theme.ALIGN.ROW_CENTER}; + padding: 20px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const DiaryCard = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + gap: 5px; + border-radius: 10px; + padding: 20px; + + animation: ${skeletonGradient} 1.5s infinite; +`; + +const DiaryImage = styled.div` + height: 200px; + width: 200px; + border-radius: 8px; + margin-bottom: 10px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + height: 150px; + width: 150px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const EmojiContainer = styled.div` + ${theme.ALIGN.ROW_CENTER}; + gap: 20px; +`; + +const EmojiImage = styled.div` + height: 40px; + width: 40px; + border-radius: 8px; + margin-bottom: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Title = styled.div` + width: 300px; + padding: 15px; + border-radius: 20px; + margin-bottom: 5px; + + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Date = styled.div` + width: 100px; + padding: 10px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Content = styled.div` + font-size: 1rem; + width: 250px; + padding: 15px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { + Header, + Container, + StyledMyDiary, + DiaryCard, + DiaryImage, + EmojiContainer, + EmojiImage, + Title, + Date, + Content, +}; From 915ec7d8525a945b04f505a2c52df75a57ba2f8a Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 13:03:21 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Style:=20=EC=9C=A0=EC=A0=80=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/profile/ProfilePage.jsx | 63 +++--- .../profile/skeleton/ProfileSkeleton.jsx | 39 ++++ .../profile/skeleton/ProfileSkeleton.style.js | 184 ++++++++++++++++++ 3 files changed, 258 insertions(+), 28 deletions(-) create mode 100644 src/pages/profile/skeleton/ProfileSkeleton.jsx create mode 100644 src/pages/profile/skeleton/ProfileSkeleton.style.js diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx index 5edfc721..7d653358 100644 --- a/src/pages/profile/ProfilePage.jsx +++ b/src/pages/profile/ProfilePage.jsx @@ -4,6 +4,7 @@ import { useInView } from 'react-intersection-observer'; import { useNavigate, useParams } from 'react-router-dom'; import * as S from './ProfilePage.style'; +import ProfileSkeleton from './skeleton/ProfileSkeleton'; import Heart from '/images/signature/ClickedHeart.svg'; import { ProfileBox } from '@/components'; import { useMateProfileSearch } from '@/hooks/mate/useMateProfileSearch'; @@ -53,34 +54,40 @@ const ProfilePage = () => { return ( - - - {signaturesList?.map(signature => { - return signature?.data?.data?.data?.map(s => ( - handleMouseOver(s?._id)} - onMouseOut={handleMouseOut}> - - {hoveredSignature === s._id && ( - navigate(`/signature/post/${s?._id}`)}> -

{s?.title}

-
- - {s?.liked} -
- - )} - - )); - })} - -
+ {isPending || isLoading ? ( + + ) : ( + <> + + + {signaturesList?.map(signature => { + return signature?.data?.data?.data?.map(s => ( + handleMouseOver(s?._id)} + onMouseOut={handleMouseOut}> + + {hoveredSignature === s._id && ( + navigate(`/signature/post/${s?._id}`)}> +

{s?.title}

+
+ + {s?.liked} +
+ + )} + + )); + })} + +
+ + )} ); }; diff --git a/src/pages/profile/skeleton/ProfileSkeleton.jsx b/src/pages/profile/skeleton/ProfileSkeleton.jsx new file mode 100644 index 00000000..321b8d08 --- /dev/null +++ b/src/pages/profile/skeleton/ProfileSkeleton.jsx @@ -0,0 +1,39 @@ +import * as S from './ProfileSkeleton.style'; + +const ProfileSkeleton = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + {new Array(20).fill(0).map(() => ( + + + + + ))} + + + ); +}; + +export default ProfileSkeleton; diff --git a/src/pages/profile/skeleton/ProfileSkeleton.style.js b/src/pages/profile/skeleton/ProfileSkeleton.style.js new file mode 100644 index 00000000..d1a0078d --- /dev/null +++ b/src/pages/profile/skeleton/ProfileSkeleton.style.js @@ -0,0 +1,184 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const Container = styled.div` + padding: 10px; + ${theme.ALIGN.COLUMN_CENTER}; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Title = styled.div` + margin: 20px 0; + font-size: 20px; + align-items: flex-start; + background-color: ${theme.COLOR.MAIN.LIGHT_GRAY}; +`; + +const GridContainer = styled.div` + display: grid; + gap: 10px; + grid-template-columns: repeat(5, 1fr); + margin-top: 10px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } +`; + +const ImageContainer = styled.div` + position: relative; + margin-top: 10px; + width: 140px; + height: 140px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Image = styled.div` + width: 140px; + height: 140px; + border-radius: 20px; +`; + +const DescriptionContainer = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + width: 140px; + height: 140px; + border-radius: 20px; + backdrop-filter: blur(1px); + position: absolute; + top: 0; + left: 0; + animation: ${skeletonGradient} 1.5s infinite; +`; + +// ----------------------------------- + +const ProfileContainer = styled.div` + width: 100%; + margin-top: 20px; + padding: 20px; + ${theme.ALIGN.COLUMN_CENTER}; + border-radius: 20px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 90%; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const ProfileImageContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 90%; + gap: 30px; + margin-top: 10px; + /* + @media ${theme.WINDOW_SIZE.MOBILE} { + display: flex; + flex-direction: column; + gap: 5px; + } */ +`; + +const ProfileImage = styled.div` + width: 100px; + height: 100px; + border-radius: 50%; + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 75px; + height: 75px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const IntroContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +const TextContainer = styled.div` + ${theme.ALIGN.ROW_CENTER}; + + @media ${theme.WINDOW_SIZE.MOBILE} { + margin-top: 0px; + } +`; + +const Button = styled.div` + width: 50px; + padding: 10px; + border-radius: 20px; + margin-left: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const InfoContainer = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + white-space: nowrap; + width: 90%; + margin: auto; + @media ${theme.WINDOW_SIZE.MOBILE} { + display: flex; + flex-direction: column; + gap: 5px; + } +`; + +const CountContainer = styled.div` + display: flex; + justify-content: space-between; + width: 70%; + margin-top: 5px; +`; + +const Intro = styled.div` + width: 100%; + padding: 15px; + border-radius: 20px; + text-align: left; +`; + +const Text = styled.div` + width: 100px; + padding: 15px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { + Container, + Title, + GridContainer, + ImageContainer, + Image, + DescriptionContainer, + ProfileContainer, + ProfileImageContainer, + ProfileImage, + IntroContainer, + TextContainer, + Button, + InfoContainer, + CountContainer, + Intro, + Text, +}; From d75289e921b3ad77ab028c8a52bfedc6140d669f Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 13:15:07 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Style:=20=EC=95=8C=EB=A6=BC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../skeleton/Notification.style.jsx | 70 +++++++++++++++++++ .../skeleton/NotificationSkeleton.jsx | 20 ++++++ src/pages/notification/Notification.jsx | 7 +- 3 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 src/components/notification/skeleton/Notification.style.jsx create mode 100644 src/components/notification/skeleton/NotificationSkeleton.jsx diff --git a/src/components/notification/skeleton/Notification.style.jsx b/src/components/notification/skeleton/Notification.style.jsx new file mode 100644 index 00000000..6cb7b632 --- /dev/null +++ b/src/components/notification/skeleton/Notification.style.jsx @@ -0,0 +1,70 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const Container = styled.div` + ${theme.ALIGN.COLUMN_CENTER} + width: 80%; + align-items: start; + margin-top: 50px; +`; + +const NotificationContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + width: 95%; + margin-bottom: 30px; + padding: 20px; + border-radius: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Img = styled.div` + width: 50px; + height: 50px; + margin-right: 20px; + border-radius: 100px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 40px; + height: 40px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const BellContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + width: 100%; + height: 30vh; +`; + +const Bell = styled.img` + display: flex; + width: 30%; +`; + +const Text = styled.div` + display: flex; + width: 65%; + padding: 15px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { Container, NotificationContainer, Img, BellContainer, Bell, Text }; diff --git a/src/components/notification/skeleton/NotificationSkeleton.jsx b/src/components/notification/skeleton/NotificationSkeleton.jsx new file mode 100644 index 00000000..1f5a582c --- /dev/null +++ b/src/components/notification/skeleton/NotificationSkeleton.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import * as S from './Notification.style'; + +const NotificationSkeleton = () => { + return ( + + {new Array(15).fill(0).map(() => ( + + + + + + + ))} + + ); +}; + +export default NotificationSkeleton; diff --git a/src/pages/notification/Notification.jsx b/src/pages/notification/Notification.jsx index 4d5b8ae6..10fe9f7a 100644 --- a/src/pages/notification/Notification.jsx +++ b/src/pages/notification/Notification.jsx @@ -1,5 +1,6 @@ import * as S from './Notification.style'; import NotificationPage from '@/components/notification/NotificationPage'; +import NotificationSkeleton from '@/components/notification/skeleton/NotificationSkeleton'; import { useGetNotification } from '@/hooks/notification/useGetNotification'; const Notification = () => { @@ -7,7 +8,11 @@ const Notification = () => { const notification = data?.data?.data; return ( - + {isPending ? ( + + ) : ( + + )} ); }; From 6aa8ef96e3f5876865280e76459bad257df9b98c Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 13:39:46 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Feat:=20=ED=95=98=EB=A3=A8=EC=9D=BC?= =?UTF-8?q?=EC=A7=80=20=EC=9E=91=EC=84=B1=20=EB=B0=8F=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dailyRecord/edit/DailyRecordEditPage.jsx | 7 +++++-- src/pages/dailyRecord/write/DailyRecordWrite.jsx | 6 +++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx index 3375f338..b07a415c 100644 --- a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx +++ b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx @@ -20,7 +20,7 @@ const DailyRecordEditPage = () => { const scheduleId = params.get('scheduleId'); const [selectedImg, setSelectedImg] = useState(); const { data } = useGetDiary(scheduleId); - const [lodaing, setLoading] = useState(false); + const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const Date = useMemo(() => { @@ -125,7 +125,10 @@ const DailyRecordEditPage = () => { {Date.date && Date.date[0]} {Date.date && Date.date[1]}, {Date.date && Date.date[2]} - + 수정 diff --git a/src/pages/dailyRecord/write/DailyRecordWrite.jsx b/src/pages/dailyRecord/write/DailyRecordWrite.jsx index 60587ea3..15b2c589 100644 --- a/src/pages/dailyRecord/write/DailyRecordWrite.jsx +++ b/src/pages/dailyRecord/write/DailyRecordWrite.jsx @@ -120,7 +120,11 @@ const DailyRecordWritePage = () => { $errors={ !content || !fileName || !mood || !place || !title || !weather } - onClick={handleSubmit(onSubmit)}> + onClick={() => { + if (!isLoading) { + handleSubmit(onSubmit)(); + } + }}> 저장 From dfe08286a395d6c071ba3bc5362cd08963a83151 Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 14:02:31 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Style:=20=ED=95=98=EB=A3=A8=EC=9D=BC?= =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dailyRecord/edit/DailyRecordEditPage.jsx | 131 +++++++------- .../edit/skeleton/DailyRecordEditSkeleton.jsx | 26 +++ .../skeleton/DailyRecordEditSkeleton.style.js | 170 ++++++++++++++++++ 3 files changed, 265 insertions(+), 62 deletions(-) create mode 100644 src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.jsx create mode 100644 src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.style.js diff --git a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx index b07a415c..9a6a62d1 100644 --- a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx +++ b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx @@ -7,6 +7,7 @@ import { useLocation, useParams } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; import * as S from './DailyRecordEdit.style'; +import DailyRecordEditSkeleton from './skeleton/DailyRecordEditSkeleton'; import { updateDiary } from '@/apis/request/home'; import IconSelectBox from '@/components/SelectBox/IconSelectBox/IconSelectBox'; import { MOOD_ICON_LIST, WEATHER_ICON_LIST } from '@/constants/dailyRecord'; @@ -19,7 +20,7 @@ const DailyRecordEditPage = () => { const params = new URLSearchParams(search); const scheduleId = params.get('scheduleId'); const [selectedImg, setSelectedImg] = useState(); - const { data } = useGetDiary(scheduleId); + const { data, loading: getLoading } = useGetDiary(scheduleId); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); @@ -120,68 +121,74 @@ const DailyRecordEditPage = () => { }; return ( - - - {Date.date && Date.date[0]} - - {Date.date && Date.date[1]}, {Date.date && Date.date[2]} - - 수정 - - - - - - - - - - + <> + {getLoading ? ( + + ) : ( + + + {Date.date && Date.date[0]} + + {Date.date && Date.date[1]}, {Date.date && Date.date[2]} + + 수정 + + + + + + + + + + - - - - - - - + + + + + + + + )} + ); }; diff --git a/src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.jsx b/src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.jsx new file mode 100644 index 00000000..64ae1ea2 --- /dev/null +++ b/src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.jsx @@ -0,0 +1,26 @@ +import * as S from './DailyRecordEditSkeleton.style'; + +const DailyRecordEditSkeleton = () => { + return ( + + + + + + + + + + + + + + + + + + + ); +}; + +export default DailyRecordEditSkeleton; diff --git a/src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.style.js b/src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.style.js new file mode 100644 index 00000000..d48a89bc --- /dev/null +++ b/src/pages/dailyRecord/edit/skeleton/DailyRecordEditSkeleton.style.js @@ -0,0 +1,170 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const Container = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + gap: 10px; +`; + +const PreviewImage = styled.div` + display: flex; + position: absolute; + top: 0px; + left: 0px; + width: 300px; + height: 300px; + border-radius: 20px; + object-fit: cover; + + @media ${theme.WINDOW_SIZE.TABLET} { + width: 200px; + height: 200px; + } + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 100px; + height: 100px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const ImageInput = styled.input` + display: none; + color: transparent; +`; + +const DateContainer = styled.div` + position: relative; + ${theme.ALIGN.COLUMN_CENTER}; + gap: 10px; +`; + +const Text = styled.div` + width: 70px; + padding: 10px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const RecordContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + padding: 43px 40px; + width: 550px; + height: 700px; + border-radius: 20px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + padding: 23px 20px; + width: 150px; + min-width: 320px; + border-radius: 20px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const RecordImageContainer = styled.div` + position: relative; + ${theme.ALIGN.COLUMN_CENTER}; + width: 300px; + height: 300px; + border-radius: 20px; + + @media ${theme.WINDOW_SIZE.TABLET} { + width: 200px; + height: 200px; + border-radius: 10px; + } + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 100px; + height: 100px; + border-radius: 10px; + } +`; + +const WeatherContainer = styled.div` + ${theme.ALIGN.ROW_CENTER}; + gap: 10px; + width: 100%; +`; + +const LocationText = styled.div` + width: 100px; + padding: 15px; + border-radius: 20px; + + @media ${theme.WINDOW_SIZE.TABLET} { + width: 100%; + height: 40px; + } + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 100%; + height: 40px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const TitleText = styled.div` + width: 100px; + padding: 15px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const ContentText = styled.div` + width: 100px; + padding: 15px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const UploadButton = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + position: absolute; + height: 30px; + width: 50px; + padding: 10px; + + bottom: 0px; + left: 250px; + + border-radius: 10px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + padding: 5px; + left: 130px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { + Container, + DateContainer, + RecordContainer, + RecordImageContainer, + TitleText, + LocationText, + WeatherContainer, + ContentText, + ImageInput, + PreviewImage, + UploadButton, + Text, +}; From 6b7c2cd61259d7dd62e5a2bddb7710370d9c1375 Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 14:44:37 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Style:=20=ED=95=98=EB=A3=A8=EC=9D=BC?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dailyRecord/List/DailyRecordListPage.jsx | 81 ++++++----- .../List/skeleton/DailyRecordListSkeleton.jsx | 20 +++ .../skeleton/DailyRecordListSkeleton.style.js | 133 ++++++++++++++++++ 3 files changed, 199 insertions(+), 35 deletions(-) create mode 100644 src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.jsx create mode 100644 src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.style.js diff --git a/src/pages/dailyRecord/List/DailyRecordListPage.jsx b/src/pages/dailyRecord/List/DailyRecordListPage.jsx index 916afeb8..3c3da30c 100644 --- a/src/pages/dailyRecord/List/DailyRecordListPage.jsx +++ b/src/pages/dailyRecord/List/DailyRecordListPage.jsx @@ -3,6 +3,7 @@ import toast from 'react-hot-toast'; import { useLocation, useParams } from 'react-router-dom'; import * as S from './DailyRecordListPage.style'; +import DailyRecordListSkeleton from './skeleton/DailyRecordListSkeleton'; import ExpandLeft from '/icons/ExpandLeft.svg'; import ExpandRight from '/icons/ExpandRight.svg'; import PenGreen from '/icons/PenGreen.svg'; @@ -64,41 +65,51 @@ const DailyRecordListPage = () => { } return ( - - {date}의 일지 - - - - - - - {currentVisibleData?.diary?.place} - {currentVisibleData?.diary?.title} - - {WEATHER_ICON_LIST.map(item => { - if (item.iconName === currentVisibleData?.diary?.weather) { - return ; - } - })} - {MOOD_ICON_LIST.map(item => { - if (item.iconName === currentVisibleData?.diary?.mood) { - return ; - } - })} - - {currentVisibleData?.diary?.content} - - - - - - - - - + <> + {!loading ? ( + + ) : ( + + {date}의 일지 + + + + + + + + {currentVisibleData?.diary?.place} + + {currentVisibleData?.diary?.title} + + {WEATHER_ICON_LIST.map(item => { + if (item.iconName === currentVisibleData?.diary?.weather) { + return ; + } + })} + {MOOD_ICON_LIST.map(item => { + if (item.iconName === currentVisibleData?.diary?.mood) { + return ; + } + })} + + + {currentVisibleData?.diary?.content} + + + + + + + + + + + )} + ); }; diff --git a/src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.jsx b/src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.jsx new file mode 100644 index 00000000..22a5a63d --- /dev/null +++ b/src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.jsx @@ -0,0 +1,20 @@ +import * as S from './DailyRecordListSkeleton.style'; + +const DailyRecordListSkeleton = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default DailyRecordListSkeleton; diff --git a/src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.style.js b/src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.style.js new file mode 100644 index 00000000..bc00c9c5 --- /dev/null +++ b/src/pages/dailyRecord/List/skeleton/DailyRecordListSkeleton.style.js @@ -0,0 +1,133 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const Container = styled.div` + position: relative; + ${theme.ALIGN.COLUMN_CENTER}; + padding: 60px 50px 0 50px; + gap: 10px; + height: 100%; + width: 100%; + + overflow: hidden; +`; + +const DateText = styled.div` + width: 100px; + padding: 15px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const MainRecordContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + width: 100%; + height: 100%; + gap: 20px; + padding: 23px 20px; + border-radius: 30px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const RecordContentsContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + flex: 1; + height: 100%; +`; + +const PreviewImage = styled.div` + display: flex; + width: 200px; + height: 200px; + border-radius: 20px; + + @media ${theme.WINDOW_SIZE.TABLET} { + width: 180px; + height: 180px; + } + + @media ${theme.WINDOW_SIZE.MOBILE} { + width: 100px; + height: 100px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const LocationText = styled.div` + display: flex; + width: 100px; + padding: 10px; + border-radius: 20px; + height: 30px; + + @media ${theme.WINDOW_SIZE.TABLET} { + height: 35px; + } + + @media ${theme.WINDOW_SIZE.MOBILE} { + height: 20px; + } + animation: ${skeletonGradient} 1.5s infinite; +`; + +const TitleText = styled.div` + width: 100px; + padding: 10px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const WeatherContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + gap: 10px; + width: 350px; + + @media ${theme.WINDOW_SIZE.MOBILE} { + gap: 5px; + width: 150px; + } +`; + +const ContentText = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height: 50px; + border-radius: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { + Container, + DateText, + MainRecordContainer, + RecordContentsContainer, + PreviewImage, + LocationText, + TitleText, + ContentText, + WeatherContainer, +};