[Coworkers] 할 일 리스트 페이지 작업 (협업)

오전 스크럼 회의에서 할 일 리스트 페이지를 작업하시는 팀원분께서 어떻게 구현해야 할지 모르겠다고 도움을 요청하셨어요❗

 

팀 회의때 밤을 새고 작업을 하셔도 해결을 못하셨다고 하시는데 안 도와드릴 수 없죠🔥🔥

제 작업은 거의 마무리 단계라 잠시 뒤로 미뤄두고 도움을 드리기로 했어요.

협업 요청 DM

 

일단 문제 상황을 먼저 확인해 봐야겠죠👀👀

🚨 문제 상황

리스트 페이지 UI

 

Swagger의 API 문서가 너무 복잡해서 어떤 API를 사용해야 할지 모르겠다고 하시네요.

swagger api 문서

swagger api 문서

 

다시 보니 정말 헷갈릴만 하네요.

다른 API 문서들을 찾아보니 아래처럼 설명을 잘 작성해두기도 했네요🤔

swagger 예시

swagger 예시

 

아쉽지만 언제 어떤 환경에서 개발할지 알 수 없으니, 주어진 환경에 맞게 개발할 줄 알아야 개발자로 성장할 수 있겠죠❗

🌈 문제 해결

1️⃣ 폴더 구조 수정

수정 전 폴더 구조

 

우선 폴더 구조가 잘 못 되어있네요🤔

tasklist는 taskListId에 해당하는 taskLists를 서버에 요청하고 렌더링 하는 페이지입니다.

동적 라우팅으로 바꿔줘야겠죠..👀

수정 후 폴더 구조

 

이제 프로젝트 요구사항에 맞게 동작할 수 있겠네요.

1. 팀 페이지(/{teamid}) → 할 일 목록 클릭
2. 할 일 리스트 페이지(/{teamid}/{tasklist})  → 할 일 카드 클릭
3. 할 일 상세 페이지/{teamid}/{tasklist}/{taskid}

2️⃣ team, tasklist, task 관련 id를 임시 상수에서 데이터로 수정

작업 내용을 확인해 보니 리스트 페이지 관련 id(teamId, taskListId, taskId)가 모두 1771, 2861 등 상수로 작업되어 있어요.

아마 어느 API에서 id를 받아와야 하는지 어려우셔서 이렇게 작업해 두신 것 같아요.

 

포기하시지 않고 상수 id를 이용해서라도 기능 구현하려고 노력하신 모습 너무 멋있네요👏👏

저도 수정 작업 시작해 보겠습니다

 

/[teamid]/[tasklist]/[taskid]/page.tsx

page.tsx 코드 수정

 

폴더 구조를 /[teamid]/[taskid]/page.tsx에서 /[teamid]/[tasklist]/[taskid]/page.tsx로 수정해 useParams() 훅을 이용해 teamid, tasklist, taskid를 사용해 상수 id를 대체할게요.

const { teamid, tasklist, taskid } = useParams();

 

TaskCardList.tsx

상수 id 삭제, id props 추가

상수 id 삭제, id props 추가

TaskCard.tsx

상수 id 삭제, id props 추가

 

TaskCardDropdown.tsx

상수 id 삭제, id props 추가

컴포넌트 이름 수정

 

TaskCardDropdown 컴포넌트는 파일 이름과 컴포넌트 이름을 다르게 작업하셨어요👀

아마 Icon 컴포넌트와 이름이 겹쳐서 그러신 거 같은데 컴포넌트와 파일 이름을 갖게 수정했어요.

파일 이름과 컴포넌트 이름이 같아야 파일 이름만 보고도 import할 수 있어 협업에 편할 것 같더라구요...😅

 

TaskDetailDropdown.tsx

상수 id 삭제, id props 추가

props로 서버에서 받은 id 전달

 

수정한 부분이 더 있지만 너무 길어져 commit 기록으로 대신할게요❗

동적 id 수정 commit

3️⃣ taskLists API 연동

Group - GET

GET Group response

 

swagger API 문서를 확인해 보니 Group 데이터를 GET 요청해야 taskLists를 response로 전달해 주네요.

