[중간 코드 리뷰]

[DevelopSoo]

발표 UX 피드백 정리

랜딩 페이지

1. PNG 이미지가 고DPI(레티나) 환경에서 흐릿하게 보입니다. 이는 서비스 완성도에 대한 인상을 낮출 수 있으므로, 디자이너에게 2배 ~ 3배 사이즈 이미지를 요청하고 srcset이나 Next.js <Image> 컴포넌트로 대응하는 걸 추천합니다.

대시보드 페이지

1. 로그아웃 기능 미구현
2. 강제로 access token, refresh token 이 없을 때 Redirect 가 안되고 바로 에러 발생
3. 목표 생성, 할일 생성 시 로딩 표시가 잘 안나와서 잠깐 멈춘 것 같은 느낌이 든다.
4. github 과 어떻게 연동이 되는건지? 페이지에 들어와서는 전혀 github 과 관련이 없어보임
5. 알림 기능 미구현

모든 할 일 페이지

1. 기본적으로 페이지 이동 시 loading 처리가 안되어 있다.
2. ALL → TO DO → DONE 선택 시 아래 내용들만 재렌더링되어야 하는데, 제목까지 재렌더링되며 깜빡거린다.
3. 할 일 체크 시 낙관적 업데이트가 필요할 것 같다.
4. 노트 생성 → 등록하기 후 갑자기 오른쪽에서 나타나는데, 뭔가 모달 같이 생김 → 하지만 뒤에 내용(기존에 있던 할 일 혹은 노트 모아보기)은 없음 → 뒤에서 뭔가 보여야 할 것 같은 느낌. 아니면 굳이 모달형식으로 하지 말기
5. 노트 상세보기 클릭 후 X 버튼 누르면 노트 모아보기가 좀 느리게 떠서 답답한 느낌이 있다.

[DevelopSoo]

중복 로직

frontend/src/features/note/components/NoteCreateClient/index.tsx

Lines 122 to 134 in 851a4f8

	const editor = useEditor({
	extensions: [
	StarterKit,
	Underline,
	TextAlign.configure({ types: ['heading', 'paragraph'] }),
	Placeholder.configure({ placeholder: '이 곳을 통해 노트 작성을 시작해주세요' }),
	],
	content,
	immediatelyRender: false,
	onUpdate: ({ editor }) => {
	setContent(editor.getHTML());
	},
	});

frontend/src/features/note/components/NoteEditClient/index.tsx

Lines 60 to 72 in 851a4f8

	const editor = useEditor({
	extensions: [
	StarterKit,
	Underline,
	TextAlign.configure({ types: ['heading', 'paragraph'] }),
	Placeholder.configure({ placeholder: '이 곳을 통해 노트 작성을 시작해주세요' }),
	],
	content,
	immediatelyRender: false,
	onUpdate: ({ editor }) => {
	setContent(editor.getHTML());
	},
	});

현재 동일한 코드가 반복됩니다. 아래와 같이 커스텀 훅으로 분리후 사용하면 중복도 줄이고, 비즈니스 로직과 UI 로직을 분리할 수 있을 것 같습니다.

예시

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import TextAlign from '@tiptap/extension-text-align';
import Placeholder from '@tiptap/extension-placeholder';

interface UseNoteEditorOptions {
  content: string;
  onContentChange: (html: string) => void;
}

export function useNoteEditor({ content, onContentChange }: UseNoteEditorOptions) {
  return useEditor({
    extensions: [
      StarterKit,
      Underline,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
      Placeholder.configure({
        placeholder: '이 곳을 통해 노트 작성을 시작해주세요',
      }),
    ],
    content,
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      onContentChange(editor.getHTML());
    },
  });
}

[DevelopSoo]

임의 색상을 디자인 토큰으로 분리하기

frontend/src/shared/components/TaskCard/index.tsx

Line 106 in 851a4f8

checked ? 'border-transparent bg-[#FF8442]' : 'border border-[#CCCCCC] bg-white',

