🎯 모킹 서버를 통해 리뷰 기능을 제작하고, 드랍다운, 탭, 토스트, 모달, 무한 스크롤까지 다양한 UI를 적용시킵니다.

📗 Today I Learned

Mock Service Worker

실제 API 서버 없이도 가짜(Mock) 응답을 만들어주는 툴입니다. MSW를 사용하는 이유는 다음과 같습니다.

• 서버 아직 안 만들어졌는데, 프론트엔드 개발을 미리 하기 위해서

• 백엔드 다운되거나 느릴 때 개발 · 디버깅 속도를 빠르게 하기 위해서

• 테스트 환경에서 실제 네트워크 없이 응답 시뮬레이션 하기 위해서

✨ chrome 기준 DevTools → Application → Service Workers → “Bypass for network” 체크가 해제되어 있어야 MSW가 작동합니다.

설치 방법

msw 라이브러리를 설치합니다.

npm install msw@latest --save-dev

서비스 워커 파일( mockServiceWorker.js )을 생성합니다.

npx msw init ./public --save

사용 방법

1️⃣ reviews.ts에서 가짜 리뷰 응답(Mock Response)을 정의합니다.

// reviews.ts
import { BookReviewItem } from '@/models/book.model';
import { HttpResponse, http } from 'msw';
import { fakerKO as faker } from '@faker-js/faker';

const mockReviewData: BookReviewItem[] = Array.from({ length: 8 }).map(
  (_, index) => ({
    id: index,
    userName: `${faker.person.lastName()}${faker.person.firstName()}`,
    content: faker.lorem.paragraph(),
    createdAt: faker.date.past().toISOString(),
    score: faker.number.int({ min: 1, max: 5 }),
  })
);

export const reviewsById = http.get(
  'http://localhost:9999/reviews/:bookId',
  () => {
    return HttpResponse.json(mockReviewData, {
      status: 200,
    });
  }
);

export const addReview = http.post(
  'http://localhost:9999/reviews/:bookId',
  () => {
    return HttpResponse.json(
      {
        message: '리뷰가 등록되었습니다.',
      },
      {
        status: 200,
      }
    );
  }
);

• 실제 API가 없을 때 MSW로 요청을 가로채서 가짜 데이터를 돌려줍니다.
  (/reviews/:bookId에 대한 백엔드 API가 없기 때문에 mock 서버를 이용합니다.)

• Faker.js 라이브러리의 랜덤 이름, 내용, 날짜, 평점으로 가짜 리뷰 목록을 생성하였습니다.

🤔 Array.from({ length: n })은 어떤 값을 출력할까?

Array.from({ length: 3 })은 [undefined, undefined, undefined]인 길이가 3이고, 각 칸은 undefined인 배열로 만들어집니다.

그러므로 Array.from({ length: 3 }).map((_, index) => ({ id: index, name: 'Item',}));은
[ { id: 0, name: 'Item' }, { id: 1, name: 'Item' }, { id: 2, name: 'Item' } ] 으로 나타납니다.

2️⃣ browser.ts 에서 setupWorker(...handlers)을 호출하여 Mock 서버 핸들러를 등록합니다.

// browser.ts
import { setupWorker } from 'msw/browser';
import { addReview, reviewsById } from './review';

const handlers = [reviewsById, addReview];

export const worker = setupWorker(...handlers);

• setupWorker는 브라우저에서 Service Worker를 통해 요청을 가로채는 역할을 합니다.

• 배열로 넘긴 핸들러들은 GET, POST 등 HTTP 메서드별로 동작합니다.

3️⃣ 개발 환경에서 worker.start()를 호출해 Mock 서버를 활성화합니다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

