[ Feat ] TimeSelect, Example, Routing 이슈

src/components/commons/seniorCard/SeniorCard.tsx

@@ -56,7 +56,8 @@ const SeniorCardWrapper = styled.div<{ $isSmall: boolean }>`
   align-items: center;
 
   width: 100%;
-  padding-top: 3.2rem;
+  padding: 1rem 1.2rem;
+  height: ${({ $isSmall }) => ($isSmall ? '19%' : '12.6rem')};
   border-radius: 8px;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};

src/pages/seniorProfile/SeniorProfilePage.tsx

@@ -15,6 +15,7 @@ import { Header } from '../../components/commons/Header';
 import ProgressBar from '../../components/commons/ProgressBar';
 import theme from '../../styles/theme';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { setRole } from '@utils/storage';
 
 const SeniorProfilePage = () => {
   const [step, setStep] = useState(0);
@@ -25,6 +26,7 @@ const SeniorProfilePage = () => {
   const userName = step >= 2 && step <= 4 ? nickname : '';
 
   useEffect(() => {
+    setRole('SENIOR');
     if (!seniorId || !nickname) navigate('/');
   }, [seniorId, nickname, navigate]);
 

src/pages/seniorProfile/components/Init.tsx

@@ -44,9 +44,9 @@ const SeniorRefreshImg = styled.img`
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 25rem;
-  height: 34rem;
   transform: translate(-40%, -40%);
+
+  width: 70%;
 `;
 
 const Text = styled.p`

src/pages/seniorProfile/components/TimeSelect/index.tsx

@@ -62,7 +62,7 @@ const TimeSelect = ({ profile, setProfile, setStep }: funnelComponentPropType) =
           onSetActiveButtonHandler={handleToggleBtn}
         />
         <WarnWrapper>
-          <WarnDescription isShown={isWarning} warnText="시간을 입력해주세요" />
+          <WarnDescription isShown={isWarning} warnText="시간 입력에 오류가 있어요! 다시 한번 확인해 주세요" />
         </WarnWrapper>
         {selectToggle === leftToggleText ? (
           <TimeWeekdays profile={profile} setProfile={setProfile} isWarning={isWarning} />

src/pages/seniorProfile/components/common/DurationSelect.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { DeleteIc, PlusIc } from '@assets/svgs';
+import WarnDescription from '@components/commons/WarnDescription';
 
 import styled from '@emotion/styled';
 import DropDown from '@pages/seniorProfile/components/common/DropDown';
@@ -22,6 +23,10 @@ const DurationSelect = ({
   isWarning,
 }: DurationPropType) => {
   const [isActive, setIsActive] = useState(defaultActive);
+  const invalidTime =
+    selectValue.startTime !== '시작 시간' &&
+    selectValue.endTime !== '마지막 시간' &&
+    selectValue.startTime > selectValue.endTime;
   const handleDelete = () => {
     setIsActive((prev) => !prev);
     setProfile('startTime')('시작 시간');
@@ -35,28 +40,30 @@ const DurationSelect = ({
   };
 
   return (
-    <Wrapper>
-      <DropDown
-        variant={variant}
-        isActive={isActive}
-        defaultValue={selectValue.startTime}
-        setProfile={setProfile('startTime')}
-        isStartTime={true}
-        isWarning={!!(isWarning && selectValue.isActive && selectValue.startTime === '시작 시간')}
-      />
-      <WaveText $isDefault={variant === 'default'} $isActive={isActive}>
-        ~
-      </WaveText>
-      <DropDown
-        variant={variant}
-        isActive={isActive}
-        defaultValue={selectValue.endTime}
-        setProfile={setProfile('endTime')}
-        isStartTime={false}
-        isWarning={!!(isWarning && selectValue.isActive && selectValue.endTime === '마지막 시간')}
-      />
-      {isActive ? <DeleteIcon onClick={handleDelete} /> : <PlusIcon onClick={handlePlus} />}
-    </Wrapper>
+    <>
+      <Wrapper>
+        <DropDown
+          variant={variant}
+          isActive={isActive}
+          defaultValue={selectValue.startTime}
+          setProfile={setProfile('startTime')}
+          isStartTime={true}
+          isWarning={!!(isWarning && selectValue.isActive && selectValue.startTime === '시작 시간') || invalidTime}
+        />
+        <WaveText $isDefault={variant === 'default'} $isActive={isActive}>
+          ~
+        </WaveText>
+        <DropDown
+          variant={variant}
+          isActive={isActive}
+          defaultValue={selectValue.endTime}
+          setProfile={setProfile('endTime')}
+          isStartTime={false}
+          isWarning={!!(isWarning && selectValue.isActive && selectValue.endTime === '마지막 시간') || invalidTime}
+        />
+        {isActive ? <DeleteIcon onClick={handleDelete} /> : <PlusIcon onClick={handlePlus} />}
+      </Wrapper>
+    </>
   );
 };
 
@@ -100,3 +107,9 @@ export const PlusIcon = styled(PlusIc)`
 
   cursor: pointer;
 `;
+
+const WarnWrapper = styled.div`
+  align-self: flex-start;
+
+  padding: 1rem 0 0.6rem;
+`;

src/pages/seniorProfile/utils/isTimeValid.ts

@@ -2,6 +2,15 @@ import { preferredTimeListType, preferredTimeType } from '@pages/seniorProfile/t
 
 export const isTimeValid = (timeList: preferredTimeListType['dayOfWeek' | 'weekend']) => {
   return Object.values(timeList).every((dayArr: preferredTimeType[]) =>
-    dayArr.every((item) => !item.isActive || (item.startTime !== '시작 시간' && item.endTime !== '마지막 시간')),
+    dayArr.every((item) => {
+      const isActiveCondition = !item.isActive || (item.startTime !== '시작 시간' && item.endTime !== '마지막 시간');
+      const isStartBeforeEnd = (startTime: string, endTime: string) => {
+        const [startHour, startMinute] = startTime.split(':').map(Number);
+        const [endHour, endMinute] = endTime.split(':').map(Number);
+        return startHour < endHour || (startHour === endHour && startMinute < endMinute);
+      };
+
+      return isActiveCondition && (!item.isActive || isStartBeforeEnd(item.startTime, item.endTime));
+    })
   );
-};
+};