🔵 Project Summery

오직 Javascript를 이용해 교내 학생 상담 신청 페이지를 만들었다.
방식은 교수 - 내용 - 날짜 - 시간 - 확인 메일 작성 순으로 모든 항목을 선택하면 확인 버튼을 누를 수 있다. 교수에 따라 수업 시간 외에 상담 신청이 가능하도록 만들었고, 공휴일과 주말은 클릭을 막아서 신청 할 수 없도록 제작했다.

교내 학생 상담 신청페이지 : 클릭!

🔵 Stack

• HTML/CSS
• JavaScript - class
• Scss
• flex
• Netlify

🔵 Skill

• 교수 선택 (라디오 버튼 형식)
• 상담 내용 선택 (토글 버튼 형식)
• 달력으로 날짜 선택
• 날짜 선택 시 시간 선택지 제공
• 이메일 입력 폼
• 반응형

🔵 Projects

📎 교수 선택

학생 상담 신청페이지에서 가장 먼저 교수를 선택하고 해당하는 교수의 스케쥴을 확인 후 본인의 상담 시간을 선택할 수 있도록 가장 먼저 선택 할 수 있게 제작했다. 그리고 교수 선택 시 하단의 선택 내용들이 모두 리셋시켜 해당 교수에 따라 상담 내용과 날짜와 시간을 선택할 수 있다.

📎 상담 내용 선택

상담 내용은 여러개가 될 수 있고, 학생의 주요 상담 내용을 선택지에 기본에 주어지고 기타를 선택하면 상담 내용을 기입할 수 있도록 지정했다. 기타는 선택하지 않으면 입력 폼이 열리지 않는다.

---

📎 달력으로 날짜 선택

한해의 달력을 제작해 해당하는 날짜에 상담을 신청할 수 있도록 제작했고, 해당 교수의 수업 시간을 제외하고, 공휴일과 주말을 제외한 날짜에 신청을 선택할 수 있다. 수업이 있는 날이나 쉬는 날은 제한적인 선택이나 선택 자체를 할 수 없도록 이벤트를 설정했다.

📎 날짜선택 시 시간 선택지 제공

날짜를 선택하면 오전/오후를 나눠서 신청 할 수 있도록 제작했다. 상담은 기본으로 1번 신청 할 수 있도록 기획했기 때문에 오전이나 오후 둘 중 하나만 선택할 수 있다.

📎 이메일 입력 폼

상담 신청 확인 이메일을 받을 수 있는 이메일을 작성하도록 입력 폼을 만들었고, 날짜와 시간을 모두 선택해야지 입력폼이 열리고 작성할 수 있다.

---

📎 반응형

상담페이지는 자유로운 플랫폼에서 이용할 수 있기 때문에 데스크탑과 테블릿, 모바일에서 모두 사용할 수 있도록 제작했다.

---

🔵 후기

오직 자바스크립트를 이용해서 상담신청 페이지를 제작했다. 실제로 데이터를 저장하는 페이지가 아닌 클라이언트 측의 UI와 자바스크립트의 new Date()를 이용해 달력을 만들어보는 작업에 포커스를 맞춘 프로젝트이다. 실제로 데이터를 저장하고 어드민 페이지로 관리 할 수 있는 작업까지 한다면 더욱 좋을 것이라는 아쉬움이 있다. 하지만 자바스크립트를 이용해서 라이브러리가 아닌 달력을 만들고 달력에 다양한 이벤트를 추가함으로써 자바스크립트의 본연의 기능들에 초점을 맞추고 알아갈 수 있는 시간이었다.

그리고 class를 이용해 이벤트리스너와 돔을 컨트롤 하면서 동적 이벤트를 만들고, class의 this를 이용해 코드 중복을 해결 할 수 있었다. this의 기능에 대한 확신이 없었는데 직접 사용하면서 어떤 방식으로 이용하는 것인지 알 수 있는 경험이 됐다.

🔵 교육 자료

• 카카오프로그래머스FE 스터디
• MDN Web Docs

교내 학생 상담 신청페이지 코드 보러가기 : 클릭!