Skip to content

Commit 4c5a9b6

Browse files
mksoomksoo
committed
러너 페이지 UI
1 parent 94d7d27 commit 4c5a9b6

File tree

9 files changed

+443
-68
lines changed

9 files changed

+443
-68
lines changed

‎src/App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import BoardView from "./modules/Community/BoardView.tsx";
1212
import { Container, CssBaseline } from "@mui/material";
1313
import { createTheme, ThemeProvider } from "@mui/material/styles";
1414
import ApplyBuilder from "./modules/Builder/ApplyBuilder.tsx";
15+
import IntroduceRunner from "./modules/Runner/IntroduceRunner.tsx";
16+
import ApplyRunner from "./modules/Runner/ApplyRunner.tsx";
1517

1618
function App() {
1719
const defaultTheme = createTheme();
@@ -26,7 +28,8 @@ function App() {
2628
<Route path="/" element={<Home />} />
2729
<Route path="/builder/intro" element={<IntroduceBuilder />} />
2830
<Route path="/builder/apply" element={<ApplyBuilder />} />
29-
<Route path="/runner" element={<Test />} />
31+
<Route path="/runner/intro" element={<IntroduceRunner />} />
32+
<Route path="/runner/apply" element={<ApplyRunner />} />
3033
<Route path="/community/*" element={<Board />} />
3134
<Route path="/bingo" element={<Bingo />} />
3235
<Route path="/signup" element={<SignUpForm />} />

‎src/modules/Builder/component/PrivacyPolicy.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎src/modules/Header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const drawerWidth = window.innerWidth * 0.7;
2929
const navItems = [
3030
{ name: "커뮤니티", path: "/comunity", permission: "" },
3131
{ name: "빌더", path: "/builder/intro", permission: "" },
32-
{ name: "러너", path: "/runner", permission: "" },
32+
{ name: "러너", path: "/runner/intro", permission: "" },
3333
{ name: "빙고", path: "/bingo", permission: "" },
3434
];
3535

‎src/modules/Runner/ApplyRunner.tsx‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import { Box, Button } from "@mui/material";
2+
import InputField from "../../components/common/InputField";
3+
import MultipleChoiceField from "../../components/common/MultipleChoiceField";
4+
import PrivacyPolicy from "../../components/common/PrivacyPolicy";
5+
import AgreeDatasetUsage from "./component/AgreeDatasetUsage";
6+
import { useState } from "react";
7+
8+
const ApplyRunner = () => {
9+
const [formData, setFormData] = useState({
10+
email: "",
11+
name: "",
12+
phone: "",
13+
introduceMe: "",
14+
discordId: "",
15+
notionId: "",
16+
credentialLink: "",
17+
portfolio: "",
18+
applyFirst: "",
19+
applySecond: "",
20+
applyThird: "",
21+
motivation: "",
22+
myFuture: "",
23+
myLevel: "",
24+
etc: "",
25+
question: "",
26+
availability: "",
27+
privacyAgree: true,
28+
agreeDatasetUsage: true,
29+
});
30+
31+
const handleChange = (id: string, value: any) => {
32+
setFormData((prevData) => ({
33+
...prevData,
34+
[id]: value,
35+
}));
36+
};
37+
38+
const handleSubmit = () => {
39+
console.log(formData);
40+
};
41+
42+
return (
43+
<>
44+
<h1>러너 지원서</h1>
45+
<InputField
46+
id="email"
47+
label="이메일"
48+
placeholder="이메일"
49+
onChange={(e) => handleChange("email", e.target.value)}
50+
/>
51+
<InputField
52+
id="name"
53+
label="이름"
54+
placeholder="이름"
55+
onChange={(e) => handleChange("name", e.target.value)}
56+
/>
57+
<InputField
58+
id="phone"
59+
label="연락처(000-0000-0000)"
60+
placeholder="연락처"
61+
onChange={(e) => handleChange("phone", e.target.value)}
62+
/>
63+
<InputField
64+
id="introduce-me"
65+
label="3줄 자기소개"
66+
placeholder="3줄 자기소개"
67+
multiline={true}
68+
rows={3}
69+
onChange={(e) => handleChange("introduceMe", e.target.value)}
70+
/>
71+
<InputField
72+
id="discord-id"
73+
label="디스코드 ID"
74+
placeholder="디스코드 ID"
75+
onChange={(e) => handleChange("discordId", e.target.value)}
76+
/>
77+
<InputField
78+
id="notion-id"
79+
label="Notion ID를 알려주세요!(팀 운영에 활용됩니다!)"
80+
placeholder="노션 ID"
81+
onChange={(e) => handleChange("notionId", e.target.value)}
82+
/>
83+
<InputField
84+
id="credential-link"
85+
label="LinkedIn 혹은 자신의 신원을 확인할 수 있는 링크(중복 신청 등의 문제를 방지하기 위한 본인 인증 과정 정도로 생각해주세요!)"
86+
placeholder="e.g. linkedIn, github, blog, CV 등"
87+
onChange={(e) => handleChange("credentialLink", e.target.value)}
88+
/>
89+
<InputField
90+
id="portfolio"
91+
label="기타 자신을 소개할 수 있는 링크(블로그, 유튜브 등 선택사항입니다!)"
92+
placeholder="e.g. linkedIn, github, blog, CV 등"
93+
onChange={(e) => handleChange("portfolio", e.target.value)}
94+
/>
95+
{/* 이 부분 DB랑 연동시켜야함 */}
96+
<MultipleChoiceField
97+
id="apply-first"
98+
label="지원하고자 하는 팀은 무엇인가요? (1지망)"
99+
options={[
100+
{ value: "1academy", label: "[Study] JAX 입문하기]" },
101+
{ value: "2academy", label: "[Study] JAX 입문하기]" },
102+
{ value: "3academy", label: "[Study] JAX 입문하기]" },
103+
{ value: "4academy", label: "[Study] JAX 입문하기]" },
104+
]}
105+
onChange={(e) => {
106+
handleChange("applyFirst", e.target.value);
107+
}}
108+
/>
109+
<MultipleChoiceField
110+
id="apply-second"
111+
label="지원하고자 하는 팀은 무엇인가요? (2지망)"
112+
options={[
113+
{ value: "5academy", label: "[Study] JAX 입문하기]" },
114+
{ value: "6academy", label: "[Study] JAX 입문하기]" },
115+
{ value: "7academy", label: "[Study] JAX 입문하기]" },
116+
{ value: "8academy", label: "[Study] JAX 입문하기]" },
117+
]}
118+
onChange={(e) => {
119+
handleChange("applySecond", e.target.value);
120+
}}
121+
/>
122+
<MultipleChoiceField
123+
id="apply-third"
124+
label="지원하고자 하는 팀은 무엇인가요? (3지망)"
125+
options={[
126+
{ value: "9academy", label: "[Study] JAX 입문하기]" },
127+
{ value: "10academy", label: "[Study] JAX 입문하기]" },
128+
{ value: "11academy", label: "[Study] JAX 입문하기]" },
129+
{ value: "12academy", label: "[Study] JAX 입문하기]" },
130+
]}
131+
onChange={(e) => {
132+
handleChange("applyThird", e.target.value);
133+
}}
134+
/>
135+
<InputField
136+
id="motivation"
137+
label="가짜연구소 활동에 지원하시게 된 동기가 궁금합니다!(지원 수가 모집 인원을 초과할 경우, 선정에 중요한 영향을 미치는 항목이니 잘 작성해주세요!)"
138+
placeholder=""
139+
multiline={true}
140+
rows={3}
141+
onChange={(e) => {
142+
handleChange("motivation", e.target.value);
143+
}}
144+
/>
145+
<InputField
146+
id="myfuture"
147+
label="내년 상반기 기대하는 나의 성장한 모습은 무엇인가요?"
148+
placeholder=""
149+
multiline={true}
150+
rows={3}
151+
onChange={(e) => {
152+
handleChange("myFuture", e.target.value);
153+
}}
154+
/>
155+
<InputField
156+
id="mylevel"
157+
label="1지망으로 지원한 팀에서 다루는 내용에 대한 현재 나의 수준에 대해서 간단히 말씀해주세요!"
158+
placeholder=""
159+
multiline={true}
160+
rows={3}
161+
onChange={(e) => {
162+
handleChange("myLevel", e.target.value);
163+
}}
164+
/>
165+
<InputField
166+
id="etc"
167+
label="기타 (팀별 계획표 참고하여 필요시 작성)"
168+
placeholder=""
169+
multiline={true}
170+
rows={3}
171+
onChange={(e) => {
172+
handleChange("etc", e.target.value);
173+
}}
174+
/>
175+
<InputField
176+
id="question"
177+
label="가짜연구소에 궁금한 것을 질문해주세요!"
178+
placeholder=""
179+
multiline={true}
180+
rows={3}
181+
onChange={(e) => {
182+
handleChange("question", e.target.value);
183+
}}
184+
/>
185+
<MultipleChoiceField
186+
id="availability"
187+
label="가짜연구소의 대부분의 모임 및 활동들은 주 1회 이루어집니다. 2024년 상반기에 주 1회 모임을 이끄시거나 참여하시는 것이 가능하신지 생각해봐주세요!"
188+
options={[
189+
{
190+
value: "cool",
191+
label: "특별한 일정 (1-2회 정도) 외에는 가능합니다",
192+
},
193+
{
194+
value: "condition-busy",
195+
label:
196+
"취업이나 이직 등 변동사항이 생기면 그때부터는 활동이 어려울것 같습니다.",
197+
},
198+
{
199+
value: "busy",
200+
label: "너무 바쁘고, 다른 일정들이 많아 예상할 수가 없습니다.",
201+
},
202+
]}
203+
isOtherOption={true}
204+
onChange={(e) => {
205+
handleChange("availability", e.target.value);
206+
}}
207+
/>
208+
<MultipleChoiceField
209+
id="privacy-agree"
210+
label="아래 개인정보 처리방침에 동의하십니까?"
211+
options={[
212+
{ value: "y", label: "예" },
213+
{ value: "n", label: "아니오" },
214+
]}
215+
onChange={(e) => {
216+
handleChange("privacyAgree", e.target.value === "y" ? true : false);
217+
}}
218+
/>
219+
<Box
220+
sx={{
221+
display: "flex",
222+
flexDirection: "column",
223+
justifyContent: "center",
224+
alignItems: "flex-start",
225+
textAlign: "start",
226+
border: "1px solid #ccc",
227+
borderRadius: 2,
228+
marginBottom: 2,
229+
}}
230+
>
231+
<PrivacyPolicy />
232+
</Box>
233+
<Box
234+
sx={{
235+
display: "flex",
236+
flexDirection: "column",
237+
justifyContent: "center",
238+
alignItems: "flex-start",
239+
textAlign: "start",
240+
border: "1px solid #ccc",
241+
borderRadius: 2,
242+
marginBottom: 2,
243+
}}
244+
>
245+
<AgreeDatasetUsage />
246+
</Box>
247+
<MultipleChoiceField
248+
id="dataset-agree"
249+
label="데이터셋 활용에 동의하십니까?"
250+
options={[
251+
{ value: "y", label: "예" },
252+
{ value: "n", label: "아니오" },
253+
]}
254+
onChange={(e) => {
255+
handleChange(
256+
"agreeDatasetUsage",
257+
e.target.value === "y" ? true : false
258+
);
259+
}}
260+
/>
261+
<Button
262+
fullWidth={true}
263+
variant="contained"
264+
color="primary"
265+
onClick={handleSubmit}
266+
>
267+
제출하기
268+
</Button>
269+
</>
270+
);
271+
};
272+
273+
export default ApplyRunner;

0 commit comments

Comments
 (0)