/STEM-Homepage

STEM Homepage construction

Primary LanguageJavaScript

STEM Homepage

  • Original design by forbiznet, modified by Taehee Jeong

기능

  1. 홍보용 페이지들
  • 스템의 활동 소개
  • 스템 연혁
  • 스템 조직도, 화장 인사말 등
  • 스템 멤버 소개
  • 게시판
  1. 어드민 페이지
  • 회원 관리
  • 게시글 관리
  • 스템 연혁 관리
  • 배너 관리 (추가 예정)
  1. 스템웨어
  • 스템 업무 기록 및 업무 할당을 위한 웹앱
  • 할 일 추가 및 할당
  • 마일스톤 설정
  • 세부 업무 설정
  • 스템 일정 달력
  • 태그 기능
  • 건의 사항 보기
  • 멤버간 연락망 강화 및 회원들 진로 기록
  • 게시판

사용법

  1. 메인 페이지

  2. 회원 가입 >1. 홈페이지 메인 우측 로그인창의 회원가입을 클릭한다. >2. 정보를 입력하고 가입한다. > * 비밀번호는 SHA-512로 암호화된다.

  3. 스템 회원 가입 >1. 1-ii. 회원 가입과 같은 방법으로 회원가입을 한다. >2. 관리자에게 스템 멤버로 등업을 요청한다. > * (추후 미리 등록된 이메일로 가입 가능하게 할 예정) >3. 관리자가 스템 회원임을 인증한 후 스템 회원으로 등업된다. >4. 다음 로그인 시 정보 수정 페이지로 이동되며, 정보를 입력한 후에는 로그인 시 스템웨어 페이지로 이동된다.

  4. 회원 정보 수정 >1. 로그인 후, 마이페이지로 들어간다. 단, 스템 회원으로 등업된 후 회원정보를 수정하지 않았을 경우 자동으로 이동된다. >2. 정보를 수정한다. 스템 회원의 경우, 여러 정보를 입력할 수 있다. > * 비밀번호 수정의 경우 비밀번호와 비밀번호 확인을 입력한다. > * 사진은 프로필 140x140px, 커버 사진은 423x200px 가 최적 사이즈이다. >3. 비밀번호 확인 란에 본인의 현재 비밀번호를 입력하고, 회원정보수정 을 누른다.

  5. 게시판 사용 >* 사용을 원하는 게시판에 들어가 글을 쓴다. >* 댓글을 달고 싶은 게시글에 들어가 댓글을 단다. >* 게시물은 삭제/수정이 가능하며, 댓글은 삭제가 가능하다. > * (나중에 답글, 댓글 수정, 댓댓글 등 구현 예정)

  6. 어드민

  7. 스템 회원 등업 >1. 어드민 페이지에서 Member 탭으로 이동한다. >2. Create 를 누른다. >3. 다른 칸은 비워두고, User 칸에 등업하려는 유저를 선택한다. > * 이미 스템 회원으로 등록되어있는 사용자를 선택하지 마세요 >4. Submit 을 누른다.

  8. 스템 연혁 등록 >1. 어드민 페이지에서 History 탭으로 이동한다. >2. Create 를 누른다. >3. Start에 시작한 날짜, End에 끝난 날짜를 넣는다. 하루짜리면 End는 비워두고 One-day Event 에 체크한다. >4. 'Description 에 설명을 입력한다. >5. **Submit`** 을 누른다.

  9. 배너 관리 (추가 예정)

  10. 스템웨어

  11. 대시보드 >대시보드는 자신의 현재 업무 및 현재 스템에서 일어나고 있는 일들을 잘 볼 수 있게 구성된다.

>1. 건의 사항 올리기
>2. 현재 자신이 속한 마일스톤/일거리/세무 업무 모니터
>3. 이번 주 스템 전체 업무 보여주기
>4. 최근 게시글 보여주기 *(미구현)*
  1. 업무 카드 구조 >업무들은 업무 카드 구조를 통해 관리된다. 새 할 일이 생길때마다 업무 카드를 만드는 식이다.
