From 6748417f230bb6d07e92f27c32a45a20ed6fb33a Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 02:09:54 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EC=82=B0=EC=B6=9C=EB=90=9C=20?= =?UTF-8?q?=ED=9A=8C=EC=9D=98=20=EC=8B=9C=EA=B0=84=EC=9D=B4=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EC=98=88=EC=99=B8=20=EB=B7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/dropdown.svg | 3 + src/assets/svgs/dropup.svg | 3 + src/components/Icon/icon.ts | 4 + src/pages/bestMeetTime/ChooseBestTime.tsx | 2 + .../bestMeetTime/components/BestMeetTime.tsx | 167 +++++++++--------- .../bestMeetTime/components/BlankMeetCard.tsx | 11 +- .../components/BlankOtherMeetCard.tsx | 24 +++ 7 files changed, 125 insertions(+), 89 deletions(-) create mode 100644 src/assets/svgs/dropdown.svg create mode 100644 src/assets/svgs/dropup.svg create mode 100644 src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx diff --git a/src/assets/svgs/dropdown.svg b/src/assets/svgs/dropdown.svg new file mode 100644 index 00000000..9db502db --- /dev/null +++ b/src/assets/svgs/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/dropup.svg b/src/assets/svgs/dropup.svg new file mode 100644 index 00000000..cc22f537 --- /dev/null +++ b/src/assets/svgs/dropup.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts index 70a395e5..d2fa483f 100644 --- a/src/components/Icon/icon.ts +++ b/src/components/Icon/icon.ts @@ -4,8 +4,10 @@ import { ReactComponent as Circle2Ic } from 'assets/svgs/circle2.svg'; import { ReactComponent as Circle3Ic } from 'assets/svgs/circle3.svg'; import { ReactComponent as ClockIc } from 'assets/svgs/clock.svg'; import { ReactComponent as CloseIc } from 'assets/svgs/close.svg'; +import { ReactComponent as DropDown } from 'assets/svgs/dropdown.svg'; import { ReactComponent as DropDownIc } from 'assets/svgs/dropDownBtn.svg'; import { ReactComponent as DropdownWhite } from 'assets/svgs/dropdownWhite.svg'; +import { ReactComponent as DropUp } from 'assets/svgs/dropup.svg'; import { ReactComponent as DropUpIc } from 'assets/svgs/dropUpBtn.svg'; import { ReactComponent as DropupWhite } from 'assets/svgs/dropupWhite.svg'; import { ReactComponent as ExitIc } from 'assets/svgs/exitIcon.svg'; @@ -54,4 +56,6 @@ export { Circle2Ic, Circle3Ic, CloseIc, + DropUp, + DropDown, }; diff --git a/src/pages/bestMeetTime/ChooseBestTime.tsx b/src/pages/bestMeetTime/ChooseBestTime.tsx index 34655f16..cc801029 100644 --- a/src/pages/bestMeetTime/ChooseBestTime.tsx +++ b/src/pages/bestMeetTime/ChooseBestTime.tsx @@ -65,4 +65,6 @@ const ChangeViewPicker = styled.div<{ $isClicked: boolean }>` const ViewContainer = styled.div` display: flex; align-items: center; + width: 100%; + margin-top: 3.6rem; `; diff --git a/src/pages/bestMeetTime/components/BestMeetTime.tsx b/src/pages/bestMeetTime/components/BestMeetTime.tsx index 311a8809..32a029bd 100644 --- a/src/pages/bestMeetTime/components/BestMeetTime.tsx +++ b/src/pages/bestMeetTime/components/BestMeetTime.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; -import { DropdownWhite, DropupWhite } from 'components/Icon/icon'; +import { DropDown, DropUp } from 'components/Icon/icon'; import AlternativeCard from 'pages/bestMeetTime/components/AlternativeCard'; import BestTimeCard from 'pages/bestMeetTime/components/BestTimeCard'; import ConfirmModal from 'pages/bestMeetTime/components/ConfirmModal'; @@ -15,6 +15,7 @@ import styled from 'styled-components'; import { theme } from 'styles/theme'; import BlankMeetCard from './BlankMeetCard'; +import BlankOtherMeetCard from './BlankOtherMeetCard'; function BestMeetTime() { const [isalternativeCardOpen, setIsalternativeCardOpen] = useState(false); @@ -27,35 +28,43 @@ function BestMeetTime() { const navigate = useNavigate(); if (isError) { navigate(`/*`); - } else if (!isloading && bestTimeData) { - const bestMeetimeObj = whatisBestMeetime(bestTimeData, selected); - if (bestMeetimeObj) { - return ( - - - - - - 현재까지 모인  - - - {bestTimeData.data.memberCount} - - - 명 - - - 을 위한 - - - - 최적의 회의시간이에요 - - - - 박스를 클릭하여 회의시간을 확정해주세요 + } + if (isloading) { + return ( + + + + ); + } + const bestMeetimeObj = bestTimeData && whatisBestMeetime(bestTimeData, selected); + return ( + + + + + + 현재까지 모인  - + + {bestTimeData && bestTimeData.data.memberCount} + + + 명 + + + 을 위한 + + + + 최적의 회의시간이에요 + + + + 박스를 클릭하여 회의시간을 확정해주세요 + + + {bestMeetimeObj ? ( + <> {bestTimeData.data.bestDateTime ? ( ) : null} - - setIsalternativeCardOpen((prev) => !prev)}> - - 다른 시간대 확인하기 - - - {isalternativeCardOpen ? : } - - - {isalternativeCardOpen ? ( - - {bestTimeData.data.otherDateTimes[0] ? ( - - ) : ( - - )} - {bestTimeData.data.otherDateTimes[1] ? ( - - ) : null} - + + ) : ( + + )} + setIsalternativeCardOpen((prev) => !prev)}> + + 다른 시간대 확인하기 + + {isalternativeCardOpen ? : } + + {isalternativeCardOpen && bestTimeData ? ( + + {bestTimeData.data.otherDateTimes[0] ? ( + ) : ( - undefined + )} - - - - {showModal && ( - - )} - - ); - } - } else { - return ( - - - - ); - } + ) : null} + + ) : null} + + + + {showModal && + bestTimeData && ( + + )} + + ); } export default BestMeetTime; @@ -134,8 +135,9 @@ const BestMeetTimeWrapper = styled.div<{ $state: boolean }>` const TitleSection = styled.article` display: flex; flex-direction: column; - margin: 4rem 10.8rem 3rem 0rem; + width: 100%; + margin-bottom: 3.6rem; `; const HeaderContainer = styled.div` margin-bottom: 1.2rem; @@ -151,6 +153,7 @@ const AnotherTimeBtnSection = styled.div` justify-content: flex-end; margin: 2rem 0 1.6rem 0; padding-right: 1rem; + cursor: pointer; `; const AlternativeSection = styled.section` display: flex; diff --git a/src/pages/bestMeetTime/components/BlankMeetCard.tsx b/src/pages/bestMeetTime/components/BlankMeetCard.tsx index 158a6423..7ae5bf1a 100644 --- a/src/pages/bestMeetTime/components/BlankMeetCard.tsx +++ b/src/pages/bestMeetTime/components/BlankMeetCard.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import Text from 'components/common/atomComponents/Text'; import styled from 'styled-components'; import { theme } from 'styles/theme'; @@ -7,8 +5,8 @@ import { theme } from 'styles/theme'; function BlankMeetCard() { return ( - - 입력된 다른 시간대가 없어요! + + 산출된 회의 시간이 없어요! ); @@ -20,8 +18,7 @@ const BlankMeetCardWrapper = styled.div` display: flex; align-items: center; justify-content: center; - border: 1px solid ${({ theme }) => theme.colors.grey5}; + border: 1px solid ${({ theme }) => theme.colors.grey7}; border-radius: 1rem; - width: 33.5rem; - height: 5.2rem; + padding: 3.4rem 0; `; diff --git a/src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx b/src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx new file mode 100644 index 00000000..efe46c45 --- /dev/null +++ b/src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx @@ -0,0 +1,24 @@ +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +function BlankOtherMeetCard() { + return ( + + + 산출된 회의 시간이 없어요! + + + ); +} + +export default BlankOtherMeetCard; + +const BlankOtherMeetCardWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + border: 1px solid ${({ theme }) => theme.colors.grey7}; + border-radius: 1rem; + padding: 1.8rem 0; +`; From af807168bfe90dda9f90687cf7f2f42c668fea35 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 02:22:40 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=9D=B8=EC=9B=90=EC=88=98=20?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/member.svg | 11 ++++ src/components/Icon/icon.ts | 2 + .../bestMeetTime/components/BestTimeCard.tsx | 62 +++++++------------ 3 files changed, 36 insertions(+), 39 deletions(-) create mode 100644 src/assets/svgs/member.svg diff --git a/src/assets/svgs/member.svg b/src/assets/svgs/member.svg new file mode 100644 index 00000000..93c67214 --- /dev/null +++ b/src/assets/svgs/member.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts index d2fa483f..e5bda36d 100644 --- a/src/components/Icon/icon.ts +++ b/src/components/Icon/icon.ts @@ -16,6 +16,7 @@ import { ReactComponent as InputCancelIc } from 'assets/svgs/inputCancelBtn.svg' import { ReactComponent as InputErrorIc } from 'assets/svgs/inputErrorBtn.svg'; import { ReactComponent as LinkIc } from 'assets/svgs/linkIcon.svg'; import { ReactComponent as MainLogoIc } from 'assets/svgs/mainLogo.svg'; +import { ReactComponent as Member } from 'assets/svgs/member.svg'; import { ReactComponent as OfflinePlaceIc } from 'assets/svgs/offlinePlace.svg'; import { ReactComponent as OnlinePlaceIc } from 'assets/svgs/onlinePlace.svg'; import { ReactComponent as PasswordEyeIc } from 'assets/svgs/passwordEye.svg'; @@ -58,4 +59,5 @@ export { CloseIc, DropUp, DropDown, + Member, }; diff --git a/src/pages/bestMeetTime/components/BestTimeCard.tsx b/src/pages/bestMeetTime/components/BestTimeCard.tsx index e20f3b88..30e3f131 100644 --- a/src/pages/bestMeetTime/components/BestTimeCard.tsx +++ b/src/pages/bestMeetTime/components/BestTimeCard.tsx @@ -1,22 +1,16 @@ -import React, { useState } from 'react'; - import Text from 'components/common/atomComponents/Text'; -import { DropdownWhite, DropupWhite } from 'components/Icon/icon'; +import { Member } from 'components/Icon/icon'; import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData'; import styled from 'styled-components'; import { theme } from 'styles/theme'; function BestTimeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps) { - const [isMember, setIsMember] = useState(false); const checkingCheck = () => { chooseMeetime(rank); }; if (carddata) { return ( - setIsMember((prev) => !prev)}> - {isMember ? : } - - {isMember ? ( - - {carddata.users.map((member, i) => ( - - {member.name} - {i !== carddata.users.length - 1 ? ',' : ''}  - - ))} - - ) : ( - undefined - )} + + + + {carddata.users.length} + + ); - } else { - return undefined; } } @@ -94,25 +80,23 @@ const Label = styled.label` cursor: pointer; `; -const MemeberContainer = styled.div` +const MemberCountChip = styled.div` display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 1.2rem; - width: 23rem; - height: fit-content; -`; - -const BasicIconContainer = styled.div` - display: flex; - align-items: center; justify-content: center; - width: 3rem; + align-items: center; + min-width: 5.6rem; height: 3rem; -`; - -const IconContainer = styled(BasicIconContainer)` - position: absolute; - top: 1.2rem; - right: 1.2rem; + padding: 0.6rem 1rem; + gap: 0.6rem; + border-radius: 10rem; + background-color: ${theme.colors.grey8}; + align-self: flex-end; + margin-left: auto; + cursor: pointer; + &:hover { + background-color: ${theme.colors.grey5}; + } + &:focus { + background-color: ${theme.colors.grey6}; + } `; From 87a09a4a7d05f98cfe57541fbde308a7cb303475 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 03:22:28 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20hover=EC=8B=9C=20tooltip=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/tooltipArrow.svg | 3 ++ src/components/Icon/icon.ts | 2 + .../bestMeetTime/components/BestTimeCard.tsx | 9 +++- .../bestMeetTime/components/MemberTooltip.tsx | 54 +++++++++++++++++++ 4 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 src/assets/svgs/tooltipArrow.svg create mode 100644 src/pages/bestMeetTime/components/MemberTooltip.tsx diff --git a/src/assets/svgs/tooltipArrow.svg b/src/assets/svgs/tooltipArrow.svg new file mode 100644 index 00000000..2a0ea213 --- /dev/null +++ b/src/assets/svgs/tooltipArrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts index e5bda36d..457fa119 100644 --- a/src/components/Icon/icon.ts +++ b/src/components/Icon/icon.ts @@ -27,6 +27,7 @@ import { ReactComponent as RadioCheckIc } from 'assets/svgs/radioCheck.svg'; import { ReactComponent as RadioCheckedIc } from 'assets/svgs/radioChecked.svg'; import { ReactComponent as SpeechBubbleIc } from 'assets/svgs/speechBubble.svg'; import { ReactComponent as TimeIc } from 'assets/svgs/time.svg'; +import { ReactComponent as TooltipArrowIc } from 'assets/svgs/tooltipArrow.svg'; import { ReactComponent as Wave } from 'assets/svgs/wave.svg'; export { @@ -60,4 +61,5 @@ export { DropUp, DropDown, Member, + TooltipArrowIc, }; diff --git a/src/pages/bestMeetTime/components/BestTimeCard.tsx b/src/pages/bestMeetTime/components/BestTimeCard.tsx index 30e3f131..b4079dac 100644 --- a/src/pages/bestMeetTime/components/BestTimeCard.tsx +++ b/src/pages/bestMeetTime/components/BestTimeCard.tsx @@ -4,6 +4,8 @@ import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData'; import styled from 'styled-components'; import { theme } from 'styles/theme'; +import MemberTooltip from './MemberTooltip'; + function BestTimeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps) { const checkingCheck = () => { chooseMeetime(rank); @@ -33,6 +35,7 @@ function BestTimeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps {carddata.users.length} + user.name)} /> ); } @@ -48,7 +51,7 @@ const BestTimeCardWrapper = styled.article<{ $rank: number; $selected: number }> ${({ $rank, $selected, theme }) => $rank === $selected ? theme.colors.main1 : theme.colors.grey5}; border-radius: 10px; - padding: 2rem; + padding: 1.8rem 1.5rem; width: 100%; height: fit-content; `; @@ -99,4 +102,8 @@ const MemberCountChip = styled.div` &:focus { background-color: ${theme.colors.grey6}; } + + &:hover + .tooltip { + visibility: visible; + } `; diff --git a/src/pages/bestMeetTime/components/MemberTooltip.tsx b/src/pages/bestMeetTime/components/MemberTooltip.tsx new file mode 100644 index 00000000..0c34ab0d --- /dev/null +++ b/src/pages/bestMeetTime/components/MemberTooltip.tsx @@ -0,0 +1,54 @@ +import Text from 'components/common/atomComponents/Text'; +import { TooltipArrowIc } from 'components/Icon/icon'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +interface MemberTooltipProps { + members: string[]; +} + +function MemberTooltip({ members }: MemberTooltipProps) { + return ( + + + + + {members.join(',')} + + + + ); +} + +export default MemberTooltip; +const MemberTooltipWrapper = styled.div` + /* visibility: hidden; */ + position: absolute; + width: fit-content; + right: 4%; + top: 90%; +`; + +const TooltipArrowIcon = styled(TooltipArrowIc)` + position: absolute; + top: -0.6rem; + right: 1.3rem; + + path { + fill: ${({ theme }) => theme.colors.grey3}; + } +`; +const TooltipContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 0.4rem 0.8rem; + border-radius: 0.6rem; + background-color: ${theme.colors.grey3}; + width: fit-content; + text-align: center; + span { + white-space: pre; + word-break: unset; + } +`; From 574f678be78b9f2b079b8c5577fad9d9fed95d25 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 03:25:51 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EB=8B=A4=EB=A5=B8=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=EB=8C=80=20=EC=B9=B4=EB=93=9C=EC=97=90=EB=8F=84=20too?= =?UTF-8?q?ltip=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/AlternativeCard.tsx | 95 ------------------- .../bestMeetTime/components/BestMeetTime.tsx | 5 +- .../bestMeetTime/components/MemberTooltip.tsx | 5 +- 3 files changed, 5 insertions(+), 100 deletions(-) delete mode 100644 src/pages/bestMeetTime/components/AlternativeCard.tsx diff --git a/src/pages/bestMeetTime/components/AlternativeCard.tsx b/src/pages/bestMeetTime/components/AlternativeCard.tsx deleted file mode 100644 index b45ec624..00000000 --- a/src/pages/bestMeetTime/components/AlternativeCard.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import Text from 'components/common/atomComponents/Text'; -import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData'; -import styled from 'styled-components'; -import { theme } from 'styles/theme'; - -function AlternativeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps) { - const checkingCheck = () => { - chooseMeetime(rank); - }; - - if (carddata) { - return ( - - - - - - - {carddata.users.map((member, i) => ( - - {member.name} - {i !== carddata.users.length - 1 ? ',' : ''}  - - ))} - - - - ); - } else { - return null; - } -} - -export default AlternativeCard; - -const AlternativeCardWrapper = styled.article<{ $rank: number; $selected: number }>` - display: flex; - position: relative; - flex-direction: row; - border: 1px solid - ${({ $rank, $selected, theme }) => - $rank === $selected ? theme.colors.main1 : theme.colors.grey5}; - border-radius: 10px; - padding: 2rem; - height: fit-content; -`; - -const InfoContainer = styled.div` - display: flex; - flex-direction: column; - color: ${({ theme }) => theme.colors.white}; -`; -const Input = styled.input` - appearance: none; - margin: 0 2.274rem 0 0; - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); - background-repeat: no-repeat; - cursor: pointer; - width: 2rem; - height: 2rem; - - &:checked { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233C49FF'/%3E%3Ccircle cx='9.99965' cy='10.0001' r='3.63636' fill='white'/%3E%3C/svg%3E "); - } - &:checked + label { - color: ${({ theme }) => theme.colors.white}; - } -`; -const Label = styled.label` - display: flex; - flex-direction: column; - align-items: flex-start; - cursor: pointer; -`; - -const MemeberContainer = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 1.2rem; - width: 23rem; - height: fit-content; -`; diff --git a/src/pages/bestMeetTime/components/BestMeetTime.tsx b/src/pages/bestMeetTime/components/BestMeetTime.tsx index 32a029bd..f20dabc2 100644 --- a/src/pages/bestMeetTime/components/BestMeetTime.tsx +++ b/src/pages/bestMeetTime/components/BestMeetTime.tsx @@ -3,7 +3,6 @@ import React, { useState } from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; import { DropDown, DropUp } from 'components/Icon/icon'; -import AlternativeCard from 'pages/bestMeetTime/components/AlternativeCard'; import BestTimeCard from 'pages/bestMeetTime/components/BestTimeCard'; import ConfirmModal from 'pages/bestMeetTime/components/ConfirmModal'; import GetBestMeetimeListHooks from 'pages/bestMeetTime/hooks/getBestMeetimeList'; @@ -86,7 +85,7 @@ function BestMeetTime() { {isalternativeCardOpen && bestTimeData ? ( {bestTimeData.data.otherDateTimes[0] ? ( - )} {bestTimeData.data.otherDateTimes[1] ? ( - - {members.join(',')} + {members.join(', ')} @@ -22,7 +22,8 @@ function MemberTooltip({ members }: MemberTooltipProps) { export default MemberTooltip; const MemberTooltipWrapper = styled.div` - /* visibility: hidden; */ + visibility: hidden; + z-index: 1; position: absolute; width: fit-content; right: 4%; From 3c5e8b74bca29a4cc0ef4cd904b0577aebe159bf Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 03:34:53 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EB=B0=A9=EC=9E=A5=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B4=80=EB=A0=A8=20CSS=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/bestMeetTime/ChooseBestTime.tsx | 20 +++++++++++++------ .../bestMeetTime/components/BestMeetTime.tsx | 6 +++--- .../bestMeetTime/components/BestTimeCard.tsx | 4 ++-- .../components/OverallScheduleColumn.tsx | 4 ++-- .../overallSchedule/components/Title.tsx | 3 +-- 5 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/pages/bestMeetTime/ChooseBestTime.tsx b/src/pages/bestMeetTime/ChooseBestTime.tsx index cc801029..73a9b2f5 100644 --- a/src/pages/bestMeetTime/ChooseBestTime.tsx +++ b/src/pages/bestMeetTime/ChooseBestTime.tsx @@ -43,24 +43,32 @@ const ChangeViewPicker = styled.div<{ $isClicked: boolean }>` margin-top: 2.5rem; ${({ theme }) => theme.fonts.body2}; border-bottom: 2px solid; + border-color: ${({ $isClicked, theme, id }) => + id === 'best' + ? $isClicked + ? theme.colors.main1 + : theme.colors.grey5 + : $isClicked + ? theme.colors.grey5 + : theme.colors.main1}; width: 18.7rem; height: 3.5rem; color: ${({ $isClicked, theme, id }) => id === 'best' ? $isClicked - ? theme.colors.main1 - : theme.colors.grey4 + ? theme.colors.white + : theme.colors.grey5 : $isClicked - ? theme.colors.grey4 - : theme.colors.main1}; + ? theme.colors.grey5 + : theme.colors.white}; ${({ $isClicked, theme, id }) => id === 'best' ? $isClicked - ? theme.colors.main1 + ? theme.colors.white : theme.colors.grey4 : $isClicked ? theme.colors.grey4 - : theme.colors.main1}; + : theme.colors.white}; `; const ViewContainer = styled.div` display: flex; diff --git a/src/pages/bestMeetTime/components/BestMeetTime.tsx b/src/pages/bestMeetTime/components/BestMeetTime.tsx index f20dabc2..f76c1a7b 100644 --- a/src/pages/bestMeetTime/components/BestMeetTime.tsx +++ b/src/pages/bestMeetTime/components/BestMeetTime.tsx @@ -45,7 +45,7 @@ function BestMeetTime() { 현재까지 모인  - {bestTimeData && bestTimeData.data.memberCount} + {bestTimeData ? bestTimeData.data.memberCount : ''} 명 @@ -110,7 +110,7 @@ function BestMeetTime() { {showModal && - bestTimeData && ( + bestMeetimeObj && ( flex-direction: row; border: 1px solid ${({ $rank, $selected, theme }) => - $rank === $selected ? theme.colors.main1 : theme.colors.grey5}; + $rank === $selected ? theme.colors.main1 : theme.colors.grey7}; border-radius: 10px; padding: 1.8rem 1.5rem; width: 100%; @@ -63,7 +63,7 @@ const InfoContainer = styled.div` const Input = styled.input` appearance: none; margin: 0 2.274rem 0 0; - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23555555' stroke-width='2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; cursor: pointer; width: 2rem; diff --git a/src/pages/overallSchedule/components/OverallScheduleColumn.tsx b/src/pages/overallSchedule/components/OverallScheduleColumn.tsx index 27ac0275..709c276a 100644 --- a/src/pages/overallSchedule/components/OverallScheduleColumn.tsx +++ b/src/pages/overallSchedule/components/OverallScheduleColumn.tsx @@ -25,10 +25,10 @@ function OverallScheduleColumn({ date, timeSlots, availableSlotInfo }: OverallSc /** * 종합일정 시간표 스타일링 - * 1. border-top: 선택된 시간이라면 none, 선택되지 않은 시간이라면 30분 단위는 none, 1시간 단위는 실선 + * 1. border-top: 선택된 시간이라면 none, 선택되지 않은 시간이라면 30분 단위는 점선, 1시간 단위는 실선 * 2. background-color: 선택된 시간이라면 colorLevel에 따른 색상 */ - const borderTopStyle = slotId.endsWith(':30') ? 'none' : 'solid'; + const borderTopStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; const borderTop = `1px ${borderTopStyle} ${theme.colors.grey7} `; const isClickedSlot = clickedSlot === slotId; const backgroundColor = isClickedSlot && colorLevel !== 0 ? theme.colors.sub1 : COLOR[colorLevel]; diff --git a/src/pages/overallSchedule/components/Title.tsx b/src/pages/overallSchedule/components/Title.tsx index 44835bd1..1338f022 100644 --- a/src/pages/overallSchedule/components/Title.tsx +++ b/src/pages/overallSchedule/components/Title.tsx @@ -24,7 +24,7 @@ function Title({ memberCount, totalUserNames }: TitleProps) { {totalUserNames && ( - {totalUserNames.join(',')} + {totalUserNames.join(', ')} )} @@ -37,7 +37,6 @@ export default Title; const TextOneLine = styled.div` display: flex; flex-wrap: wrap; - margin-top: 3.7rem; width: 100%; `; From 33f973bc86fb202c853e7c529e541cea8d7dafe9 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 03:37:00 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=EC=B5=9C=EC=A0=81=EC=9D=98=20?= =?UTF-8?q?=ED=9A=8C=EC=9D=98=EC=8B=9C=EA=B0=84=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=82=B4=20margin-bottom=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/bestMeetTime/ChooseBestTime.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/bestMeetTime/ChooseBestTime.tsx b/src/pages/bestMeetTime/ChooseBestTime.tsx index 73a9b2f5..541b0356 100644 --- a/src/pages/bestMeetTime/ChooseBestTime.tsx +++ b/src/pages/bestMeetTime/ChooseBestTime.tsx @@ -75,4 +75,5 @@ const ViewContainer = styled.div` align-items: center; width: 100%; margin-top: 3.6rem; + margin-bottom: 16.4rem; `; From 900cc7348e229e9ef6f06727752643c92acde33d Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 18 Aug 2024 03:41:35 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=EC=A2=85=ED=95=A9=EC=9D=BC?= =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=EA=B0=84=ED=91=9C=20=ED=95=98=EB=8B=A8?= =?UTF-8?q?=EC=97=90=20dim=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../overallSchedule/components/UserNames.tsx | 53 +++++++++++++------ 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/src/pages/overallSchedule/components/UserNames.tsx b/src/pages/overallSchedule/components/UserNames.tsx index f02dff29..fa0558ff 100644 --- a/src/pages/overallSchedule/components/UserNames.tsx +++ b/src/pages/overallSchedule/components/UserNames.tsx @@ -8,22 +8,24 @@ function UserNames() { const { clickedUserNames } = useClickContext(); return ( - - {clickedUserNames.length === 0 ? ( - - - 블럭을 선택하면 해당 시간대에 참여가능한 + + + {clickedUserNames.length === 0 ? ( + + + 블럭을 선택하면 해당 시간대에 참여가능한 + + + 인원을 확인할 수 있어요 + + + ) : ( + + {clickedUserNames.join(', ')} - - 인원을 확인할 수 있어요 - - - ) : ( - - {clickedUserNames.join(', ')} - - )} - + )} + + ); } @@ -31,7 +33,7 @@ export default UserNames; const UserNamesWrapper = styled.aside` display: flex; - position: fixed; + bottom: 4.4rem; flex-wrap: wrap; justify-content: center; @@ -50,3 +52,22 @@ const Texts = styled.div` align-items: center; justify-content: center; `; + +const Dim = styled.div` + display: flex; + position: fixed; + bottom: 0; + gap: 1rem; + align-items: end; + justify-content: center; + z-index: 2; + height: 16.4rem; + + margin-top: 3rem; + background: ${({ theme }) => theme.colors.dim_gradient}; + padding-bottom: 2.9rem; + + width: 100%; + + pointer-events: none; +`;