AirLingo

📖목차

README

🗓 프로젝트 진행 기간

2023.07.04 ~ 2023.08.18 (약 7주)

📑 주제

화상 채팅을 기반으로 한 원어민과의 언어 교환 웹 서비스 프로젝트

🎉 프로젝트 기획

🔑 주요 기능

🖥 서비스 화면

홈 페이지

회원가입 페이지

로그인 페이지

매칭페이지

미팅페이지

프로필페이지

🏗️ 아키텍쳐

🛠 기술 스택

기술 스택

상세 기술 스택

📂 파일 구조

프론트 프로젝트 구조

📦src
 ┣ 📂api
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┣ 📂icons
 ┃ ┣ 📂imgs
 ┃ ┃ ┣ 📂profiles
 ┃ ┗ 📂styles
 ┣ 📂components
 ┃ ┣ 📂buttonMenu
 ┃ ┣ 📂chatList
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂button
 ┃ ┃ ┣ 📂container
 ┃ ┃ ┣ 📂dropdown
 ┃ ┃ ┣ 📂input
 ┃ ┃ ┣ 📂overlay
 ┃ ┃ ┣ 📂profile
 ┃ ┃ ┣ 📂slideMenu
 ┃ ┃ ┣ 📂tab
 ┃ ┃ ┗ 📂tooltip
 ┃ ┣ 📂dialoglist
 ┃ ┣ 📂drawing
 ┃ ┣ 📂grade
 ┃ ┣ 📂header
 ┃ ┣ 📂langList
 ┃ ┣ 📂loading
 ┃ ┣ 📂modal
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┣ 📂match
 ┃ ┃ ┃ ┣ 📂matchhome
 ┃ ┃ ┣ 📂meeting
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┣ 📂wordBook
 ┃ ┣ 📂musicPlayer
 ┃ ┣ 📂profileBar
 ┃ ┣ 📂progressBar
 ┃ ┣ 📂ScriptEditor
 ┃ ┣ 📂starRate
 ┃ ┣ 📂validationList
 ┃ ┗ 📂videoFrame
 ┣ 📂config
 ┣ 📂features
 ┃ ┣ 📂Meeting
 ┃ ┗ 📂User
 ┣ 📂hooks
 ┃ ┣ 📂whiteboard
 ┣ 📂Layout
 ┣ 📂pages
 ┃ ┣ 📂Error
 ┃ ┣ 📂home
 ┃ ┣ 📂login
 ┃ ┣ 📂match
 ┃ ┣ 📂meeting
 ┃ ┃ ┣ 📂screen
 ┃ ┃ ┣ 📂slide
 ┃ ┣ 📂mypage
 ┃ ┣ 📂signup
 ┣ 📂store
 ┣ 📂utils
 ┣ 📜App.jsx
 ┣ 📜main.jsx
 ┗ 📜router.jsx

백엔드 프로젝트 구조

📦airlingo
┣ 📂domain
 ┃ ┣ 📂chat
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂content
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂language
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂matching
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┣ 📂response
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂report
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂study
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂user
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┗ 📂word
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┣ 📂global
 ┃ ┣ 📂config
 ┃ ┣ 📂entity
 ┃ ┣ 📂exception
 ┃ ┣ 📂handler
 ┃ ┣ 📂openvidu
 ┃ ┣ 📂rabbitmq
 ┃ ┣ 📂response
 ┃ ┗ 📂util
 ┗ 📜AirlingoApplication.java

📝 설계 문서

ERD

API

전체 문서

Request

Response

FIGMA

📚 컨벤션

Ground Rule

클릭하여 내용 표시/숨기기

GROUND RULE

🥇 프로젝트 수칙

💻 회의 진행

매일 오전 9시, 오후 5시 2회에 걸쳐 **데일리 스크럼(Daily Scrum)**을 진행해, 개인별 당일 목표를 설정하고 진행 상황을 공유합니다.
매주 금요일 오후 5시에 **스프린트 세션(Sprint Session)**을 진행해 일주일간 프로젝트의 진행 상황 및 추후 진행 목표를 설정합니다.
데일리 스크럼과 스프린트 세션은 팀장이 회의를 주재하고, 다른 팀원들이 돌아가며 회의록을 작성합니다.
회의에 적극적으로 참여하고, 팀장의 지목에 따라 본인의 의견을 반드시 제시합니다.

💻 코드 리뷰

**코드 리뷰(Code Review)**는 점심시간을 활용해 필요한 부분만 간단히 30분 동안 진행합니다.
서로 다른 코드 스타일을 합의한 **코딩 컨벤션(Coding Convention)**에 따라 일원화합니다.
코드 리뷰는 우선순위에 따라 빠르게 진행하며, 사소한 의견을 반영할 지에 대한 부분은 코드 작성자가 선택할 수 있도록 합니다.

💻 코드 작성