async function mountApp() {
  if (process.env.NODE_ENV === 'development') {
    const { worker } = require('./mock/browser');
    await worker.start();
  }

  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

mountApp();

• 배포환경에서는 development일 때만 mock 서버를 활성화합니다.

• Mock 서버가 준비되기 전에 App이 먼저 렌더링되면, API 요청이 서버로 보내질 수 있어서
  Mock 서버가 완전히 준비될 때까지 await으로 worker가 준비된 뒤에 App을 마운트합니다.

🤔 development는 어떻게 판단할까?

Node.js에서는 보통 환경 변수 NODE_ENV 를 기준으로 합니다.

NODE_ENV=development   # 개발 환경
NODE_ENV=production    # 배포 환경

4️⃣ review.api.ts에서 리뷰 API 요청 함수를 정의합니다. (실제 API와 동일한 인터페이스)

import { BookReviewItem, BookReviewItemWrite } from '@/models/book.model';
import { requestHandler } from './http';

export const fetchBookReview = async (bookId: string) => {
  return await requestHandler<BookReviewItem[]>('get', `/reviews/${bookId}`);
};

interface AddBookReviewResponse {
  message: string;
}

export const addBookReview = async (
  bookId: string,
  data: BookReviewItemWrite
) => {
  return await requestHandler<AddBookReviewResponse>(
    'post',
    `/reviews/${bookId}`
  );
};

5️⃣ useBook.ts 훅에서 리뷰 데이터를 요청하면, 실제 요청 대신 Mock 응답이 반환됩니다.

import { useEffect, useState } from 'react';
import {
  BookDetail,
  BookReviewItem,
  BookReviewItemWrite,
} from '../models/book.model';
import { useAlert } from './useAlert';
import { addBookReview, fetchBookReview } from '@/api/review.api';

export const useBook = (bookId: string | undefined) => {
  const [book, setBook] = useState<BookDetail | null>(null);
  const { showAlert } = useAlert();
  const [reviews, setReviews] = useState<BookReviewItem[]>([]);

 ...

  const addReview = (data: BookReviewItemWrite) => {
    if (!book) return;

    addBookReview(book.id.toString(), data).then((res) => {
      // fetchBookReview(book.id.toString()).then((reviews) => {
      //   setReviews(reviews);
      // });
      showAlert(res?.message);
    });
  };

  return { book, likeToggle, addToCart, cartAdded, reviews, addReview };
};

• 지금은 단순히 모양만 테스트하는 목적이라, 리뷰를 실제로 추가하지 않고 "리뷰 등록되었습니다!" 알림만 보여주는 방식입니다.

---

도서 리뷰 컴포넌트

book.model.ts

export interface BookReviewItem {
  id: number;
  userName: string;
  content: string;
  createdAt: string;
  score: number;
}

export type BookReviewItemWrite = Pick<BookReviewItem, 'content' | 'score'>;

• 도서 리뷰 아이템에 관한 타입을 정의합니다.

BookDetail.tsx

export default function BookDetail() {
  const { bookId } = useParams();
  const { book, likeToggle, reviews, addReview } = useBook(bookId);

  if (!book) return null;

  return (
    <StyledBookDetail>
      ....
      <div className='content'>
        <Title size='medium'>상세 설명</Title>
        <EllipsisBox lineLimit={2}>{book.detail}</EllipsisBox>
        <Title size='medium'>목차</Title>
        <p className='index'>{book.contents}</p>
        <Title size='medium'>리뷰</Title>
        <BookReview reviews={reviews} onAdd={addReview} />
      </div>
    </StyledBookDetail>
  );
}

• 도서 상세 페이지에 <BookReview> 컴포넌트를 추가하였습니다.

BookReview.tsx

import {
  BookReviewItemWrite,
  BookReviewItem as IBookReviewItem,
} from '@/models/book.model';
import styled from 'styled-components';
import BookReviewItem from './BookReviewItem';
import BookAddReview from './BookAddReview';

interface Props {
  reviews: IBookReviewItem[];
  onAdd: (data: BookReviewItemWrite) => void;
}

export default function BookReview({ reviews, onAdd }: Props) {
  return (
    <StyledBookReview>
      <BookAddReview onAdd={onAdd} />
      {reviews.map((review) => (
        <BookReviewItem key={review.id} review={review} />
      ))}
    </StyledBookReview>
  );
}

const StyledBookReview = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

• 리뷰 작성<BookAddReview>과 리스트<BookReviewItem>를 하나의 UI로 구성하였습니다.

BookReviewItem.tsx

import { BookReviewItem as IBookReviewItem } from '@/models/book.model';
import { Theme } from '@/style/theme';
import { FaStar } from 'react-icons/fa';
import styled from 'styled-components';

interface Props {
  review: IBookReviewItem;
}

const Star = (props: Pick<IBookReviewItem, 'score'>) => {
  return (
    <span className='star'>
      {Array.from({ length: props.score }, (_, index) => (
        <FaStar key={index} />
      ))}
    </span>
  );
};

export default function BookReviewItem({ review }: Props) {
  return (
    <StyledBookReviewItem>
      <header className='header'>
        <div>
          <span>{review.userName}</span>
          <Star score={review.score} />
        </div>
      </header>
      <div className='content'>
        <p>{review.content}</p>
      </div>
    </StyledBookReviewItem>
  );
}

const StyledBookReviewItem = styled.div`
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: ${({ theme }) => (theme as Theme).color.secondary};
    padding: 0;

    .star {
      padding: 0 0 0 8px;
      svg {
        fill: ${({ theme }) => (theme as Theme).color.primary};
      }
    }
  }

  .content {
    p {
      font-size: 1rem;
      line-height: 1.5;
      margin: 0;
    }
  }
`;

• 평점에 따라 별 개수를 나타내는 컴포넌트를 만들고 리뷰하는 작성자, 점수, 내용들을 표기하게 하였습니다.

BookAddReview.tsx

import { BookReviewItemWrite } from '@/models/book.model';
import { useForm } from 'react-hook-form';
import styled from 'styled-components';
import Button from '../common/Button';
import { Theme } from '@/style/theme';

interface Props {
  onAdd: (data: BookReviewItemWrite) => void;
}

export default function BookAddReview({ onAdd }: Props) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<BookReviewItemWrite>();

  return (
    <StyledBookAddReview>
      <form onSubmit={handleSubmit(onAdd)}>
        <fieldset>
          <textarea {...register('content', { required: true })}></textarea>
          {errors.content && (
            <p className='error-text'>리뷰 내용을 입력해주세요.</p>
          )}
        </fieldset>

        <div className='submit'>
          <fieldset>
            <select
              {...register('score', { required: true, valueAsNumber: true })}
            >
              <option value='1'>1점</option>
              <option value='2'>2점</option>
              <option value='3'>3점</option>
              <option value='4'>4점</option>
              <option value='5'>5점</option>
            </select>
          </fieldset>
          <Button size='medium' scheme='primary'>
            작성하기
          </Button>
        </div>
      </form>
    </StyledBookAddReview>
  );
}

