diff --git a/.github/ISSUE_TEMPLATE/design-request.md b/.github/ISSUE_TEMPLATE/design-request.md new file mode 100644 index 00000000..8c69ad56 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/design-request.md @@ -0,0 +1,18 @@ +--- +name: Design request +about: 디자인 템플릿 +title: "[Design] 제목" +labels: '' +assignees: '' + +--- + +## 🛠 Issue + +## + +## 📝 To-do + + + +- [ ] todo! diff --git a/src/components/atomComponents/Text.tsx b/src/components/atomComponents/Text.tsx index 33a76343..ca1dd2d0 100644 --- a/src/components/atomComponents/Text.tsx +++ b/src/components/atomComponents/Text.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components/macro'; interface ValueProps { - children: string | string[]; + children: string | string[] | number; font: string; color?: string; } diff --git a/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx b/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx index ee6d3fb9..be177ff5 100644 --- a/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx +++ b/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx @@ -35,9 +35,22 @@ function BestMeetTime() { - 현재까지 모인 {bestTimeData.data.memberCount}명을 위한 + + 현재까지 모인  + + + {bestTimeData.data.memberCount} + + + 명 + + + 을 위한 + - 최적의 회의시간이에요 + + 최적의 회의시간이에요 + 박스를 클릭하여 회의시간을 확정해주세요 @@ -129,14 +142,7 @@ const HeaderContainer = styled.div` `; const HeaderTitle = styled.div` - line-height: 3rem; - color: ${({ theme }) => theme.colors.white}; - font-size: 2.2rem; - font-weight: 700; -`; - -const MemberCount = styled.span` - color: ${({ theme }) => theme.colors.sub1}; + display: flex; `; const AnotherTimeBtnSection = styled.div` diff --git a/src/pages/SteppingStone/SteppingLayout.tsx b/src/pages/SteppingStone/SteppingLayout.tsx index d67e0723..39a4d621 100644 --- a/src/pages/SteppingStone/SteppingLayout.tsx +++ b/src/pages/SteppingStone/SteppingLayout.tsx @@ -1,12 +1,11 @@ +import { authClient, client } from 'utils/apis/axios'; import { useEffect, useState } from 'react'; - -import Header from 'components/moleculesComponents/Header'; import { useNavigate, useParams } from 'react-router-dom'; -import styled from 'styled-components/macro'; -import { authClient, client } from 'utils/apis/axios'; +import Header from 'components/moleculesComponents/Header'; import SteppingBody from './components/SteppingBody'; import SteppingBtnSection from './components/SteppingBtnSection'; +import styled from 'styled-components/macro'; interface SteppingProps { steppingType: string; @@ -28,6 +27,7 @@ function SteppingLayout({ steppingType }: SteppingProps) { } }; + //git test useEffect( () => { if (steppingType === 'meetEntrance') { diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.css b/src/pages/createMeeting/components/useFunnel/SetDates.css index f6c87ae8..5765289d 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.css +++ b/src/pages/createMeeting/components/useFunnel/SetDates.css @@ -189,3 +189,11 @@ /* .bg-dark .rmdp-button:not(.rmdp-action-button):hover { background-color: var(--rmdp-main1); } */ + +.rmdp-day.rmdp-disabled { + color: var(--rmdp-grey6) !important; +} + +.rmdp-day.rmdp-disabled.rmdp-deactive { + color: var(--rmdp-grey10) !important; +} diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.tsx b/src/pages/createMeeting/components/useFunnel/SetDates.tsx index da0fd490..5ff935a6 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetDates.tsx @@ -79,11 +79,12 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { className="bg-dark" range={!multiple} multiple={multiple} + minDate={new Date()} onChange={(dateObjects) => { if (dateObjects) { + const newDate: string[] = []; if (multiple === false) { const tmpArr = getAllDatesInRange(dateObjects as DateObject[]); - const newDate: string[] = []; tmpArr.map((date) => { const tempDate = (date as DateObject).format(dateRangeFormat); const reformatDate = tempDate.toUpperCase(); @@ -94,7 +95,6 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { return { ...prev, availableDates: newDate }; }); } else if (multiple === true) { - const newDate: string[] = []; (dateObjects as DateObject[]).map((date: DateObject) => { const tempDate = (date as DateObject).format(dateRangeFormat); const reformatDate = tempDate.toUpperCase(); @@ -105,6 +105,13 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { return { ...prev, availableDates: newDate }; }); } + if (newDate.length > 7) { + setTimeout(() => { + setMeetingInfo((prev: MeetingInfo) => { + return { ...prev, availableDates: [] }; + }); + }, 1000); + } } }} /> @@ -172,6 +179,7 @@ const RangeInputBox = styled.div<{ $isClicked: boolean }>` $isClicked ? theme.colors.grey5 : theme.colors.main1}; width: 33.5rem; height: 5.2rem; + color: ${({ theme }) => theme.colors.white}; `; const Input = styled.input` @@ -227,6 +235,24 @@ const InputNotice = styled.span<{ $dateLength: number }>` margin-bottom: 1rem; ${({ theme }) => theme.fonts.body3}; color: ${({ $dateLength, theme }) => ($dateLength > 7 ? theme.colors.red : theme.colors.sub1)}; + @keyframes vibration { + 0% { + transform: translateX(0); + } + 25% { + transform: translateX(-0.2rem); + } + 50% { + transform: translateX(0); + } + 75% { + transform: translateX(0.2rem); + } + 100% { + transform: translateX(0); + } + } + ${({ $dateLength }) => $dateLength > 7 && `animation: vibration 0.1s 5;`}; `; const CalendarWrapper = styled.div` diff --git a/src/pages/onBoarding/OnBoarding.tsx b/src/pages/onBoarding/OnBoarding.tsx index c5dd82df..aafc912a 100644 --- a/src/pages/onBoarding/OnBoarding.tsx +++ b/src/pages/onBoarding/OnBoarding.tsx @@ -1,3 +1,7 @@ +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; + import CardPng from 'assets/images/card.png'; import InsertPng from 'assets/images/insert.png'; import MakePng from 'assets/images/make.png'; @@ -7,12 +11,9 @@ import Text from 'components/atomComponents/Text'; import Header from 'components/moleculesComponents/Header'; import { Link } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { Navigation, Pagination, Autoplay } from 'swiper/modules'; +import { Autoplay, Navigation, Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; -import 'swiper/css'; -import 'swiper/css/navigation'; -import 'swiper/css/pagination'; import Explain from './components/Explain'; const slides = [ @@ -108,14 +109,12 @@ const StyledSwiperSlide = styled(SwiperSlide)` const SvgContainer = styled.section` img { - width: 25rem; - height: 25rem; + width: 33rem; + height: 33rem; } `; -const ExplainContainer = styled.section` - margin: 5rem 0; -`; +const ExplainContainer = styled.section``; const ButtonSection = styled.section` position: fixed; diff --git a/src/utils/toast/ToastContainer.tsx b/src/utils/toast/ToastContainer.tsx index 976d080d..ddf2bb40 100644 --- a/src/utils/toast/ToastContainer.tsx +++ b/src/utils/toast/ToastContainer.tsx @@ -10,10 +10,11 @@ function ToastContainerBox() { newestOnTop={false} closeOnClick rtl={false} - pauseOnFocusLoss + pauseOnFocusLoss={true} draggable pauseOnHover theme="dark" + limit={1} /> ); } diff --git a/src/utils/toast/copyLink.ts b/src/utils/toast/copyLink.ts index f92806e2..72e1267f 100644 --- a/src/utils/toast/copyLink.ts +++ b/src/utils/toast/copyLink.ts @@ -1,5 +1,6 @@ import { toast } from 'react-toastify'; -export const notify = () => toast('링크 복사가 완료되었습니다'); +export const notify = () => toast('링크 복사가 완료되었습니다', {toastId: "link"}); export const downLoadNotify = () => toast('이미지 다운로드를 시작합니다'); +//test \ No newline at end of file