[Portfolio] Pet And Pet 프로젝트

 

 

안녕하세요 성조입니다.

이번 포스팅은 협업을 진행했던 Pet And Pet 팀의 프로젝트 내용을 정리하는 포스팅입니다.

 

본론에 들어가기 전에 간단한 서론 설명을 덧붙입니다.

Javascript의 React & Node.js (Express) 환경에서  개발된 반려인들을 위한 종합 커뮤니티 서비스이다. 4인이 한 달간 진행한 웹 프로젝트로 기존에 Bakcend 개발 인원들이 기존에 학습했던 Spring Boot 환경에서 개발을 진행하지 않고 Node.js를 처음부터 배우면서 하나하나 기능들을 구현했고 그런 과정 속에서 겪었던 어려움들이 프로젝트 인원들을 크게 성장하게 만들어준 것이며, 이번 프로젝트에서 가장 큰 장점으로 와닿았다고 생각된다.

 

 

---

Skill

Language : JavaScript, SQL

PlatForm : Web

System : Windows

Tool : VisualStudio Code, SQL, GitHub

---

Project

기간 : [2022.2.16 ~ 2022.03.21]

팀명 및 프로젝트 명 : Pet And Pet

프로젝트 내용 : 꾸준히 성장 중인 반려인들을 위한 종합 온라인 커뮤니티 서비스 기획, 반려인들만의 특별화된 소셜 미디어, 지역 정보를 기반으로 근처에 있는 산책 메이트 찾기, 반려인들 간의 중고 거래를 이어주는 중계 플랫폼이 종합된 프로젝트입니다.

총 인원 : 4명

협업 Tool : Figma, GitHub, Slack, Discord

---

Front : HTML, CSS, JavaScript

Back : Node.js(Expresss), MySQL

ETC : Figma, GitHub, Slack, Discord, ERD Cloud

 

 

✔ ERD

ERD는 ERD Cloud에서 팀원 공유로 제작했고 여러 차례 수정을 진행하여 완성됐습니다.

https://www.erdcloud.com/

ERDCloud

 

 

구성 테이블은 사용자, 메이트 찾기, 댓글 신고, 댓글 좋아요, 게시판 좋아요, 관심 게시판, 게시물 신고, 댓글, 게시판, 중고장터 관심, 중고장터 판매, 중고장터, 나의 반려동물 테이블로 나눠졌습니다.

 

2022.03.05 - [study/Database] - [Project]pet and pet, Database[MySQL], schema

[Project]pet and pet, Database[MySQL], schema

이전 ERD에서 팔로우, 팔로잉, 신고처리 등 따로 나눠져있던 테이블들을 간소화 한 이유로 원래 5명이던 구성원이 프로젝트 시작 2주 차 때 개인 사정으로 인하여 참여가 불가능해지면서 기획 범위에서 팔로우, 팔로워, 채팅이 우선순위에서 제외됐습니다.

앞으로 PaP 코드 리팩토링 과정에서 코드 정리 이후에 기능들이 다시 추가 작성될 예정입니다.

 

Pet And Pet MySQL Query입니다.

