Merge pull request #51 from ehdrhelr/fe/refactor

[FE] 리뷰 기반 리팩토링

FE/airbnb/src/components/calendar/CalendarDate.tsx

@@ -6,9 +6,9 @@ import {
   dayType,
   selectDateState,
   hoverDateState,
-} from '../../recoil/calendarAtom';
-import { selectCheckBoxState } from '../../recoil/headerAtom';
-import { getTimes } from '../header/form/calendar/calendarDateFn';
+} from '../../recoilStore/calendarAtom';
+import { selectCheckBoxState } from '../../recoilStore/headerAtom';
+import { getTimes } from '../../util/calendarUtils';
 
 interface Props {
   monthData: dayType[][];

FE/airbnb/src/components/calendar/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { calendarDateType } from '../../recoil/calendarAtom';
+import { calendarDateType } from '../../recoilStore/calendarAtom';
 
 interface Props {
   calendarDate: calendarDateType;

FE/airbnb/src/components/header/Header.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { CenterContainer } from '../util/utilStyles';
+import { CenterContainer } from '../../util/utilStyles';
 import { IoGlobeOutline } from 'react-icons/io5';
 import HoverBlock from './HoverBlock';
 import HeaderNav from './nav/HeaderNav';

FE/airbnb/src/components/header/HoverBlock.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { selectCheckBoxState } from '../../recoil/headerAtom';
+import { selectCheckBoxState } from '../../recoilStore/headerAtom';
 
 interface Props {
   children: (JSX.Element | boolean)[] | JSX.Element | string;

FE/airbnb/src/components/header/form/FormCheckIn.tsx

@@ -2,10 +2,10 @@ import { useRef, RefObject, useEffect, MouseEvent } from 'react';
 import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import useToggle from '../../../hooks/useToggle';
-import { calendarOpenState, selectDateState } from '../../../recoil/calendarAtom';
-import { isFormOpenedState, selectCheckBoxState } from '../../../recoil/headerAtom';
+import { calendarOpenState, selectDateState } from '../../../recoilStore/calendarAtom';
+import { isFormOpenedState, selectCheckBoxState } from '../../../recoilStore/headerAtom';
 import HoverBlock from '../HoverBlock';
-import { getDateByTime } from './calendar/calendarDateFn';
+import { getDateByTime } from '../../../util/calendarUtils';
 import FormCalendar from './calendar/FormCalendar';
 import FormColumn from './FormColumn';
 import { ReactComponent as DeleteBtn } from '../../../assets/svg/Property 1=x-circle.svg';
@@ -17,13 +17,13 @@ interface Props {
 const FormCheckIn = ({ checkOutRef }: Props) => {
   const checkInRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<HTMLDivElement>(null);
+  const selectBox = useRecoilValue(selectCheckBoxState);
   const selectDate = useRecoilValue(selectDateState);
   const resetSelectDate = useResetRecoilState(selectDateState);
-  const selectBox = useRecoilValue(selectCheckBoxState);
   const setIsCalendarOpen = useSetRecoilState(calendarOpenState);
+  const setIsFormOpened = useSetRecoilState(isFormOpenedState);
   const isChekcInSelected = selectBox === 'checkIn';
   const { open } = useToggle({ clickRef: [checkInRef, checkOutRef], toggleRef, isChekcInSelected });
-  const setIsFormOpened = useSetRecoilState(isFormOpenedState);
 
   useEffect(() => {
     setIsCalendarOpen(open);
@@ -35,7 +35,7 @@ const FormCheckIn = ({ checkOutRef }: Props) => {
   const description = date ? `${date.month}월 ${date.day}일` : '날짜';
   const isShowDeleteBtn = !!selectDate.checkIn && open && selectBox === 'checkIn';
 
-  const handleDeleteClick = (e: MouseEvent): void => {
+  const resetClickHandler = (e: MouseEvent): void => {
     e.stopPropagation();
     resetSelectDate();
   };
@@ -45,7 +45,7 @@ const FormCheckIn = ({ checkOutRef }: Props) => {
       <StyledFormCheckIn ref={checkInRef} data-type='checkIn'>
         <HoverBlock color='gray5' className='hover__checkIn' dataKey='checkIn' isModal={open}>
           <FormColumn title='체크인' description={description} />
-          {isShowDeleteBtn && <DeleteBtn onClick={handleDeleteClick} />}
+          {isShowDeleteBtn && <DeleteBtn onClick={resetClickHandler} />}
         </HoverBlock>
       </StyledFormCheckIn>
       {open && <FormCalendar toggleRef={toggleRef} />}

FE/airbnb/src/components/header/form/FormCheckOut.tsx

@@ -1,12 +1,12 @@
 import { MouseEvent, RefObject } from 'react';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { calendarOpenState, selectDateState } from '../../../recoil/calendarAtom';
+import { calendarOpenState, selectDateState } from '../../../recoilStore/calendarAtom';
 import HoverBlock from '../HoverBlock';
-import { getDateByTime } from './calendar/calendarDateFn';
+import { getDateByTime } from '../../../util/calendarUtils';
 import FormColumn from './FormColumn';
 import { ReactComponent as DeleteBtn } from '../../../assets/svg/Property 1=x-circle.svg';
-import { selectCheckBoxState } from '../../../recoil/headerAtom';
+import { selectCheckBoxState } from '../../../recoilStore/headerAtom';
 
 interface Props {
   checkOutRef: RefObject<HTMLDivElement>;
@@ -22,7 +22,7 @@ const FormCheckOut = ({ checkOutRef }: Props) => {
   const description = date ? `${date.month}월 ${date.day}일` : '날짜';
   const isShowDeleteBtn = !!selectDate.checkOut && open && selectBox === 'checkOut';
 
-  const handleDeleteClick = (e: MouseEvent): void => {
+  const resetClickHandler = (e: MouseEvent): void => {
     e.stopPropagation();
     resetSelectDate();
   };
@@ -31,7 +31,7 @@ const FormCheckOut = ({ checkOutRef }: Props) => {
     <StyledFormCheckOut ref={checkOutRef} data-type='checkOut'>
       <HoverBlock color='gray5' className='hover__checkOut' dataKey='checkOut' isModal={open}>
         <FormColumn title='체크아웃' description={description} />
-        {isShowDeleteBtn && <DeleteBtn onClick={handleDeleteClick} />}
+        {isShowDeleteBtn && <DeleteBtn onClick={resetClickHandler} />}
       </HoverBlock>
     </StyledFormCheckOut>
   );

FE/airbnb/src/components/header/form/FormColumn.tsx

@@ -40,5 +40,8 @@ const StyledFormColumn = styled.div`
   .description {
     font-size: 0.9rem;
     color: ${({ theme }) => theme.colors.gray3};
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 `;

FE/airbnb/src/components/header/form/FormGuest.tsx

@@ -6,20 +6,25 @@ import { MouseEvent, useEffect, useRef } from 'react';
 import useToggle from '../../../hooks/useToggle';
 import FormGuestToggle from './guestToggle/FormGuestToggle';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
-import { guestState, isFormOpenedState, reserveInfoSelector } from '../../../recoil/headerAtom';
+import {
+  guestState,
+  isFormOpenedState,
+  reserveInfoSelector,
+  totalGuestSelector,
+} from '../../../recoilStore/headerAtom';
 import { ReactComponent as DeleteBtn } from '../../../assets/svg/Property 1=x-circle.svg';
-import ConditionalLink from '../../util/ConditionalLink';
+import ConditionalLink from '../../commonComponents/ConditionalLink';
 import { reserveInfoType, clientReserveAPI } from '../../../util/api';
 
 const FormGuest = () => {
   const clickRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<HTMLDivElement>(null);
   const { open } = useToggle({ clickRef, toggleRef });
-  const guestCount = useRecoilValue(guestState);
-  const resetGuestCount = useResetRecoilState(guestState);
+  const guests = useRecoilValue(guestState);
+  const resetGuests = useResetRecoilState(guestState);
   const [isFormOpened, setIsFormOpened] = useRecoilState(isFormOpenedState);
-  const totalCount = Object.values(guestCount).reduce((acc, cur) => acc + cur);
-  const isShowDeleteBtn = totalCount !== 0 && open;
+  const totalGuestCount = useRecoilValue(totalGuestSelector);
+  const isShowDeleteBtn = totalGuestCount !== 0 && open;
   const reserveInfo = useRecoilValue(reserveInfoSelector);
 
   useEffect(() => {
@@ -28,19 +33,19 @@ const FormGuest = () => {
   }, [open]);
 
   const getGuestDesc = () => {
-    if (totalCount === 0) return `게스트 추가`;
+    if (totalGuestCount === 0) return `게스트 추가`;
 
-    if (guestCount.infants > 0) {
-      const infants = guestCount.infants;
-      return `게스트 ${totalCount - infants}명, 유아 ${infants}명`;
+    if (guests.infants > 0) {
+      const infants = guests.infants;
+      return `게스트 ${totalGuestCount - infants}명, 유아 ${infants}명`;
     }
 
-    return `게스트 ${totalCount}명`;
+    return `게스트 ${totalGuestCount}명`;
   };
 
-  const handleDeleteClick = (e: MouseEvent): void => {
+  const resetClickHandler = (e: MouseEvent): void => {
     e.stopPropagation();
-    resetGuestCount();
+    resetGuests();
   };
 
   const handleSubmitClick = (e: MouseEvent): void => {
@@ -55,7 +60,7 @@ const FormGuest = () => {
       <StyledFormGuest ref={clickRef} isFormOpened={isFormOpened}>
         <HoverBlock color='gray5' className='hover__guest' dataKey='guest' isModal={open}>
           <FormColumn title='인원' description={getGuestDesc()} />
-          {isShowDeleteBtn && <DeleteBtn onClick={handleDeleteClick} />}
+          {isShowDeleteBtn && <DeleteBtn onClick={resetClickHandler} />}
           <ConditionalLink to={linkURL} condition={linkCondition}>
             <div className='search-icon' onClick={handleSubmitClick}>
               <IoSearch />

FE/airbnb/src/components/header/form/FormLocation.tsx

@@ -2,7 +2,7 @@ import { useRef, useEffect, FormEvent } from 'react';
 import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import useToggle from '../../../hooks/useToggle';
-import { isFormOpenedState, locationState } from '../../../recoil/headerAtom';
+import { isFormOpenedState, locationState } from '../../../recoilStore/headerAtom';
 import HoverBlock from '../HoverBlock';
 import FormColumn from './FormColumn';
 import FormLocationToggle from './FormLocationToggle';
@@ -22,7 +22,7 @@ const FormLocation = () => {
   useEffect(() => {
     if (open) {
       setIsFormOpened(true);
-      if (inputRef.current) inputRef.current.focus();
+      inputRef?.current?.focus();
     } else setIsFormOpened(false);
   }, [open]);
 

FE/airbnb/src/components/header/form/FormPrice.tsx

@@ -7,8 +7,8 @@ import {
   pauseBtnLastPositionState,
   pauseBtnPositionState,
   priceState,
-} from '../../../recoil/headerAtom';
-import { getNumberWithComma } from '../../util/util';
+} from '../../../recoilStore/headerAtom';
+import { getNumberWithComma } from '../../../util/tsUtils';
 import HoverBlock from '../HoverBlock';
 import FormColumn from './FormColumn';
 import PriceBar, { PRICE_DATA } from './priceBar/PriceBar';
@@ -39,7 +39,7 @@ const FormPrice = () => {
 
   const priceDescripition = `￦${minPrice} ~ ￦${maxPrice}`;
 
-  const handleDeleteClick = (e: MouseEvent): void => {
+  const resetClickHandler = (e: MouseEvent): void => {
     e.stopPropagation();
     resetPriceRange();
     resetBtnPosition();
@@ -51,7 +51,7 @@ const FormPrice = () => {
       <StyledFormPrice ref={clickRef} data-type='price'>
         <HoverBlock color='gray5' className='hover__price' dataKey='price' isModal={open}>
           <FormColumn title='요금' description={priceDescripition} />
-          {isShowDeleteBtn && open && <DeleteBtn onClick={handleDeleteClick} />}
+          {isShowDeleteBtn && open && <DeleteBtn onClick={resetClickHandler} />}
         </HoverBlock>
       </StyledFormPrice>
       {open && (

FE/airbnb/src/components/header/form/calendar/FormCalendar.tsx

@@ -1,13 +1,13 @@
 import { RefObject, useState, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { calendarState, calendarDateType } from '../../../../recoil/calendarAtom';
+import { calendarState, calendarDateType } from '../../../../recoilStore/calendarAtom';
 import { ReactComponent as CalendarPrevBtn } from '../../../../assets/svg/Property 1=chevron-left.svg';
 import { ReactComponent as CalendarNextBtn } from '../../../../assets/svg/Property 1=chevron-right.svg';
 import CalendarDate from '../../../calendar/CalendarDate';
 import CalendarDay from '../../../calendar/CalendarDay';
 import CalendarHeader from '../../../calendar/CalendarHeader';
-import { getMonthData } from './calendarDateFn';
+import { getMonthData } from '../../../../util/calendarUtils';
 
 interface Props {
   toggleRef: RefObject<HTMLDivElement>;

FE/airbnb/src/components/header/form/guestToggle/GuestColumn.tsx

@@ -2,7 +2,7 @@ import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { ReactComponent as MinusBtn } from '../../../../assets/svg/Property 1=minus-circle.svg';
 import { ReactComponent as PlusBtn } from '../../../../assets/svg/Property 1=plus-circle.svg';
-import { guestState } from '../../../../recoil/headerAtom';
+import { guestState } from '../../../../recoilStore/headerAtom';
 
 interface Props {
   guestData: {

FE/airbnb/src/components/header/form/priceBar/PriceBar.tsx

@@ -1,17 +1,18 @@
 import { MouseEvent, RefObject, useState } from 'react';
 import styled from 'styled-components';
-import { getNumberWithComma } from '../../../util/util';
+import { getNumberWithComma } from '../../../../util/tsUtils';
 import PriceChart from './PriceChart';
 import { btnPositionType, priceSectionType } from './priceType';
 import { ReactComponent as PauseBtn } from '../../../../assets/svg/Property 1=pause-circle.svg';
 import { priceData as sampleData } from './sampleData';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { throttle } from '../../../../util/util';
 import {
   fetchPrice,
   pauseBtnLastPositionState,
   pauseBtnPositionState,
   priceState,
-} from '../../../../recoil/headerAtom';
+} from '../../../../recoilStore/headerAtom';
 
 export const PRICE_DATA = {
   WIDTH: 365,
@@ -29,11 +30,11 @@ const PriceBar = ({ toggleRef }: Props) => {
   const [isBtnDown, setIsBtnDown] = useState(false);
   const [downBtnType, setDownBtnType] = useState({ left: false, right: false });
   const [clickPosition, setClickPosition] = useState(0);
+  const [priceData, setPriceData] = useState(sampleData);
+  // const priceData = useRecoilValue(fetchPrice);
   const [btnPosition, setBtnPosition] = useRecoilState(pauseBtnPositionState);
   const [btnLastPosition, setBtnLastPosition] = useRecoilState(pauseBtnLastPositionState);
   const [priceRange, setPriceRange] = useRecoilState(priceState);
-  const [priceData, setPriceData] = useState(sampleData);
-  // const priceData = useRecoilValue(fetchPrice);
 
   console.log(priceData);
   const minPrice = getNumberWithComma(priceRange.min);
@@ -76,6 +77,8 @@ const PriceBar = ({ toggleRef }: Props) => {
     }
   };
 
+  const throttleHandleMouseMove = throttle(handleMouseMove, 10);
+
   const handleMouseUp = (e: MouseEvent): void => {
     if (!isBtnDown) return;
     setIsBtnDown(false);
@@ -91,7 +94,8 @@ const PriceBar = ({ toggleRef }: Props) => {
       ref={toggleRef}
       btnPosition={btnPosition}
       onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
+      // onMouseMove={handleMouseMove}
+      onMouseMove={throttleHandleMouseMove}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp}
     >

FE/airbnb/src/components/header/form/priceBar/PriceChart.tsx

@@ -42,13 +42,13 @@ const PriceChart = ({ priceSection }: Props) => {
 
     ctx.moveTo(prevX, prevY);
 
-    for (let i = 1; i < dots.length; i++) {
-      const cx = (prevX + dots[i].x) / 2;
-      const cy = (prevY + dots[i].y) / 2;
+    dots.forEach((dot) => {
+      const cx = (prevX + dot.x) / 2;
+      const cy = (prevY + dot.y) / 2;
       ctx.quadraticCurveTo(prevX, prevY, cx, cy);
-      prevX = dots[i].x;
-      prevY = dots[i].y;
-    }
+      prevX = dot.x;
+      prevY = dot.y;
+    });
 
     ctx.lineTo(prevX, prevY);
     ctx.fill();

FE/airbnb/src/components/header/tab/HeaderTab.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useRecoilState } from 'recoil';
-import { tabSelectedState } from '../../../recoil/headerAtom';
+import { tabSelectedState } from '../../../recoilStore/headerAtom';
 
 interface Props {
   title: string;

FE/airbnb/src/components/map/Map.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { roomsState } from '../../recoil/reserveRoomAtom';
+import { roomsState } from '../../recoilStore/reserveRoomAtom';
 import MapLabel from './MapLabel';
 const { kakao } = window;
 interface Props {

FE/airbnb/src/components/reserveHeader/ReserveHeaderForm.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { reserveInfoSelector } from '../../recoil/headerAtom';
+import { reserveInfoSelector } from '../../recoilStore/headerAtom';
 import FormCheckIn from '../header/form/FormCheckIn';
 import FormCheckOut from '../header/form/FormCheckOut';
 import FormGuest from '../header/form/FormGuest';

FE/airbnb/src/components/reserveRoomList/ReserveRoomList.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { roomsState } from '../../recoil/reserveRoomAtom';
+import { roomsState } from '../../recoilStore/reserveRoomAtom';
 import ReserveRoom from './ReserveRoom';
 import { roomType } from './roomType';
 

FE/airbnb/src/components/reserveRoomList/ReserveRoomPrice.tsx

@@ -1,8 +1,8 @@
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { selectDateState } from '../../recoil/calendarAtom';
-import { getBetweenDays } from '../header/form/calendar/calendarDateFn';
-import { getNumberWithComma } from '../util/util';
+import { selectDateState } from '../../recoilStore/calendarAtom';
+import { getBetweenDays } from '../../util/calendarUtils';
+import { getNumberWithComma } from '../../util/tsUtils';
 import { roomType } from './roomType';
 interface Props {
   roomData: roomType;

FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx

@@ -6,7 +6,6 @@ import ReserveFormHeader from './ReserveFormHeader';
 import ReserveFormInfo from './ReserveFormInfo';
 import ReserveFromPrice from './ReserveFromPrice';
 import { createPortal } from 'react-dom';
-import usePortal from '../../../hooks/usePortal';
 
 interface Props {
   toggleRef: RefObject<HTMLDivElement>;