이름만 보고 TaskList 확인하고 있었는데... 여기 숨어있었다니😅

 

getGroupById - id에 해당하는 group 데이터 요청하는 함수

import axios from '@/app/lib/instance';

type GroupResponse = {
  image?: string | null;
  name: string;
  taskLists: any[];
};

const getGroupById = async (id: number): Promise<GroupResponse> => {
  const res = await axios.get<GroupResponse>(`/groups/${id}`, {
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res.data;
};

export default getGroupById;

 

taskLists의 타입을 any[]로 설정해서 조금 불편하실 수 있을 것 같네요.

이 부분은 task 관련 작업하신 팀원분께서 타입을 설정해 두셨다고 하는데, 제가 작성한 코드가 아니다 보니 찾기가 어려워 팀원분께서 작업하겠다고 하셨어요😅

 

/[teamid]/[tasklist]/page.tsx

import { useQuery } from '@tanstack/react-query';
import getGroupById from '@/app/lib/group/getGroupById';
import Link from 'next/link';

function TaskListPage() {
  {/* ...기존 코드 생략... */}
  const { data, isLoading } = useQuery({
    queryKey: ['tasklists', tasklist],
    queryFn: () => getGroupById(Number(teamid)),
  });


  return (
    {/* ...기존 마크업 생략... */}
    <div>
      {data?.taskLists &&
        data?.taskLists.map((list) => (
          <Link key={list.id} href={`/${teamid}/${list.id}`}>
            {list.name}
          </Link>
        ))}
    </div>
  )
}

 

taskLists를 불러오는 작업까지 모두 끝났습니다.

이제 결과를 확인해 볼게요

👀

👀

taskList 호출 결과

console 로그

 

할 일 목록(taskList) 데이터가 잘 받아져 오네요.

UI 스타일 작업은 직접 하신 다고 하셔서 여기까지 작업하고 넘겨드렸어요😀

 

🚩 협업을 하면서 느낀 점

1️⃣ 일관된 네이밍 컨벤션과 명확한 코드 구조의 중요성

작업을 하면서 익숙하지 않은 코드 구조를 이해하는 데 시간이 많이 걸렸고, 파일 이름과 컴포넌트 이름이 다른 부분이 있어 파악하느라 수정이 쉽지 않아 힘들기도 했지만 이런 과정에서 일관된 네이밍 컨벤션과 명확한 코드 구조의 중요성을 몸소 체감했어요.

 

저도 협업을 하면서 체감했으니 다른 팀원들도 제 코드를 보고 같은 생각을 했겠죠..😅

 

앞으로는 처음 제 코드를 보는 사람도 빠르게 이해할 수 있도록 하기 위해 네이밍과 폴더 구조를 깔끔하게 정리해야겠네요.

"내 코드가 다른 사람에게 어떻게 읽힐지" 를 한번 더 생각하면서 말이죠👀

2️⃣ 협업에서 소통의 중요성

팀원과의 의견 조율과 문제 해결 과정을 경험하면서 협업의 본질에 대해 다시 한 번 생각해 보게 되었어요.

 

기존 할 일 카드 컴포넌트의 동작이 아래 두 가지로 나뉘어 있었어요.

• Click 이벤트 : Drawer 컴포넌트 open
• keyDown 이벤트(Enter, Space Bar) : /[teamid]/[tasklist]/[task.id]로 라우팅

Click과 keyDown 이벤트의 동작 방식이 다른 것이 조금 의아해서 질문을 드렸어요.

기능 구현 관련 논의

기능 구현 관련 논의

 

의도하신 부분이 아니라 에러가 발생해서 keyDown 이벤트를 추가하셨다고 하셔서 음성 채팅으로 수정 방법을 논의했어요.

소통 없이 제가 혼자 판단했다면 /[teamid]/[tasklist]/[task.id]로 라우팅 처리하도록 수정했을 것 같아요.

그런데 팀원분과 함께 고민하니 의견이 하나둘씩 늘어가고 피드백을 더 해가며 점점 발전해 최종적으로 사용자 경험까지 고려한 더 나은 방향을 찾을 수 있었어요😊