에러(Error)가 발생 시 1시간 정도는 혼자서 고민해보고, 해결이 되지 않을 경우 팀원들과 바로 공유합니다.
에러를 해결하기 위해 고민한 내용 및 해결 과정은 노션에 정리하여 공유합니다.
코드에 주석(Comment)을 작성하는 습관을 생활화하여, 다른 팀원들이 내가 작성한 코드를 이해하기 쉽도록 합니다.
기능의 구현 원리를 공부하고 파악하기 위해서 오픈 소스(Open Source) 라이브러리 사용을 최소화하는 것을 원칙으로 합니다.

💻 깃 관리

풀리퀘스트(Pull Request)가 있을 경우, 이를 확인했다는 의미에서 최소한 1개 이상의 의견을 남겨야 합니다.
풀리퀘스트 시 의견 갈등이 생겼다면, 충분한 토론과 의견 수렴 과정을 거쳐 다수의 의견을 따라야 합니다.
커밋(Commit)하기 전에 고칠 부분을 한 번 더 점검합니다.
1가지 기능 또는 1가지 함수를 새로 만들 때마다 커밋하는 습관을 생활화합니다.
**커밋 메시지(Commit Message)**는 합의한 **커밋 컨벤션(Commit Convention)**에 따라 최대한 상세하게 작성합니다.
깃 브랜치(Branch) 규칙에 따라 브랜치를 관리하고, 모든 작업은 올바른 브랜치에서 작업해야 합니다.

🥈 생활 수칙

💻 개인 일정 관리 및 연락

개인 일정이 생긴 경우 반드시 미리 다른 팀원들에게 공유합니다.
프로젝트 중간에 취업 등으로 수료하게 된 경우, 도의적 차원에서 공통 프로젝트를 마무리하고 가야 합니다.
카카오톡(KakaoTalk), 디스코드(Discord), 매터모스트(Mattermost) 등을 통한 연락을 확인했을 때는, 확인했다는 의미의 답변 또는 이모지(Emoji)로 표시합니다.
매주 금요일 논의해, 주말 중 하루는 스트레스 관리 및 개인 공부를 위한 시간으로 활용할 수 있도록 합니다.

💻 개인 건강 및 위생 관리

교육장에서 퇴실하기 전에 자기 자리를 깔끔하게 정리정돈합니다.
몸이 아프면, 미안해하지 않고 빠르게 회복할 수 있도록 푹 쉬는 것을 권장합니다.
밥을 든든히 먹고, 굶지 않습니다. “잘 먹고 죽은 개발자가 때깔도 곱습니다.”

🥉 마인드셋 수칙

💻 마인드셋

적극성 : 회의나 코드 리뷰 때 의견이 있다면 망설이지 않고 의견을 이야기합니다. “말할까 말까 할 때는 말해야 합니다.”
긍정적인 태도 : 프로젝트에 임할 때는 웃으면서 재미있게 합시다. “행복하기 때문에 웃는 것이 아니고 웃기 때문에 행복합니다.”
소통 : 다른 팀원의 의견을 존중하고, 말을 끊지 않아야 합니다. 의견이 다르면, 대화를 통해 타협점을 찾아야 합니다.
협력 : 팀원이 힘들어하는 부분이 있다면, 웃으면서 도와주어야 합니다. 도움을 줄수록 나의 실력도 함께 올라갑니다.
신뢰 : 다른 팀원들의 책임감과 실력에 대해 믿음을 잃지 맙시다.

Git Commit

클릭하여 내용 표시/숨기기

COMMIT CONVENTION

Commit 메세지 구조
- ex) ✨ feat : Add sign in page #S09P11A308-52

<emoji> <type> : <subject> <Jira ticket number> // 필수
// 빈 행으로 구분
<body>      // 생략가능
// 빈 행으로 구분
<footer>    // 생략가능

Git Branch

클릭하여 내용 표시/숨기기

브랜치 명명 컨벤션

BRANCH NAMING CONVENTION

Git flow

ex) feat/{이슈 키}-{BE/FE}-{이슈 요약}
master / main - 제품으로 출시 및 배포가 가능한 상태인 브랜치 → 최종 결과물 제출 용도
develop - 다음 출시 버전을 개발하는 브랜치 → 기능 완성 후 중간에 취합하는 용도
feature - 각종 기능을 개발하는 브랜치 → feat/login, feat/join 등으로 기능 분류 후 작업
hotfix - 출시 버전에서 발생한 버그를 수정하는 브랜치

Codding

클릭하여 내용 표시/숨기기

CODING CONVENTION

1문자의 이름은 사용하지 않는다.
네임스페이스, 오브젝트, 함수 그리고 인스턴스에는 camelCase를 사용한다 ex) camelCase
클래스나 constructor에는 PascalCase를 사용한다. ex) PascalCase
약어 및 이니셜은 항상 모두 대문자이거나 모두 소문자여야 한다. ex) NFT
클래스명과 변수명은 명사 사용
메서드명은 동사 사용
상수명은 대문자를 사용하고, 단어와 단어 사이는 _로 연결한다.
component는 PascalCase를 사용한다.