frontend/src/shared/components/TaskCard/index.tsx

Line 122 in 851a4f8

checked ? 'font-medium text-[#737373] group-hover:font-semibold group-hover:text-[#EF6C00]' : 'font-medium',

위 예시 이외에도 색상값이 너무 많이 하드코딩되어 있습니다. 디자인 변경 시 전부 찾아 수정해야 하는 문제가 있습니다.
globals.css 와 같은 곳에서 @theme 에 변수를 추가해주면 좋겠네요.

예시

@theme {
  --color-primary-50: #FFF8E4;
  --color-primary-100: #FEF2E3;
  --color-primary-200: rgba(255, 158, 89, 0.2);
  --color-primary-400: #FF9E59;
  --color-primary-500: #FF8442;
  --color-primary-600: #EF6C00;
  --color-primary-700: #EE7016;
  --color-primary-800: #DC5203;
}

[DevelopSoo]

네이밍 불일치 및 오타

frontend/src/features/dashboard/components/DashBoardDetail/index.tsx

Line 16 in 851a4f8

export default function DashboardDetail() {

여기서는 폴더 이름은 DashBoardDetail인데, 함수 이름은 DashboardDetail이네요.

frontend/src/features/goal/components/DetailTodoModal/DetailTodoModalComponets/index.tsx

Line 17 in 851a4f8

const DetailTodoModalComponents = memo(function DetailTodoModalComponents({ todo }: DetailTodoModalComponentsProps) {

여기는 폴더명이 DetailTodoModalComponets 인데 n이 빠져 오타가 났네요.

[DevelopSoo]

불필요한 useState 사용 -> 공급원이 다중으로 관리될 수 있음

초기 데이터 불러온 곳에선 useQuery로 가져와서 상태를 관리합니다.

frontend/src/features/dashboard/components/GoalBox/index.tsx

Lines 37 to 44 in 851a4f8

	const { data: searchedTodoList } = useQuery({
	...todoQueries.list({ goalId, search: trimmedSearch }),
	enabled: !!goalId && isSearching,
	});
	const searchedTodos = searchedTodoList?.todos ?? [];
	const visibleTodoList = isSearching ? searchedTodos.filter((todo) => !(todo.done ?? false)) : todoList;
	const visibleDoneList = isSearching ? searchedTodos.filter((todo) => todo.done ?? false) : doneList;

starred 사용하는 곳에선 state에 또 넣어주면서 공급원이 두 군데가 생기게 됩니다.

frontend/src/shared/components/TaskCard/index.tsx

Line 236 in 851a4f8

const [starred, setStarred] = useState(initialStarred);

이때 mutation으로 데이터를 수정해도 state 를 수정하지 않아 제대로 변경이 안될 수 있습니다.

낙관적 업데이트를 하고 싶어서라면 usePatchTodoFavorite에서 리액트 쿼리의 낙관적 업데이트를 적용하세요.

frontend/src/lib/mutations.ts

Lines 147 to 171 in 851a4f8

	export const usePatchTodoFavorite = (todoId?: number) => {
	const { showToast } = useToastStore();
	const queryClient = useQueryClient();
	return useMutation({
	mutationFn: async () => {
	if (todoId === undefined) {
	throw new Error('Todo id is required');
	}
	return fetchTodos.patchTodoFavorite(todoId);
	},
	onSuccess: () => {
	queryClient.invalidateQueries({ queryKey: ['todos', 'detail', todoId] });
	},
	onSettled: () => {
	queryClient.invalidateQueries({ queryKey: ['todos', 'list', {}] });
	queryClient.invalidateQueries({ queryKey: ['goals', 'detail'] });
	queryClient.invalidateQueries({ queryKey: ['users', 'me', 'progress'] });
	},
	onError: () => {
	showToast('즐겨찾기 설정에 실패했습니다.', 'fail');
	},
	});
	};

[DevelopSoo]

중복

frontend/src/features/note/components/Pagination/index.tsx

Lines 14 to 36 in 851a4f8

	const ChevronLeft = ({ disabled, onClick }: NavButtonProps) => (
	<button className={`${btnBase} ${disabled ? disabledStyle : enabledStyle}`} onClick={onClick} disabled={disabled}>
	<ChevronLeftIcon className={`${disabled ? 'text-gray-300' : 'text-primary-500'} h-full w-full`} />
	</button>
	);
	const ChevronRight = ({ disabled, onClick }: NavButtonProps) => (
	<button className={`${btnBase} ${disabled ? disabledStyle : enabledStyle}`} onClick={onClick} disabled={disabled}>
	<ChevronRightIcon className={`${disabled ? 'text-gray-300' : 'text-primary-500'} h-full w-full`} />
	</button>
	);
	const ChevronsLeft = ({ disabled, onClick }: NavButtonProps) => (
	<button className={`${btnBase} ${disabled ? disabledStyle : enabledStyle}`} onClick={onClick} disabled={disabled}>
	<ChevronsLeftIcon className={`${disabled ? 'text-gray-300' : 'text-primary-500'} h-full w-full`} />
	</button>
	);
	const ChevronsRight = ({ disabled, onClick }: NavButtonProps) => (
	<button className={`${btnBase} ${disabled ? disabledStyle : enabledStyle}`} onClick={onClick} disabled={disabled}>
	<ChevronsRightIcon className={`${disabled ? 'text-gray-300' : 'text-primary-500'} h-full w-full`} />
	</button>
	);

ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight 4개 컴포넌트가 아이콘만 다르고 구조가 완전히 동일합니다.

다음과 같이 만들어 수정 후

interface NavButtonProps {
  icon: LucideIcon;
  disabled?: boolean;
  onClick?: () => void;
  'aria-label': string;
}

const btnBase = 'flex-row-center h-6 w-6 cursor-pointer rounded-[5px] p-0.5';
const enabledStyle = 'bg-primary-500-10 text-primary-500';
const disabledStyle = 'bg-gray-200 text-gray-300';

function NavButton({ icon: Icon, disabled, onClick, 'aria-label': ariaLabel }: NavButtonProps) {
  return (
    <button
      className={`${btnBase} ${disabled ? disabledStyle : enabledStyle}`}
      onClick={onClick}
      disabled={disabled}
      aria-label={ariaLabel}
    >
      <Icon className={`${disabled ? 'text-gray-300' : 'text-primary-500'} h-full w-full`} />
    </button>
  );
}

실제 사용 시에는 아이콘을 넣어 쓰는 것도 괜찮아보입니다.

<NavButton icon={ChevronsLeftIcon} disabled={currentPage === 1} onClick={() => onPageChange(1)} aria-label="첫 페이지" />
<NavButton icon={ChevronLeftIcon} disabled={currentPage === 1} onClick={() => onPageChange(currentPage - 1)} aria-label="이전 페이지" />
{/* ... */}
<NavButton icon={ChevronRightIcon} disabled={currentPage === totalPages} onClick={() => onPageChange(currentPage + 1)} aria-label="다음 페이지" />
<NavButton icon={ChevronsRightIcon} disabled={currentPage === totalPages} onClick={() => onPageChange(totalPages)} aria-label="마지막 페이지" />

[DevelopSoo]

렌더 중 setState 호출

frontend/src/features/note/components/NoteListClient/index.tsx

Lines 18 to 27 in 851a4f8

	export default function NoteListClient({ goalId, search, sort }: NoteListClientProps) {
	const [page, setPage] = useState(1);
	const [prevSearch, setPrevSearch] = useState(search);
	const [prevSort, setPrevSort] = useState(sort);
	if (search !== prevSearch || sort !== prevSort) {
	setPrevSearch(search);
	setPrevSort(sort);
	setPage(1);
	}

렌더 중 바로 setState를 진행할 경우 무한 렌더링 발생 가능성이 있습니다. 물론 지금은 이전 결과와 비교하기 때문에 문제는 없으나 권장하는 패턴은 아닙니다.

이 대안으로 useEffect 내에서 하는 방법이 있으나 lint 에러가 발생할 수 있습니다.

export default function NoteListClient({ goalId, search, sort }: NoteListClientProps) {
  const [page, setPage] = useState(1);

  // 검색어 또는 정렬 기준 변경 시 페이지 초기화
  useEffect(() => {
    setPage(1);
  }, [search, sort]);

  const { data: goal } = useQuery(goalQueries.detail(goalId));
  const { data: noteList } = useQuery({
    ...noteQueries.list({ goalId, page: page - 1, search, sort }),
    placeholderData: keepPreviousData,
  });

  // ...
}

또 다른 대안으로는 부모 컴포넌트에서 key 속성을 사용하는 겁니다. 별도 상태를 동기화하는 로직이 없어지고 간단해질 것 같습니다.

// 부모 컴포넌트에서
<NoteListClient
  key={`${search}-${sort}`}  // search/sort 변경 시 컴포넌트 완전 리마운트
  goalId={goalId}
  search={search}
  sort={sort}
/>

// NoteListClient — page 상태 관련 코드 전부 제거
export default function NoteListClient({ goalId, search, sort }: NoteListClientProps) {
  const [page, setPage] = useState(1); // key 변경 시 자동으로 1로 리셋됨

  const { data: goal } = useQuery(goalQueries.detail(goalId));
  const { data: noteList } = useQuery({
    ...noteQueries.list({ goalId, page: page - 1, search, sort }),
    placeholderData: keepPreviousData,
  });
  // ...
}

아니면 url에 page 도 넣어서 부모 컴포넌트에서 처리를 한 후 props로 내려줄 수도 있습니다.

// search, sort와 동일하게 URL에서 관리
// /notes?search=foo&sort=asc&page=1

export default function NoteListClient({ goalId, search, sort, page }: NoteListClientProps) {
  // page도 props로 받아 내부 상태 제거
  const { data: noteList } = useQuery({
    ...noteQueries.list({ goalId, page: page - 1, search, sort }),
    placeholderData: keepPreviousData,
  });
  // ...
}

실제 적용해보신 후 가장 적절한 방법으로 진행해보세요.

[DevelopSoo]

과도한 API 호출 개선 여부 확인

frontend/src/shared/components/TaskCard/index.tsx

Lines 137 to 155 in 851a4f8

	function TaskLinkNoteCreate({ isOrange, todo }: TaskLinkNoteCreateProps) {
	const { data: goal } = useQuery({
	...todoQueries.detail(todo.id as number),
	enabled: !!todo.id,
	});
	if (!goal?.goal?.id || !todo.id) return null;
	return (
	<Link
	href={`/goal/${goal.goal.id}/note/create?todoId=${todo.id}`}
	className={clsx(
	'relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-full p-1 group-hover:bg-white',
	isOrange ? 'bg-[#FFFFFF]/40' : 'bg-[#FF9E59]/20',
	)}
	>
	<Image src="/image/todo-list.svg" alt="todo-list menu" width={9} height={10} className="cursor-pointer" />
	</Link>
	);
	}

제 생각엔 이미 todo 상세 데이터에 goal의 id를 줄 것 같은데 아닌가요? 꼭 API 호출을 해야하는 방법 밖에 없는지 검토바랍니다.
만약 todo 상세에서도 goal_id와 같은 데이터를 받아올 수 있는지 백엔드와 상의하는 것도 좋습니다.

[DevelopSoo]

mutateAsync의 에러 처리 부재

frontend/src/features/todo/components/manual/TodoFormModal/index.tsx

Lines 135 to 158 in 851a4f8

	const onSubmit = async (data: FormValues) => {
	if (isEditMode && 'id' in todo) {
	await patchTodoMutation.mutateAsync({
	title: data.title,
	dueDate: data.dueDate,
	linkUrl: data.linkUrl,
	imageUrl: data.imageUrl,
	tags: data.tags,
	done: data.done,
	});
	} else {
	await postTodoMutation.mutateAsync({
	source: 'MANUAL',
	title: data.title,
	goalId: data.goalId,
	dueDate: data.dueDate,
	linkUrl: data.linkUrl,
	imageUrl: data.imageUrl,
	tags: data.tags,
	});
	}
	closeModal();
	};

try catch를 사용하거나

const onSubmit = async (data: FormValues) => {
  try {
    if (isEditMode && 'id' in todo) {
      await patchTodoMutation.mutateAsync({
        title: data.title,
        dueDate: data.dueDate,
        linkUrl: data.linkUrl,
        imageUrl: data.imageUrl,
        tags: data.tags,
        done: data.done,
      });
    } else {
      await postTodoMutation.mutateAsync({
        source: 'MANUAL',
        title: data.title,
        goalId: data.goalId,
        dueDate: data.dueDate,
        linkUrl: data.linkUrl,
        imageUrl: data.imageUrl,
        tags: data.tags,
      });
    }
    closeModal();
  } catch {
    // mutations.ts의 onError에서 이미 토스트를 보여주므로
    // 여기서는 모달을 닫지 않기만 하면 됨
  }
};

mutate 를 대신 사용한 후 onSuccess 를 활용하는 것도 좋습니다.

const onSubmit = (data: FormValues) => {
  const onSuccess = () => closeModal();

  if (isEditMode && 'id' in todo) {
    patchTodoMutation.mutate(
      {
        title: data.title,
        dueDate: data.dueDate,
        linkUrl: data.linkUrl,
        imageUrl: data.imageUrl,
        tags: data.tags,
        done: data.done,
      },
      { onSuccess },
    );
  } else {
    postTodoMutation.mutate(
      {
        source: 'MANUAL',
        title: data.title,
        goalId: data.goalId,
        dueDate: data.dueDate,
        linkUrl: data.linkUrl,
        imageUrl: data.imageUrl,
        tags: data.tags,
      },
      { onSuccess },
    );
  }
};

[DevelopSoo]

로딩/에러 상태 누락

frontend/src/features/note/components/NoteDetailClient/index.tsx

Lines 15 to 23 in 851a4f8

	export default function NoteDetailClient({ noteId, goalId }: NoteDetailClientProps) {
	const { data: note } = useQuery(noteQueries.detail(noteId));
	const { data: goal } = useQuery(goalQueries.detail(goalId));
	const { data: todo } = useQuery({
	...todoQueries.detail(note?.todoId ?? 0),
	enabled: note?.todoId != null,
	});
	if (!note) return null;

if (!note) 로 분기처리 시 로딩 중인지 에러인지 확인할 수가 없습니다. 사용자를 위해 제대로 처리하는 것이 좋습니다.

예시

export default function NoteDetailClient({ noteId, goalId }: NoteDetailClientProps) {
  const {
    data: note,
    isLoading: isNoteLoading,
    isError: isNoteError,
  } = useQuery(noteQueries.detail(noteId));
  const { data: goal } = useQuery(goalQueries.detail(goalId));

  if (isNoteLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <p className="text-sm text-[#A4A4A4]">노트를 불러오는 중...</p>
      </div>
    );
  }

  if (isNoteError || !note) {
    return (
      <div className="flex h-64 items-center justify-center">
        <p className="text-sm text-red-500">노트를 불러오는 데 실패했습니다.</p>
      </div>
    );
  }

  // 이하 기존 로직 동일
  const tags = mapNoteTagsFromSource({ ... });

  return (
    <div className="p-5 md:p-10">
      {/* ... */}
    </div>
  );
}

여기도 마찬가지입니다.

frontend/src/features/dashboard/components/DashBoardDetail/index.tsx

Lines 38 to 45 in 851a4f8

	function GoalDetailItem({ goal }: { goal: GoalItemWithId }) {
	const { data: goalDetail } = useQuery(goalQueries.detail(goal.id));
	if (!goalDetail) {
	return <div>현재 할 일이 없습니다.</div>;
	}
	return <GoalBox data={goalDetail} />;
	}

[DevelopSoo]

as 타입 단언 사용 자제

frontend/src/features/dashboard/components/DashBoardDetail/index.tsx

Lines 29 to 33 in 851a4f8

	<div className="flex flex-col gap-[32px] pt-[10px]">
	{goals?.goals?.map((goal) =>
	goal.id != null ? <GoalDetailItem key={goal.id} goal={goal as GoalItemWithId} /> : null,
	)}
	</div>

as는 강제로 부여한 것이기 때문에 문제가 발생할 수 있습니다.

frontend/src/features/dashboard/components/DashBoardDetail/index.tsx

Line 17 in 851a4f8

const { data: goals } = useQuery(goalQueries.list());

여기에서 데이터를 불러올 때, 미리 타입 처리를 하거나 하면 좋을 것 같습니다.

이 부분도 마찬가지로 굳이 해야하는지 한 번 확인해보세요

frontend/src/shared/components/Sidebar/index.tsx

Lines 168 to 176 in 851a4f8

	openTodoCreateModal({
	goalDetailId: undefined,
	todo: {
	title: '',
	goalId: undefined as unknown as number,
	dueDate: undefined,
	linkUrl: undefined,
	imageUrl: undefined,
	tags: [],

[DevelopSoo]

타입 및 이름 불일치 문제

frontend/src/shared/types/types.ts

Lines 6 to 11 in 851a4f8

	export type Todo = {
	id: string;
	title: string;
	done: boolean;
	star: boolean;
	};

frontend/src/shared/types/api/schemas/api.types.ts

Lines 536 to 560 in 851a4f8

	TodoResponse: {
	/** Format: int64 */
	id?: number;
	title?: string;
	done?: boolean;
	/** Format: date-time */
	dueDate?: string;
	imageUrl?: string;
	linkUrl?: string;
	/** @enum {string} */
	source?: "MANUAL" | "GITHUB_ISSUE" | "GITHUB_PR";
	/** Format: int64 */
	sourceItemId?: number;
	status?: string;
	favorite?: boolean;
	goal?: components["schemas"]["GoalInfo"];
	/** Format: int64 */
	userId?: number;
	noteIds?: number[];
	tags?: components["schemas"]["TagInfo"][];
	/** Format: date-time */
	createdAt?: string;
	/** Format: date-time */
	updatedAt?: string;
	};

Response 타입은 id가 number인데 사용하는 곳은 string으로 변경되네요.
favorite와 star도 이름이 안맞는데 이건 의도하신건가요?

[DevelopSoo]

시멘틱 마크업

frontend/src/features/note/components/NoteItem/index.tsx

Lines 16 to 18 in 851a4f8

	<article
	onClick={() => router.push(`/goal/${goalId}/note/${note.id}`)}
	className="flex cursor-pointer flex-col gap-3 rounded-[20px] bg-[#FFF] p-4 md:gap-4 md:rounded-3xl md:px-[38px] md:pt-7 md:pb-8"

article에 굳이 onClick으로 페이지 이동을 하지 말고, Link 컴포넌트를 사용해봅시다.

그리고 h1 태그는 전체 페이지의 제목용도로 많이 쓰입니다. 하지만 지금은 모든 노트 아이템에 h1이 쓰이고 있습니다. h3과 같이 약간 중요도를 낮춰봅시다.

[DevelopSoo]

route.ts 경로 허용 범위 지정하기

frontend/src/app/api/proxy/[...endpoint]/route.ts

Lines 60 to 114 in 851a4f8

	const handler = async (request: NextRequest, context: ProxyRouteContext) => {
	if (!apiBaseUrl) {
	return NextResponse.json({ message: 'API_BASE_URL is not defined in environment variables' }, { status: 500 });
	}
	const { endpoint } = await context.params;
	const pathname = endpoint.join('/');
	const targetUrl = `${apiBaseUrl}/api/v1/${pathname}${request.nextUrl.search}`;
	const cookieStore = await cookies();
	const accessToken = cookieStore.get('accessToken')?.value;
	const upstreamHeaders = new Headers();
	for (const headerName of FORWARDED_REQUEST_HEADERS) {
	const headerValue = request.headers.get(headerName);
	if (headerValue) {
	upstreamHeaders.set(headerName, headerValue);
	}
	}
	if (accessToken) {
	upstreamHeaders.set('Authorization', `Bearer ${accessToken}`);
	}
	const response = await fetch(targetUrl, {
	method: request.method,
	headers: upstreamHeaders,
	body: ['GET', 'HEAD'].includes(request.method) ? undefined : await request.text(),
	cache: 'no-store',
	});
	const authResponse = response.clone();
	const responseHeaders = new Headers();
	for (const headerName of FORWARDED_RESPONSE_HEADERS) {
	const headerValue = response.headers.get(headerName);
	if (headerValue) {
	responseHeaders.set(headerName, headerValue);
	}
	}
	const nextResponse = new NextResponse(response.status === 204 ? null : await response.arrayBuffer(), {
	status: response.status,
	headers: responseHeaders,
	});
	await syncAuthCookies(pathname, authResponse, nextResponse);
	return nextResponse;
	};
	export const GET = handler;
	export const POST = handler;
	export const PATCH = handler;
	export const PUT = handler;
	export const DELETE = handler;

현재 코드는 유저가 어떤 API 주소로 호출을 해도 모두 접근할 수 있게 됩니다.
이를 막기 위해 허용된 API 경로만 접근할 수 있도록 수정해보세요.

예시

// 허용된 API 경로 패턴
const ALLOWED_PATH_PREFIXES = [
  'auth/',
  'todos',
  'goals',
  'notes',
  'notifications',
  'tags',
  'users/me',
] as const;

function isAllowedPath(pathname: string): boolean {
  // path traversal 방지
  if (pathname.includes('..') || pathname.includes('//')) {
    return false;
  }

  return ALLOWED_PATH_PREFIXES.some((prefix) => pathname.startsWith(prefix));
}

const handler = async (request: NextRequest, context: ProxyRouteContext) => {
  if (!apiBaseUrl) {
    return NextResponse.json({ message: 'API_BASE_URL is not defined ...' }, { status: 500 });
  }

  const { endpoint } = await context.params;
  const pathname = endpoint.join('/');

  // 경로 검증 추가
  if (!isAllowedPath(pathname)) {
    return NextResponse.json(
      { message: 'Requested API path is not allowed' },
      { status: 403 },
    );
  }

  const targetUrl = `${apiBaseUrl}/api/v1/${pathname}${request.nextUrl.search}`;
  // 이하 기존 로직 동일

[DevelopSoo]

불필요한 주석 제거

frontend/src/contexts/SidebarContext.tsx

Lines 62 to 77 in 851a4f8

	// {
	// icon: <CalendarDaysIcon className={sidebarMenuIconClassName} />,
	// name: '캘린더',
	// href: '/calendar',
	// },
	// TODO: 소통게시판, 찜한 할일은 중간 이후에 활성화
	// {
	// icon: <MessageSquareIcon />,
	// name: '소통게시판',
	// href: '/community',
	// },
	// {
	// icon: <StarIcon />,
	// name: '찜한 할일',
	// href: '/favorite-todo',
	// },

불필요한 주석이라면 제거해주세요. 추후에 사용한다면 주석으로
// TODO: 추후 개발 후 주석 제거 와 같이 작성해놓으면 다른 개발자들이 덜 헷갈릴 것 같습니다.