Merge pull request #190 from ASAP-as-soon-as-possible/develop

release 1.0.1 -> main
ASAP-as-soon-as-possible · Oct 2, 2023 · f7966be · f7966be
2 parents bb3ca5e + 2e28ccd
commit f7966be
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 28 deletions.
diff --git a/.github/ISSUE_TEMPLATE/design-request.md 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
@@ -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
@@ -35,9 +35,22 @@ function BestMeetTime() {
           <TitleSection>
             <HeaderContainer>
               <HeaderTitle>
-                현재까지 모인 <MemberCount>{bestTimeData.data.memberCount}</MemberCount>명을 위한
+                <Text font={`head2`} color={`${theme.colors.white}`}>
+                  현재까지 모인&nbsp;
+                </Text>
+                <Text font={`head2`} color={`${theme.colors.sub1}`}>
+                  {bestTimeData.data.memberCount}
+                </Text>
+                <Text font={`head2`} color={`${theme.colors.sub1}`}>
+                  명
+                </Text>
+                <Text font={`head2`} color={`${theme.colors.white}`}>
+                  을 위한
+                </Text>
               </HeaderTitle>
-              <HeaderTitle>최적의 회의시간이에요</HeaderTitle>
+              <Text font={`head2`} color={`${theme.colors.white}`}>
+                최적의 회의시간이에요
+              </Text>
             </HeaderContainer>
             <Text font={'body3'} color={`${theme.colors.grey4}`}>
               박스를 클릭하여 회의시간을 확정해주세요
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,6 @@
 import { toast } from 'react-toastify';
 
-export const notify = () => toast('링크 복사가 완료되었습니다');
+export const notify = () => toast('링크 복사가 완료되었습니다', {toastId: "link"});
 
 export const downLoadNotify = () => toast('이미지 다운로드를 시작합니다');
+//test