Merge pull request #327 from ASAP-as-soon-as-possible/fix/#320/CSS

[Fix/#320] 자잘한 스타일링, 라이팅 변경
ASAP-as-soon-as-possible · Aug 31, 2024 · f36fac6 · f36fac6
2 parents 4ff219a + db6ada5
commit f36fac6
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 26 deletions.
diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts
@@ -67,6 +67,6 @@ export {
   RadioCheckIc,
   SpeechBubbleIc,
   TimeIc,
-  TooltipArrowIc,
   Wave,
+  TooltipArrowIc,
 };
diff --git a/src/components/common/BottomSheet/BottomSheet.tsx b/src/components/common/BottomSheet/BottomSheet.tsx
@@ -28,11 +28,11 @@ const BottomSheetModal = styled.div<{ $isModalOpen: boolean }>`
   gap: 0.8rem;
   transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1);
   z-index: 1;
-  border-top-left-radius: 1.2rem;
-  border-top-right-radius: 1.2rem;
+  border-top-left-radius: 1.8rem;
+  border-top-right-radius: 1.8rem;
   background-color: ${({ theme }) => theme.colors.grey8};
 
-  padding: 4.4rem 2rem 4rem;
+  padding: 3.6rem 2rem 4.8rem;
   width: 100%;
   max-width: 43rem;
 

diff --git a/src/components/common/moleculesComponents/Header.tsx b/src/components/common/moleculesComponents/Header.tsx
@@ -25,7 +25,7 @@ function Header({ position, setFunnelStep }: HeaderProps) {
   const { scheduleStep, setScheduleStep } = useScheduleStepContext();
   const navigationOptions = [
     {
-      title: '약속 생성하기',
+      title: '회의 일정 정하기',
       url: '/meet/create',
     },
     {
@@ -90,7 +90,7 @@ function Header({ position, setFunnelStep }: HeaderProps) {
           ) : undefined}
           {position === 'createMeeting' ? (
             <Text font={'title2'} color={`${theme.colors.white}`}>
-              회의정보입력
+              회의 정보 입력
             </Text>
           ) : position === 'confirmMeet' ? (
             <Text font={'title2'} color={`${theme.colors.white}`}>

diff --git a/src/pages/createMeeting/components/ReturnTitleComponent.tsx b/src/pages/createMeeting/components/ReturnTitleComponent.tsx
@@ -25,7 +25,7 @@ const funnelSteps: FunnelSteps = {
   },
   hostInfo: {
     main: '방장 정보를 입력해주세요',
-    sub: '관리자 페이지에 접속할 때 필요해요',
+    sub: '방장 페이지에 접속할 때 필요해요',
   },
   additionalInfo: {
     main: '더 알리고 싶은 내용이 있나요?',

diff --git a/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx
@@ -49,7 +49,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
       meetingInfo.password.length <= 8
     );
   };
-
+  
   return (
     <SetHostInfoWrapper>
       <HostInfoSection>

diff --git a/src/pages/onBoarding/OnBoarding.tsx b/src/pages/onBoarding/OnBoarding.tsx
@@ -53,7 +53,6 @@ function OnBoarding() {
     <>
       <OnboardingWrapper>
         <Header position={'onBoarding'} />
-        <>
           <SwiperContext>
             <Swiper
               spaceBetween={30}
@@ -81,10 +80,9 @@ function OnBoarding() {
               ))}
             </Swiper>
           </SwiperContext>
-        </>
         <BottomBtnSection>
           <Button typeState={'primaryActive'} onClick={handleCreateMeeting}>
-            <Text font={'button2'}>약속 생성하기</Text>
+            <Text font={'button2'}>회의 일정 정하기</Text>
           </Button>
         </BottomBtnSection>
       </OnboardingWrapper>

diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -66,7 +66,12 @@ function SelectSchedule() {
                 sub={TITLES[scheduleStep].sub}
                 padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
               />
-              {isLottieOpen && <OnboardingLottie onClose={onLottieClose} />}
+              {isLottieOpen && (
+                <OnboardingLottie
+                  onClose={onLottieClose}
+                  top={data.place === 'UNDEFINED' ? 26.3 : 28.4}
+                />
+              )}
               <SelectScheduleTable
                 timeSlots={getAvailableTimes({ startTime: '06:00', endTime: '24:00' })}
                 availableDates={data.availableDates}

diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx
@@ -65,15 +65,13 @@ export default Description;
 
 const DescriptionWrapper = styled.div`
   display: flex;
-  position: relative;
-  margin: 2rem 0;
+  margin: 0.6rem 0 2.4rem;
   width: 100%;
 `;
 
 const Texts = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: 0.8rem;
   background-color: ${theme.colors.grey9};
   padding: 1.5rem 2.4rem;
   width: 100%;

diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -253,7 +253,7 @@ const DropdownWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.grey6};
   width: 27.4rem;
   height: fit-content;
-  max-height: 15.6rem;
+  max-height: 18.3rem;
 
   overflow-x: hidden;
   overflow-y: auto;

diff --git a/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx b/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx
@@ -5,9 +5,10 @@ import styled from 'styled-components';
 
 interface OnboardingLottieProps {
   onClose: () => void;
+  top: number;
 }
 
-function OnboardingLottie({ onClose }: OnboardingLottieProps) {
+function OnboardingLottie({ onClose, top }: OnboardingLottieProps) {
   const defaultOptions = {
     loop: true,
     autoplay: true,
@@ -18,7 +19,7 @@ function OnboardingLottie({ onClose }: OnboardingLottieProps) {
   };
   return (
     <>
-      <OnboardingLottieWrapper>
+      <OnboardingLottieWrapper $top={top}>
         <CloseIcWrapper onClick={onClose} />
         <LottieWrapper options={defaultOptions} />
       </OnboardingLottieWrapper>
@@ -29,9 +30,9 @@ function OnboardingLottie({ onClose }: OnboardingLottieProps) {
 
 export default OnboardingLottie;
 
-const OnboardingLottieWrapper = styled.aside`
+const OnboardingLottieWrapper = styled.aside<{ $top: number }>`
   position: absolute;
-  top: 29.4rem;
+  top: ${({ $top }) => $top}rem;
   z-index: 1;
 `;
 

diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx
@@ -26,16 +26,12 @@ function SelectionColumn({ date, timeSlots }: ColumnStructure) {
      * 가능시간 입력 시간표 스타일링
      * 1. border-top: 30분 단위는 dashed, 1시간 단위는 solid
      * 2. border: 탭투탭 시 startSlot에 dashed
-     * 3. background-color: 선택된 시간이면서 맨 첫번째 Slot이라면 그라디언트, 그 외는 main1, 선택된 시간이 아니면 transparent;
+     * 3. background-color: 선택된 시간이라면 main1, 선택된 시간이 아니면 transparent;
      */
     const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid';
     const border = isStartSlot && `1px dashed ${theme.colors.main5}`;
     const borderTop = `1px ${borderStyle} ${theme.colors.grey7}`;
-    const background = isSelectedSlot
-      ? isFirstSlot
-        ? 'linear-gradient(180deg, #496AFF 0%, #3253FF 75%)'
-        : theme.colors.main1
-      : 'transparent';
+    const background = isSelectedSlot ? theme.colors.main1 : 'transparent';
 
     return `
       cursor:pointer;