👤 TradeProfile 구현기 – 거래 게시글에서 유저 프로필로 연결하기

이번에는 게시글에서 해당 유저의 프로필로 이동해 거래 상황을 확인하고, 바로 대화를 시작할 수 있도록 하는 TradeProfile 기능을 구현했다. 단순한 프로필 화면이 아니라, 거래 전용 프로필 뷰를 만드는 작업이었고, 거래 담당 팀원과의 협업을 통해 PostBlock → TradeProfile로 자연스럽게 연결되는 UX 흐름을 완성했다.

🧩 시작점: PostBlock 컴포넌트

거래 리스트에서 각 게시글을 보여주는 컴포넌트는 PostBlock이었다. 이 컴포넌트는 거래 담당 팀원이 구현한 구조로, 우리는 여기에 클릭 시 해당 유저의 TradeProfile로 이동하는 로직을 추가했다.

const handleClick = () => {
  const userId: string = post.foreign_ids.user_id;
  const title: string = post.title;
  navigate(`/trade-profile?userID=${userId}&title=${encodeURIComponent(title)}`);
};

useNavigate()를 사용해 유저 ID와 게시글 제목을 쿼리 파라미터로 넘기고, TradeProfile에서 이를 받아서 해당 유저의 정보와 최근 거래 내역을 불러온다.

🛠 TradeProfile 구성

<ProfileContainer ... />
<TradeStatus ... />
<LatestTrade ... />
<Button>대화 시작</Button>

기존에 쓰던 ProfileContainer, TradeStatus 등을 재사용하여 구조를 빠르게 잡았다.

최근 거래 내역은 ExchangeData를 필터링해서 3개씩 보여주도록 LatestTrade 컴포넌트를 따로 만들었다.

const exchangeWing = GetExchangePostByFilterWing(exchangeParam);
const exchangeResponse = await shootingStar.launch(exchangeWing);
setPosts(exchangeResponse.data.items);

→ 유저의 거래 내역을 서버에서 받아와서 거래 상태와 함께 표시했다.

🔁 컴포넌트 재사용으로 개발 효율성 향상

• ProfileContainer, TradeStatus는 기존 Profile 페이지에서 쓰이던 것을 그대로 사용

• getImagePathFromProfile() 역시 기존 유틸함수를 그대로 활용

재사용 가능한 컴포넌트 설계가 되어 있었기 때문에 로직 중복 없이 빠르게 구현 가능했고, CSS 스타일도 이미 맞춰져 있어서 디자인 통일성도 확보할 수 있었다.

💬 협업 포인트

이 작업은 혼자서 한 게 아니라, 거래 게시판을 담당한 팀원과 함께 작업한 결과물이다.

• PostBlock 내부 구조를 먼저 파악하고, 클릭 시 navigate 처리 로직을 추가

• 서로 post.foreign_ids.user_id를 기준으로 연결하는 방식에 합의

• 거래 데이터를 받아오는 API 구조도 맞춰서 통합

이 과정을 통해 우리 팀의 코드 스타일이나 데이터 구조가 점점 통일되는 느낌을 받았다.

⚙️ 개발하면서 느낀 점 – Props와 Navigation의 중요성

🔗 Props를 통한 데이터 전달의 핵심성

이번 TradeProfile 개발에서 가장 크게 느낀 점 중 하나는 바로 props의 중요성이었다.

컴포넌트 간에 데이터를 넘겨줄 때 props는 가장 기본이자 강력한 수단이다.

부모 컴포넌트에서 자식 컴포넌트로 값을 넘기고, 자식 컴포넌트는 이를 기반으로 UI를 구성하거나 요청을 수행할 수 있다.

예를 들어 TradeProfile 내부에서 ProfileContainer나 TradeStatus 같은 기존 컴포넌트를 사용할 때도, 유저 정보나 통계 데이터들을 props로 넘겨주는 구조로 만들었다.

🚀 navigate로 URL 파라미터 넘기기

이번 작업에서는 React Router의 navigate() 함수로 URL에 데이터를 넘겨주는 방법도 활용했다:

navigate(`/trade-profile?userID=${userId}&title=${encodeURIComponent(title)}`);

이렇게 하면 페이지 이동과 동시에 userID, title 같은 데이터를 쿼리스트링으로 넘길 수 있다.

TradeProfile 컴포넌트에서는 다음처럼 location.search를 사용해 브라우저의 쿼리스트링을 직접 파싱했다:

const params = new URLSearchParams(location.search);
const userId = params.get("userID");
const title = params.get("title");

여기서 핵심은 location.search를 이용해 현재 브라우저 주소의 쿼리스트링을 가져오고,
그걸 URLSearchParams를 통해 파싱(parsing)해서 필요한 데이터를 키(key) 기반으로 꺼낸다는 것이다.

이때의 key는 URL에서 ?userID=junhyeong123&title=레전템판매중 같이 생긴 쿼리스트링의 구조에서 userID, title과 같은 이름을 의미한다.

각각의 key에 대응하는 value는 "junhyeong123", "레전템판매중"처럼 저장된 값이고, 이 값을 .get("key")로 추출할 수 있다.

• params.get("userID") → 쿼리스트링에서 userID 값을 가져옴

• params.get("title") → 게시글 제목을 가져옴

이렇게 파싱한 데이터를 각각 변수로 선언해 이후 API 요청에 활용하거나, 화면 구성에 사용할 수 있었다.

location.search는 현재 URL의 ?userID=...&title=... 같은 쿼리스트링을 가져오고,
URLSearchParams는 이를 키-값 형태로 파싱해준다.

이 방식은 React Router에서 제공하는 useSearchParams()를 굳이 사용하지 않고도, 필요한 값만 간단하게 가져오는 데 매우 유용했다.

복잡한 상태 관리 없이, 가볍게 데이터를 넘겨주는 데 매우 유용한 방식이었다.

📌 회고

거래 UX를 한 단계 끌어올린 경험

단순히 정보만 보여주는 게 아니라, 게시글 → 유저 프로필 → 거래 내역 → 대화 시작이라는 흐름이 끊기지 않도록 신경 쓴 구조였다.

또한 컴포넌트를 무분별하게 새로 만드는 대신, 기존 컴포넌트를 확장/재사용하면서 유지보수도 쉬운 구조로 발전시켰다는 점이 만족스러웠다.

앞으로도 협업 시 재사용 가능한 구조 설계와 명확한 책임 분리를 계속 신경 써야겠다.