[Fix/#320] 자잘한 스타일링, 라이팅 변경

src/components/Icon/icon.ts

@@ -67,6 +67,6 @@ export {
   RadioCheckIc,
   SpeechBubbleIc,
   TimeIc,
-  TooltipArrowIc,
   Wave,
+  TooltipArrowIc,
 };

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: 37.5rem;
 
   & button {

src/components/common/atomComponents/TextInput.tsx

@@ -9,10 +9,11 @@ interface ValueProps {
   value: string;
   setValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
   resetValue: () => void;
+  max: number;
   placeholder: string;
 }
 
-function TextInput({ value, setValue, resetValue, placeholder }: ValueProps) {
+function TextInput({ value, setValue, resetValue, max, placeholder }: ValueProps) {
   const [focus, setFocus] = useState(false);
 
   const resetOnClick = () => {
@@ -28,19 +29,19 @@ function TextInput({ value, setValue, resetValue, placeholder }: ValueProps) {
             value={value}
             onChange={setValue}
             onFocus={() => setFocus(true)}
-            $iserror={value?.length > 15}
+            $iserror={value?.length > max}
           />
           {focus && (
             <IconContainer onClick={resetOnClick}>
-              {value && value.length > 15 ? <InputErrorIc /> : <InputCancelIc />}
+              {value && value.length > max ? <InputErrorIc /> : <InputCancelIc />}
             </IconContainer>
           )}
         </InputSection>
         {value &&
-          value.length > 15 && (
+          value.length > max && (
             <SubTextSection>
               <Text font={'body4'} color={`${theme.colors.red}`}>
-                공백포함 최대 15자까지 입력가능해요
+                {`공백포함 최대 ${String(max)}자까지 입력가능해요`}
               </Text>
             </SubTextSection>
           )}

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}`}>

src/pages/createMeeting/components/ReturnTitleComponent.tsx

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

src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx

@@ -22,11 +22,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
 
   const passWordOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setMeetingInfo((prev: MeetingInfo) => {
-      if (e.target.value.length < 9) {
-        return { ...prev, password: e.target.value };
-      }
-      alert('비밀번호는 8자리 이하로 말해주세요');
-      return { ...prev };
+      return { ...prev, password: e.target.value };
     });
   };
 
@@ -44,6 +40,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
     }
   };
 
+  console.log(meetingInfo.password.length);
   return (
     <SetHostInfoWrapper>
       <HostInfoSection>
@@ -55,6 +52,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
             value={meetingInfo.name}
             setValue={hostOnChange}
             resetValue={resetHost}
+            max={6}
             placeholder={'방장 이름'}
           />
         </HostNameSection>

src/pages/createMeeting/components/useFunnel/SetTitle.tsx

@@ -24,6 +24,7 @@ function SetTitle({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
         value={meetingInfo.title}
         setValue={titleOnChange}
         resetValue={resetTitle}
+        max={15}
         placeholder={'서비스 기획 1차 회의'}
       />
       <StyledBtnSection>

src/pages/loginEntrance/components/HostComponent.tsx

@@ -87,6 +87,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) {
             value={hostInfo.name}
             setValue={hostOnChange}
             resetValue={resetHostId}
+            max={6}
             placeholder={'방장 이름'}
           />
         </HostNameSection>

src/pages/loginEntrance/components/MemberComponent.tsx

@@ -57,6 +57,7 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) {
             value={hostInfo.name}
             setValue={hostOnChange}
             resetValue={resetHostId}
+            max={6}
             placeholder={'참여자 이름'}
           />
         </HostNameSection>

src/pages/onBoarding/OnBoarding.tsx

@@ -80,7 +80,7 @@ function OnBoarding() {
         <ButtonSection>
           <Link to={'/meet/create?step=title'}>
             <Button typeState={'primaryActive'}>
-              <Text font={'button2'}>약속 생성하기</Text>
+              <Text font={'button2'}>회의 일정 정하기</Text>
             </Button>
           </Link>
         </ButtonSection>

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}

src/pages/selectSchedule/components/Description.tsx

@@ -65,17 +65,16 @@ 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: 33.5rem;
+  width: 100%;
 `;
 const OneLine = styled.div`
   display: flex;

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;

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;
 `;
 

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;