Merge branch 'develop' into fix/#287/memberPost

.eslintrc.json

@@ -46,6 +46,8 @@
         "groups": ["builtin", "external", "internal", ["parent", "sibling"], "index"], //import 순서를 고정. builtin- 외부- 내부
         "pathGroups": [
           //react 컴포넌트가 builtin 뒤에 (external import 앞에 나오도록 설정)
+          { "pattern": "./**", "group": "internal" }, // './'로 시작하는 상대 경로 파일은 internal 그룹에 속하도록 설정
+          { "pattern": "../**", "group": "parent", "position": "before" }, // '../'로 시작하는 상위 경로 파일은 parent 그룹에 속하도록 설정
           { "pattern": "react", "group": "builtin", "position": "after" },
           { "pattern": "react-dom", "group": "builtin", "position": "after" }
         ],

.stylelintrc

@@ -14,5 +14,6 @@
   ],
   "rules": {
     "color-named": "never"
-  }
+  },
+  "ignoreFiles": ["**/*.tsx"] 
 }

src/atoms/atom.ts

@@ -1,5 +1,5 @@
-import { PreferTime } from 'components/legacy/scheduleComponents/types/AvailableScheduleType';
-import { DateStates, ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
+
+import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist';
 
@@ -8,16 +8,6 @@ export const methodStateAtom = atom<boolean>({
   default: false,
 });
 
-export const availableDatesAtom = atom<DateStates[]>({
-  key: 'availableDatesAtom',
-  default: [],
-});
-
-export const preferTimesAtom = atom<PreferTime[]>({
-  key: 'preferTimesAtom',
-  default: [],
-});
-
 export const scheduleAtom = atom<ScheduleStates[]>({
   key: 'scheduleAtom',
   default: [

src/components/timetableComponents/Timetable.tsx

@@ -6,20 +6,21 @@ import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
 import { ColumnStructure, DateType } from './types';
 
-interface TimetableProps {
+export interface TimetableProps {
   timeSlots: string[];
   availableDates: DateType[];
+  slotUnit: 'HALF' | 'HOUR';
   children: (props: ColumnStructure) => ReactNode;
   bottomItem?: ReactNode;
 }
 
-function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) {
+function Timetable({ timeSlots, availableDates, slotUnit, children, bottomItem }: TimetableProps) {
   const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
 
   return (
     <>
       <TimetableWrapper>
-        <SlotTitle timeSlots={timeSlots} />
+        <SlotTitle timeSlots={timeSlots} slotUnit={slotUnit} />
         <TableWithDateWrapper>
           <DateTitle availableDates={availableDates} />
           <TableWrapper>

src/components/timetableComponents/parts/Slot.tsx

@@ -1,36 +1,47 @@
 import { ReactNode } from 'react';
+
 import styled from 'styled-components';
 
 interface SlotProps {
-  slotId: string;
-  slotStyle?: string;
+  customSlotStyle?: string;
   onClick?: () => void;
   children?: ReactNode;
 }
 
-function Slot({ slotId, slotStyle, onClick, children }: SlotProps) {
-  const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid';
+function Slot({ customSlotStyle, onClick, children }: SlotProps) {
+  const defaultSlotStyle = `
+    width: 4.4rem;
+    height: 2.2rem;
+    display: flex;
+    justify-content: center;
+  `;
 
   return (
-    <DefaultSlot $borderStyle={borderStyle} $slotStyle={slotStyle} onClick={onClick}>
-      {children}
-    </DefaultSlot>
+    <SlotWrapper
+      $defaultSlotStyle={defaultSlotStyle}
+      $customSlotStyle={customSlotStyle}
+      onClick={onClick}
+    >
+      <PriorityNumber>{children}</PriorityNumber>
+    </SlotWrapper>
   );
 }
 
 export default Slot;
 
-const DefaultSlot = styled.div<{
-  $borderStyle: string;
-  $slotStyle?: string;
+const SlotWrapper = styled.div<{
+  $defaultSlotStyle: string;
+  $customSlotStyle?: string;
 }>`
-  border-top: 1px solid ${({ theme }) => theme.colors.grey7};
-  border-top-style: ${({ $borderStyle }) => $borderStyle};
-  ${({ $slotStyle }) => $slotStyle};
-
-  width: 4.4rem;
-  height: 2.2rem;
+  ${({ $defaultSlotStyle }) => $defaultSlotStyle};
+  ${({ $customSlotStyle }) => $customSlotStyle};
+`;
 
+const PriorityNumber = styled.div`
   display: flex;
+  position: relative;
+  top: 6px;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 `;

src/components/timetableComponents/parts/SlotTitle.tsx

@@ -4,24 +4,24 @@ import Text from 'components/atomComponents/Text';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
-interface SlotTitleProps {
-  timeSlots: string[];
-}
+import { TimetableProps } from '../Timetable';
+
+type SlotTitleProps = Pick<TimetableProps, 'timeSlots' | 'slotUnit'>;
 
-function SlotTitle({ timeSlots }: SlotTitleProps) {
+function SlotTitle({ timeSlots, slotUnit }: SlotTitleProps) {
   const parsedTimeSlots = timeSlots
     .filter((slot) => !slot.endsWith('30'))
     .map((slot) => parseInt(slot.split(':')[0]));
   parsedTimeSlots.push(24);
 
   return (
-    <SlotTitleWrapper>
+    <SlotTitleWrapper $slotUnit={slotUnit}>
       {parsedTimeSlots.map((slot) => (
         <Fragment key={slot}>
-          <Text font="body4" color={theme.colors.grey5} key={`${slot}-fill`}>
+          <Text font="body4" color={theme.colors.grey7} key={`${slot}-fill`}>
             {slot}
           </Text>
-          <Text font="body4" color={theme.colors.grey5} key={`${slot}-empty`}>
+          <Text font="body4" color={theme.colors.grey7} key={`${slot}-empty`}>
             {''}
           </Text>
         </Fragment>
@@ -32,9 +32,9 @@ function SlotTitle({ timeSlots }: SlotTitleProps) {
 
 export default SlotTitle;
 
-const SlotTitleWrapper = styled.div`
+const SlotTitleWrapper = styled.div<{ $slotUnit: 'HALF' | 'HOUR' }>`
   display: flex;
   flex-direction: column;
-  gap: 1.4rem;
+  gap: ${({ $slotUnit }) => ($slotUnit === 'HALF' ? '1.4rem' : '0.4rem')};
   margin-top: 3.3rem;
 `;

src/pages/ComponentTesting.tsx

@@ -1,24 +1,24 @@
 import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
 import {
-  MainLogoIc,
-  HambergerIc,
-  ExitIc,
-  InputCancelIc,
-  RadioCheckIc,
-  RadioCheckedIc,
   BackIc,
-  PlusIc,
-  InputErrorIc,
+  ClockIc,
   DropDownIc,
   DropUpIc,
-  PasswordOpenEyeIc,
-  PasswordEyeIc,
+  ExitIc,
+  HambergerIc,
+  InputCancelIc,
+  InputErrorIc,
   LinkIc,
-  PlaceIc,
-  ClockIc,
-  OnlinePlaceIc,
+  MainLogoIc,
   OfflinePlaceIc,
+  OnlinePlaceIc,
+  PasswordEyeIc,
+  PasswordOpenEyeIc,
+  PlaceIc,
+  PlusIc,
+  RadioCheckIc,
+  RadioCheckedIc,
   TimeIc,
 } from 'components/Icon/icon';
 import styled from 'styled-components/macro';

src/pages/bestMeetTime/hooks/getBestMeetimeList.ts

@@ -4,78 +4,6 @@ import { authClient } from 'utils/apis/axios';
 
 import { DateTimeData } from '../types/meetCardData';
 
-const initialData = {
-  status: 200,
-  message: '최적의 회의시간 조회 성공입니다.',
-  data: {
-    memberCount: 12,
-    bestDateTime: {
-      month: '7',
-      day: '30',
-      dayOfWeek: '월',
-      startTime: '06:00',
-      endTime: '12:00',
-      users: [
-        {
-          id: 1,
-          name: '심은서',
-        },
-        {
-          id: 2,
-          name: '이동헌',
-        },
-        {
-          id: 3,
-          name: '정찬우',
-        },
-      ],
-    },
-    otherDateTimes: [
-      {
-        month: '7',
-        day: '31',
-        dayOfWeek: '화',
-        startTime: '06:00',
-        endTime: '12:00',
-        users: [
-          {
-            id: 1,
-            name: '심은서',
-          },
-          {
-            id: 2,
-            name: '이동헌',
-          },
-          {
-            id: 3,
-            name: '정찬우',
-          },
-        ],
-      },
-      {
-        month: '7',
-        day: '32',
-        dayOfWeek: '화',
-        startTime: '06:00',
-        endTime: '12:00',
-        users: [
-          {
-            id: 1,
-            name: '심은서',
-          },
-          {
-            id: 2,
-            name: '이동헌',
-          },
-          {
-            id: 3,
-            name: '정찬우',
-          },
-        ],
-      },
-    ],
-  },
-};
 const GetBestMeetimeListHooks = (meetingId: string) => {
   const [isError, setIsError] = useState(false);
   const [isloading, setIsloading] = useState(true);
@@ -86,10 +14,9 @@ const GetBestMeetimeListHooks = (meetingId: string) => {
       setIsloading(true);
       const result = await authClient.get(`/meeting/${meetingId}/details`);
       setBestTimeData(result.data);
-      // setTimeout(() => setBestTimeData(initialData), 1000);
     } catch (error) {
       console.log(error);
-      setIsError(true)
+      setIsError(true);
     }
     setIsloading(false);
   };
@@ -100,7 +27,7 @@ const GetBestMeetimeListHooks = (meetingId: string) => {
     },
     [meetingId],
   );
-  return { isloading, bestTimeData ,isError };
+  return { isloading, bestTimeData, isError };
 };
 
 export default GetBestMeetimeListHooks;

src/pages/createMeeting/CreateMeeting.tsx

@@ -11,7 +11,6 @@ import { MeetingInfo } from './types/useFunnelInterface';
 const initialMeetingInfo: MeetingInfo = {
   title: '',
   availableDates: [''],
-  preferTimes: [{ startTime: '06:00', endTime: '24:00' }],
   place: '',
   placeDetail: '',
   duration: '',

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

@@ -1,15 +1,15 @@
-import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface';
+import React from 'react';
 
+import { isAxiosError } from 'axios';
 import Button from 'components/atomComponents/Button';
-import React from 'react';
 import Text from 'components/atomComponents/Text';
 import TextAreaInput from 'components/atomComponents/TextAreaInput';
-import { createMeetingApi } from 'utils/apis/legacy/createMeetingApi';
-import { isAxiosError } from 'axios';
-import styled from 'styled-components/macro';
+import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface';
 import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components/macro';
+import { createMeetingApi } from 'utils/apis/legacy/createMeetingApi';
 
-function SetAdditionalInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
+function SetAdditionalInfo({ meetingInfo, setMeetingInfo }: FunnelProps) {
   const navigate = useNavigate();
   const textAreaOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (e.target.value.length < 51) {