Skip to content

Latest commit

 

History

History
177 lines (142 loc) · 8.42 KB

SAMPLE_README1.md

File metadata and controls

177 lines (142 loc) · 8.42 KB
Raw

1. 프로젝트 소개

1.1. 개발배경 및 필요성

이 프로젝트는 창의융합 해커톤에 참여하는 사람들에게 README 작성의 가이드라인을 제공하기 위해 제작되었습니다.

1.2. 개발목표 및 주요내용

창의융합 해커톤을 참여하는 사람들의 README 작성방법 이해을 돕는 것입니다.

1.3. 세부내용

가이드라인은 README에 들어가야 할 목차와 대략적인 내용을 설명합니다.

1.4. 기존 서비스(상품) 대비 차별성

작성하세요.


1.5. 사회적가지 도입 계획

작성하세요.


2.상세설계

2.1. 시스템 구성도

시스템 구성도

2.3. 사용기술

이름 버전
Python 3.8.0
Django 3.2.9
Django Rest Framework 3.12.0
Node.js 16.16.0
Vue.js 2.5.13

3. 개발결과

코딩역량강화플랫폼 Online Judge를 예시로 작성하였습니다.

3.1. 전체시스템 흐름도

  • 유저 플로우 차트

    코딩 역량강화 플랫폼의 회원가입 부분만 작성했습니다.
    사용자의 행동 흐름을 도식화하여 보여줍니다.

    유저 플로우 차트

  • 테스크 플로우 차트

    코딩 역량강화 플랫폼의 로그인 부분만 작성했습니다.
    주요 테스크의 프로세스를 도식화하여 보여줍니다.

    테스크 플로우 차트

  • 시스템 플로우 차트

    코딩 역량강화 플랫폼의 로그인 부분만 작성했습니다.
    테스크의 흐름에 따른 데이터 처리를 도식화하여 보여줍니다.

    시스템 플로우 차트

  • IA(Information Architecture)

    정보나 시스템의 구조를 도식화하여 보여줍니다.

    IA

3.2. 기능설명

메인 페이지

  • 상단 배너

    • 3초에 마다 자동으로 내용이 넘어갑니다.
      상단 배너

  • 공지사항

    • 최근 5개의 공지사항을 보여줍니다.
    • 발행된지 일주일이 안 된 공지사항은 new라는 mark표시를 해줍니다.
    • 공지사항 글을 클릭하면 해당 공지사항 게시글로 이동합니다.
    • 상단의 더보기 버튼을 클릭하면 공지사항 페이지로 이동합니다.
      공지사항

  • 이번 주 보너스 문제

    • 이번 주의 보너스 점수를 주는 문제를 보여줍니다.
    • 문제를 클릭하면, 해당 문제의 게시글로 이동합니다.
      이번 주 보너스 문제

  • 실시간 랭킹

    • 상위 랭킹 10명의 유저를 보여줍니다.
    • 상단의 더보기 버튼을 클릭하면 전체 랭킹 페이지로 이동합니다.
      실시간 랭킹

문제 페이지
  • 문제 목록
    • 사용자가 설정한 한 번에 보여줄 문제 갯수 만큼 한 화면에 문제를 띄워줍니다.
    • 검색창에서 문제의 제목 및 번호로 문제를 검색할 수 있습니다.
    • 난이도, 영역, 카테고리 별로 문제를 볼 수 있습니다.
    • 상단의 shuffle 이모지를 클릭하면 랜덤으로 선택된 문제 푸는 페이지로 이동합니다.
    • 목록에서 문제를 클릭하면 해당 문제를 푸는 페이지로 이동합니다. 문제 목록

3.3. 기능명세서

실시간 랭킹
라벨 이름 상세
S1 부산대학교 웹메일 - 부산대 웹메일 형식인지 검증
- 중복되는 이메일인지 검증
S2 부산대학교 웹메일 인증 코드 전송 - 클릭 시 인증 코드 메일로 전송
S3 메일 인증 코드 - 인증 요청 버튼 클릭 후 활성화
- 유효시간 5분
S4 메일 인증 코드 확인 - 인증코드 검증
S5 닉네임 - 4 ~ 12자 영어, 숫자, '_' 가능
S6 단과대학 선택 -부산대학교 단과대학 리스트 보여주기
S7 학과 선택 - 단과대학 안의 학과 리스트 보여주기
S8 비밀번호 - 입력 시 텍스트 보이지 않도록 •로 표현해주기
- 6자 이상 20자 이하, 영어와 숫자 조합 필수
S9 비밀번호 확인 - 입력 시 텍스트 보이지 않도록 •로 표현해주기
- 비밀번호와 동일한 지 검증
S10 회원가입 완료 - 비어 있는 입력 칸이 없는지 검증
-메일 인증 완료했는지 확인
-조건을 만족하면 회원가입 성공
S11 로그인 - 클릭 시 로그인 모달로 전환

3.4. 디렉토리 구조

├── build/                      # webpack 설정 파일
├── config/                     # 프로젝트 설정 파일
├── deplay/                     # 배포 설정 파일
├── src/                        # 소스 코드
│   ├── assets/                 # 이미지, 폰트 등의 정적 파일
│   ├── pages/                  # 화면에 나타나는 페이지
│   │   ├── page1/              # 페이지1
│   │   ├── page2/              # 페이지2
│   │   ├── components/         # 여러 페이지에서 공통적으로 사용되는 컴포넌트
│   ├── router/                 # 라우터
│   ├── store/                  # global state store
│   ├── styles/                 # 스타일
│   ├── utils/                  # 유틸리티
├── static/                     # 정적 파일

4. 설치 및 사용 방법

필요 패키지

  • 위의 사용 기술 참고
$ git clone https://github.com/test/test.git
$ cd test/frontend
$ npm i
$ export NODE_ENV="development" # windows: set NODE_ENV=development
$ npm run build:dll
$ export TARGET="http://localhost:8000"  # windows: set NODE_ENV=http://localhost:8000
$ npm run dev

5. 소개 및 시연영상

소개 및 시연영상


6. 팀 소개

MEMBER1 MEMBER2 MEMBER3
MEMBER1 MEMBER2 MEMBER3
[email protected] [email protected] [email protected]
프론트앤드 개발 인프라 구축
백앤드 개발		 DB 설계
백앤드 개발

7. 해커톤 참여 후기

  • MEMBER1

    작성하세요.

  • MEMBER2

    작성하세요.

  • MEMBER3

    작성하세요.