SpartaTeam_8딱8딱 SA

---

깃허브 주소

팀 깃허브	https://github.com/baebyeongil/Team_88
김민규	https://github.com/kimmingyu9411
남현진	https://github.com/hyun20230508
배병일	https://github.com/baebyeongil

 

 

 

---

역할 분배

배병일	Member, Column
남현진	Card, Comment
김민규	User, Board

 

 

 

---

ERD

 

 

---

API 설계

 

 

 

---

와이어 프레임

 

 

 

---

구현한 기능

 

1. 사용자 관리 기능

• 로그인/로그아웃
• 사용자 정보 수정 및 삭제 기능

2. 보드 관리 기능

• 보드 생성
• 보드 초대

3. 컬럼 관리 기능

• 컬럼 생성
• 컬럼 이름 수정(색상포함)
• 컬럼 삭제
• 컬럼 순서 이동

4. 카드 관리 기능

• 카드 생성
• 카드 수정 (이름,설명,색상,작업자,마감일)
• 카드 삭제
• 카드 순서 이동(컬럼 내,다른컬럼으로)

5. 댓글 관리 기능

• 댓글 생성
• 댓글 수정
• 댓글 삭제

6. 사이트 공용 채팅

 

7. 체크리스트 생성,수정,삭제

 

8. CI/CD 서버 배포

 

 

---

기능 설명

 

1. 사용자 관리

- 생성한 이메일, 비밀번호를 사용하여 로그인 가능 ( 중복 이메일, 닉네임 방지 )

- 기존 비밀번호 입력 후 정보 수정, 회원 탈퇴 가능

 

2. 보드 관리

- 보스 생성 시 ( 제목, 설명 )

- 나의 보드 목록 : 현재 본인이 생성한 보드 + 초대된 보드

 

3. 컬럼 관리

- 컬럼 생성 ( 제목, 색상 )

- 컬럼 위치 이동 가능 (드래그 앤 드 롭 ) : 리셋 기능 포함 ( 현재 인덱스 값 )

- 제목.색상 수정, 삭제

 

4. 카드 관리

- 카드 생성 ( 제목, 내용, 작업자, 마감일, 색상 )

- 카드 수정 ( 제목, 내용, 작업자, 마감일, 색상

- 카드 위치 이동 가능 ( 드래그 앤 드롭 ) : 컬럼 내 이동, 다른 컬럼 이동 가능, 리셋 기능 포함 ( 현재 인덱스 값 )

- 카드 삭제

 

5. 댓글 관리

- 댓글 생성 ( 내용 )

- 댓글 수정 ( 내용 )

- 댓글 삭제 ( 댓글 작성자만 가능 )

 

6. 사이트 공용 채팅

- 내 정보  전체 채팅 ( 버튼 우측 상단 ) : 현재 사이트에 접속한 모든 유저가 사용 가능

- div에 그려지는 식으로 코딩 : 새로고침 시 채팅 내용 사라짐.

 

7. 체크리스트 관리

- 체크리스트 생성 ( 내용 )

- 체크리스트 수정 ( 내용, 현재 체크 상태 )

- 체크리스트 삭제

 

2. CI/CD 

- 사용한 Workflow : 강의에서 예제로 올려준 걸 그대로 사용함.

name: Deploy to Amazon EC2

on:
  pull_request:
    branches: [master]

# 본인이 설정한 값을 여기서 채워넣습니다.
# 리전, 버킷 이름, CodeDeploy 앱 이름, CodeDeploy 배포 그룹 이름
env:
  AWS_REGION: [AWS_REGION]
  S3_BUCKET_NAME: [S3_BUCKET_NAME]
  CODE_DEPLOY_APPLICATION_NAME: [CODE_DEPLOY_APPLICATION_NAME]
  CODE_DEPLOY_DEPLOYMENT_GROUP_NAME: [CODE_DEPLOY_DEPLOYMENT_GROUP_NAME]

permissions:
  contents: read

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    environment: production

    steps:
      # (1) 기본 체크아웃
      - name: Checkout
        uses: actions/checkout@v3

      # (2) Node.js 세팅
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18.x'

        # (3) build (Test 제외)
      - name: Install dependencies
        run: npm install

      # - name: Build test
      #   run: npm run build

      # (4) AWS 인증 (IAM 사용자 Access Key, Secret Key 활용)
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.ACCESSKEY }}
          aws-secret-access-key: ${{ secrets.SECRETACCESSKEY }}
          aws-region: ${{ env.AWS_REGION }}

      # (5) 빌드 결과물을 S3 버킷에 업로드
      - name: Upload to AWS S3
        run: |
          aws deploy push \
            --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
            --ignore-hidden-files \
            --s3-location s3://$S3_BUCKET_NAME/$GITHUB_SHA.zip \
            --source .

      # (6) S3 버킷에 있는 파일을 대상으로 CodeDeploy 실행
      - name: Deploy to AWS EC2 from S3
        run: |
          aws deploy create-deployment \
            --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
            --deployment-config-name CodeDeployDefault.AllAtOnce \
            --deployment-group-name ${{ env.CODE_DEPLOY_DEPLOYMENT_GROUP_NAME }} \
            --s3-location bucket=$S3_BUCKET_NAME,key=$GITHUB_SHA.zip,bundleType=zip

- master브랜치에 PR 적용할 때만 수행되도록함.

.env 파일은 자주 바뀔 일이 없다고 생각하여 우분투 자체에서 해당 서버 파일이 생성되는 위치에 직접 생성, 수정하도록 함

 

 

---

마무리 소감

컬럼, 카드 이동 부분을 어떤 식으로 작동하게 할 지에 대해 고민되었고, 우리가 정한 방법에서 현재 인덱스 값을 어떻게 초기화 해줘야할 지에 있어 많은 고민을 했다. 3명에서 진행해보는 팀 프로젝트는 처음이라 팀원 모두 급한 마음이 있어 걱정했지만 소통이 잘돼서 원활하게 진행되었던 거 같다.