🍊 오픈소스소프트웨어프로젝트 1반 오소리 프론트엔드 레포지토리 !
 |
 |
 |
 |
|---|---|---|---|
| 이소은 | 정예빈 | 정지원 | 최 민 |
| 팀장, 백엔드, 배포 | 팀원, 프론트엔드 | 팀원, 프론트엔드 | 팀원, 프론트엔드, 배포, 디자인 |
| 경영정보학과 | 산업시스템공학과 | 건축공학전공 | 경영정보학과 |
| 융합SW연계전공 | 융합SW연계전공 | 융합SW연계전공 | 데이터사이언스연계전공 |
| @saokiritoni | @yebin-jeong | @study2895 | @Minn-Choi |
📘 융합SW교육원 박효순 교수님
⬇️ 프로젝트의 백엔드 레포지토리는 아래에서 확인하실 수 있습니다 ⬇️
아코밍(Akoming)은 동국대학교 학생들을 위한 통합 포트폴리오 관리 서비스이다. 현재 대학생들의 다양한 활동을 체계적으로 관리할 수 있는 적절한 서비스가 부족한 상황에서, 저학년부터 고학년까지의 활동을 체계적으로 관리하고 이를 취업 준비에 활용할 수 있도록 돕는 것이 목표다.
'아코(Ako)'와 'Coming'의 합성어인 프로젝트명은 '성장하는 아코가 온다'는 의미를 담고 있으며, 지속적으로 성장하는 코끼리를 모티브로 하고 있다.
이 서비스를 통해 학생들은 교과/비교과 활동, 대외활동, 공모전, 각종 대회, 봉사활동 등 취업 관련 활동을 체계적으로 기록할 수 있으며, 다른 학우들과 목표를 공유하고 서로 격려하며 즐거운 대학 생활을 영위할 수 있다.
• 본 프로젝트는 웹 기반의 동국대학교 학생 포트폴리오 아카이빙 서비스로, 동국대학교 재학생 및 졸업생들이 사용할 수 있도록 특화된 기능을 제공한다.
• 동국대학교 학생들이 학업 및 비교과 활동을 효율적으로 기록하고 관리할수 있도록 지원한다. 대외활동, 공모전, 봉사활동 등 다양한 경험을 카테고리화하여 정리하여 졸업 후 취업 준비에 활용할 수 있게 한다.
• 사용자가 하루의 목표를 설정하고 이를 달성하도록 유도하여 자기 관리 능력을 강화한다. 또한 친구들과의 목표 공유 및 격려를 통해 대학 생활의 동기를
높인다.
• 나아가 학사 일정을 간편하게 확인하고 관리하여 학생들이 시간 관리를 효율적으로 할 수 있도록 돕는다.
동국대학교 학생의 회원 가입 및 로그인- 사용자 프로필 관리 (개인 정보, 작성 내용 등)
- 교과 및 비교과 활동 기록 (대외활동, 공모전, 봉사활동 등)
- 활동 카테고리화 및 필터링
- 활동에 대한 상세 기록 및 첨부 이미지 업로드
- 사용자가
개인 목표를 설정하고 관리 - 친구와의 목표 공유 및 격려를 위한
커뮤니티공간
- 동국대학교의
학사 일정확인
- 시각적으로 변화하는 캐릭터와
도장 시스템을 통해 동기 부여
📦 프로젝트 루트
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┣ 📂data
┃ ┃ ┣ 📂fonts
┃ ┃ ┣ 📂Icons
┃ ┃ ┃ ┗ 📂akoming
┃ ┃ ┣ 📂images
┃ ┃ ┗ 📂styles
┃ ┣ 📂components # 공용 컴포넌트
┃ ┃ ┣ 📂common
┃ ┃ ┗ 📂layout
┃ ┣ 📂router # Vue Router
┃ ┣ 📂store # Vuex
┃ ┣ 📂views
┃ ┃ ┣ 📂akopolio # 아코폴리오 관련 페이지
┃ ┃ ┣ 📂calendar # 학사 일정 캘린더 관련 페이지
┃ ┃ ┣ 📂feed # 피드 관련 페이지
┃ ┃ ┣ 📂login # 로그인, 회원가입, 마이페이지 관련 페이지
┃ ┃ ┣ 📂mainpage # 메인 페이지 관련 파일
┃ ┃ ┗ 📜NotFound.vue # 404 에러 페이지
┣ 📂public
┣ 📂docs # 보고서 등 문서 폴더
┃ ┗ 📜README.md
┣ 📜App.vue
┗ 📜main.js
| 로그인 및 회원가입 | 메인페이지 | 마이페이지 및 캘린더 |
|---|---|---|
 |
 |
 |
| 아코폴리오 | 아코피드 |
|---|---|
 |
 |