>1. `마일스톤`
>  * `마일스톤`은 제일 큰 업무 단위이다. 비전멘토링, SRT, 분기 전체 업무같은 것들이 여기에 포함될 수 있다.
>2. `일거리`
>  * *자세한 프로젝트*들이다. 비전멘토링을 예로 들면 각 부, 장소 섭외 등이다.
>3. `세부 업무` 
>  * 더 자세한 업무로, *단위업무*라고 보면 된다.
>4. 업무 속성들
>  * 이름/내용: 말 그대로
>  * 진행도: 업무의 진행도를 나타낸다. 상위 업무의 진행도는 **하위 업무들의 진행도의 평균**이다.
>  * 중요도: 업무의 중요도를 나타내며, `시간날 때`, `보통`, `중요`, `급함` 이 있다.
>  * 상태: 업무가 진행중인지를 나타낸다. `진행 중`, `완료`, `보관됨`, `제외됨` 이 있다. 
>  * 상위 업무: *한 단계 위*의 업무를 나타낸다.
>  * 하위 업무: *한 단계 아래*의 업무를 나타낸다.
>  * 참여자: 현재 업무에 참여하고 있는 사람, 즉 담당자를 나타낸다.
>  * 마감일: 업무의 마감일을 나타낸다.
  1. 마일스톤 / 일거리 만들기 >마일스톤일거리는 각각의 목록 페이지에서 바로 만들 수 있다.
>1. 마일스톤/일거리 페이지에 들어가 오른쪽 위의 빨간색 **`(+)`** 버튼을 누른다.
>2. 이름과 설명을 입력하고, **`추가`** 를 누른다.
>3. 만들어진 `마일스톤` 및 `일거리`는 각각을 클릭해서 상세 페이지로 들어갈 수 있다.
>  * 현재는 이름 및 설명을 입력하는 정도지만, 추후에는 마감일, 중요도 등도 설정 가능하게 할 예정이다.
  1. 세부 업무 만들기 >세부 업무일거리 에 종속되며, 일거리 세부 페이지를 통해서만 만들 수 있다.
>만드는 방법은 다른 업무 만들기와 동일하며, **`세부 업무 관리`** 를 눌러 추가한다.
  1. 각 업무 수정 >3-ii-d. 의 업무 속성들은 업무 상세 페이지에서 수정할 수 있다. 각 속성 옆에 연필 버튼을 누르면 각 속성 수정 페이지가 뜨거나, 커서가 생긴다.
>단, 하위 업무는 **`일거리 관리`** 나 **`세부 업무 관리`** 버튼을 눌러 수정한다. 
  1. 업무 삭제 (미구현)

  2. 스템 일정 달력 >* 스템 일정 달력은 스템 구글 캘린더에서 가져온 데이터 및 스템 현재 업무들의 마감일을 보여준다. >* 스템 구글 캘린더에 일정을 추가하는 방법은 스템 내부 매뉴얼을 참조한다. >* 스템 업무들의 마감일을 달력에서 업무를 드래그하여 조정할 수 있으며, 클릭하면 해당 업무로 이동한다.

  3. 태그 검색 >* 현재 업무의 설명과 업무의 댓글에서 해시태그를 지원한다. >* 태그 검색에서 각 태그를 누르면, 해당 태그가 달린 업무와 댓글을 볼 수 있다. >* 해시태그의 형식은 #태그의_이름 이며, #123 과 같이 숫자로만 된 태그는 인식하지 않는다. >* 태그에 들어갈 수 있는 단어는 언더바(_), 문자(알파벳, 한글, 한자 등..) 이다. 이 외의 특수문자는 태그로 인식하지 않는다. 단, 알파벳의 경우 소문자로만 이루어지며, 대문자는 소문자로 변경된다.

  4. 건의 사항 보기 >* 건의사항 역시 하나의 마일스톤으로 등록되어 있으나, 따로 건의사항만 간단하게 볼 수 있다. >* 또한, 건의사항 페이지에서 새 건의사항을 입력할 수도 있다. 이 때, 건의사항은 새 이슈로 들어간다.

10. 게시판
	>* special 태그를 통해 게시판이 구현된다. 해당 게시판의 이름이 게시물의 태그로 들어가게 된다.
	>* 게시판 목록을 눌러 전체 게시판 목록을 보거나, 각 게시판을 선택해 글을 쓰고 볼 수 있다.
	>* 글을 쓸 때 파일을 추가할 수 있다. *(구현 예정)*
	>* 게시글에 태그를 달 수 있다. *(구현 예정)*
	>* 관심 태그를 설정하면 해당 게시판들만 목록에 띄울 수 있다. *(구현 예정)*
	>* 만들고 싶은 게시판을 추가할 수 있다. *(구현 예정)*

11. 멤버 프로필 페이지
	>* `스템 사람들` 에서 스템 회원을 누른 후 맨 아래의 `자세히 보기`를 누르면 회원의 프로필로 들어간다.
	>* 다른 사람의 프로필에 댓글을 달거나, 태그를 달 수 있다.
	>* 내 프로필의 경우 프로필을 수정할 수 있다.

12. 알림 시스템
	>* 자신과 관련 있는 이벤트 또는 스템 전체 공지 등이 있을 때 알림 시스템을 통해 알림이 전달된다.
	>* 추후 이메일로 보내는 기능도 구현 예정