Skip to content

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
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 8 additions & 3 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import Board from "./modules/Community/index.tsx";
import BoardView from "./modules/Community/BoardView.tsx";
import { Container, CssBaseline } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import ApplyBuilder from "./modules/Builder/ApplyBuilder.tsx";
import IntroduceRunner from "./modules/Runner/IntroduceRunner.tsx";
import ApplyRunner from "./modules/Runner/ApplyRunner.tsx";

function App() {
const defaultTheme = createTheme();
Expand All @@ -22,9 +25,11 @@ function App() {
<Container className="App">
<Header />
<Routes>
<Route path="/" Component={Home} />
<Route path="/builder" element={<IntroduceBuilder />} />
<Route path="/runner" element={<Test />} />
<Route path="/" element={<Home />} />
<Route path="/builder/intro" element={<IntroduceBuilder />} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💊 이게 더 안늘어나면 괜찮겠지만 더 늘어날 가능성이 있따면 Community 처럼 하위 페이지에서 한 번 더 라우팅하는 것도 좋을 것 같습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<Route path="/builder/apply" element={<ApplyBuilder />} />
<Route path="/runner/intro" element={<IntroduceRunner />} />
<Route path="/runner/apply" element={<ApplyRunner />} />
<Route path="/community/*" element={<Board />} />
<Route path="/bingo" element={<Bingo />} />
<Route path="/signup" element={<SignUpForm />} />
Expand Down
48 changes: 48 additions & 0 deletions src/components/common/InputField.tsx
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;
139 changes: 139 additions & 0 deletions src/components/common/MultipleChoiceField.tsx
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;
66 changes: 66 additions & 0 deletions src/components/common/PrivacyPolicy.tsx
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;
Loading