API 언제나와요? 아 네… API로부터 독립된 컴포넌트 생성하기 + MSW 도입기

const PostPage = () => {
  // !!데이터를 가져오는 함수!!
  // !!데이터 가공작업!!
 
  return (
    <div style={styles.pageContainer}>
      <Post1
        postId={data.postId}
        tag={data.tag}
        category={data.category}
        createdDate={data.createdDate}
      />
      <Post2 title={data.title} content={data.content} images={data.images} />
      <Post3
        viewCount={data.viewCount}
        likeCount={data.likeCount}
        commentCount={data.commentCount}
      />
      <Post4 title={data.title} content={data.content} images={data.images} />
      <Post5 profile={data.profile} userCategory={data.userCategory} nickname={data.nickname} />
    </div>
  );
};
 
const Post = ({
  postId,
  tag,
  category,
  title,
  content,
  images,
  createdDate,
  viewCount,
  likeCount,
  commentCount,
  profile,
  userCategory,
  nickname,
}) => {
  // !!필요하다면 받아온 Props를 컴포넌트에 적용하기 위해 재가공 작업이 필요!!
 
  return (
    <div style={styles.postContainer}>
      <h2>{title}</h2>
      <div style={styles.meta}>
        <span>{createdDate}</span>
        <span>{nickname}</span>
        <span>{userCategory}</span>
      </div>
      <div style={styles.content}>
        <p>{content}</p>
        {images && <img src={images} alt="Post image" style={styles.image} />}
      </div>
      <div style={styles.stats}>
        <span>조회수: {viewCount}</span>
        <span>좋아요: {likeCount}</span>
        <span>댓글: {commentCount}</span>
      </div>
    </div>
  );
};

viewCount && likeCount && (
  <div>
    {viewCount} {likeCount}
  </div>
);

const PostDetailIndex = () => {
  // !!코드가 길어 간략하게 어떤 느낌인지만 소개!!
 
  const { open } = useModalStore();
  const router = useRouter();
  const { id } = router.query as { id: string };
 
  const { data: postData } = useQuery(['post', id], () => getPostDetail(id), {
    enabled: id != null,
  });
 
  if (postData?.status == 'FAIL') {
    return <ConfirmModal />;
  }
 
  return (
    <div className="mx-4">
      <div className="h-[60px]" />
      <ToBackComunity />
      <PostDetail postData={postData && postData} />
      {/* 구분선 */}
      {open ? <DeleteModal /> : ''}
    </div>
  );
};

import { useQuery } from 'react-query';
import { useEnumToTag } from '../hooks/useEnumToTag';
import { useEnumToCategory } from '../hooks/useEnumToCategory';
import { getPostDetail } from '../remote/post';
 
export const usePostDetail = (postId: string) => {
  //api 호출
  const { data: postData, ...queryProps } = useQuery(
    ['post', postId],
    () => getPostDetail(postId),
    {
      enabled: postId != null,
    }
  );
 
  const tag = useEnumToTag(postData?.tag); //데이터 가공
  const category = useEnumToCategory(postData?.category); //데이터 가공
  const heartImg = postData?.isLiked //분기처리도 위임
    ? '/community/colorHeart.svg'
    : '/community/heart.svg';
 
  return {
    postData,
    tag,
    category,
    ...queryProps,
  };
};

const PostDetailIndex = () => {
  const { open } = useModalStore();
 
  return (
    <div className="mx-4">
      <div className="h-[60px]" />
      <ToBackComunity />
      <PostDetail />
      {/* 구분선 */}
      <div className="w-full h-1 bg-gray-100" />
    </div>
  );
};

const PostDetail = ({ postData }: PostDetailType) => {
 
const tag = useEnumToTag(postData?.tag);
const category = useEnumToCategory(postData?.category);
 
return (
<div> ... </div>
...
)
}

const PostDetail = () => {
  const router = useRouter();
  const { id } = router.query as { id: string };
 
  const { postData, tag, category } = usePostDetail(id);
  return (
<div> ... </div>
...
)
}

const initMocks = async () => {
  const isServer = typeof window === 'undefined'; //node 환경인가?
 
  if (isServer) {
    const { server } = await import('./server');
    server.listen({ onUnhandledRequest: 'bypass' }); // 처리되지 않은 요청이라도 통과시키도록
  } else {
    const { worker } = await import('./browser');
    await worker.start({ onUnhandledRequest: 'bypass' }); // 처리되지 않은 요청이라도 통과시키도록
  }
};
export default initMocks;

import { postHandlers } from './postHandler';
 
export const handlers = [
  ...
  ...postHandlers
];

import { setupServer } from 'msw/node';
 
import { handlers } from './handlers';
 
export const server = setupServer(...handlers);
export const worker = setupWorker(...handlers);

import { http, HttpResponse } from 'msw';
import { MOCK_POSTDETAIL_DATA } from './mocks';
 
export const postHandlers = [
  /* ----- 글 상세 데이터 가져오기 api ----- */
  http.get(`https://joo-api.store/posts/39`, () => {
    return HttpResponse.json(MOCK_POSTDETAIL_DATA);
  }),
];
/* ----- 글 상세 MOCK DATA ----- */
export const MOCK_POSTDETAIL_DATA = {
  status: 'SUCCESS',
  errorCode: null,
  data: {
    postId: 39,
    category: 'FREE_BOARD',
    tag: 'BRAG',
    title: '이것은 모킹된 데이터여',
    content: '모킹이 잘 됐나?',
    createdDate: '2024-06-12T23:01:05',
    viewCount: 12,
    likeCount: 4,
    commentCount: 2,
    images: [
      'https://sabujak-image-bucket.s3.ap-northeast-2.amazonaws.com/bc1e70ab-dIMG_2661.jpeg',
    ],
    writer: {
      profile:
        'https://sabujak-image-bucket.s3.ap-northeast-2.amazonaws.com/8968ebd6-bIMG_8418.jpeg',
      job: 'ITDEV',
      nickname: '웃고있는 감자칩',
    },
    isWriter: false,
    isLiked: false,
  },
  message: null,
};