Jira

클릭하여 내용 표시/숨기기

JIRA CONVENTION

매주 월요일 오전 스크럼 회의 이후 각자의 이슈 티켓을 생성한다.
이슈 생성 시 확인해야 할 부분
- 담당자가 본인으로 설정되어 있는지
- 컴포넌트가 지정되어 있는지 (FE, BE, 공통 중 택1)
- Epic Link가 지정되어 있는지 (설계, FE개발, BE개발, 회의, 학습…)
- 스프린트의 총 Story Points가 40 이상인지
이슈 티켓 이름은 [말머리] 구체적인 기능 으로 적는다.
- ****************************기능 관련 이슈일 경우 **************[말머리]**************는 기능 명세서의 대분류를 따른다.
매일 오전 스크럼 회의 이후 그 날 처리할 이슈 티켓을 진행 중으로 이동시킨다.
- 실시간으로 이슈를 처리할 때마다 완료 처리한다.

📄 문서 정리

회의록

페이지 전체 모습

기획 회의록 페이지 세부 모습

스크럼 페이지 세부 모습

스프린트 페이지 세부 모습

버그 리포트

페이지 전체 모습

세부 페이지 모습

지식 공유

페이지 전체 모습

세부 페이지 모습

💻 구동 방법

로컬 구동 기준으로 작성되었습니다.

clone Project

git clone https://lab.ssafy.com/s09-webmobile1-sub2/AirLingo.git

change path to /frontend/airlingo

npm i --legacy-peer-deps

create .env file in /frontend/airlingo/

VITE_SERVER_URL={your_server_url}
VITE_SOCKET_URL={your_socket_url}
VITE_CHAT_SOCKET_URL={your_chat_socket_url}

input frontend run script

npm run dev

change path to /backend/airlingo/src/main/resources

application.yml

cloud:
  aws:
    s3:
      bucket: ${your-bucket-name}
    credentials:
      accessKey: ${your-access-key}
      secretKey: ${your-secret-key}
    region:
      static: ap-northeast-2
      auto: false
    stack:
      auto: false

application-dev.yml

spring:
  jpa:
    hibernate:
      ddl-auto: create #create update none
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: ${your-db-url}
    username: ${your-db-username}
    password: ${your-db-password}
  rabbitmq:
    host: localhost
    port: 5672
    username: ${your-rabbitmq-username}
    password: ${your-rqbbitmq-password}
    
openviduUrl: ${your-openvidu-url}
openviduSecret: ${your-openvidu-secret}

install docker,openvidu,redis,rabbitmq
run openvidu

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.28.0

change path /matching/airlingo
run docker-compose.yaml for rabbitmq
run backend,matching program

💾 결과물

UCC

https://youtu.be/8numB_R7RLE

시연 영상

https://www.youtube.com/watch?v=WcZEspXgMLA

PPT

❤ 팀 소개

팀명

📢 안녕하세요! 삼성 청년 소프트웨어 아카데미(SSAFY) 서울 3반 교육생으로 조직된 프로젝트 팀 ‘개발자들’입니다. 프로젝트 진행 과정에서 발생하는 많은 문제를 팀원 간 공유하고 해결책을 모색하면서 함께 성장하는 기회로 삼겠습니다. 감사합니다.

팀명의 의미

각종 영화나 문화 콘텐츠에서 사용하는 ‘~들’의 표현을 사용해 미래의 개발자를 꿈꾸는 여섯 명의 팀원이 모였다는 의미를 담았습니다.

Frontend


고건	김수환

Backend


김하림	문수정	박시균	오유정

Files

README.md

Latest commit

History

README.md

File metadata and controls

AirLingo

📖목차

🗓 프로젝트 진행 기간

📑 주제

🎉 프로젝트 기획

🔑 주요 기능

🖥 서비스 화면

🏗️ 아키텍쳐

🛠 기술 스택

기술 스택

상세 기술 스택

📂 파일 구조

📝 설계 문서

ERD

API

FIGMA

📚 컨벤션

Ground Rule

🥇 프로젝트 수칙

💻 회의 진행

💻 코드 리뷰

💻 코드 작성

💻 깃 관리

🥈 생활 수칙

💻 개인 일정 관리 및 연락

💻 개인 건강 및 위생 관리

🥉 마인드셋 수칙

💻 마인드셋

Git Commit

Git Branch

브랜치 명명 컨벤션

Git flow

Codding

Jira

📄 문서 정리

회의록

버그 리포트

지식 공유

💻 구동 방법

💾 결과물

UCC

시연 영상

PPT

❤ 팀 소개

팀명

팀명의 의미

Frontend

Backend