NFT 기반 차용증 거래 서비스 RABBIT

MSW

독립적인 프론트엔드 개발을 위해 MSW를 이용한 모킹을 구현했습니다.

async function enableMocking() {
  // Vite의 환경변수를 사용하여 development 환경일 때만 동적 임포트를 통해 번들 크기 최적화
  if (import.meta.env.MODE === "development") {
    const { worker } = await import("./shared/lib/browser");
    return await worker.start();
  }
}

//handlers를 등록하며 worker 인스턴스 생성
import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

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

export const handlers = [
  // 경매 목록 조회
  http.get(`${VITE_API_URL}/${VITE_API_VERSION}/auctions`, ({ request }) => {
    const url = new URL(request.url);
    const params = Object.fromEntries(url.searchParams) as AuctionListRequest;
    
    let filteredList = [...mockAuctionList.content];
  
    if (params.minPrice && Number(params.minPrice) !== 0) {
      filteredList = filteredList.filter(
        (item) => item.price >= Number(params.minPrice),
      );
    }

    if (params.maxPrice && Number(params.maxPrice) !== 0) {
      filteredList = filteredList.filter(
        (item) => item.price <= Number(params.maxPrice),
      );
    }

    ...


    // 페이지네이션 적용
    const pageNumber = params.pageNumber ? Number(params.pageNumber) : 0;
    const pageSize = params.pageSize ? Number(params.pageSize) : 10;
    const startIndex = pageNumber * pageSize;
    const endIndex = startIndex + pageSize;
    const paginatedList = filteredList.slice(startIndex, endIndex);
    const totalElements = filteredList.length;
    const totalPages = Math.ceil(totalElements / pageSize);
    const isLastPage = pageNumber >= totalPages - 1;

    const response: ApiResponse<AuctionListResponse> = {
      status: "SUCCESS",
      data: {
        content: paginatedList,
        pageNumber: pageNumber,
        pageSize: pageSize,
        totalElements: totalElements,
        totalPages: totalPages,
        last: isLastPage,
        hasNext: !isLastPage,
      },
    };

    return HttpResponse.json(response);
  })

반응형 디자인

다양한 디바이스 환경에서도 동일한 수준의 서비스를 이용할 수 있도록 반응형 웹을 구현했습니다.

입찰 내역 페이지경매 리스트 페이지경매 상세 페이지받은 요청 페이지

import { useEffect, useState } from "react";

type BreakPoint = "sm" | "md" | "lg" | "xl" | "2xl";

const breakpoints = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
} as const;

export const useMediaQuery = (
  breakpoint: BreakPoint,
  type: "min" | "max" = "min",
) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const query = `(${type}-width: ${breakpoints[breakpoint]})`;
    const media = window.matchMedia(query);

    setMatches(media.matches);

    const listener = () => setMatches(media.matches);
    media.addEventListener("change", listener);
    return () => media.removeEventListener("change", listener);
  }, [breakpoint, type]);

  return matches;
};

export default useMediaQuery;

const AuctionBidHistory = ({ data }: AuctionBidHistoryProps) => {
  const isDesktop = useMediaQuery("lg");

  if (!data || data.length === 0) {
    return (
      <div className="w-full overflow-hidden rounded-lg bg-gray-900 p-4">
        <div className="flex min-h-[300px] items-center justify-center text-center text-base text-gray-400">
          입찰 내역이 없습니다.
        </div>
      </div>
    );
  }

  return (
    <div className="w-full overflow-hidden rounded-lg bg-gray-900">
      {isDesktop ? (
        <AuctionBidHistoryDesktop data={data} />
      ) : (
        <AuctionBidHistoryMobile data={data} />
      )}
    </div>
  );
};

    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
    
    <div className="flex h-full flex-col gap-2 lg:flex-row">
    
    <div className="text font-medium whitespace-nowrap text-white sm:text-xl">

코드 스플리팅

초기 로딩 속도 개선을 위해 페이지별 코드 스플리팅을 적용했습니다.

import DefaultLoadingFallback from "@/shared/ui/DefaultLoadingFallback";
import ErrorBoundary from "@/shared/ui/ErrorBoundary";
import { ComponentType, lazy, Suspense } from "react";

interface LazyComponentProps {
  fallback?: React.ReactNode;
}

export const withLazyComponent = <P extends object>(
  importFunc: () => Promise<{ default: ComponentType<P> }>,
  options: LazyComponentProps = {},
) => {
  const LazyComponent = lazy(importFunc);

  return (props: P) => (
    <ErrorBoundary>
      <Suspense fallback={options.fallback || <DefaultLoadingFallback />}>
        <LazyComponent {...props} />
      </Suspense>
    </ErrorBoundary>
  );
};

//페이지 컴포넌트 동적 임포트
const AuctionHistory = withLazyComponent(
  () => import("@/pages/auction/ui/AuctionHistory"),
);
const AuctionCreate = withLazyComponent(
  () => import("@/pages/auction/ui/AuctionCreate"),
);
const AuctionList = withLazyComponent(
  () => import("@/pages/auction/ui/AuctionList"),
);
const AuctionDetail = withLazyComponent(
  () => import("@/pages/auction/ui/AuctionDetail"),
);

//적용 전
→ dist/assets/index-x0IGiL1h.js         1,741.58 kB │ gzip: 543.13 kB │ map: 7,925.07 kB


//적용 후
→ dist/assets/index-BUJYRM9M.js         1,184.76 kB │ gzip: 387.46 kB │ map: 5,724.35 kB

Zustand를 이용한 상태관리

Zustand를 활용해 상태 관리를 구현하고, props drilling을 제거했습니다.

