Merge pull request #734 from woowacourse-teams/develop

release 1.9.1

front/src/App.tsx

@@ -19,7 +19,6 @@ const CoachMain = lazy(() => import('@pages/CoachMain'));
 const NotFound = lazy(() => import('@pages/NotFound'));
 const CrewSheet = lazy(() => import('@pages/CrewSheet'));
 const CoachSheet = lazy(() => import('@pages/CoachSheet'));
-const HistorySheet = lazy(() => import('@pages/HistorySheet'));
 const CrewHistory = lazy(() => import('@pages/CrewHistory'));
 const CoachHistory = lazy(() => import('@pages/CoachHistory'));
 const CoachProfile = lazy(() => import('@pages/CoachProfile'));
@@ -50,7 +49,6 @@ const App = () => {
                 <Route path={ROUTES.COACH_HISTORY} element={<CoachHistory />} />
                 <Route path={ROUTES.COACH_PROFILE} element={<CoachProfile />} />
                 <Route path={`${ROUTES.COACH_SHEET}/:id`} element={<CoachSheet />} />
-                {/* <Route path={`${ROUTES.HISTORY_SHEET}/:id`} element={<HistorySheet />} /> */}
               </Route>
             </Routes>
           </Suspense>

front/src/AuthRoute.tsx

@@ -3,7 +3,7 @@ import { Navigate, Outlet } from 'react-router-dom';
 
 import NotFound from '@pages/NotFound';
 import { UserStateContext } from '@context/UserProvider';
-import { UserRole } from '@typings/domain';
+import type { UserRole } from '@typings/domain';
 import { ROUTES } from './constants';
 
 interface AuthRouteProps {

front/src/Portal.tsx

@@ -1,11 +1,11 @@
 import reactDom from 'react-dom';
+import type { PropsWithRequiredChildren } from '@typings/utils';
 
 interface PortalProps {
   id: string;
-  children: React.ReactNode;
 }
 
-const Portal = ({ id, children }: PortalProps) => {
+const Portal = ({ id, children }: PropsWithRequiredChildren<PortalProps>) => {
   const element = document.getElementById(id) as HTMLElement;
   return reactDom.createPortal(children, element);
 };

front/src/api/coach.ts

@@ -1,5 +1,5 @@
 import { api } from '@api/index';
-import { Coach, DaySchedule, CrewListMap, CoachHistory, CoachData } from '@typings/domain';
+import type { Coach, DaySchedule, CrewListMap, CoachHistory, CoachData } from '@typings/domain';
 
 const getCoaches = () => api.get<Coach[]>(`/api/v2/coaches`);
 

front/src/api/crew.ts

@@ -1,5 +1,11 @@
 import { api } from '@api/index';
-import { CrewHistory, HistoryList, Reservation, Sheets, ReservationByCoach } from '@typings/domain';
+import type {
+  CrewHistory,
+  HistoryList,
+  Reservation,
+  Sheets,
+  ReservationByCoach,
+} from '@typings/domain';
 
 const getCrewHistoriesByMe = () => api.get<CrewHistory[]>('/api/v2/crews/me/reservations');
 

front/src/api/question.ts

@@ -1,5 +1,5 @@
 import { api } from '@api/index';
-import { Question, Questions } from '@typings/domain';
+import type { Question, Questions } from '@typings/domain';
 
 const getQuestions = () => api.get<Questions>(`/api/v2/questions`);
 

front/src/components/Board/index.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 
 import EmptyContent from '@components/EmptyContent';
+import type { PropsWithRequiredChildren } from '@typings/utils';
 import * as S from './styles';
 
 interface BoardProps {
-  children: React.ReactNode;
   isSelected?: boolean;
   title: string;
   color: string;
@@ -13,7 +13,15 @@ interface BoardProps {
   onDrop: (e: React.DragEvent<HTMLDivElement>) => Promise<void>;
 }
 
-const Board = ({ children, isSelected, title, color, length, status, onDrop }: BoardProps) => {
+const Board = ({
+  children,
+  isSelected,
+  title,
+  color,
+  length,
+  status,
+  onDrop,
+}: PropsWithRequiredChildren<BoardProps>) => {
   const [isDraggingOver, setIsDraggingOver] = useState(false);
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {

front/src/components/Card/index.tsx

@@ -1,5 +1,9 @@
+import { useRef } from 'react';
+
+import useIntersectionObserver from '@hooks/useIntersectionObserver';
 import * as S from './styles';
 import RequestIcon from '@assets/request.svg';
+import PersonIcon from '@assets/person.svg';
 
 interface CardProps {
   image: string;
@@ -20,14 +24,18 @@ const Card = ({
   onClick,
   isPreview,
 }: CardProps) => {
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const entry = useIntersectionObserver(imgRef, { rootMargin: '5%' });
+  const isVisible = entry?.isIntersecting;
+
   return (
     <S.CardContainer onClick={onClick} isPossible={!!isPossible} isPreview={!!isPreview}>
       <S.IconWrapper>
         <img id="request" src={RequestIcon} alt="티타임 요청 보내기" />
       </S.IconWrapper>
       <S.CardWrapper>
         <S.ImageWrapper>
-          <img src={image} alt={`${name} 카드 이미지`} />
+          <img src={isVisible ? image : PersonIcon} alt={`${name} 카드 이미지`} ref={imgRef} />
         </S.ImageWrapper>
         <span>{name}</span>
         <p>{description}</p>

front/src/components/Card/styles.ts

@@ -1,4 +1,5 @@
 import styled, { css, keyframes } from 'styled-components';
+import { FadeIn } from '@styles/common';
 
 const Refresh = keyframes`
  0% { 
@@ -132,6 +133,7 @@ const ImageWrapper = styled.div`
     width: 100px;
     height: 100px;
     border-radius: 50%;
+    animation: ${FadeIn} 0.5s;
   }
 
   @media screen and (${({ theme }) => theme.devices.tablet}) {
@@ -183,7 +185,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const SkeletonContainer = styled(CardContainer)`
-  background-image: linear-gradient(90deg, #e0e0e0 0px, #ededed 30px, #e0e0e0 60px);
+  background-image: linear-gradient(90deg, #e0e0e0 0px, #ebebeb 30px, #e0e0e0 60px);
   background-color: ${({ theme }) => theme.colors.GRAY_150};
   border: 2px solid ${({ theme }) => theme.colors.GRAY_250};
   animation: ${Refresh} 2s infinite ease-out;

front/src/components/Conditional/index.tsx

@@ -1,9 +1,10 @@
+import type { PropsWithRequiredChildren } from '@typings/utils';
+
 interface ConditionalProps {
-  children: React.ReactNode;
   condition: boolean;
 }
 
-const Conditional = ({ children, condition }: ConditionalProps) => {
+const Conditional = ({ children, condition }: PropsWithRequiredChildren<ConditionalProps>) => {
   return <>{condition && children}</>;
 };
 

front/src/components/DateBox/index.tsx

@@ -3,14 +3,14 @@ import type { TimeSchedule } from '@typings/domain';
 import * as S from './styles';
 
 interface DateBoxProps {
-  date?: number;
-  daySchedule?: TimeSchedule[];
-  onClick?: () => void;
-  selectedDay?: number | null;
-  currentDay?: Date;
-  isMultipleSelected?: boolean;
-  isCoach?: boolean;
-  isPastDay?: boolean;
+  date: number;
+  daySchedule: TimeSchedule[];
+  onClick: () => void;
+  selectedDay: number | null;
+  currentDay: Date;
+  isMultipleSelected: boolean;
+  isCoach: boolean;
+  isPastDay: boolean;
 }
 
 const DateBox = ({
@@ -22,7 +22,7 @@ const DateBox = ({
   isCoach,
   isMultipleSelected,
   isPastDay,
-}: DateBoxProps) => {
+}: Partial<DateBoxProps>) => {
   const isSelected = (daySchedule.length > 0 || isCoach) && selectedDay === date;
   const isToday = currentDay?.getTime() === getCurrentFullDate().getTime();
   const hasSchedule =

front/src/components/Dropdown/index.tsx

@@ -1,11 +1,11 @@
+import type { PropsWithRequiredChildren } from '@typings/utils';
 import * as S from './styles';
 
 interface DropdownProps {
   isActive: boolean;
-  children: React.ReactNode;
 }
 
-const Dropdown = ({ isActive, children }: DropdownProps) => {
+const Dropdown = ({ isActive, children }: PropsWithRequiredChildren<DropdownProps>) => {
   return <S.ContentList isActive={isActive}>{children}</S.ContentList>;
 };
 

front/src/components/Filter/index.tsx

@@ -1,11 +1,11 @@
+import type { PropsWithRequiredChildren } from '@typings/utils';
 import * as S from './styles';
 
 interface FilterProps {
-  children: React.ReactNode;
-  onFilterStatus: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onFilter: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
-const Filter = ({ children, onFilterStatus }: FilterProps) => {
-  return <S.Select onChange={onFilterStatus}>{children}</S.Select>;
+const Filter = ({ children, onFilter }: PropsWithRequiredChildren<FilterProps>) => {
+  return <S.Select onChange={onFilter}>{children}</S.Select>;
 };
 
 export default Filter;

front/src/components/Frame/index.tsx

@@ -1,10 +1,7 @@
+import type { PropsWithRequiredChildren } from '@typings/utils';
 import * as S from './styles';
 
-interface FrameProps {
-  children: React.ReactNode;
-}
-
-const Frame = ({ children }: FrameProps) => {
+const Frame = ({ children }: PropsWithRequiredChildren) => {
   return <S.Container>{children}</S.Container>;
 };
 

front/src/components/Modal/index.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
+
 import Portal from '../../Portal';
+import type { PropsWithRequiredChildren } from '@typings/utils';
 import * as S from './styles';
 
 import CloseIcon from '@assets/close.svg';
 
 interface ModalProps {
   icon?: string;
   title: string;
-  children: React.ReactNode;
   firstButtonName: string;
   secondButtonName: string;
   closeModal: () => void;
@@ -24,7 +25,7 @@ const Modal = ({
   closeModal,
   onClickFirstButton,
   onClickSecondButton,
-}: ModalProps) => {
+}: PropsWithRequiredChildren<ModalProps>) => {
   const handleClickDimmer = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       closeModal();

front/src/components/ReservationInfo/index.tsx

@@ -5,22 +5,22 @@ import ScheduleIcon from '@assets/schedule.svg';
 import ClockIcon from '@assets/clock.svg';
 
 interface ReservationInfoProps {
-  image?: string;
-  name?: string;
-  dateTime?: string;
+  image: string;
+  name: string;
+  dateTime: string;
 }
 
-const ReservationInfo = ({ image, name, dateTime }: ReservationInfoProps) => {
+const ReservationInfo = ({ image, name, dateTime }: Partial<ReservationInfoProps>) => {
   return (
     <>
       <S.Image src={image} alt={`${name} 프로필 이미지`} />
       <S.Name>{name}</S.Name>
       <S.DateWrapper>
-        <img src={ScheduleIcon} alt="일정 아이콘" />
+        <img src={ScheduleIcon} alt="" />
         <span>{getMonthDate(dateTime as string)}</span>
       </S.DateWrapper>
       <S.DateWrapper>
-        <img src={ClockIcon} alt="시계 아이콘" />
+        <img src={ClockIcon} alt="" />
         <span>{getHourMinutes(dateTime as string)}</span>
       </S.DateWrapper>
     </>

front/src/components/ScheduleTimeList/index.tsx

@@ -20,17 +20,17 @@ const ScheduleTimeList = ({
   return (
     <S.TimeListContainer>
       <S.ScrollContainer>
-        {daySchedule.map((schedule) => {
-          const time = getHourMinutes(schedule.dateTime);
-          const isPastTime = new Date() > getDateTime(schedule.dateTime);
+        {daySchedule.map(({ id, dateTime, isPossible, isSelected }) => {
+          const time = getHourMinutes(dateTime);
+          const isPastTime = new Date() > getDateTime(dateTime);
 
           return (
             <S.ScheduleTimeBox
-              key={schedule.id}
-              isPossible={schedule.isPossible}
+              key={id}
+              isPossible={isPossible}
               isPastTime={isPastTime}
-              isSelected={schedule.isSelected ? true : false}
-              onClick={() => onClickTime(schedule.dateTime)}
+              isSelected={isSelected ? true : false}
+              onClick={() => onClickTime(dateTime)}
             >
               {time}
             </S.ScheduleTimeBox>

front/src/components/Sheet/index.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 import Textarea from '@components/Textarea';
-import { Sheets } from '@typings/domain';
 import { ERROR_MESSAGE, MAX_LENGTH } from '@constants/index';
+import type { Sheets } from '@typings/domain';
 import * as S from './styles';
 
 interface SheetProps {

front/src/components/Title/index.tsx

@@ -4,17 +4,23 @@ import * as S from './styles';
 interface TitleProps {
   text: string;
   highlightText?: string;
-  hightlightColor?: string;
+  highlightColor?: string;
   extraText?: string;
   tooltipText?: string;
 }
 
-const Title = ({ text, highlightText, extraText, hightlightColor, tooltipText }: TitleProps) => {
+const Title = ({
+  text,
+  highlightText = '',
+  extraText = '',
+  highlightColor = 'transparent',
+  tooltipText = '',
+}: TitleProps) => {
   return (
     <S.TitleWrapper role="status" aria-label={`${text} ${highlightText} ${extraText}`}>
       <S.Title aria-hidden="true">{text}</S.Title>
       {highlightText && (
-        <S.HighLightText aria-hidden="true" hightlightColor={hightlightColor}>
+        <S.HighLightText aria-hidden="true" highlightColor={highlightColor}>
           {highlightText}
         </S.HighLightText>
       )}

front/src/components/Title/styles.ts

@@ -20,10 +20,10 @@ const Title = styled.span`
   }
 `;
 
-const HighLightText = styled(Title)<{ hightlightColor?: string }>`
+const HighLightText = styled(Title)<{ highlightColor?: string }>`
   margin: 0 10px;
-  background: ${({ theme }) =>
-    `linear-gradient(to top, ${theme.colors.YELLOW_400} 50%, transparent 50%)`};
+  background: ${({ highlightColor }) =>
+    `linear-gradient(to top, ${highlightColor} 50%, transparent 50%)`};
 `;
 
 export { TitleWrapper, Title, HighLightText };

front/src/context/BoardModeProvider.tsx

@@ -1,19 +1,20 @@
 import { createContext, useState } from 'react';
 import { BOARD } from '@constants/index';
-import { BoardValue } from '@typings/domain';
+import type { BoardName } from '@typings/domain';
+import type { PropsWithRequiredChildren } from '@typings/utils';
 
 type BoardContextType = (e: React.MouseEvent<HTMLElement>) => void;
 
-export const BoardStateContext = createContext<BoardValue>(BOARD.BEFORE_APPROVED);
+export const BoardStateContext = createContext<BoardName>(BOARD.BEFORE_APPROVED);
 export const BoardChangeContext = createContext<BoardContextType>(() => null);
 
-const BoardProvider = ({ children }: { children: React.ReactNode }) => {
-  const [selectedBoard, setSelectedBoard] = useState<BoardValue>(BOARD.BEFORE_APPROVED);
+const BoardProvider = ({ children }: PropsWithRequiredChildren) => {
+  const [selectedBoard, setSelectedBoard] = useState<BoardName>(BOARD.BEFORE_APPROVED);
 
   const changeBoard = (e: React.MouseEvent<HTMLElement>) => {
     const target = e.target as HTMLElement;
     if (target.tagName !== 'LI') return;
-    setSelectedBoard(target.id as BoardValue);
+    setSelectedBoard(target.id as BoardName);
   };
 
   return (