<aside>
https://rolling-api.vercel.app/docs/
https://www.figma.com/design/cbZ9PNKSFg4mS7Lf1roZlp/-AAA-롤링?node-id=0-1&p=f
(기초_中) [롤링] 주제 선정 가이드 및 프로젝트 요구사항
</aside>
팀 프로젝트를 진행하며, 페이지마다 비슷한 버튼과 입력창 코드가 반복되어 유지보수가 어려운 상황이었다. 디자인이 제각각이라 사용자 경험도 일관되지 않았고, /post/{id} 페이지가 구현되지 않아 게시글 목록에서 상세 내용으로 자연스럽게 이동할 수도 없었다. 프로젝트 초반에는 팀 전체가 개발 경험이 부족해서 멘토님의 피드백을 적극적으로 받았다. 멘토님과의 상담을 통해 역할 분배 방식, GitHub 협업 방식 및 로컬 환경 세팅, 일정 관리 및 개발 기간 설정 등을 구체화하며 프로젝트의 큰 틀을 잡을 수 있었다. 이 과정을 통해 팀원 모두가 같은 방향으로 출발할 수 있었다.
나의 주요 역할은 공용 컴포넌트(Input, ArrowButton, PlusButton) 제작으로 중복 코드를 줄이고, /post/{id} 페이지 구현으로 사용자 흐름을 완성하는 것이었다. 특히, API를 연결해 카드 데이터를 불러오고 렌더링하는 과정이 핵심 과제였다. 팀 내에서도 API 연동 경험이 적었기 때문에, 내가 이 부분을 맡아 구현을 하고 팀원들에게 공유하기로 했다.
프로젝트 초반, 공용 컴포넌트를 만들겠다고 마음먹었지만 막상 시작하니 생각보다 복잡했다. props를 어떻게 설계해야 재사용이 가능할지 고민이었다. 가장 먼저 만든 건 Input 컴포넌트이었다. label, placeholder, validation 등 다양한 상황을 고려해야 했고, 입력값과 에러 상태를 내부에서 관리해야 했다. 특히 숫자 입력 시 발생하는 에러 처리를 구현하며, UI와 로직의 분리에 대해 깊이 고민하게 되었다. 그 다음은 PlusButton을 만들었다. 단순히 + 버튼 하나지만, 페이지마다 크기나 위치가 달라서 하드코딩을 반복하고 있었다. 그래서 크기를 유연하게 조정할 수 있도록 size를 props로 받고, 클릭 이벤트를 외부에서 전달받는 구조로 만들었다. 이 작은 컴포넌트를 완성하면서 한 번 잘 만들어두면 코드가 얼마나 깔끔해질 수 있는지를 몸소 느꼈다. 다음은 ArrowButton. 방향 전환(left/right), 크기(small/large), 색상 등 션이 많아서 props 설계가 쉽지 않았다. 특히 SVG 아이콘을 회전시키는 방식에서 여러 시행착오를 겪었다. 이 과정에서 컴포넌트를 단순히 만드는 것보다, 유지보수하기 쉬운 구조를 만드는 것이 더 중요하다는 걸 깨달았다.
마지막으로 /post/{id} 페이지를 만들었는데 여기서 가장 어려웠던 부분이 API 연결이었다. React Router의 useParams()로 id를 가져오고 Axios로 데이터를 요청했지만, 처음에는 undefined 에러가 계속 발생했다. 데이터가 비동기적으로 들어오는데 렌더링 타이밍을 맞추지 못한 게 원인이었다. 이때 가장 도움이 된 건 팀원들과의 빠른 소통이었다. 문제가 생길 때마다 바로 공유하고, API 응답 구조나 로딩 상태 처리 방식을 함께 확인했다. 혼자 끙끙대지 않고 바로 얘기하는 게 훨씬 빠르다는 걸 실감했다. 이런 과정을 반복하면서 팀 전체의 이해도가 높아졌고, 나 역시 비동기 데이터 처리 흐름에 대한 감을 잡을 수 있었다.