const StyledBookAddReview = styled.div`
  form {
    display: flex;
    flex-direction: column;
    gap: 6px;

    fieldset {
      border: 0;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: end;

      .error-text {
        color: red;
        padding: 0;
        margin: 0;
      }
    }

    textarea {
      width: 100%;
      height: 100px;
      border: 1px solid ${({ theme }) => (theme as Theme).color.border};
      border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
      padding: 12px;
    }

    .submit {
      display: flex;
      justify-content: end;
      gap: 12px;
    }
  }
`;

• react-hook-form 폼 상태 관리용 훅을 이용해서 HTML <form> 안에서 입력값들을 편하게 다루고, 검증도 쉽게 할 수 있도록 도와줍니다.

결과 화면

---

드랍다운

드랍다운(dropdown)은 클릭하거나 호버했을 때 아래로 펼쳐지는 메뉴나 리스트를 말합니다.

Dropdown.tsx

import { Theme } from '@/style/theme';
import { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

interface Props {
  children: React.ReactNode;
  toggleButton: React.ReactNode;
  isOpen?: boolean;
}

export default function Dropdown({
  children,
  toggleButton,
  isOpen = false,
}: Props) {
  const [open, setOpen] = useState(isOpen);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleOutsideClick(event: MouseEvent) {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleOutsideClick);
    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, []);

  return (
    <StyledDropdown $open={open} ref={dropdownRef}>
      <button className='toggle' onClick={() => setOpen(!open)}>
        {toggleButton}
      </button>
      {open && <div className='panel'>{children}</div>}
    </StyledDropdown>
  );
}

interface StyledDropdownProps {
  $open: boolean;
}

const StyledDropdown = styled.div<StyledDropdownProps>`
  position: relative;

  button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;

    svg {
      width: 30px;
      height: 30px;
      fill: ${({ theme, $open }) =>
        $open ? (theme as Theme).color.primary : (theme as Theme).color.text};
    }
  }

  .panel {
    position: absolute;
    top: 40px;
    right: 0;
    padding: 16px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
    z-index: 100;
  }
`;