| 페이지 구분 | 기능 | 설명 | 우선 순위 | 구현 가능 여부 |
|---|---|---|---|---|
| 회원가입 및 로그인 | 로그인 | • 이메일, 비밀번호로 로그인 | P1 | 가능 |
| 회원가입 | • @dgu.ac.kr 이메일만 입력 가능 • 이메일, 닉네임, 비밀번호, 실명 입력 |
P1 | 가능 | |
| 이메일 인증 코드 전송 및 인증 | P1 | 가능 | ||
| 메인 | 퀘스트 | • 4가지 미션을 완료하면 스탬프 하나 적립 • 7개가 한 회차로 구성된 퀘스트 • 기간 제한: 일주일 • 퀘스트 완성 시 아코 캐릭터 성장 |
P1 | 가능 |
| 아코자국 설정/수정/삭제/달성 완료로 변경 | P1 | 가능 | ||
| 피드 | 친구들의 아코자국 모아보기 | P1 | 가능 | |
| 친구들의 아코자국 반응 | • 이모지 + 댓글 | P1 | 가능 | |
| 친구 | 친구 팔로우 및 언팔로우 | • 이메일로 검색 | P1 | 가능 |
| 마이페이지 | 회원 정보 조회 및 수정 | • 비밀번호 수정, 닉네임 수정 • 추가 설정: 학번, 학과, 자기소개 수정 |
P1 | 가능 |
| 캘린더 | 학사일정 | P2 | 가능 | |
| 아코폴리오 | 아코폴리오 작성/수정/삭제 | • 태그 기능 • 느낀점은 PMI로 나누어 작성 • 경험은 STAR로 나누어 작성 • 이미지 업로드 |
P1 | 가능 |
| 하단바 구성 | • 1) 학사일정 • 2) 아코폴리오 • 3) 홈 (퀘스트, 아코자국) • 4) 피드 • 5) 마이페이지 |
P1 | 가능 |
| 로딩화면 및 로그인 | 회원가입 및 이메일 인증 | 메인페이지 | 마이페이지 |
|---|---|---|---|
 |
 |
 |
 |
- 회원가입 및 로그인: 이메일을 통해 회원가입 및 로그인을 한다. 비밀번호는 암호화를 하여 데이터베이스에 저장한다.
- 동국대학교 학생 인증: 회원 가입 시,
동국대학교 이메일을 통해서만 가입이 가능하며, 해당 이메일로 인증 번호를 전송하고 확인하는 절차를 거친다. - 마이페이지: 유저는 자신의 정보를 조회하고 수정할 수 있다.
- 퀘스트는 사용자의 기능 이용을 유도하기 위한 장치이다. 하루의 퀘스트를 모두 완료하면 하나의 스탬프를 얻을 수 있다.
- 퀘스트는
출석 체크,아코자국 남기기,친구의 아코자국에 반응 남기기,아코폴리오 작성의 총 네 가지로 구성된다. - 스탬프 7개를 모두 모으면 나의 아코 캐릭터가 성장한다.
| 캘린더 | 아코피드 메인 | 아코자국 작성 | 아코자국 수정 |
|---|---|---|---|
 |
 |
 |
 |
- 학사 일정: 학사 일정을 동국대학교 홈페이지에 접속하지 않고, 아코밍 내에서 연/월을 기준으로 쉽게 확인할 수 있다.
- 이모지를 선택 후 댓글을 작성하여 다른 사용자가 적은 오늘의 문구인 ‘
아코 자국’에 공감하고 소통할 수 있다. - 이메일을 검색 창에 입력하여 팔로우하고 싶은 사용자를 팔로우할 수 있으며 다른 사용자 또한 이 기능을 통해 나를 팔로잉할 수 있다.
- 오늘의 문구인 ‘아코 자국’ 입력 버튼은 한 번의 작성만 가능하며 그 이후에는 수정 및 삭제의 기능만 작동한다.
- 최대 50글자로 작성 가능하며 오늘의 날짜가 상단에 뜬다.
| 아코폴리오 메인 | 아코폴리오 작성 | 아코폴리오 수정 | 퀘스트 완료 후 스탬프 획득 |
|---|---|---|---|
 |
 |
 |
 |
- ’
아코폴리오’는 매일 꾸준히 작성하는 아코의 포트폴리오이다. - PMI 작성: 각 활동의 느낀점을
Plus(좋았던 점),Minus(안 좋았던 점),Interesting(흥미로운 점)으로 나누어 작성한다. - STAR 작성:
Situation(상황),Task(과제),Action(행동),Result(결과)로 나누어 작성한다.- 프로젝트의 배경과 문제, 자신의 역할과 책임, 문제 해결을 위한 구체적 행동, 행동의 결과를 구조화된 방법으로 나타낼 수 있다. 자신의 프로젝트 경험을 효과적으로 전달할 수 있도록 한다.
- 기간과 제목 뿐만 아니라 태그를 설정하여 쉽게 작성하고 조회할 수 있다.
- 태그는 기본값인 '기타'로 설정되며, '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', '인턴', '아르바이트', '대외활동', '서포터즈', '기자단', '강연/행사', '스터디', '부트캠프', '프로젝트', '연구', '학생회'중에서 복수개를 선택할 수 있다.
| 분야 | 기술 스택 |
|---|---|
| Frontend |     |
| Backend |     |
| Database |   |
| DevOps |   |
| Tools |      |
프론트엔드 환경 설정
- 환경 설정: Node.js, npm, vue-cli를 설치합니다.
npm install -g @vue/cli
- 의존성 설치:
npm install
- 프로젝트 실행: 실행 명령어로 프로젝트를 시작합니다.
npm run dev
| 📚 자료 관리 | 📄 보고서 | 📝 발표 자료 |
|---|---|---|
| API 명세서 | 수행계획서 | 수행계획서 발표 자료 |
| 기능 명세서 | 중간보고서 | 중간보고서 발표 자료 |
| 이슈 관리 | 최종보고서 발표 자료 | |
| 회의록 |
