Skip to content

Qnrr 377 면접 준비/완료 모달 Footer 디자인 수정 #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aken-you merged 3 commits into from
Jul 19, 2025
Merged

Qnrr 377 면접 준비/완료 모달 Footer 디자인 수정 #94

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e4b595
refactor: 면접 준비/완료 모달 Footer 디자인 수정
aken-you Jul 19, 2025
b17c97d
refactor: 면접 모달 trigger text 변경
aken-you Jul 19, 2025
2fdee75
refactor: DoneForm의 TextAreaInput 위치 수정
aken-you Jul 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 86 additions & 69 deletions src/features/study/ui/today-study-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,8 @@ export default function TodayStudyModal({

return (
<Modal.Root>
<Modal.Trigger>
<div className="rounded-100 font-designer-16b bg-fill-brand-default-default text-text-inverse hover:bg-fill-brand-default-hover active:bg-fill-brand-default-pressed flex cursor-pointer items-center justify-center px-100 py-75">
<CreateIcon />
<span className="ml-75">작성하기</span>
</div>
<Modal.Trigger asChild>
<Button size="medium">{isInterviewee ? '준비하기' : '완료하기'}</Button>
</Modal.Trigger>
<Modal.Portal>
<Modal.Overlay />
Expand All @@ -62,13 +59,11 @@ export default function TodayStudyModal({
</Modal.Close>
</Modal.Header>

<Modal.Body className="flex flex-col gap-400">
{isInterviewee ? (
<ReadyForm refetch={refetch} data={data} />
) : (
<DoneForm refetch={refetch} data={data} />
)}
</Modal.Body>
{isInterviewee ? (
<ReadyForm refetch={refetch} data={data} />
) : (
<DoneForm refetch={refetch} data={data} />
)}
</Modal.Content>
</Modal.Portal>
</Modal.Root>
Expand Down Expand Up @@ -113,34 +108,44 @@ function ReadyForm({

return (
<>
<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
면접 주제
<span className="font-designer-13m text-text-error pl-100">필수</span>
</label>
<span className="font-designer-14r text-text-subtle mb-150">
이번 스터디에서 다룰 면접 주제를 입력하세요
</span>
<BaseInput
placeholder="네트워크 기초, 운영체제 프로세스 관리, 자료구조 시간복잡도 비교"
value={interviewTopic}
onChange={(e) => setInterviewTopic(e.target.value)}
/>
</div>
<Modal.Body className="flex flex-col gap-400">
<div className="flex flex-col gap-250">
<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
면접 주제
<span className="font-designer-13m text-text-error pl-100">
필수
</span>
</label>
<span className="font-designer-14r text-text-subtle">
이번 스터디에서 다룰 면접 주제를 입력하세요
</span>
</div>

<BaseInput
placeholder="네트워크 기초, 운영체제 프로세스 관리, 자료구조 시간복잡도 비교"
value={interviewTopic}
onChange={(e) => setInterviewTopic(e.target.value)}
/>
</div>

<div className="flex flex-col gap-250">
<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
참고 자료
</label>
<span className="font-designer-14r text-text-subtle">
참고할 링크나 자료가 있다면 입력해 주세요
</span>
</div>

<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
참고 자료
</label>
<span className="font-designer-14r text-text-subtle mb-150">
참고할 링크나 자료가 있다면 입력해 주세요
</span>
<BaseInput
placeholder="https://github.com"
value={referenceLink}
onChange={(e) => setReferenceLink(e.target.value)}
/>
</div>
<BaseInput
placeholder="https://github.com"
value={referenceLink}
onChange={(e) => setReferenceLink(e.target.value)}
/>
</div>
</Modal.Body>

<Modal.Footer className="flex justify-end gap-100">
<Modal.Close asChild>
Expand Down Expand Up @@ -202,37 +207,49 @@ function DoneForm({

return (
<>
<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
진행 현황
<span className="font-designer-13m text-text-error pl-100">필수</span>
</label>
<span className="font-designer-14r text-text-subtle mb-150">
면접 완료 후 해당 지원자의 상태를 업데이트해 주세요.
</span>
<SingleDropdown
options={STUDY_PROGRESS_OPTIONS}
defaultValue={progressStatus}
placeholder="선택해주세요"
onChange={(e) => setProgressStatus(e as StudyProgressStatus)}
/>
</div>
<Modal.Body className="flex flex-col gap-400">
<div className="flex flex-col gap-250">
<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
진행 현황
<span className="font-designer-13m text-text-error pl-100">
필수
</span>
</label>
<span className="font-designer-14r text-text-subtle">
면접 완료 후 해당 지원자의 상태를 업데이트해 주세요.
</span>
</div>

<SingleDropdown
options={STUDY_PROGRESS_OPTIONS}
defaultValue={progressStatus}
placeholder="선택해주세요"
onChange={(e) => setProgressStatus(e as StudyProgressStatus)}
/>
</div>

<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
피드백
<span className="font-designer-13m text-text-error pl-100">필수</span>
</label>
<span className="font-designer-14r text-text-subtle mb-150">
면접 결과에 대한 간단한 피드백을 입력해 주세요.
</span>
<TextAreaInput
placeholder="커뮤니케이션 능력은 우수하나, 자료구조 이해도가 부족해 추가 학습이 필요해 보입니다."
value={feedback}
maxLength={100}
onChange={(e) => setFeedback(e)}
/>
</div>
<div className="flex flex-col gap-250">
<div className="flex flex-col gap-100">
<label className="font-designer-16b text-text-default inline-block">
피드백
<span className="font-designer-13m text-text-error pl-100">
필수
</span>
</label>
<span className="font-designer-14r text-text-subtle">
면접 결과에 대한 간단한 피드백을 입력해 주세요.
</span>
</div>

<TextAreaInput
placeholder="커뮤니케이션 능력은 우수하나, 자료구조 이해도가 부족해 추가 학습이 필요해 보입니다."
value={feedback}
maxLength={100}
onChange={(e) => setFeedback(e)}
/>
</div>
</Modal.Body>

<Modal.Footer className="flex justify-end gap-100">
<Modal.Close asChild>
Expand Down