export const useAuctionFilterStore = create<AuctionFilterState>((set) => ({
  maxPrice: "",
  minPrice: "",
  maxIr: "",
  minIr: "",
  maxRate: "",
  repayType: [],
  matTerm: "",
  matStart: "",
  matEnd: "",
  setMaxPrice: (maxPrice) => set({ maxPrice }),
  setMinPrice: (minPrice) => set({ minPrice }),
  setMaxIr: (maxIr) => set({ maxIr }),
  setMinIr: (minIr) => set({ minIr }),
  setMaxRate: (maxRate) => set({ maxRate }),
  setRepayType: (repayType) => set({ repayType }),
  setMatTerm: (matTerm) => set({ matTerm }),
  setMatStart: (matStart) => set({ matStart }),
  setMatEnd: (matEnd) => set({ matEnd }),
}));
...
  const minPrice = useAuctionFilterStore((state) => state.minPrice);
  const maxPrice = useAuctionFilterStore((state) => state.maxPrice);
  const maxIr = useAuctionFilterStore((state) => state.maxIr);
  const minIr = useAuctionFilterStore((state) => state.minIr);
  const maxRate = useAuctionFilterStore((state) => state.maxRate);
  const repayType = useAuctionFilterStore((state) => state.repayType);
  const matTerm = useAuctionFilterStore((state) => state.matTerm);
  const matStart = useAuctionFilterStore((state) => state.matStart);
  const matEnd = useAuctionFilterStore((state) => state.matEnd);
};

디자인 시스템 구축

디자인 시스템을 구축하여 일관된 디자인을 유지하고 효율적인 개발을 가능하게 했습니다.

UX 개선

UX 개선을 통해 사용자 이탈율을 줄였습니다.

회고

프로젝트를 진행하며 느낀 점을 정리했습니다.

Jira를 통한 프로젝트 일정 관리

프로젝트 일정 관리 방식

이번 프로젝트에서는 Jira를 활용하여 일정 관리를 진행하였습니다.초기 계획 단계에서 1시간을 1 Story Point로 설정하고, 주 40시간을 기준으로 업무를 배분하였습니다.매주 40시간을 기준으로 스스로 작업을 계획하고 이슈를 설정해야 했기 때문에, 자신의 역량을 객관적으로 파악하고 업무를 효율적으로 분배하는 능력을 기를 수 있었습니다.이를 통해 프로젝트를 체계적으로 분할하고 관리하는 역량이 향상되었습니다.

데이터 기반 프로젝트 관리

Jira를 사용하면서 가장 좋았던 점은 프로젝트를 “데이터 기반”으로 운영할 수 있었다는 점입니다.프로젝트를 진행하다 보면 예상치 못한 문제나 일정 지연이 발생하기 마련인데, 이때 팀 간 갈등이 생기기 쉽습니다.그러나 Jira를 통해 진행 상황과 이슈를 명확히 관리하면서 불필요한 오해나 갈등을 효과적으로 줄일 수 있었습니다.

스프린트 회고와 분석

특히 스프린트가 완료되지 못한 경우, 주간 회고를 통해 그 원인을 분석할 수 있었습니다.스토리 포인트를 지나치게 타이트하게 설정했는지, 단순히 작업이 지연되었는지 등을 데이터를 통해 명확히 파악할 수 있었습니다.이러한 과정을 통해 진짜 일정 관리의 문제인지, 아니면 개인적인 책임이 있는지를 구분할 수 있었습니다.

데이터 기반 소통의 효과

데이터를 기반으로 업무를 관리하다 보니, 의견 충돌의 여지가 줄어들었습니다.주관적인 판단이 아니라 Jira에 기록된 이슈 데이터를 바탕으로 문제를 분석하고 해결책을 도출할 수 있었기 때문입니다.그 결과, 일정 지연과 같은 상황에서도 감정적 대응 없이 객관적인 근거를 바탕으로 소통할 수 있었고, 팀워크를 안정적으로 유지할 수 있었습니다.

상호 이해의 중요성

블록체인을 사용하며 겪은 문제

세포리아 테스트넷에 실제 코인을 발행하여 프로젝트를 진행하였습니다. 블록체인 네트워크에 데이터를 저장하고 트랜잭션을 처리하는 과정에서 예상치 못한 문제가 발생했습니다. 특히, 블록체인의 특성상 트랜잭션 처리 속도를 기술적으로 줄이는 것이 불가능하다는 현실을 마주했습니다. 평균 10초 이상 소요되는 트랜잭션 처리 시간은 사용자 경험 측면에서 큰 문제로 다가왔습니다.

기술적 한계와 디자인적 접근

처음에는 기술적으로 문제를 해결하려 했지만, 블록체인 특성상 처리 시간을 줄이는 것은 사실상 불가능했습니다. 따라서 UI/UX 측면에서 문제를 완화하기 위해 스켈레톤 화면과 플로우 안내 메시지를 추가하여, 사용자가 로딩 중에도 진행 상황을 직관적으로 이해할 수 있도록 구성했습니다.이러한 디자인적 접근을 통해 대기 시간이 길더라도 불편함을 최소화할 수 있었습니다.

상호 이해의 중요성

프로젝트를 진행하며, 내가 맡은 분야가 아니더라도 이해해야 한다는 점을 배웠습니다. 블록체인을 구현하는 역할은 아니였지만 블록체인 트랜잭션 발행이나 데이터 조회 같은 기술적인 내용을 깊이 파악하지 못하면, 화면을 만드는 것도 어려운 일이 될 수 있다고 느꼈습니다. 직접 담당하지 않는 기술 분야라도, 프로젝트의 전체 맥락에서 어떤 영향을 줄 수 있는지 충분히 이해해야 한다고 생각했습니다.