🎙️Amumal Community

프로젝트 소개

해당 프로젝트는 Kakao Cloud School in JEJU에서 진행한 프로젝트입니다.
게시글을 작성하고 댓글을 달 수 있습니다.

1. 개발 환경

Front-end: HTML, css, Js, express
Back-end: express, Js
개발 및 이슈 관리: Github
디자인: Figma

2. 프로젝트 구조

웹 서버

├── README.md
├── package-lock.json
├── package.json
├── app.js
├── index.html
├── index.css
├── style.css
├── public
│    ├── board
│    │     ├── addPost.html
│    │     ├── updatePost.html
│    │     ├── post.html
│    │     └── posts.html
│    └── user
│          ├── password.html
│          ├── signUp.html
│          └── updateProfile.html
└── src
     ├── images
     │     ├── 맹구.jpeg
     │     ├── back.png
     │     └── profille_img.webp
     │         .
     │         .
     ├── js
     │     ├── addComments.js
     │     ├── addPost.js
     │     ├── getComments.js
     │     ├── getPost.js
     │     ├── getPosts.js
     │     ├── logIn.js
     │     ├── navbar.js
     │     ├── password.js
     │     ├── scroll.js
     │     ├── signUp.js
     │     ├── static.js
     │     ├── updatePost.js
     │     └── updateProfile.js
     └── styles
           ├── addPost.css
           ├── modal.css
           ├── navbar.css
           ├── password.css
           ├── post.css
           ├── posts.css
           ├── postSkeleton.css
           ├── signUp.css
           ├── updatePost.css
           └── updateProfile.css

백 서버

├── README.md
├── package-lock.json
├── package.json
├── app.js
├── controller
│    ├── comment-controller.js
│    ├── post-controller.js
│    └── user-controller.js
├── images
│    ├── post
│    └── profile
├── middleware
│    ├── authUser.js
│    └── validation.js
├── model
│    ├── comments.js
│    ├── posts.js
│    ├── users.js
│    └── data.js
├── routes
│    ├── comment.js
│    ├── post.js
│    ├── user.js
│    ├── postImage.js
│    └── profileImage.js
└── tools
     └── dataUtils.js

3. 개발 기간

전체 개발 기간: 2024-04-02 ~

4. 페이지별 기능

[ 로그인 ]

서비스 접속 초기화면으로 로그인 페이지가 나타납니다.
로그인 성공 시 버튼색이 진보라색으로 변경되고, 3초 후 게시물 목록 페이지로 이동합니다.

[ 회원가입 ]

이메일, 닉네임, 비밀번호, 비밀번호 확인 입력 시 유효성 검사 진행, 통과하지 못한 경우 helper text 표시

로그인 화면 회원가입 화면

[ 게시글 ]

로그인 성공 시 게시글 목록이 나타납니다.
각 게시글을 클릭하면 해당 게시글 상세 페이지로 이동합니다.
게시글 작성 버튼을 클릭하면 게시글 작성 페이지로 이동합니다.

게시글 목록 화면 게시글 상세 화면 게시글 작성 화면

[ 게시글 수정/삭제 ]

게시글 상세 페이지에서 수정 버튼을 누르면 게시글 수정 페이지로 이동합니다.
게시글 상세 페이지에서 삭제 버튼을 누르면 게시글 삭제 모달이 나타나고, 확인을 누르면 게시글이 삭제됩니다.
게시글 수정/삭제 시, 본인이 작성한 게시글인지 확인한 후, 본인이 작성한 게시글이 아닐 경우 alert가 나타납니다.

게시글 수정 화면 게시글 삭제 화면 게시글 alert 화면

[ 댓글 목록/수정/삭제]

게시글 상세 페이지 하단에 게시물에 달린 댓글 목록들이 나타납니다.
댓글 수정 버튼을 누르면 댓글 작성란이 수정란으로 바뀌면서 댓글을 수정할 수 있습니다.
댓글 삭제 버튼을 누르면 댓글 삭제 모달이 나타나고, 확인을 누르면 댓글이 삭제됩니다.
댓글 수정/삭제 시, 본인이 작성한 댓글인지 확인한 후, 본인이 작성한 댓글이 아닐 경우 alert가 나타납니다.

댓글 화면 댓글 수정 화면

댓글 삭제 화면 댓글 alert 화면