Skip to content

Commit

Permalink
Merge pull request #147 from KUSITMS-29th-TEAM-B/fix/#146
Browse files Browse the repository at this point in the history
Fix/#146 버튼 활성화 조건 수정 및 필수 입력 스타일 추가
  • Loading branch information
ymj07168 authored May 22, 2024
2 parents a4499c9 + b6fedac commit cc24a5b
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 10 deletions.
36 changes: 32 additions & 4 deletions src/pages/ExperienceEditPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,16 @@ const ExperienceEditPage = () => {
id: "",
name: "",
});

const isSaveButtonDisabled =
!expData.title ||
!primeTagItem.id ||
!subTagItem.id ||
!expData.startedAt ||
!expData.endedAt ||
!expData.contents[0].answer ||
!expData.contents[1].answer;

// 저장 모달
const [isModalOpen, setIsModalOpen] = React.useState(false);

Expand Down Expand Up @@ -410,7 +420,9 @@ const ExperienceEditPage = () => {
<BasicFormContainer>
<div className="top">
<div className="form-item">
<div className="label">경험 기간</div>
<div className="label">
경험 기간<div className="required">*</div>
</div>
<div className="input">
<OneDatePick
date={new Date(expData.startedAt)}
Expand All @@ -430,7 +442,9 @@ const ExperienceEditPage = () => {
</div>
</div>
<div className="form-item">
<div className="label">경험 분류</div>
<div className="label">
경험 분류<div className="required">*</div>
</div>
<div className="input">
<Input
readOnly
Expand Down Expand Up @@ -677,6 +691,7 @@ const ExperienceEditPage = () => {
<Chip text={item.type} />
</div>
<Textarea
required={index === 0 || index === 1}
value={expData.contents[index].answer}
label={`${index + 1}. ${item.question}`}
rows={8}
Expand Down Expand Up @@ -718,12 +733,17 @@ const ExperienceEditPage = () => {
</button>
경험 수정
</div>
<CustomButton onClick={handleSaveExperience}>저장</CustomButton>
<CustomButton
onClick={handleSaveExperience}
disabled={isSaveButtonDisabled}
>
저장
</CustomButton>
</TopContainer>
<ContentContainer>
<TitleInput
value={expData.title}
placeholder="경험의 제목을 입력해주세요"
placeholder="경험의 제목을 입력해주세요 *"
onChange={(e) => setExpData({ ...expData, title: e.target.value })}
></TitleInput>
{renderExperienceBasicInfo()}
Expand Down Expand Up @@ -832,8 +852,16 @@ const BasicFormContainer = styled.div`
gap: 12px;
}
.label {
display: flex;
flex-direction: row;
${(props) => props.theme.fonts.subtitle2};
color: ${(props) => props.theme.colors.neutral700};
gap: 0.2rem;
align-items: center;
}
.required {
${(props) => props.theme.fonts.cap1};
color: var(--sub-tertiary-800, #ffa63e);
}
.input {
display: flex;
Expand Down
28 changes: 22 additions & 6 deletions src/pages/ExperienceWritePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,9 @@ const ExperienceWritePage = () => {
!primeTagItem.id ||
!subTagItem.id ||
!expData.startedAt ||
!expData.endedAt;
!expData.endedAt ||
!expData.contents[0].answer ||
!expData.contents[1].answer;

const handleSaveExperience = async () => {
let experienceData = { ...expData };
Expand Down Expand Up @@ -393,7 +395,9 @@ const ExperienceWritePage = () => {
<BasicFormContainer>
<div className="top">
<div className="form-item">
<div className="label">경험 기간</div>
<div className="label">
경험 기간<div className="required">*</div>
</div>
<div className="input">
<OneDatePick
date={expData.startedAt ? new Date(expData.startedAt) : null}
Expand All @@ -413,7 +417,10 @@ const ExperienceWritePage = () => {
</div>
</div>
<div className="form-item">
<div className="label">경험 분류</div>
<div className="label">
경험 분류
<div className="required">*</div>
</div>
<div className="input">
<Input
readOnly
Expand Down Expand Up @@ -445,7 +452,7 @@ const ExperienceWritePage = () => {
<input
value={newTag}
onChange={(e) => setNewTag(e.target.value)}
onKeyDown={handleTagSearch}
onKeyUp={handleTagSearch}
/>
<Search />
</TagSearchBox>
Expand Down Expand Up @@ -610,7 +617,7 @@ const ExperienceWritePage = () => {
value={newKeyword}
placeholder="직접 역량 태그를 생성할 수 있어요"
onChange={(e) => setNewKeyword(e.target.value)}
onKeyDown={(e) => handleMyKeywords(e)}
onKeyUp={(e) => handleMyKeywords(e)}
/>
</MyKeywordInput>
<div className="checkbox-list">
Expand Down Expand Up @@ -662,6 +669,7 @@ const ExperienceWritePage = () => {
<Chip text={item.type} />
</div>
<Textarea
required={index === 0 || index === 1}
value={expData.contents[index].answer}
label={`${index + 1}. ${item.question}`}
rows={8}
Expand Down Expand Up @@ -713,7 +721,7 @@ const ExperienceWritePage = () => {
<ContentContainer>
<TitleInput
value={expData.title}
placeholder="경험의 제목을 입력해주세요"
placeholder="경험의 제목을 입력해주세요 *"
onChange={(e) => setExpData({ ...expData, title: e.target.value })}
></TitleInput>
{renderExperienceBasicInfo()}
Expand Down Expand Up @@ -822,8 +830,16 @@ const BasicFormContainer = styled.div`
gap: 12px;
}
.label {
display: flex;
flex-direction: row;
${(props) => props.theme.fonts.subtitle2};
color: ${(props) => props.theme.colors.neutral700};
gap: 0.2rem;
align-items: center;
}
.required {
${(props) => props.theme.fonts.cap1};
color: var(--sub-tertiary-800, #ffa63e);
}
.input {
display: flex;
Expand Down

0 comments on commit cc24a5b

Please sign in to comment.