feat: 질문 추가 기능 작업

[prgmr99]

질문 추가 기능

---

🏄🏼‍♂️‍ Summary (요약)

• 회고 생성 중, 질문을 직접 커스텀하고, 추가하는 기능을 적용했습니다.

🫨 Describe your Change (변경사항)

• DesktopModal의 닫힘버튼 비활성화 옵션 추가(disableClose)
• 질문 추가 중 이탈 시, 경고 모달 적용

🧐 Issue number and link (참고)

• close feat: 질문 추가 작업 #580

📚 Reference (참조)

2025-10-18.8.37.51.mov

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one) (1)

• Not Rabbit

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 580-feat-질문-추가-작업

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[klmhyeonwoo]

타이포그래피 형태의 클릭 이벤트를 같은 버튼 느낌이어서 아래와 같이 해당 헤더 안에서 사용하는 버튼용 컴포넌트를 하나 만들어놓으면 스타일을 추후에 한 부분에서만 수정하면 좋지 않을까 싶은데 어떻게 생각하시는지 궁금해요!

const ActionButton = ({
  label,
  color,
  onClick,
}: {
  label: string;
  color: string;
  onClick: () => void;
}) => (
  <Typography
    variant="body14SemiBold"
    color={color}
    css={css`
      cursor: pointer;
    `}
    onClick={onClick}
  >
    {label}
  </Typography>
);

Suggested change

	<Typography variant="title16Bold">메인 질문</Typography>
	{isDeleteMode ? (
	<div
	css={css`
	display: flex;
	align-items: center;
	gap: 0.8rem;
	`}
	>
	<Typography
	variant="body14SemiBold"
	color="gray500"
	css={css`
	cursor: pointer;
	`}
	onClick={handleDeleteModeToggle}
	>
	취소
	</Typography>
	<Typography
	variant="body14SemiBold"
	color="gray900"
	css={css`
	cursor: pointer;
	`}
	onClick={handleDeleteModeToggle}
	>
	완료
	</Typography>
	</div>
	) : (
	<Typography
	variant="body14SemiBold"
	color="gray500"
	css={css`
	cursor: pointer;
	`}
	onClick={handleDeleteModeToggle}
	>
	삭제
	</Typography>
	)}
	{isDeleteMode ? (
	<>
	<ActionButton label="취소" color="gray500" onClick={handleDeleteModeToggle} />
	<ActionButton label="완료" color="gray900" onClick={handleDeleteModeToggle} />
	</>
	) : (
	<ActionButton label="삭제" color="gray500" onClick={handleDeleteModeToggle} />
	)}

[prgmr99]

헉..!! 저도 이게 있으면 참 좋겠다고 생각했는데,,,
마음이 급해서 실천하지는 못했습니다..

말씀대로 만들어서 반영해볼게요..!! 👍

[prgmr99]

@klmhyeonwoo @JaeIn1 @supersett

이렇게 구현해보았습니다..!!
(혹시 몰라서 다른 분들께도 공유드립니다..!!)

ActionButton은 텍스트 기반의 클릭 가능한 액션 버튼을 위한 공통 컴포넌트입니다.
일반적인 Button 컴포넌트와 달리, 배경이나 테두리 없이 텍스트만으로 구성된 가벼운 액션 버튼입니다.

위치는 apps/web/src/component/common/ActionButton/index.tsx입니다!

type ActionButtonProps = {
  label: string;
  variant: keyof typeof DESIGN_TOKEN_TEXT;
  color: ComponentProps<typeof Typography>["color"];
  onClick: () => void;
};

export default function ActionButton({ label, variant, color, onClick }: ActionButtonProps) {
  return (
    <Typography
      variant={variant}
      color={color}
      css={css`
        cursor: pointer;
      `}
      onClick={onClick}
    >
      {label}
    </Typography>
  );
}

2025-10-18.9.34.26.mov

실제로는 커서 포인터가 적용이 되는데, 녹화할 때는 적용이 안 되는 것 같아요!

[klmhyeonwoo]

고생하셨습니다요!! 👍 짱짱!!

[klmhyeonwoo]

어라 그러고보니 저 프로필 사진.. 달토끼.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[prgmr99]

어라 그러고보니 저 프로필 사진.. 달토끼.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

예전에 하고 저장한건데, 잘쓰고 있슴다ㅎ