[목차]
박유진 |
손수철 |
김준우 |
최성이 |
강혜진 |
|
|
|
|
|
- 원하는 스터디를 개설하고 회원을 모지하는 플랫폼
- 스터디를 함께 운영해 나가는 SNS
- 자기계발을 위햇 서로 정보를 공유하는 정보공유 네트워크
- 원하는 스터디를 개설할 수 있다.
- 원하는 스터디에 참여할 수 있다.
- 같은 목표를 가진 사람들과 소통할 수 있다.
- 개별적으로 공부의 목표를 가지고 그를 이루기 위한 측정이 가능하다.
- 일정 및 해야할일 들을 관리할 수 있다.
- 프론트 개발 환경 : React & Next.js,Typescript
- 백엔드 개발 환경 : planetScale, prisma
[ moss ] https://moss-six.vercel.app/
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── prisma
│ └── schema.prisma
├── src
│ ├── components
│ │ ├── Banner.tsx
│ │ ├── Calendar
│ │ │ ├── Calendar.tsx
│ │ │ ├── MyPage
│ │ │ │ ├── MyCalendar.tsx
│ │ │ │ └── MyScheduleModal.tsx
│ │ │ └── StudyPage
│ │ │ ├── Button.tsx
│ │ │ ├── DeleteModal.tsx
│ │ │ ├── ScheduleList.tsx
│ │ │ ├── ScheduleModal.tsx
│ │ │ ├── StudyCalendarWrap.tsx
│ │ │ └── Title.tsx
│ │ ├── Find
│ │ │ ├── FindForm.tsx
│ │ │ └── modal
│ │ │ ├── FindModal.tsx
│ │ │ ├── Id_Modal.tsx
│ │ │ └── Pw_Modal.tsx
│ │ ├── Join
│ │ │ ├── FileUpload.tsx
│ │ │ └── JoinInput.tsx
│ │ ├── Login
│ │ │ ├── LoggedInStateBtn.tsx
│ │ │ ├── LoginForm.tsx
│ │ │ ├── LoginInput.tsx
│ │ │ ├── LoginLink.tsx
│ │ │ └── LoginStart.tsx
│ │ ├── MyPage
│ │ │ ├── CreateStudy.tsx
│ │ │ ├── MyPageBanner.tsx
│ │ │ ├── MyPageContainer.tsx
│ │ │ ├── MyStudyChart.tsx
│ │ │ ├── Record.tsx
│ │ │ ├── StudyChart.tsx
│ │ │ ├── StudyList.tsx
│ │ │ ├── StudyTimer.tsx
│ │ │ └── UserInfo.tsx
│ │ ├── Notice
│ │ │ ├── Button.tsx
│ │ │ ├── NoticeList.tsx
│ │ │ ├── NoticeTitle.tsx
│ │ │ └── PostEditor.tsx
│ │ ├── SearchInput.tsx
│ │ ├── StudyCard.tsx
│ │ ├── StudyList.tsx
│ │ ├── StudyMain
│ │ │ ├── ApplyStudyModal.tsx
│ │ │ ├── Member.tsx
│ │ │ ├── Notice.tsx
│ │ │ ├── StudyBanner.tsx
│ │ │ ├── StudyComponents.tsx
│ │ │ ├── Todo.tsx
│ │ │ └── TodoItem.tsx
│ │ ├── StyleComponents.tsx
│ │ ├── TitleSearch.tsx
│ │ └── layouts
│ │ ├── Layout.tsx
│ │ ├── index.tsx
│ │ └── partials
│ │ ├── Footer.tsx
│ │ ├── Header.tsx
│ │ └── Title.tsx
│ ├── constants
│ │ └── index.tsx
│ ├── libs
│ │ ├── client
│ │ │ ├── useMutation.ts
│ │ │ └── useUser.ts
│ │ └── server
│ │ ├── client.ts
│ │ ├── withHandler.ts
│ │ └── withSession.ts
│ ├── pages
│ │ ├── _app.tsx
│ │ ├── api
│ │ │ ├── goal
│ │ │ │ └── index.ts
│ │ │ ├── notice
│ │ │ │ ├── [id]
│ │ │ │ │ ├── current.ts
│ │ │ │ │ └── total.ts
│ │ │ │ ├── create.ts
│ │ │ │ ├── delete.ts
│ │ │ │ ├── edit.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── view.ts
│ │ │ ├── schedule
│ │ │ │ ├── mypage
│ │ │ │ │ └── index.ts
│ │ │ │ └── studypage
│ │ │ │ ├── [id]
│ │ │ │ │ ├── delete.ts
│ │ │ │ │ ├── edit.ts
│ │ │ │ │ └── total.ts
│ │ │ │ └── index.ts
│ │ │ ├── study
│ │ │ │ ├── [id]
│ │ │ │ │ └── index.ts
│ │ │ │ ├── apply.tsx
│ │ │ │ ├── create.ts
│ │ │ │ ├── getInfo.tsx
│ │ │ │ ├── getUser.tsx
│ │ │ │ ├── getUserName.tsx
│ │ │ │ ├── my_study.ts
│ │ │ │ └── total_study.ts
│ │ │ ├── todo
│ │ │ │ ├── delTodo.ts
│ │ │ │ ├── editTodo.ts
│ │ │ │ └── index.ts
│ │ │ ├── upload
│ │ │ │ ├── avatar.ts
│ │ │ │ └── image.ts
│ │ │ └── users
│ │ │ ├── find-id.ts
│ │ │ ├── find-pw.ts
│ │ │ ├── index.ts
│ │ │ ├── join.ts
│ │ │ ├── loggedInUser
│ │ │ │ ├── edit_idpw.ts
│ │ │ │ ├── edit_info.ts
│ │ │ │ └── index.ts
│ │ │ ├── login.ts
│ │ │ ├── logout.ts
│ │ │ └── token_login.ts
│ │ ├── edit
│ │ │ └── [id]
│ │ │ ├── id_pw.tsx
│ │ │ └── info.tsx
│ │ ├── index.tsx
│ │ ├── join
│ │ │ └── index.tsx
│ │ ├── login
│ │ │ ├── find_id.tsx
│ │ │ ├── find_pw.tsx
│ │ │ └── index.tsx
│ │ ├── my-page
│ │ │ └── index.tsx
│ │ ├── search
│ │ │ └── index.tsx
│ │ └── study
│ │ └── [studyId]
│ │ ├── index.tsx
│ │ └── notice
│ │ ├── [id].tsx
│ │ ├── edit
│ │ │ └── [id].tsx
│ │ ├── index.tsx
│ │ └── write.tsx
│ ├── styles
│ │ ├── components
│ │ │ ├── Calendar.ts
│ │ │ └── Find-id-pw.ts
│ │ ├── components.ts
│ │ ├── globals.css
│ │ └── reset.css
│ └── types
│ ├── Login.ts
│ ├── Member.ts
│ ├── Notice.ts
│ ├── Todo.ts
│ ├── edit.ts
│ ├── join.ts
│ ├── schedule.ts
│ └── study.ts
├── tsconfig.json
└── yarn.lock
| 내용 | 일정 | 기간 |
|---|---|---|
| 프로젝트 기획 | 2022년 2월 26일 ~ 2022년 3월 3일 | 5일 |
| 디자인, 컨벤션 구현 | 2022년 3월03일 ~ 2022년 3월 10일 | 8일 |
| UI,UX구현 | 2022년 3월 10일 ~ 2022년 3월 31일 | 21일 |
| 백엔드 구현 | 2021년 4월 1일 ~ 2022년 5월 9일 | 39일 |
| 정리 및 배포 | 2022년 5월 9일 ~ 2022년 5월 17일 | 9일 |
- 디자인, FE, BE : 최성이, 손수철, 박유진, 김준우
- 디자인, UI구현: 강혜진
| 🔗 로그인 페이지 | 🔗 회원가입 | 🔗 검색 페이지 | 🔗 스터디 페이지 |
|
|
|
|
| 🔗 마이 페이지 | 🔗 공지사항 | 🔗 투두리스트 | 🔗 일정관리 |
|
|
|
|
- 원하는 스터디를 개설하고, 이미 스터디가 있다면 참여할 수 있습니다..
- 스터디를 개설할때는 인원제한이나, 카테고리, 내용등을 지정할 수 있습니다.
- 스터디를 통해 비슷한 목표를 가진 사람들과 채팅을 통해 소통할 수 있습니다.
- 함께 목표를 나누며 투두리스트,공지사항을 통해 함께 목표를 이루어갈 수 있습니다..
- 비슷한 목표가 있는 사람들끼리 유용한 정보를 공유할 수 있습니다.
- 마이페이지를 통해 본인의 공부시간을 관리할 수 있습니다.
- 일정 관리를 통해 본인의 일정을 확인할 수 있습니다.
- 투두리스트를 이용하여 참여하고 있는 모든 스터디의 투두리스트 관리할 수 있습니다.
개발을 시작한 이후 첫번째 팀단위 프로젝트라 처음 기획에서 배포까지 앞으로도 기억에 오래남을거 같은 경험이었습니다. 프론트엔드 개발자로 개발을 공부하고 있지만 프로젝트를 진행하면서 서버 및 데이터베이스 관리SSR 과 NEXT JS 프레임워크를 이용한 API 생성등 여러가지를 알아보고 코드를 짜면서 백엔드의 매력도 알게된 프로젝트 였습니다. 덕분에 이후 풀스택 개발자를 목표로 해서 커리어를 쌓고자 합니다. 오프라인 온라인으로 팀들과 프로젝트의 진행과정, 계획, Git과 prisma 그리고 planetscale 서버를 활용하여 협업을 하였고 이를 통해 팀프로젝트에서의 소통과 상호작용의 중요함도 알수있었던 소중한 경험이었습니다.
이번 프로젝트에서 prisma와 pscale을 처음 접했습니다. schema와 api를 생성하는 초반에는 시행착오가 있었으나, DB 생성과 통신이 성공적으로 완료됐을 때, 큰 성취감을 느꼈습니다. 직접 DB를 생성하면서 데이터 처리의 중요성을 다시 한번 상기시킬 수 있었습니다. 기회가 된다면, prisma와 pscale을 활용해 DB를 확장하는 작업을 진행해 보고 싶습니다. 백엔드를 구성하는 부분이 낯설었으나, 팀원 분들의 도움으로 인해 빠르게 적응할 수 있었습니다. 배울 기회가 많았던 프로젝트였습니다. 타입 스크립트를 통해 에러를 사전에 방지할 수 있었습니다. 하지만 타입을 찾기 위해 많은 시간을 소요했고, 여전히 미흡한 부분이 존재합니다. 타입 스크립트 더 공부해 리팩토링할 예정입니다. 재사용성이 떨어지는 컴포넌트 설계가 아쉽습니다. 비슷한 컴포넌트들이 많은 페이지에 작성되어 있습니다. 이 부분에 대해서는 더 고민해야 할 것 같습니다.
Next.js와 d3.js 등의 스택을 공부하고 활용하게 되어 유익했다 *최신 백엔드 트렌드인 PlanetScale과 Prisma를 활용하게 되어 유익했다 *Back-end도 해볼만 하다는 자신감을 갖는 계기가 되었다
이번 프로젝트는 배우는게 정말 많은 프로젝트 였습니다. 프론트 엔드부분도 리액트, 넥스트, 타입스크립트를 모두 적용하여,공부할 것도 많고 배울것도 많은 프로젝트였는데, 다른 분들이 많이 도와주고 알려주면서 많은 것들을 배우고, 실전에 적용하는 경험도 할 수 있는 프로젝트 였습닌다. 그리고 백엔드 부분에도 한국어 강의도 많지 않은 프리즈마와 플래닛 스케일이라는 것을 사용했는데, 처음에는 어렵지만 다같이 찾아보며 알아가면서 해서 서로의 도움을 많이 받아가며 진행했습니다. 이번 프로젝트를 통해 협업을 통해서 얻을 수 있는 긍정적인 시너지 효과를 한번 더 느끼게된 계기가 되었습니다. 중간 중간 어려운 부분들이 있었지만, 그래도 다같이 하면서 배우고 느끼는게 더 많은 프로젝트라고 생각합니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
