• 

  ---

  Name	박대현	성정욱	박상우	최동식	황영준
  Profile
  Position	Frontend & UI/UX	Frontend & UI/UX	팀장 & Backend Develop	Backend Develop & CI/CD	Backend Develop & CI/CD
  Git	@daep93	@gluwein	@upswp	@pertus123	@junjun0905

  

  • THXSTORE Project를 함께하는 강철코딩팀을 소개합니다 !

    • [에러와 매일 밤 싸운다.] 최동식 😤
      • 인간 디버깅이 될때까지 강철 멘탈로 해결해나아가는 THE 강한 SSAFY인이 되겠습니다. 화이팅!
    • [항상 웃음으로 인사하는 친절한] 성정욱 😁
      • 온 종일 코딩하면서 말할 일이 없다보니 스크럼 미팅시간이 저의 유일한 탈출구 입니다. 이 시간만큼은 팀원들과 즐기고 싶어요!
    • [프로젝트의 최전방에서 로직을 설계한다.] 황영준 🧐
      • 최적화와 완성도를 고려하는 개발자가 되겠습니다 !
    • [솔루션은 나에게 맡겨라 프론트 저격수] 박대현 🤩
      • 문제가 무엇인지 정조준하는 개발자가 되겠습니다!
    • [미친 텐션은 나를 이끌어] 박상우 😋
      • 이번 자율프로즉테로 가장 크게 성장하고 있습니다. 취업과 프로젝트 모두를 성공하는 SSAFY인이 되보겠습니다.

---

💻 서비스 설명

- 상품 등록(사장님)

---

- 타임딜 등록(사장님)

- 타임딜 피드 확인(사용자)

- 예약과 주문접수(사용자 화면| 사장님 화면)

- 리뷰(공통)

- 라이브 커머스(공통)

---

🚀 배포 플로우

🎮 기술 스택

💻Back-End

<details>
    <summary>Back 자세히 살펴보기 🔥</summary>
    <ul>
      <li>기술스택 ⚙</li>
    </ul>
    <ul>
        <li>Spring-Boot : 2.3.9</li>
        <li>Spring-Boot-Data-JPA</li>
        <li>spring-boot-starter-mail</li>
        <li>Spring Security</li>
        <li>spring-boot-starter-hateoas</li>
        <li>spring-boot-starter-validation</li>
        <li>spring-boot-starter-jdbc</li>
        <li>modelmapper : 2.3.8</li>
        <li>openvidu-java-client : 2.17.0</li>
        <li>spring-boot-starter-security</li>
        <li>jjwt : 0.9.1</li>
        <li>lombok</li>
        <li>mysql : 8.0.22</li>
        <li>h2 : 1.4.200</li>
        <li>pusher : 2.2.1</li>
        <li>JUnitParams : 1.1.1</li>
        <li>junit : 4.12</li>
        <li>jersey-multipart : 1.19.4</li>
        <li>spring-restdocs-asciidoctor : 2.0.3.RELEASE</li>
        <li>spring-restdocs-mockmvc : 2.0.3.RELEASE</li>
    </ul>
    <ul>
      <li>라이브러리 📚</li>
    </ul>
</details>

✨Front-End

Front 자세히 살펴보기 🌈

• 기술스택 ⚙

• JS, HTML, CSS
• SCSS
• Vue.js @2.6.11

--------------------------------------------------------------------------------------

• 라이브러리 📚

• axios @0.21.1 : Promise 기반 HTPP 클라이언트
• fontawesome @2.0.2 : 아이콘 라이브러리
• openvidu-browser @2.17.0 : webRTC 라이브러리
• vue-awesome-swiper @4.1.1 : 이미지 슬라이더 라이브러리
• eslint & prettier @6.7.2 : 협업을 위한 formatter 라이브러리
• node-sass @5.0.0 : SASS/SCSS 적용을 위한 라이브러리
• sass-loader @10.1.1 : SASS/SCSS 적용을 위한 라이브러리
• vue-masonry-css @1.0.3 : masonry 디자인 적용을 위한 라이브러리, 추후 직접 구현할 예정

🌏Infra

<details>
    <summary>개발, CI/CD 자세히 살펴보기 🔥</summary>
    <ul>
        <li>AWS EC2 - Deploy Server</li>
        <li>AWS S3 - Image(File) Server</li>
        <li>AWS RDS - DB Server</li>
        <li>Jenkins </li>
        <li>GitLab</li>
        <li>Docker</li>
    </ul>