create database papdb;
use papdb;
​
-- 유저테이블
CREATE TABLE `usertbl` (
  `userId` varchar(60) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '유저 아이디',
  `userEmail` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '이메일',
  `userNick` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '닉네임',
  `userPhone` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '핸드폰 번호',
  `userPw` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '암호화키 길이 길게 배정',
  `userName` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '이름',
  `zonecode` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '우편번호',
  `address` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '전체주소',
  `region1` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '지역(시도)',
  `region2` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '지역(구)',
  `region3` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '지역(동)',
  `detailAddress` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '상세주소',
  `extraAddress` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '추가 주소',
  `balance` int(100) DEFAULT '5000' COMMENT '잔액',
  `regDate` timestamp NULL DEFAULT NULL COMMENT '생성일자',
  `update` timestamp NULL DEFAULT NULL COMMENT '갱신일자',
  `userAge` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '나이',
  `userSex` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '성별',
  `locationAgree` bit(1) DEFAULT NULL COMMENT '지역 동의',
  `serviceAgree` bit(1) DEFAULT NULL COMMENT '서비스 동의',
  `deleted` bit(1) DEFAULT NULL COMMENT '삭제 여부',
  `userImg` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '프로필 사진',
  `info` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci COMMENT '마이페이지 소개 임시',
  `pwDate` timestamp NULL DEFAULT NULL COMMENT '발급 기간',
  `pwAuth` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '인증 번호 (재저장 db는 토큰)',
  PRIMARY KEY (`userId`) USING BTREE,
  UNIQUE KEY `userEmail` (`userEmail`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
​
-- 일반게시물
CREATE TABLE boardTbl (
    boardId    BIGINT(100)    NOT NULL AUTO_INCREMENT,
    categoryIndex    BIGINT    NOT NULL,
    userId    VARCHAR(20)    NOT NULL,
    boardTitle    VARCHAR(255)    NOT NULL,
    boardContent    TEXT    NOT NULL,
    boardStatus    VARCHAR(20)    NULL,
    boardGood    BIGINT    DEFAULT 0,
    boardCreated     DATETIME DEFAULT CURRENT_TIMESTAMP,
    boardMod    DATETIME    NULL,
    boardViews    BIGINT    NOT NULL,
    boardDeleted    BOOLEAN    NULL,
    boardImgList    LONGTEXT    NULL,
    boardReport    BOOLEAN    NULL,
    boardSearch    TINYINT    NULL    COMMENT '검색 값',
    
    CONSTRAINT boardTblPK PRIMARY KEY(boardId),
    CONSTRAINT boardTblFK FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 일반게시물(좋아요)
CREATE TABLE postLikeTbl (
    postLikeId BIGINT(100) NOT NULL AUTO_INCREMENT,
    boardId BIGINT(100) NOT NULL,
    userId VARCHAR(20) NOT NULL,
    
    CONSTRAINT postLikeTblPK PRIMARY KEY(postLikeId),
    CONSTRAINT postLikeTblFK FOREIGN KEY(boardId) REFERENCES boardTbl(boardId),
    CONSTRAINT postLikeTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 일반게시물(댓글)
CREATE TABLE boardCommentTbl (
    commentId BIGINT(100) AUTO_INCREMENT,
    boardId BIGINT(100) NOT NULL,
    categoryIndex BIGINT NOT NULL,
    userId VARCHAR(20) NOT NULL,
    commentCount BIGINT,
    commentContent TEXT,
    commentMaxLength VARCHAR(50),
    commentLikeCounting BIGINT DEFAULT 0,
    commentCreated DATETIME DEFAULT CURRENT_TIMESTAMP,
    commentDeleted BOOLEAN NULL,
    cgoodStatus BOOLEAN DEFAULT 0,
    
    CONSTRAINT boardCommentTblPK PRIMARY KEY(commentId),
    CONSTRAINT boardCommentTblFK FOREIGN KEY(boardId) REFERENCES boardTbl(boardId),
    CONSTRAINT boardCommentTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 알반게시물(관심게시물)
CREATE TABLE boardCollectTbl (
    collectId BIGINT(100) AUTO_INCREMENT,
    boardId BIGINT(100) NOT NULL,
    userId VARCHAR(20) NOT NULL,
    
    CONSTRAINT boardCollectTblPK PRIMARY KEY(collectId),
    CONSTRAINT boardCollectTblFK FOREIGN KEY(boardId) REFERENCES boardTbl(boardId),
    CONSTRAINT boardCollectTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 댓글 좋아요
CREATE TABLE commentLikeTbl (
    commentLikeId BIGINT(100) AUTO_INCREMENT,
    commentId BIGINT(100) NOT NULL,
    userId VARCHAR(20) NOT NULL,
    
    CONSTRAINT commentLikeTbl PRIMARY KEY(commentLikeId),
    CONSTRAINT commentLikeTblFK FOREIGN KEY(commentId) REFERENCES boardCommentTbl(commentId),
    CONSTRAINT commentLikeTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 게시물 신고 테이블
CREATE TABLE boardReportTbl(
    reportId BIGINT(100) AUTO_INCREMENT,
    boardId BIGINT(100) NOT NULL,
    userId VARCHAR(20) NOT NULL,
    reportedUserId VARCHAR(20) NOT NULL,
    createdDate DATETIME DEFAULT CURRENT_TIMESTAMP,
    reportStatus BOOLEAN DEFAULT 0,
    
    CONSTRAINT boardReportTblPK PRIMARY KEY(reportId),
    CONSTRAINT boardReportTblFK FOREIGN KEY(boardId) REFERENCES boardTbl(boardId),
    CONSTRAINT boardReportTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId),
    CONSTRAINT boardReportTblFK3 FOREIGN KEY(reportedUserId) REFERENCES userTbl(userId)
);
​
-- 게시물 댓글 신고 테이블
CREATE TABLE commentReportTbl(
    reportId BIGINT(100) AUTO_INCREMENT,
    commentId BIGINT(100) NOT NULL,
    userId VARCHAR(20) NOT NULL,
    reportedUserId VARCHAR(20) NOT NULL,
    createdDate DATETIME DEFAULT CURRENT_TIMESTAMP,
    reportStatus BOOLEAN DEFAULT 0,
    
    CONSTRAINT commentReportTblPK PRIMARY KEY(reportId),
    CONSTRAINT commentReportTblFK FOREIGN KEY(commentId) REFERENCES boardCommentTbl(commentId),
    CONSTRAINT commentReportTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId),
    CONSTRAINT commentReportTblFK3 FOREIGN KEY(reportedUserId) REFERENCES userTbl(userId)
);
​
-- 메이트찾기
CREATE TABLE matchTbl (
    matchId INT NOT NULL AUTO_INCREMENT,
    chatroomId    BIGINT(20) NULL,
    userId    VARCHAR(20)    NOT NULL,
    matchTitle    VARCHAR(255) NULL,
    matchContent    TEXT    NULL,
    matchTime    DATETIME    NULL,
    selectPet    VARCHAR(20)    NULL,
    region1 varchar(100) NULL COMMENT '지역(시도)',
    region2 varchar(100) NULL COMMENT '지역(구)',
    region3 varchar(100) NULL COMMENT '지역(동)',
    matchCreated    DATETIME  DEFAULT now(),
    matchMod    DATETIME NULL,
    matchStatus    BOOLEAN DEFAULT 0,
    matchDeleted    BOOLEAN DEFAULT 0,
    matchImgName    VARCHAR(50)    NULL,
    
    CONSTRAINT matchTblPK PRIMARY KEY(matchId),
    CONSTRAINT matchTblFK FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 메이트찾기(채팅방)
CREATE TABLE chatroomTbl (
    chatroomId int NOT NULL AUTO_INCREMENT,
    matchId    INT not    NULL,
    userId    VARCHAR(20) not    NULL,
    participant  VARCHAR(20) not NULL COMMENT '참여한 사람 아이디',
    chatroomCreated    DATETIME  DEFAULT now(),
    chatroomMod    DATETIME    NULL,
    chatroomDeleted    BOOLEAN DEFAULT 0,
    
    CONSTRAINT chatroomTblPK PRIMARY KEY(chatroomId),
    CONSTRAINT chatroomTblFK FOREIGN KEY(matchId) REFERENCES matchTbl(matchId),
    CONSTRAINT chatroomTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 메이트찾기(채팅방 상세)
CREATE TABLE chatTbl (
    chatId int NOT NULL AUTO_INCREMENT,
    chatroomId int    NOT NULL,
    userId    VARCHAR(20)    NOT NULL COMMENT '채팅 친 사람',
    chatMessage    TEXT not null,
    chatCreated    DATETIME  DEFAULT now(),
    chatDeleted    BOOLEAN DEFAULT 0,
    chatLast    DATETIME NULL,
    
    CONSTRAINT chatTblPK PRIMARY KEY(chatId),
    CONSTRAINT chatTblFK FOREIGN KEY(chatroomId) REFERENCES chatroomTbl(chatroomId),
    CONSTRAINT chatTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 중고장터 
CREATE TABLE marketTbl (
    marketId INT NOT NULL AUTO_INCREMENT,
    userId    VARCHAR(20)    NOT NULL,
    marketTitle    VARCHAR(255) NULL,
    marketContent    TEXT    NULL,
    matchTime    DATETIME    NULL,
    price    int(20)    NULL,
    marketCreated    DATETIME  DEFAULT now(),
    matchMod    DATETIME NULL,
    isSale    BOOLEAN DEFAULT 0 COMMENT '판매중0 판매완료1',
    marketDeleted    BOOLEAN DEFAULT 0,
    marketImgName    VARCHAR(50)    NULL,
    marketViews    BIGINT  DEFAULT 0,
    
    CONSTRAINT marketTblPK PRIMARY KEY(marketId),
    CONSTRAINT marketTblFK FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 중고장터(관심테이블)
CREATE TABLE marketLikeTbl (
    marketLikeId INT NOT NULL AUTO_INCREMENT,
    marketId INT NOT NULL,
    userId VARCHAR(20) NOT NULL,
    
    CONSTRAINT marketLikeTblPK PRIMARY KEY(marketLikeId),
    CONSTRAINT marketLikeTblFK FOREIGN KEY(marketId) REFERENCES marketTbl(marketId),
    CONSTRAINT marketLikeTblFK2 FOREIGN KEY(userId) REFERENCES userTbl(userId)
);
​
-- 중고장터(판매테이블)
CREATE TABLE marketSaleTbl(
    saleId INT NOT NULL AUTO_INCREMENT,
    marketId INT NOT NULL,
    userId    VARCHAR(20)    NOT NULL COMMENT '구매한사람',
    sellerId VARCHAR(20) NOT NULL COMMENT '판매한 사람',
    
    CONSTRAINT marketSaleTblPK PRIMARY KEY(saleId),
    CONSTRAINT marketSaleTblFK FOREIGN KEY(userId) REFERENCES userTbl(userId),
    CONSTRAINT marketSaleTblFK2 FOREIGN KEY(marketId) REFERENCES marketTbl(marketId)
);
-- 마이페이지(나의 반려동물)
CREATE TABLE mypetTbl (
    petId INT NOT NULL AUTO_INCREMENT,
    userId    VARCHAR(20)    NOT NULL,
    petName    VARCHAR(50) NOT NULL,
    petTypeDetail    VARCHAR(50) NULL,
    petType    VARCHAR(50)    NULL,
    petBirth    DATE    NULL,
    petSex    boolean    NULL COMMENT '0이면 여자, 1이면 남자',
    petCreated    DATETIME  DEFAULT now(),
    petDeleted    BOOLEAN DEFAULT 0,
    petImgName    VARCHAR(50)    NULL,
    
    CONSTRAINT mypetTbl PRIMARY KEY(petId),
    CONSTRAINT mypetTblFK FOREIGN KEY(userId) REFERENCES userTbl(userId)
);

 

Local 화면

Main page

메인 페이지에서는 퍼블리싱 위주로 Pet And Pet에 대해서 설명을 진행했습니다.

 

회원가입

다음 map api

Database 중복확인

아이디, 닉네임, 이메일 3가지는 모두 중복 확인 버튼을 클릭하면 Database에 값이 있는지 확인하고 있다면 사용 불가능 없다면 중복이 없으므로 사용 가능한 값이라고 alert 문을 띄워줍니다.

 

 

로그인

ID, PW찾기입니다.

 

NodeMailer를 활용하여 아이디와 비밀번호 찾기를 진행했습니다.

ID 찾기를 진행하면 바로 회원가입 시 입력한 이메일로 아이디를 보내줍니다.

PW 찾기를 진행하면 회원가입 시 입력한 이메일로 랜덤 한 인증번호를 발송하며, 이 인증번호를 기반으로 ID, Email, 인증번호, 새로운 비밀번호, 새로운 비밀번호 확인을 모두 입력하면 패스워드가 새로운 비밀번호로 변경됩니다.

개인 테스트 메일입니다.

팀원 테스트 메일입니다.

 

게시판

단일부터 다중 이미지 업로드까지 가능합니다.

좋아요 및 댓글입니다.

댓글 수정 기능입니다.

 

게시판에는 게시물 좋아요, 즐겨찾기, 조회 수, 신고, 수정, 삭제, 작성 기능이 댓글은 작성, 수정, 삭제, 신고, 댓글 좋아요 기능이 구현됐습니다. [다시 말하면 CRUD 기능이 정상적으로 구현됐습니다.]

 

마이페이지

본인 프로필 정보를 수정하거나 탈퇴할 수 있습니다.

본인이 작성했던 게시물, 매칭 게시물, 중고장터 등을 확인할 수 있습니다.

나의 반려동물 정보를 입력할 수 있습니다.

 

등록된 나의 반려동물입니다.

 

본인이 즐겨찾기를 해놨던 게시글을 관심 게시글로 볼 수 있습니다.

 

매칭게시판

 

등록 후 CRUD가 모두 가능합니다.

상세페이지입니다.

검색과 매칭 연락이 모두 가능한 기능입니다.

채팅 기능이 아직 미구현 상태입니다.

중고장터

장터이며 조회수 순으로 가장 Hot한 중고 물품이 정렬됩니다.

 

물건을 사고 파는 기능이 구현됐습니다.

물품들이 나와있습니다.

다른 회원 계정을 갖고 구매를 진행합니다.

판매 완료 화면입니다.

마이페이지에 돌아오면 잔액이 감소한 부분을 알 수 있습니다.

향후 카카오 결제 API로 구매/판매가 가능하도록 수정하는 것을 목표로 하고 있습니다.

 

후기

아직 미숙한 프로젝트 기능들이었지만 React & Node.js 환경에서 GitHub를 통해서 프로젝트를 진행했고 프론트 2명 백엔드 3명으로 나눠졌지만 중간에 프론트 한 분이 나간 일도 다른 한 분이 프론트 데이터 연동에 어려움을 느껴서 어쩌다 보니 풀스택으로 업무를 진행했던 것도 색다른 경험이었습니다.

교육받던 국비교육에서 프로젝트 종합 발표 중 나름 좋은 성적을 남길 수 있을 만큼 잘 마무리 지을 수 있었던 것도 너무 다행이고 만족스러운 프로젝트였다고 생각됩니다.

중간에 나간 인원이 없고 프로젝트가 마무리가 잘 이뤄졌다면 조금 더 만족스러운 완성도를 가질 수 있었겠지만 많은 성장을 겪을 수 있던 프로젝트였습니다. 

개인 스스로 Git에서 유지 보수 및 기능 변경 등 프로젝트를 조금 더 완성도 높은 방향으로 갖고 갈 수 있도록 학습을 진행할 예정입니다. 

---

본인 업무

아이디어 기획 및 타당성 확보 (자료 수집과 서비스 가이드라인 등) -> 브레인스토밍으로 나온 아이디어 가지치기와 정규화

PPT 제작 및 발표 : 총 제작, 발표 3회 중 중간 발표[제작 1회, 발표 1회]

ERD 설계 제작 : 서성조, 송XX님 협업 제작

로그인 : front 김XX님 작업 이후 추가 수정 및 작업 front/back담당

회원 가입 : front/back API생성 및 연동, 유효성 검사, 위치 데이터 DB 변경 처리

회원 관리 : 개인 정보 수정, 회원 탈퇴, ID / PW 찾기(PW 찾기 시 랜덤 인증 번호를 활용한 변경)

게시물 : 댓글 API Front연동 [수정, 삭제, 좋아요, 신고]

 

---

프로젝트 마감까지 같이 열심히 진행해 주신(남XX, 이XX, 송XX) Pet And Pet 구성원분들에게 감사드립니다.

포스팅을 읽어주신 분들도 모두 감사드립니다.

오타가 있는 경우 댓글 부탁드리겠습니다!

 

 

협업 깃 주소

https://github.com/lee-goeun/final_project

GitHub - lee-goeun/final_project: PaP(Pet and Pet)

 

다음 Map API 참조 주소

https://postcode.map.daum.net/guide

Daum 우편번호 서비스