• 클릭 시에 dropdown을 보여주고, dropdown 바깥을 클릭해서ref.current.contains(e.target)이 아니면 닫아지도록 합니다.

🤔 useEffect 의존성 배열을 [] 으로 적는 이유는 무엇일까?

ref.current는 그냥 리액트가 아닌 일반 JS 객체처럼 작동하는 저장소이기 때문에 DOM을 직접 건드릴 수 있고 current가 바뀌어도 리액트에선 렌더가 안 되기 때문에 의존성 배열을 넣을 필요가 없습니다.

🤔 스타일 props 에 $을 붙이는 이유는 무엇일까?

styled-components에서는 컴포넌트에 props를 넘기면
기본적으로 그 props가 HTML DOM에도 전달되기 때문에 $을 붙이게 됩니다.

 <StyledDropdown $open={open}>
 내용
 </StyledDropdown>

실제 렌더링된 HTML은 이렇게 표시됩니다.

<div>
  메뉴 내용
</div>

Header.tsx

import styled from 'styled-components';
import { light, Theme } from '../../style/theme';
import logo from '../../assets/images/logo.png';
import { FaSignInAlt, FaRegUser, FaUserCircle } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import { useCategory } from '../../hooks/useCategory';
import { useAuthStore } from '../../store/authStore';
import Dropdown from './Dropdown';
import ThemeSwitcher from '../header/ThemeSwitcher';

export default function Header() {
  const { category } = useCategory();
  const { isLoggedIn, storeLogout } = useAuthStore();

  return (
    <HeaderStyle>
    ...
      <nav className='auth'>
        <Dropdown toggleButton={<FaUserCircle />}>
          {isLoggedIn && (
            <ul>
              <li>
                <Link to='/cart'>장바구니</Link>
              </li>
              <li>
                <Link to='/orderlist'>주문내역</Link>
              </li>
              <li>
                <button onClick={storeLogout}>로그아웃</button>
              </li>
            </ul>
          )}
          {!isLoggedIn && (
            <ul>
              <li>
                <Link to='/login'>
                  <FaSignInAlt />
                  로그인
                </Link>
              </li>
              <li>
                <Link to='/signup'>
                  <FaRegUser />
                  회원가입
                </Link>
              </li>
            </ul>
          )}
          <ThemeSwitcher />
        </Dropdown>
      </nav>
    </HeaderStyle>
  );
}

• Header에 Dropdown 컴포넌트를 추가합니다.

결과 화면

---

탭

탭(Tab)은 하나의 화면 안에서 여러 내용을 구분된 영역으로 나눠서, 버튼처럼 클릭하면 내용이 바뀌는 UI를 말합니다.

Tabs.tsx

import { Theme } from '@/style/theme';
import React, { useState } from 'react';
import styled from 'styled-components';

interface TabProps {
  title: string;
  children: React.ReactNode;
}

function Tab({ children }: TabProps) {
  return <>{children}</>;
}

interface TabsProps {
  children: React.ReactNode;
}

function Tabs({ children }: TabsProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const tabs = React.Children.toArray(
    children
  ) as React.ReactElement<TabProps>[];

  return (
    <StyledTabs>
      <div className='tab-header'>
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => setActiveIndex(index)}
            className={activeIndex === index ? 'active' : ''}
          >
            {tab.props.title}
          </button>
        ))}
      </div>
      <div className='tab-content'>{tabs[activeIndex]}</div>
    </StyledTabs>
  );
}

const StyledTabs = styled.div`
  .tab-header {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #ddd;

    button {
      border: none;
      background: #ddd;
      cursor: pointer;
      font-size: 1.25rem;
      font-weight: bold;
      color: ${({ theme }) => (theme as Theme).color.primary};
      border-radius: ${({ theme }) => (theme as Theme).borderRadius.default}
        ${({ theme }) => (theme as Theme).borderRadius.default} 0 0;
      padding: 12px 24px;

      &.active {
        color: #fff;
        background: ${({ theme }) => (theme as Theme).color.primary};
      }
    }
  }

  .tab-content {
    padding: 24px 0;
  }
`;

export { Tabs, Tab };

• activeIndex를 통해 동적인 탭 구조를 만들고, 현재 활성화된 탭에 따라 컨텐츠를 조건부 렌더링하게 하였습니다.

BookDetail.tsx

