-
Notifications
You must be signed in to change notification settings - Fork 0
feat(apply) 빌더 지원 화면 및 러너 지원 화면 UI 작성 #22
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.
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
Open
mksoo
wants to merge
5
commits into
main
Choose a base branch
from
feature/builder
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
// ReusableInput.tsx | ||
import React from 'react'; | ||
import { TextField, Box } from '@mui/material'; | ||
|
||
interface InputFieldProps { | ||
id: string; | ||
label: string; | ||
defaultValue?: string; | ||
rows?: number; | ||
fullWidth?: boolean; | ||
placeholder?: string; | ||
multiline?: boolean; | ||
onChange: (e: any) => void; | ||
} | ||
|
||
const InputField: React.FC<InputFieldProps> = ({ | ||
id, | ||
label, | ||
defaultValue = '', | ||
rows = 3, | ||
fullWidth = true, | ||
placeholder = '', | ||
multiline = false, | ||
onChange, | ||
}) => { | ||
return ( | ||
<Box | ||
display="flex" | ||
justifyContent="center" | ||
alignItems="center" | ||
width="100%" | ||
marginY={2} | ||
> | ||
<TextField | ||
id={id} | ||
fullWidth={fullWidth} | ||
label={label} | ||
rows={rows} | ||
defaultValue={defaultValue} | ||
placeholder={placeholder} | ||
multiline={multiline} | ||
onChange={onChange} | ||
/> | ||
</Box> | ||
); | ||
}; | ||
|
||
export default InputField; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,139 @@ | ||
// MultipleChoiceField.tsx | ||
import React, { ChangeEvent, FC, useState } from "react"; | ||
import { | ||
FormControl, | ||
FormLabel, | ||
RadioGroup, | ||
FormControlLabel, | ||
Radio, | ||
Box, | ||
FormGroup, | ||
Checkbox, | ||
TextField, | ||
} from "@mui/material"; | ||
|
||
interface Option { | ||
value: string; | ||
label: string; | ||
} | ||
|
||
interface MultipleChoiceFieldProps { | ||
id: string; | ||
label: string; | ||
options: Option[]; | ||
defaultValue?: string; | ||
fullWidth?: boolean; | ||
isMultipleOption?: boolean; | ||
isOtherOption?: boolean; | ||
onChange?: (e: any) => void; | ||
} | ||
|
||
const MultipleChoiceField: FC<MultipleChoiceFieldProps> = ({ | ||
id, | ||
label, | ||
options, | ||
defaultValue, | ||
fullWidth = true, | ||
isMultipleOption = false, | ||
isOtherOption = false, | ||
onChange, | ||
}) => { | ||
const [selectedOptions, setSelectedOptions] = useState<string[]>( | ||
defaultValue ? [defaultValue] : [] | ||
); | ||
const [selectedRadio, setSelectedRadio] = useState<string>( | ||
defaultValue || "" | ||
); | ||
|
||
const handleRadioChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
setSelectedRadio(event.target.value); | ||
}; | ||
|
||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
const value = event.target.value; | ||
setSelectedOptions((prev) => | ||
prev.includes(value) | ||
? prev.filter((option) => option !== value) | ||
: [...prev, value] | ||
); | ||
}; | ||
|
||
return ( | ||
<Box | ||
sx={{ border: "1px solid #ccc", padding: 2, borderRadius: 2 }} | ||
display="flex" | ||
width="100%" | ||
marginY={2} | ||
> | ||
{isMultipleOption ? ( | ||
<FormControl component="fieldset" fullWidth={fullWidth}> | ||
<Box display="flex" flexDirection="column"> | ||
<FormLabel | ||
component="label" | ||
style={{ alignSelf: "flex-start", marginRight: 16 }} | ||
> | ||
{label} | ||
</FormLabel> | ||
<FormGroup> | ||
{options.map((option) => ( | ||
<FormControlLabel | ||
key={option.value} | ||
control={ | ||
<Checkbox | ||
checked={selectedOptions.includes(option.value)} | ||
onChange={onChange} | ||
value={option.value} | ||
/> | ||
} | ||
label={option.label} | ||
/> | ||
))} | ||
</FormGroup> | ||
</Box> | ||
</FormControl> | ||
) : ( | ||
<FormControl component="fieldset" fullWidth={fullWidth}> | ||
<Box display="flex" flexDirection="column"> | ||
<FormLabel | ||
component="label" | ||
style={{ alignSelf: "flex-start", marginRight: 16 }} | ||
> | ||
{label} | ||
</FormLabel> | ||
<RadioGroup | ||
aria-label={label} | ||
defaultValue={defaultValue} | ||
name={id} | ||
> | ||
{options.map((option) => ( | ||
<FormControlLabel | ||
key={option.value} | ||
value={option.value} | ||
control={<Radio onChange={onChange} />} | ||
label={option.label} | ||
/> | ||
))} | ||
{isOtherOption && ( | ||
<FormControlLabel | ||
value="other" | ||
control={<Radio onChange={onChange} />} | ||
label="기타" | ||
/> | ||
)} | ||
</RadioGroup> | ||
{selectedRadio === "other" && ( | ||
<TextField | ||
label="기타 내용" | ||
// value={otherText} | ||
fullWidth | ||
margin="normal" | ||
/> | ||
)} | ||
</Box> | ||
</FormControl> | ||
)} | ||
</Box> | ||
); | ||
}; | ||
|
||
export default MultipleChoiceField; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
// PrivacyPolicy.tsx | ||
import React from 'react'; | ||
import { Container, Typography, Box, List, ListItem, ListItemText, FormControlLabel, Checkbox } from '@mui/material'; | ||
|
||
const PrivacyPolicy: React.FC = () => { | ||
return ( | ||
<Container> | ||
<Box my={4}> | ||
<Typography variant="h4" component="h1" gutterBottom> | ||
개인정보 처리방침 | ||
</Typography> | ||
<Typography variant="body1" gutterBottom> | ||
가짜연구소는 「개인정보 보호법」에 따라 여러분의 개인정보를 아래와 같이 수집 및 이용하고자 하며, 법에 따라 수집한 개인정보를 안전하게 보호하겠습니다. 아래의 사항에 대해 충분히 읽어보신 후 동의 여부를 체크해 주시기 바랍니다. | ||
</Typography> | ||
|
||
<Box my={2}> | ||
<Typography variant="h6" component="h2" gutterBottom> | ||
▶ 개인정보의 수집·이용 목적 | ||
</Typography> | ||
<List> | ||
<ListItem> | ||
<ListItemText primary="지원서 등록 및 수정, 합격 여부 확인, 전형 진행기간 지원자와의 원활한 의사소통, 처리결과 회신, 지원이력 관리, 향후 활동 시 인사관리업무 참고 활용" /> | ||
</ListItem> | ||
</List> | ||
</Box> | ||
|
||
<Box my={2}> | ||
<Typography variant="h6" component="h2" gutterBottom> | ||
▶ 수집하는 개인정보의 항목 | ||
</Typography> | ||
<List> | ||
<ListItem> | ||
<ListItemText primary="필수항목 : 이메일 주소, 이름" /> | ||
</ListItem> | ||
<ListItem> | ||
<ListItemText primary="선택항목 : 합격자가 자기소개에 작성한 생년월일, 학력, 자격, 전화번호 등 정보 일체" /> | ||
</ListItem> | ||
</List> | ||
</Box> | ||
|
||
<Box my={2}> | ||
<Typography variant="h6" component="h2" gutterBottom> | ||
▶ 개인정보의 보유·이용 기간 | ||
</Typography> | ||
<Typography variant="body1" gutterBottom> | ||
가짜연구소 커뮤니티에서는 정보주체의 회원 가입일로부터 서비스를 제공하는 기간 동안에 한하여 가짜연구소 서비스를 이용하기 위한 최소한의 개인정보를 보유 및 이용 하게 됩니다. 회원가입/구글 폼 등을 통해 개인정보의 수집·이용, 제공 등에 대해 동의하신 내용은 언제든지 철회하실 수 있습니다. 회원 탈퇴를 요청하거나 수집/이용목적을 달성하거나 보유/이용기간이 종료한 경우, 사업 폐지 등의 사유발생시 개인 정보를 지체 없이 파기합니다. | ||
</Typography> | ||
</Box> | ||
|
||
<Box my={2}> | ||
<Typography variant="h6" component="h2" gutterBottom> | ||
▶ 동의를 거부할 권리 및 동의 거부에 따른 불이익 | ||
</Typography> | ||
<Typography variant="body1" gutterBottom> | ||
지원자는 개인정보의 수집, 이용 등과 관련한 위 사항에 대하여 원하지 않는 경우 동의를 거부할 수 있습니다. | ||
</Typography> | ||
<Typography variant="body1" gutterBottom> | ||
다만, 수집하는 개인정보의 항목에서 필수정보에 대한 수집 및 이용에 대하여 동의하지 않는 경우는 지원전형에 제한이 있을 수 있습니다. | ||
</Typography> | ||
</Box> | ||
</Box> | ||
</Container> | ||
); | ||
}; | ||
|
||
export default PrivacyPolicy; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💊 이게 더 안늘어나면 괜찮겠지만 더 늘어날 가능성이 있따면 Community 처럼 하위 페이지에서 한 번 더 라우팅하는 것도 좋을 것 같습니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