[FE] 코멘트 리팩토링

fe/src/components/IssueDetail/IssueCommentContainer.tsx

@@ -31,23 +31,26 @@ export default function IssueCommentContainer({
  useCallback(() => getComments(issueNumber, cursor), [issueNumber, cursor])
  );
 
+ const handleScroll = useCallback(() => {
+ const scrollHeight = document.documentElement.scrollHeight;
+ const scrollTop = window.scrollY;
+ const clientHeight = window.innerHeight;
+ const margin = 200;
+
+ const isNearlyBottom = scrollHeight - (scrollTop + clientHeight) <= margin;
+ isNearlyBottom &&
+ issueComments?.hasMore &&
+ setCursor(issueComments.nextCursor);
+ }, [issueComments]);
+
  useEffect(() => {
  issueComments && setAllComments((prev) => [...prev, ...issueComments.data]);
  }, [issueComments]);
 
  useEffect(() => {
- const handleScroll = () => {
- const scrollHeight = document.documentElement.scrollHeight;
- const scrollTop = window.scrollY;
- const clientHeight = window.innerHeight;
-
- const isBottom = scrollHeight - scrollTop === clientHeight;
- isBottom && issueComments?.hasMore && setCursor(issueComments.nextCursor);
- };
-
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
- }, [issueComments]);
+ }, [handleScroll]);
 
  const isFilled = !!newComment;
 

fe/src/components/common/Sidebar/AssigneeField.tsx

@@ -19,15 +19,14 @@ export default function AssigneeField({
 }) {
  const { data: userList } = useFetch(getUsers);
 
- const assigneeDropdownList: DropdownItemType[] | undefined = userList?.map(
- (user) => ({
+ const assigneeDropdownList: DropdownItemType[] =
+ userList?.map((user) => ({
  id: user.userAccountId,
  variant: "withImg",
  name: "assignee",
  content: user.username,
  imgSrc: user.profileUrl,
- })
- );
+ })) || [];
 
  const generateAssignees = (userList: User[]) => {
  const currentAssignees = userList.filter((user) =>

fe/src/components/common/Sidebar/LabelField.tsx

@@ -19,15 +19,14 @@ export default function LabelField({
 }) {
  const { data: labelList } = useFetch(getLabels);
 
- const labelDropdownList: DropdownItemType[] | undefined = labelList?.map(
- (label) => ({
+ const labelDropdownList: DropdownItemType[] =
+ labelList?.map((label) => ({
  id: label.labelId,
  variant: "withColor",
  name: "label",
  content: label.name,
  colorFill: label.backgroundColor,
- })
- );
+ })) || [];
 
  const generateLabels = (labelList: Label[]) => {
  const currentLabels = labelList.filter((label) =>

fe/src/components/common/Sidebar/MilestoneField.tsx

@@ -13,18 +13,18 @@ export default function MilestoneField({
  onEditMilestone,
 }: {
  milestone: number;
- onMilestoneChange: (milestoneId: number) => void;
+ onMilestoneChange: (milestone: number) => void;
  onEditMilestone?: () => void;
 }) {
  const { data: milestonesList } = useFetch(getMilestones);
 
- const milestoneDropdownList: DropdownItemType[] | undefined =
+ const milestoneDropdownList: DropdownItemType[] =
  milestonesList?.map((milestone) => ({
  id: milestone.milestoneId,
  variant: "plain",
  name: "milestone",
  content: milestone.milestoneName,
- }));
+ })) || [];
 
  const generateMilestone = (milestonesList: Milestone[]) => {
  const milestone = milestonesList.find(

fe/src/pages/MainPage/NewIssuePage.tsx

@@ -83,7 +83,7 @@ export default function NewIssuePage() {
  />
  <div className="form">
  <TextInput
- name="title"
+ name="제목"
  variant="tall"
  placeholder="제목"
  value={newIssueInfo.title}