....

export default function BookDetail() {
  const { bookId } = useParams();
  const { book, likeToggle, reviews, addReview } = useBook(bookId);

  if (!book) return null;

  return (
    <StyledBookDetail>
     ...
      <div className='content'>
        <Tabs>
          <Tab title='상세 설명'>
            <Title size='medium'>상세 설명</Title>
            <EllipsisBox lineLimit={2}>{book.detail}</EllipsisBox>
          </Tab>
          <Tab title='목차'>
            <Title size='medium'>목차</Title>
            <p className='index'>{book.contents}</p>
          </Tab>
          <Tab title='리뷰'>
            <Title size='medium'>리뷰</Title>
            <BookReview reviews={reviews} onAdd={addReview} />
          </Tab>
        </Tabs>
      </div>
    </StyledBookDetail>
  );
}

• 도서 상세 페이지에 탭을 적용시켰습니다.

결과화면

---

토스트

토스트(Toast) UI는 화면 한쪽에 잠깐 뜨는 알림 메시지를 말합니다.

toastStore.ts

import { create } from 'zustand';

export type ToastType = 'info' | 'error';

export interface ToastItem {
  id: number;
  message: string;
  type: ToastType;
}

interface ToastStoreState {
  toasts: ToastItem[];
  addToast: (message: string, type?: ToastType) => void;
  removeToast: (id: number) => void;
}

const useToastStore = create<ToastStoreState>((set) => ({
  toasts: [],
  addToast: (message, type = 'info') => {
    set((state) => ({
      toasts: [...state.toasts, { message, type, id: Date.now() }],
    }));
  },
  removeToast: (id) => {
    set((state) => ({
      toasts: state.toasts.filter((toast) => toast.id !== id),
    }));
  },
}));

export default useToastStore;

• addToast() : 토스트를 추가합니다.

• removeToast() : 토스트를 제거합니다.

🤔 왜 zustand로 전역 상태로 저장했을까?

여러 컴포넌트에서 자유롭게 토스트 추가 가능하도록 하기 위함입니다.

useToast.ts

import useToastStore from '@/store/toastStore';

export const useToast = () => {
  const showToast = useToastStore((state) => state.addToast);

  return { showToast };
};

• store 접근을 쉽게 만드는 custom hook으로 컴포넌트에서 깔끔하게 사용할 수 있게 됩니다.

useBook.ts

import { useEffect, useState } from 'react';
import {
  BookDetail,
  BookReviewItem,
  BookReviewItemWrite,
} from '../models/book.model';
import { fetchBook, likeBook, unlikeBook } from '../api/books.api';
import { useAuthStore } from '../store/authStore';
import { useAlert } from './useAlert';
import { addCart } from '../api/carts.api';
import { addBookReview, fetchBookReview } from '@/api/review.api';
import { useToast } from './useToast';

export const useBook = (bookId: string | undefined) => {
  const [book, setBook] = useState<BookDetail | null>(null);
  const { isLoggedIn } = useAuthStore();
  const { showAlert } = useAlert();
  const { showToast } = useToast();
  const [cartAdded, setCartAdded] = useState(false);
  const [reviews, setReviews] = useState<BookReviewItem[]>([]);

  const likeToggle = () => {
    if (!isLoggedIn) {
      showAlert('로그인이 필요합니다.');
      return;
    }

    if (!book) return;

    if (book.liked) {
      unlikeBook(book.id).then(() => {
        setBook({
          ...book,
          liked: false,
          likes: book.likes - 1,
        });
        showToast('좋아요가 취소되었습니다.');
      });
    } else {
      likeBook(book.id).then(() => {
        setBook({
          ...book,
          liked: true,
          likes: book.likes + 1,
        });
        showToast('좋아요가 추가되었습니다.');
      });
    }
  };

 ...

  return { book, likeToggle, addToCart, cartAdded, reviews, addReview };
};

• useToast를 추가하여 줍니다.

ToastContainer.tsx

import useToastStore from '@/store/toastStore';
import styled from 'styled-components';
import Toast from './Toast';

export default function ToastContainer() {
  const toasts = useToastStore((state) => state.toasts);
  return (
    <StyledToastContainer>
      {toasts.map((toast) => (
        <Toast
          key={toast.id}
          id={toast.id}
          message={toast.message}
          type={toast.type}
        />
      ))}
    </StyledToastContainer>
  );
}

