1. 다이어그램

sequenceDiagram
    participant 사용자
    participant 스왑시스템
    participant API

    사용자->>스왑시스템: 스왑 페이지 진입
    스왑시스템->>API: 사용자 잔액 요청
    API-->>스왑시스템: 사용자 잔액 응답
    스왑시스템->>API: 토큰 가치 조회 요청
    API-->>스왑시스템: 토큰 가치 응답
    스왑시스템-->>사용자: 잔액 및 교환 가능 금액 표시

    사용자->>스왑시스템: 지불 금액 입력
    스왑시스템-->>사용자: 받을 토큰 금액 계산 및 표시

    사용자->>스왑시스템: Swap 요청
    스왑시스템->>API: Swap POST 요청
    API-->>스왑시스템: Swap 응답
    스왑시스템-->>사용자: 잔액 갱신 및 성공 메시지 표시

2. SCSS 구조 확인

<aside> 📌

📂 style/common/

• 공통 상수값들을 정의해두는 폴더
• 주로 변수 정의에 쓰이며 프로젝트 전반에서 사용할 수 있도록 전역 설정하고 있습니다.
• constant.scss
• font.scss
• mixin.scss
• reset.scss </aside>

<aside> 📌

📂 style/component

• 해당 컴포넌트 전용 스타일을 담당하고 있는 모듈 SCSS.
• message.scss 정의 </aside>

<aside> 📌

📂 style/layout

• layout은 페이지 전체의 구조나 반복되는 공통 레이아웃 요소의 스타일을 모아두는 곳.
• common.scss
  • 반복해서 자주 쓰는 공통 유틸 스타일을 정의해놓는 용도.
• page.scss
  • 페이지의 상단 타이틀 헤더와 구조 잡기 위한 전용 스타일 </aside>

<aside> 📌

📂 style/view

• 사용자에게 보여지는 화면(UI)
• swap.scss
  • 토큰 스왑 기능을 가진 UI 구성 요소들의 시각적 스타일링을 담당 </aside>

3. API 분석

<aside> 📌

사용자 화폐 별 금액 조회 API 1

• 메서드: GET

• URL: https://inhousedashboard-test-app.azurewebsites.net/api/Interview/get-balance

• 응답

  {
    "CTC": "145223.9876635",
    "USDC": "100.0001",
    "USDT": "99.8875625",
    "WCTC": "0.0000001"
  }
  

• 가상화폐 용어 설명 </aside>

<aside> 📌

화폐 가치 조회 API 2

• 메서드: GET

• URL: https://inhousedashboard-test-app.azurewebsites.net/api/Interview/get-price

• 응답

  {
    "CTC": "0.4577328",
    "USDC": "0.9998875",
    "USDT": "1.0001031",
    "WCTC": "0.4577328"
  }
  

</aside>

<aside> 📌

교환 요청 API 3

• 사용자가 선택한 화폐를 교환하는 요청을 처리하는 API.

• 메서드: POST

• URL: https://inhousedashboard-test-app.azurewebsites.net/api/Interview/post-swap

• body 데이터:

  {
    "fromCurrency": "CTC", // 사용자가 지불할 통화
    "toCurrency": "USDT", // 변환 할 통화
    "amount": 10 // 지불 금액
  }
  

</aside>

<aside> 📌

api.ts

export const fetchBalance = async () => {
  const response = await fetch("<https://inhousedashboard-test-app.azurewebsites.net/api/Interview/get-balance>");
  if (!response.ok) throw new Error("Error fetching balance");
  return response.json();
};

export const fetchPrices = async () => {
  const response = await fetch("<https://inhousedashboard-test-app.azurewebsites.net/api/Interview/get-price>");
  if (!response.ok) throw new Error("Error fetching prices");
  return response.json();
};

export const postSwap = async (swapData: { fromCurrency: string; toCurrency: string; amount: number }) => {
  const response = await fetch("<https://inhousedashboard-test-app.azurewebsites.net/api/Interview/post-swap>", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(swapData),
  });
  if (!response.ok) throw new Error("Error swapping currencies");
  return response.json();
};

</aside>

4. 상태 관리

<aside> 📌

tokenSlice.ts

• 스왑에 사용할 토큰 리스트를 저장하는 슬라이스
• 초기값으로 4개의 토큰 (CTC, USDC, USDT, WCTC)을 설정했습니다.

// tokensSlice를 통해 전역 상태로 관리할 수 있다. 이 상태는 다른 컴포넌트에서 쉽게 접근할 수 있다.
import { createSlice } from "@reduxjs/toolkit";

// Token 인터페이스 정의: 토큰의 이름(name)과 심볼(symbol)을 포함
// name과 symbol이 동일하더라도, 이를 배열로 정의하면 각 토큰의 이름과 심볼을 쌍으로 묶어 관리하는 방식이 명확하게 보인다고 생각함.
// 나중에 코드에서 해당 토큰을 다룰 때, 이름이나 심볼을 기준으로 쉽게 접근할 수 있을것 같다.
export interface Token {
  name: string;
  symbol: string;
}

const initialState: Token[] = [
  { name: "CTC", symbol: "CTC" },
  { name: "USDC", symbol: "USDC" },
  { name: "USDT", symbol: "USDT" },
  { name: "WCTC", symbol: "WCTC" },
];

const tokensSlice = createSlice({
  name: "tokens",
  initialState,
  reducers: {},
});

export default tokensSlice.reducer;

</aside>