</details>

---

⚙️ Install and Usage

시스템 환경

thxstore는 아래와 같은 환경에서 실행 중입니다.

• Created on 17:39 p.m. May 18, 2021
• OS : Ubuntu 20.04 LTS (GNU/Linux 4.15.0-72-generic x86_64)
• Cpu 모델 : Intel(R) Xeon(R) CPU E5-2686 v4 @ 2.30GHz
• Total Memory: 16396056 kB
• 물리 cpu 개수 : 4 cpu당 물리 코어 : 4 논리 코어 수 : 32

시스템 구성

• jenkins 2.3
  • blueocean : 지속적 배포와 관리 할 수 있는 UI를 지원합니다.
• docker
  • Backend와 Frontend를 컨테이너화합니다.
• docker-compose - jenkins
• DB 서버 : aws s3
• 파일 서버 : aws rds
• WebRTC : openVidu 2.17

최종 빌드와 배포를 위해 jenkins 단계는 제외하고 실행합니다.

Ubuntu 버전 업 및 기본 설치

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

docker 설치

frontend와 backend는 각 도커로 서버를 띄우고 있습니다.

# 필수 패키지 설치
sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
# GPG Key 인증
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
# docker repository 등록
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
# 도커 설치
sudo apt-get update && sudo apt-get install docker-ce docker-ce-cli containerd.io
# 시스템 부팅시 도커 시작
sudo systemctl enable docker && service docker start
# 도커 확인
sudo service docker status

도커 명령어

• 도커 컨테이너 보는 법
  • sudo docker ps -a
• 도커 컨테이너 삭제
  • sudo docker rm <container_id>
• 도커 이미지 보는 법
  • sudo docker images
• 도커 이미지 삭제
  • sudo docker rmi <image_id>
• 강제 옵션 -f (삭제가 안될 때,)
  • ex) docker rmi -f <image_id>
• 도커 로그 확인
  • docker logs <image_id> : 도커가 꺼져있어도(컨테이너가) 최종적으로 실행된 기록을 가지고 있습니다(오류 잡을 때, 매우 유용)

docker 네트워크 설정

같은 Docker Host내에서 실행중인 Container간 연결할 수 있도록 돕는 논리적 네트워크같은 개념입니다. 서로 간 통신을 가능하게 합니다. nginx를 통한 front, backend 통신을 위해 설정합니다.

sudo docker network create thxstorecicdnetwork

HTTPS 키 발급

frontend에서는 ssl이 적용되어 있기 때문에 HTTPS 인증을 받아야합니다.

sudo apt-get install letsencrypt
# 만약 nginx를 사용중이면 중지
sudo systemctl stop nginx
# 인증서 발급
sudo letsencrypt certonly --standalone -d www제외한 도메인 이름
# 이메일 쓰고 Agree
# 뉴스레터 no
# 키가 발급되는데 이 두 가지를 써야합니다. 밑의 경로에 각각 하나씩 있습니다.
ssl_certificate /etc/letsencrypt/live/도메인이름/fullchain.pem; 
ssl_certificate_key /etc/letsencrypt/live/도메인이름/privkey.pem; 

Docker 초기화

실행 중인 도커 중, 이름이나 포트가 겹칠 위험이 있기 때문에 중지를 시킵니다.

# 도커 시작 전, 기존에 실행중인 도커를 멈추고 제거하는 작업.
docker ps -f name=frontend -q | xargs --no-run-if-empty docker container stop
docker ps -f name=backend -q | xargs --no-run-if-empty docker container stop

# 컨테이너 제거
docker container ls -a -f name=frontend -q | xargs -r docker container rm
docker container ls -a -f name=backend -q | xargs -r docker container rm'

# 도커 이미지 제거
docker images -f dangling=true && docker rmi $(docker images -f dangling=true -q)

frontend Dockerfile 이미지 생성 및 빌드 실행

docker build -t frontend:latest ./frontend

docker run -d --name frontend -p 80:80 -p 443:443 -v /etc/letsencrypt/live/도메인이름/:/var/jenkins_home/workspace/thxstore-jenkins-cicd/sslkey/ -v /etc/localtime:/etc/localtime:ro --network thxstorecicdnetwork frontend:latest