const StyledToastContainer = styled.div`
  position: fixed;
  top: 32px;
  right: 24px;
  z-index: 100;

  display: flex;
  flex-direction: column;
  gap: 12px;
`;

• 전체 토스트 UI 묶음을 map()으로 돌려 하나씩 렌더링합니다.

Toast.tsx

import { useTimeout } from '@/hooks/useTimeout';
import useToastStore, { ToastItem } from '@/store/toastStore';
import { Theme } from '@/style/theme';
import { useEffect, useState } from 'react';
import { FaBan, FaInfoCircle, FaPlus } from 'react-icons/fa';
import styled from 'styled-components';

export const TOAST_REMOVE_DELAY = 3000;

export default function Toast({ id, message, type }: ToastItem) {
  const removeToast = useToastStore((state) => state.removeToast);
  const [isFadingOut, setIsFadingOut] = useState(false);

  const handleRemoveToast = () => {
    setIsFadingOut(true);
  };

  const handleAnimation = () => {
    if (isFadingOut) {
      removeToast(id);
    }
  };

  useTimeout(() => {
    setIsFadingOut(true);
  }, TOAST_REMOVE_DELAY);

  return (
    <StyledToast
      className={isFadingOut ? 'fade-out' : 'fade-in'}
      onAnimationEnd={handleAnimation}
    >
      {type === 'info' && <FaInfoCircle />}
      {type === 'error' && <FaBan />}
      <p>{message}</p>
      <button onClick={handleRemoveToast}>
        <FaPlus />
      </button>
    </StyledToast>
  );
}

const StyledToast = styled.div<{ theme: Theme }>`
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  &.fade-in {
    animation: fade-in 0.3s ease-in-out forwards;
  }
  &.fade-out {
    animation: fade-out 0.3s ease-in-out forwards;
  }

  background-color: ${({ theme }) => theme.color.secondary};
  padding: 12px;
  border-radius: ${({ theme }) => theme.borderRadius.default};

  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;

  p {
    color: ${({ theme }) => theme.color.text};
    line-height: 1;
    margin: 0;
    flex: 1;

    display: flex;
    align-items: end;
    gap: 4px;
  }

  button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;

    svg {
      transform: rotate(45deg);
    }
  }
`;

• useTimeout 훅을 사용해서 3초 후에 자동으로 fade-out 시작합니다.

• animationend 이벤트가 끝나면 상태에서 제거합니다.

• fade-in, fade-out : 상태값 isFadingOut에 따라 클래스가 바뀌고, opacity로 fade 효과를 줍니다.

App.tsx

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BookStoreThemeProvider>
        <RouterProvider router={router} />
        <ToastContainer />
      </BookStoreThemeProvider>
    </QueryClientProvider>
  );
}

• 어디서든 Toast를 불러올 수 있도록 앱에 넣어줍니다.

useTimeout.tsx

import { useEffect } from 'react';

export const useTimeout = (callback: () => void, delay: number) => {
  useEffect(() => {
    const timer = setTimeout(callback, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [callback, delay]);
};

• setTimeout()을 React 스타일로 안전하게 쓰도록 만든 커스텀 훅입니다.

🤔 왜 useTimeout()이 필요할까?

setTimeout()은 컴포넌트가 언마운트 되거나, 타이머가 중복될 경우에는 메모리 누수 위험이 있기 때문에 컴포넌트가 사라질 때 clearTimeout()으로 자동 정리하는 방식이 필요한 것입니다.

[예시 코드]

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setVisible(false)}>숨기기</button>
      {visible && <ToastMessage />}
    </div>
  );
}

function ToastMessage() {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log('👋 타이머 실행!');
    }, 3000);
  }, []);

  return <div>3초 후 메시지를 보여줄게!</div>;
}

ToastMessage 마운트됨 (setTimeout() 시작됨) → 사용자가 1초 뒤에 “숨기기” 버튼 클릭 → visible이 false가 되어 컴포넌트 언마운트 → 그런데 타이머는 아직 살아있음 → 3초 지나면 여전히 console.log() 실행하려고 함 → React 경고 발생하거나, 잡고 있는 리소스 때문에 메모리 누수 발생

결과 화면

---

모달

모달(Modal)은 화면 위에 겹쳐서 뜨는 창입니다.

Modal.tsx

import { Theme } from '@/style/theme';
import React, { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { FaPlus } from 'react-icons/fa';
import styled from 'styled-components';

interface Props {
  children: React.ReactNode;
  isOpen: boolean;
  onClose: () => void;
}

export default function Modal({ children, isOpen, onClose }: Props) {
  const modalRef = useRef<HTMLDivElement | null>(null);
  const [isFadingOut, setIsFadingOut] = useState(false);

  const handleClose = () => {
    setIsFadingOut(true);
  };

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
      handleClose();
    }
  };

  const handleKeydown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      handleClose();
    }
  };

  const handleAnimation = () => {
    if (isFadingOut) {
      onClose();
    }
  };

  useEffect(() => {
    if (isOpen) {
      setIsFadingOut(false);
      window.addEventListener('keydown', handleKeydown);
    } else {
      window.removeEventListener('keydown', handleKeydown);
    }

    return () => {
      window.removeEventListener('keydown', handleKeydown);
    };
  }, [isOpen]);

  if (!isOpen) return null;

  return createPortal(
    <StyledModal
      className={isFadingOut ? 'fade-out' : 'fade-in'}
      onClick={handleOverlayClick}
      onAnimationEnd={handleAnimation}
    >
      <div className='modal-body' ref={modalRef}>
        <div className='modal-contents'>
          {children}
          <div className='modal-close' onClick={handleClose}>
            <FaPlus />
          </div>
        </div>
      </div>
    </StyledModal>,
    document.body
  );
}

const StyledModal = styled.div`
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  &.fade-in {
    animation: fade-in 0.3s ease-in-out forwards;
  }
  &.fade-out {
    animation: fade-out 0.3s ease-in-out forwards;
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;

  .modal-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 56px 32px 32px;
    border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

    background-color: #fff;
    max-width: 80%;
  }

  .modal-close {
    border: none;
    background-color: transparent;
    cursor: pointer;

    position: absolute;
    top: 0;
    right: 0;
    padding: 12px;

    svg {
      width: 20px;
      height: 20px;
      transform: rotate(45deg);
    }
  }
`;

• createPortal : DOM 트리 바깥에서 모달을 렌더링합니다. 모달은 화면 최상단에 떠야 하기 때문에 <body>에 직접 붙여주는 게 좋습니다.

• useEffect : 모달이 열리면 ESC 키 이벤트 리스너를 추가하고, 닫히거나 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다.

• handleOverlayClick : 사용자가 모달 바깥을 클릭했을 때 닫히게 해줍니다.

• 닫기 누르면 바로 isOpen = false 하지 않고 → fade-out를 먼저 실행합니다. 애니메이션이 끝난 뒤(onAnimationEnd)에 onClose()를 호출합니다.

bookDetail.tsx

return (
    <StyledBookDetail>
      <header className='header'>
        <div className='content' onClick={() => setIsImgOpen(true)}>
          <img src={getImgSrc(book.img)} alt={book.title} />
        </div>
        <Modal isOpen={isImgOpen} onClose={() => setIsImgOpen(false)}>
          <img src={getImgSrc(book.img)} alt={book.title} />
        </Modal>
        ...
      </header>
      ...
    </StyledBookDetail>
  );
}

• 도서 상세 페이지에 모달 컴포넌트를 추가해주었습니다.

결과화면

---

무한 스크롤

react-query, IntersectionObserver를 활용하여 작성하였습니다.

useBooksInfinite.ts

import { useLocation } from 'react-router-dom';
import { fetchBooks } from '../api/books.api';
import { QUERYSTRING } from '../constants/querystring';
import { LIMIT } from '../constants/pagination';
import { useInfiniteQuery } from '@tanstack/react-query';