• 여기서 /etc/letsencrypt/live/도메인이름/ 경로는 SSL 인증 키가 있는 위치입니다. vue.js 빌드와 nginx가 시작됩니다.

backend Dockerfile 이미지 생성 및 빌드 실행

docker build -t backend:latest ./backend

docker run -d --name backend --network thxstorecicdnetwork backend:latest

• springboot Gradle Multi Module을 시작합니다.

---

📂 개발 스프린트

스프린트✌	기간📚	FE🌈	BE🤖
프로젝트 구상 및 착수 (v0.0.1)	2021.04.13 ~ 2021.04.18	- 반응형 웹 논의 진행 - JEST, Storybook 학습 진행 및 논의	- Database ERD 작업 진행 - REST API 문서 작성 - 개발환경 구축 - 패키지 구조 설정
프로젝트 기본 기능 개발 (v0.1.0)	2021.04.19 ~ 2021.05.07	- 박대현 - 회원가입 페이지 개발 - 소셜 SNS(카카오톡, 구글, 페이스북) 연동 - 이메일 중복 검사에 debounce 적용 - 로그인 페이지 개발 - 소셜 SNS(카카오톡, 구글, 페이스북) 연동 - 사용자 프로필 페이지 개발 - 카카오 지도, 다음 주소 찾기 API 연동 - 비밀번호 찾기 페이지 개발 - 가게 매니저용 가게 정보 수정 페이지 일부 구현 - 성정욱 - PrivacyPolicy develop(개인정보처리방침 모달창) - AdminPage develop(관리자페이지) - StoreEnrollmentPage develop(스토어 신청 페이지) - FindPasswordPage develop(비밀번호 찾기) - async await/ Flex/ SCSS 학습 및 적용	- 박상우 - THXSTORE Entity configure - signUp feature develop - multi gradle module configure - REST Docs configure - Spring Security configure - CORS Troubleshooting - get social member data feature develop - check exists by email feature develop - 최동식 - 서버 인프라 구축 - 파일 서버 구축 및 연결 - 자동 빌드 및 배포 설정 - 스토어 로직 개발 - 황영준 - 그래들 멀티 모듈 구성 - 주문 로직 개발 - 장바구니 로직 개발
프로젝트 심화 기능 개발 (v0.2.0)	2021.05.08 ~ 2021.05.16	- 박대현 - 가게 매니저용 가게 정보 조회 및 수정 기능 개발 - 휴무일, 운영시간, 카테고리, 가게 소개 수정 기능 구현 - 가게 매니저용 메뉴 관리 페이지 개발 - 메뉴 그룹 조회, 등록, 수정, 삭제 구현 - 그룹 별 메뉴 조회, 등록, 수정, 삭제 구현 - 가게 매니저용 타임딜 등록 페이지 개발 - 메뉴 관리 페이지에 등록한 메뉴들을 타임딜 등록할 수 있도록 연동 - 등록할 메뉴 그룹들을 편리하게 관리하기 위해 아코디언 디자인 구현 - 타임딜 예약 후 시작 전까지 타이머 구현 - 가게 매니저용 예약 관리 페이지 개발 - 예약 조회 및 예약 상태 변경 기능 구현 - pusher 등록을 통해 실시간 예약 주문 확인 가능하도록 구현 - 실시간 예약 주문이 올 경우 알림음이 들리도록 구현 - 타임딜 종료 시간까지 타이머 구현 - 성정욱 - 스토어 수정 페이지 생성과 관리자 승인, 반려 모달 추가 - 사용자용 스토어 페이지 개발 (스토어 소개 컴포넌트, 메뉴 컴포넌트, 타임딜 컴포넌트) - 스토어등록 시 위도, 경도 좌표 값 계산 (카카오맵 API ) - 스토어 소개페이지에 사용자 위치와 스토어 위치 값 마커로 표시 (카카오맵 API)	- 박상우 - 이메일 인증을 통한 비밀번호 찾기 - 회원 위치정보 수정 기능 개발 - 회원 기본정보 수정 기능 개발 - 회원 삭제 기능 개발 - 회원 중복확인 기능 개발 - Global Exception Handler 개발 - REST Docs refactor 문서단위로 설정 - 최동식 - multimodule 서버 환경 설정 - redis 서버 구축 - 판매자 관점의 스토어 개발 - 스토어 그룹 관련 CRUD 개발 - 황영준 - 주문관련 CRUD 세부사항 개발 - Pusher 주문 알림 기능 개발 - 회원 토큰을 통한 권한 인증 개발 - 리뷰,답변, 재고처리 등 추가요소의 개발 - 테스트코드 RestDocs 일부 로직에 적용
프로젝트 핵심 기능 개발 (v0.3.0)	2021.05.17 ~ 2021.05.23	- 박대현 - 가게 매니저용 라이브 방송 페이지 개발 - openvidu를 이용하여 실시간 영상 송출 기능 구현 - openvidu를 이용하여 실시간 채팅 기능 구현 - 사용자용 타임딜 피드 페이지 개발 - 위치 설정을 위해서 프로필 페이지와 회원가입 페이지에서 사용자 좌표 자동 수집 기능 구현 - 수집된 좌표를 통해서 사용자로부터 일정 거리 내에 있는 타임딜 진행 가게 목록 불러오기 구현 - swiper를 이용하여 현재 진행되는 타임딜 상품 목록과 진행중인 가게 정보 표시 (재고가 떨어질 경우도 반영) - 사용자용 가게 페이지 개발 - 가게 상세 정보를 조회할 수 있는 페이지 개발 - 타임딜 등록된 메뉴들 예약할 수 있는 페이지 개발 - masonry 디자인 도입 - 재고 없을 경우 선택 불가 처리 - 메뉴창과 메뉴 이미지 연동 처리를 통해 이미지 선택만으로 메뉴 선택 가능하도록 구현 - 가게 매니저 라이브를 시청 가능한 페이지 개발 - 사용자는 직접 방송을 송출하지 않도록 수정 - 채팅 시 채팅 길이에 맞춰 스크롤 자동으로 이동 기능 구현 ( 가게 매니저용 라이브 페이지에도 적용) - 그 외 기능은 가게 매니저용 라이브 페이지와 같음 - 리뷰 등록 페이지 개발 - 사용자 전용 리뷰 관리 페이지 및 주문 내역 관리 페이지 보조 구현 - 성정욱 - 사용자 주문 목록 조회 - 사용자 리뷰 유무 판별 및 조회, 리뷰 작성 - 사장님 리뷰 유무 판별 및 조회, 리뷰 작성 - 리뷰 별점 도식화 - UCC 만들기	- 박상우 - 유저 토큰관리 리팩토링 작업 진행 - 프로젝트 발표 자료 제작 - 프로젝트 발표 진행 - 프로젝트 UCC 촬영 - 최동식 - 스토어 상품 CRUD 개발 - 유저 관점의 타임딜 로직 개발 - spring scheduler 적용 - 사용자 관점의 Store 개발 - WebRTC - OpenVidu 서버 구축 - 황영준 - 주문관련 CRUD Restdocs 개발 - 주문 조회시 카타고리 함께 조회 기능 추가 - 그래들 멀티모듈 관련 학습 내용 공유 - 프로필, 스토어 이미지 상태별 디폴트 값 추가 - 리뷰 시 주문한 내역 조회 추가
프로젝트 리펙토링 (v1.0.0)	2021.06.01 ~ 2021.06.31	- 박대현 - 회원가입 및 로그인 페이지에 구름 디자인 추가 - 회원가입 이메일 중복 체크 debounce 직접 구현 (lodash로 구현한 부분 삭제) - 프로필 페이지 디자인 변경 및 코드 리팩토링 - 가게 매니저 신청 및 정보 수정 페이지 디자인 변경 및 코드 리팩토링 - 사업자 등록증 업로드 시 미리보기 기능 추가 구현 - 사용자 전용 페이지 로딩 지연을 줄이기 위해서 root 컴포넌트에서 자식 컴포넌트에서 일어날 수 있는 비동기 작업 전체를 선처리하도록 수정 (스피너는 url에 대응하는 페이지의 비동기 작업이 끝날 경우 멈추도록 수정) - 사용자용 가게 페이지 역시 로딩 지연을 줄이기 위해서 가게 페이지의 root 컴포넌트에서 자식 컴포넌트 비동기 작업 전체 처리하도록 수정 - 사용자용 가게 매니저 라이브 시청 페이지 오류 수정 및 디자인 수정 - 재접속 기능 오류 수정 - 채팅 박스 UI 조정 및 비디오 해상도 변경 - 성정욱 - 진행중	- 박상우 - 진행중 - 최동식 - 진행중 - 황영준 - 진행중

---