export const useBooks = () => {
  const location = useLocation();

  const getBooks = ({ pageParam }: { pageParam: number }) => {
    const params = new URLSearchParams(location.search);
    const category_id = params.get(QUERYSTRING.CATEGORY_ID)
      ? Number(params.get(QUERYSTRING.CATEGORY_ID))
      : undefined;
    const news = params.get(QUERYSTRING.NEWS) ? true : undefined;
    const limit = LIMIT;
    const currentPage = pageParam;

    return fetchBooks({
      category_id,
      news,
      limit,
      currentPage,
    });
  };

  const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
    queryKey: ['books', location.search],
    queryFn: ({ pageParam = 1 }) => getBooks({ pageParam }),
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      const isLastPage =
        Math.ceil(lastPage.pagination.totalCount / LIMIT) ===
        lastPage.pagination.currentPage;

      return isLastPage ? undefined : lastPage.pagination.currentPage + 1;
    },
  });

  const books = data ? data.pages.flatMap((page) => page.books) : [];
  const pagination = data ? data.pages[data.pages.length - 1].pagination : {};
  const isEmpty = books.length === 0;

  return {
    books,
    pagination,
    isEmpty,
    isBooksLoading: isFetching,
    fetchNextPage,
    hasNextPage,
  };
};

• 페이지 기반 데이터를 무한히 불러오는 로직을 관리합니다.

• useInfiniteQuery : 내부적으로 각 페이지를 따로 관리하면서 이어 붙이는 구조입니다.

• getNextPageParam : 다음 페이지 존재 여부를 판단합니다.

• fetchNextPage()가 호출되면 pageParam이 자동으로 증가합니다.

• data.pages : 각 페이지의 응답이 포함되어 있습니다.

• flatMap() : 모든 페이지의 책들을 한 배열로 합칩니다.

Books.tsx

import styled from 'styled-components';
import Title from '../components/common/Title';
import BooksFilter from '../components/books/BooksFilter';
import BooksList from '../components/books/BooksList';
import BooksEmpty from '../components/books/BooksEmpty';
import BooksViewSwitcher from '../components/books/BooksViewSwitcher';
import Loading from '@/components/common/Loading';
import { useBooksInfinite } from '@/hooks/useBooksInfinite';
import Button from '@/components/common/Button';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';

export default function Books() {
  const {
    books,
    pagination,
    isEmpty,
    isBooksLoading,
    fetchNextPage,
    hasNextPage,
  } = useBooksInfinite();

  const moreRef = useIntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
      loadMore();
    }
  });

  const loadMore = () => {
    if (!hasNextPage) return;
    fetchNextPage();
  };

  if (isEmpty) {
    return <BooksEmpty />;
  }

  if (!books || !pagination || isBooksLoading) {
    return <Loading />;
  }

  return (
    <>
      <Title size='large'>도서 검색 결과</Title>
      <StyledBooks>
        <div className='filter'>
          <BooksFilter />
          <BooksViewSwitcher />
        </div>
        <BooksList books={books} />
        {/* <Pagination pagination={pagination} /> */}
        <div className='more' ref={moreRef}>
          <Button
            size='medium'
            scheme='normal'
            onClick={() => fetchNextPage()}
            disabled={!hasNextPage}
          >
            {hasNextPage ? '더보기' : '마지막페이지'}
          </Button>
        </div>
      </StyledBooks>
    </>
  );
}

const StyledBooks = styled.div`
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 24px;

  .filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }
`;

• useBooks()를 대신해서 useBooksInfinite()를 사용하였습니다.

• useIntersectionObserver() : moreRef로 지정한 DOM 요소가 화면에 들어오면 loadMore()를 실행합니다. (스크롤 끝에 도달하면 자동으로 다음 페이지 요청)

useIntersectionObserver.ts

import { useEffect, useRef } from 'react';

type Callback = (entries: IntersectionObserverEntry[]) => void;

interface ObserverOptions {
  root?: Element | null;
  rootMargin?: string;
  threshold?: number | number[];
}

export const useIntersectionObserver = (
  callback: Callback,
  options?: ObserverOptions
) => {
  const targetRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(callback, options);

    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  });

  return targetRef;
};

• IntersectionObserver API를 React에서 쉽게 쓰도록 만든 커스텀 훅입니다.

• observer : 특정 요소가 뷰포트에 들어왔는지 감지합니다.

• observer.observe : 관찰 대상을 등록합니다.

• observer.unobserve : 컴포넌트가 언마운트되면 관찰을 중단합니다. (메모리 누수 방지)

결과화면

---

✏️ 회고

모킹 서버와 다양한 UI 적용의 많은 분량 때문에 강의도 많이 밀렸지만, 이해 하지 않고 넘어갈 수 없어서 정리가 오래걸려도 열심히 정리하였다.