📌목차

📄프로젝트 설명
👥멤버 구성 및 역할
💻기술 스택
💡브랜치 전략 및 커밋 컨벤션
🏗️ERD
💬기능 명세서
⚠️트러블 슈팅

📄 프로젝트 설명

주기적으로 업데이트 되는 전시 정보들을 보여주며,

전시의 평점과 한줄평을 남기고 전시에 관심이 있는 다양한 사람들과 소통할 수 있는 웹사이트

진행 기간 : 2023.03.29 ~ 2023.05.09

ARCO 팀 노션
ARCO 사이트

👥 멤버 구성 및 역할

💻 기술 스택

⭐ Platforms & Languages ⭐

Front End

Back End

☁️ AWS ☁️

🛠️ Tools 🛠️

💡 브랜치 전략 및 커밋 컨벤션

🧷 Git Workflow

main → develop → 기능별 브랜치 or 본인 이름의 브랜치

각자 생성한 브랜치에서 작업하며 Add - Commit - Push - Pull Request(develop 브랜치로) 과정을 밟는다.
Pull Request가 작성되면 작성자 이외의 다른 팀원들이 체크 한다. (팀으로 작업한다면 팀 내에서 체크한다)
체크가 완료되면 develop Branch로 merge 한다.
다른 팀원들은 merge된 작업물을 pull하고 다시 각자 맡은 작업을 이어나간다.

🧷 Commit Convention

태그 이름	설명
[Feat]	새로운 기능 구현
[Fix]	버그, 오류 수정
[Hotfix]	issue나 QA에서 급한 버그 수정
[Docs]	문서 수정
[Test]	테스트 코드 추가 및 업데이트
[Chore]	코드 수정, 내부 파일 수정
[Del]	불필요한 코드 삭제
[Refactor]	전면 수정
[Merge]	다른 브랜치를 merge 할 때 사용
[Add]	Feat 이외의 부수적인 코드 추가, 라이브러리 추가, 새로운 파일 생성 시
[Style]	코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
[Design]	CSS 등 사용자 UI 디자인 변경
[Rename]	파일 이름 변경 시 사용
[Move]	프로젝트 내 파일이나 코드의 이동

[커밋 메시지 작성 양식]

지라이슈번호 [태그이름] 제목 (한칸 띄우기) 본문(생략 가능)

[커밋 메시지 예시]

DOS-1 [Feat] 회원 가입 기능 구현 SMS, 이메일 중복확인 API 개발

🏗️ ERD

💬 기능 명세서

메인페이지

상단바
- 네비게이션을 통해 해당 페이지로 이동 또는 로그인/로그아웃을 할 수 있음
  - 마이 페이지
  - 로그인/로그아웃
  - 회원 가입
헤더
- 로고 클릭 시 메인 페이지로 이동
- 메뉴 클릭 시 해당 페이지로 이동
  - 전시 목록
  - 커뮤니티
  - 어바웃
추천 순으로 정렬된 전시 목록 슬라이드 형태로 조회 가능
- 전시 포스터 클릭 시 해당 전시 상세 페이지로 이동
ARCO 소개와 커뮤니티의 BEST 게시판 리스트 조회 가능
- 더보기 클릭 시 해당 페이지로 이동
최신순으로 정렬 된 전시 목록 조회 가능
- 전시 포스터 클릭 시 해당 전시 상세 페이지로 이동

전시 목록 페이지

종료일순으로 정렬된 전시 목록 조회 가능
- 전시 포스터 클릭 시 해당 전시 상세 페이지로 이동
- 종료일순, 별점순, 조회순으로 정렬 방식 변경 가능
제목과 날짜로 전시 검색 가능
매주 월요일 전시 API 4:00 AM 자동 업데이트

전시 상세 페이지

전시 정보 조회 가능
- 유저가 등록한 평균 별점 조회 가능
- 티켓 예매 버튼 클릭 시 예매 사이트로 이동
- 찜하기 버튼 클릭 시 모달창으로 마이 페이지 이동하며 마이 페이지의 찜 캘린더에 전시 일정 등록
전시장 위치 조회
- 전시장 위치 길 찾기 조회 가능
- 전시장 근처 주차장, 음식점, 카페 조회 가능
- 주차장, 음식점, 카페 클릭 시 해당 장소의 지도 링크로 이동
한줄평
- 별점과 함께 50자 이내의 한줄평 작성 가능
- 로그인하지 않은 유저는 작성할 수 없음
- 작성자 본인만 한줄평 수정, 삭제 가능

커뮤니티 목록 페이지

BEST, 자유, 전시, 정보 게시판 버튼 클릭 시 해당 게시판으로 이동
제목, 작성자, 내용으로 게시판 별 게시글 검색 가능
게시글 클릭 시 해당 글 상세 페이지로 이동
BEST 게시판은 추천수 10개 이상의 글만 조회할 수 있으며 글 작성 불가능
글 작성 페이지로 이동 가능
- 로그인하지 않은 사용자는 글 작성할 수 없음

커뮤니티 글 작성 페이지

유저가 글을 작성할 게시판을 선택할 수 있으며 작성 버튼을 누른 게시판 위치가 디폴트로 설정되어 있음
유저의 닉네임은 고정 값으로 들어 있으며 글 작성 창에서 변경 불가능
목록 버튼을 클릭하면 커뮤니티 목록 페이지로 이동

커뮤니티 글 상세 페이지

게시글
- 로그인 하지 않은 유저는 게시글과 댓글 조회만 가능
- 게시글 작성자 본인만 수정, 삭제 가능
  - 작성자 본인에게만 수정, 삭제 버튼 활성화
- 게시글 하단의 추천 버튼 클릭 시 추천 수 증가하며 재클릭 시 추천 취소 되며 추천 수 감소
댓글
- 댓글 작성 시 유저의 닉네임은 고정 값으로 들어 있으며 댓글 작성란에서 변경 불가능
- 댓글 작성자 본인만 수정, 삭제 가능
  - 작성자 본인에게만 수정, 삭제 버튼 활성화

회원가입 페이지

회원가입
- 헤더의 Sign up 버튼 클릭시 개인 정보 처리 방침에 동의 체크 후 회원 가입 버튼 활성화 되어 페이지 이동 가능
- 정해진 형식에 맞게 기입해야 회원가입 가능
  - 아이디
    - 4자 이상 10자 이하의 영문 대소문자와 숫자 조합이어야 한다.
    - admin으로 시작하는 아이디와 중복된 아이디는 사용 불가능
    - 공백을 포함할 수 없고 한글 사용 불가능
  - 비밀번호
    - 8자 이상 18자 이하의 영어 소문자/숫자/특수문자 조합이어야 한다.
    - 비밀 번호와 비밀 번호 확인이 일치해야 한다.
  - 닉네임
    - 숫자만 입력하거나 공백을 포함한 닉네임은 사용 불가능
    - 2자 이상 10자 이하의 영문, 한글, 숫자 조합이어야 한다.
    - 관리자 혹은 admin으로 시작하는 닉네임, 중복된 닉네임은 사용 불가능
  - 이메일
    - 이메일 주소는 @기호를 포함해야하며, @기준으로 왼쪽은 영문 대/소문자, 숫자, 특수문자(., _, %, +, -)로 이루어져야 하며, 오른쪽은 도메인 주소가 오며, '.(점)'으로 구분된 문자열로 이루어져야한다.
    - 입력한 이메일로 인증 번호가 발송 되며 올바른 인증 번호를 입력해야만 유효성 검사 통과 가능
  - 핸드폰 번호 : 공백을 포함할 수 없고, 10자 또는 11자의 숫자로만 이루어져야한다.
회원가입이 완료되면 웰컴 메시지와 함께 로그인 페이지로 이동
이미 계정이 있는데 해당 페이지에 들어온 경우 취소 버튼 클릭하여 메인 페이지로 이동

로그인 페이지

로그인
- 아이디와 비밀 번호 잘못 입력 했을 시 오류 메세지 출력
- 아이디 찾기
  - 가입 시 작성한 닉네임과 전화번호 입력 하면 모달창에 작성자의 아이디 출력
- 비밀번호 찾기
  - 가입시 작성한 아이디와 이메일을 입력하고 메일 전송 버튼 클릭 시 임시 비밀번호가 발급되어 이메일로 발송
  - 발급된 임시 비밀번호로 로그인 가능
로그인 후 메인 페이지로 이동

마이 페이지

찜한 전시 일정
- 전시 상세 페이지에서 찜하기 버튼 클릭 시 캘린더에 일정 등록
- 찜한 전시가 2개 이상일 시 +more 버튼을 클릭하여 조회 가능
유저가 작성한 한줄평/게시글/댓글
- 각각의 한줄평, 게시글, 댓글에는 링크가 걸려 있으며 클릭 시 해당 페이지로 이동
유저 정보
- 유저의 닉네임 변경할 수 있으며 유효성 검사를 통과해야 최종적으로 변경 가능
- 비밀번호 변경
  - 새 비밀번호와 새 비밀번호 확인을 입력하여 유효성 검사와 일치 여부를 확인 후 변경 가능
- 회원 탈퇴
  - 비밀번호 입력하여 탈퇴 할 수 있으며 안내 메세지 확인 후 굿바이 메세지 출력

관리자 페이지

관리자 계정으로 로그인 시 상단바에 Admin Page 버튼 활성화
회원 관리
- 전체 사용자의 아이디, 닉네임, 이메일 목록 조회 가능
- 회원 삭제 가능하며, 삭제 시 해당 회원이 작성한 한줄평, 게시글, 댓글 모두 삭제됨
한줄평 관리
- 한줄평 클릭 시 해당 한줄평으로 이동
- 관리자 권한으로 활성화된 삭제 버튼으로 한줄평 삭제 가능
게시글 관리
- 게시글 클릭 시 해당 게시글 상세 페이지로 이동
- 관리자 권한으로 활성화된 삭제 버튼으로 게시글 삭제 가능
- 게시글이 작성된 게시판 위치 이동 가능
댓글 관리
- 댓글 클릭 시 해당 댓글 상세 페이지로 이동
- 관리자 권한으로 활성화된 삭제 버튼으로 댓글 사제 가능

⚠️ 트러블 슈팅

공공데이터 API

ISSUE
공공데이터 API를 가져오는 과정에서 필요한 정보를 못 불러 오는 문제 발생(가격, 티켓 URL 등 여러가지 데이터가 제외되어 있음)
SOLVE
1. 호출url을 변경하여 다른 정보를 가져오도록 진행 -> 똑같이 원하는 정보를 모두 가지고 올 수 없었음
2. 호출url을 여러개 사용하여 원하는 데이터를 가지고 올 수 있도록 호출 -> 기간별 공연/전시목록(period)에 있는 전시 seq를 추출하여 공연/전시 상세 정보 조회(d?seq={공연/전시 번호}) seq에 대입했고 모든 정보를 추출하여 이용 가능하도록 해결

API dataformatexception

ISSUE
API를 DB에 넣는 과정에서 dataformatexception 발생
SOLVE
1. 기술문서에는 불러오는 데이터를 포함하고 있지 않았기 때문에 try-catch문으로 불러오는 코드 하나씩 체크를 해본 후 문제가 발생하는 부분을 발견, 데이터(날짜관련 데이터에서 문제 발생)의 타입을 Date에서 String으로 변경 후 실행 -> 동일한 오류 발생
2. 두가지 타입으로 저장되어 있는 부분을 발견 후 String으로 db의 컬럼을 수정하고 불러오는 데이터의 타입을 String으로 변경하여 저장할 수 있도록 해결

Date 400에러

ISSUE
검색 부분에서 date 검색 시 400에러 발생
SOLVE
1. Date 검색 부분을 처리하기위해 input 태그의 type date를 사용하여 날짜를 받아오고 받아온 날짜보다 전시 종료일이 큰 데이터를 가져오도록 구현 하고 dto(Critrtia)부분에서 date를 받아올 수 있도록 Date타입의 date 필드를 작성 했지만 400에러 발생
2. input태그의 date는 String으로 데이터를 처리하기 때문에 dto에서 date 타입이 아닌 String으로 변경하여 해결

AWS의 메모리 부족

ISSUE
AWS Free Tier의 메모리가 1GB 밖에 되지않아, 웹 배포를 진행시 메모리가 부족하여 2~3일 이후 서버가 다운되는 현상 발생
SOLVE
1. 현실적으로 인스턴스 업그레이드는 비용이 들기 때문에, SWAP 메모리 공간을 할당해줌
2. SWAP memory 공간은 HDD(SSD 포함) 의 약 2GB 할당해줌
3. RAM에 비해서 성능은 떨어지지만, 서버 부하 없이 배포를 진행 할 수 있게됨

Database에서의 max connection

ISSUE
AWS RDS를 사용 중, max connection 오류 발생. 다수의 인원이 개발을 하며 DB에 접근한 후, 연결을 종료 시키지 않아 접속이 누적되고 있었음
SOLVE
hikari에서 maxlifetime을 줄여주고, AWS RDS 에서 max connection 제한을 최대한 늘려줌

커뮤니티에서 뒤로가기 시 파라미터 누적

ISSUE
CRUD 기능 구현 중, 게시글 상세 조회 후 뒤로가기 진행 시, 파라미터가 누적되어 다른 게시글 상세로 이동하면 이전의 게시글로 이동하는 오류 발생
SOLVE
기존 구현 로직에 의하면 클릭한 해당 postId를 받아와 파라미터로 추가하여 해당 게시글로 이동 -> 파라미터로 추가하는 방식이 아닌 postId와 brdId를 직접 주소로 넘겨 이동하는 방식으로 수정

JavaMailSenderImpl 활용

회원가입 (이메일 인증)
회원가입 시 이메일 인증을 구현하여 무분별한 회원가입을 방지함. email-context.xml로 bean을 등록한 후 스프링의 JavaMailSenderImpl 클래스를 활용해 MailSendService 클래스를 제작함. Random 클래스를 활용해 난수를 발생시키고 이메일 양식을 정한 후 이메일을 전송하는 로직으로 구현.
비밀번호 찾기 (임시 비밀번호 발급)
비밀번호 찾기에서 임시 비밀번호를 이메일로 전송해주는 기능 구현. FindPwMailSendService 클래스를 제작하여 문자와 숫자로 이뤄진 임시 비밀번호를 해당 유저의 이메일로 전송함.

마이페이지 메뉴별 영역 및 페이징 오류 해결

ISSUE
기존에는 나의 한줄평/게시글/댓글 메뉴 내부에 각각 한줄평, 게시글, 댓글에 대한 페이지 구분이 없었음. 이때 나의 한줄평/게시글/댓글 에서 한줄평이나 게시글 등 각 영역의 페이징 버튼을 클릭 시 화면이 새로고침되어 최초로 돌아가는 문제 발생.
SOLVE
나의 한줄평/게시글/댓글에 id 값을 주어 mypage_id를 1, 2, 3으로 구분. javascript로 function showSection을 제작하여 mypage_id에 따른 각각의 섹션에 해당하는 내용이 보이도록 수정. 이를 통해 페이징이 제대로 작동하고 각 영역에 해당하는 내용이 제대로 보이도록 하여 이슈 해결.

DB 비밀번호 암호화

ISSUE
Context initialization failed 무한오류 및 DB에 비밀번호가 암호화가 되지 않는 문제 발생
SOLVE
bcryptPasswordEncoder 빈 등록, controller에 의존성 주입 후, encode() 메서드를 호출하여 비밀번호를 매개값으로 넣어준 뒤 인코딩한다. 인코딩된 값을 String타입으로 저장해 DB에 암호화가 되는 것을 확인하고, matches() 메서드를 사용하여 입력받은 비밀번호를 다시 암호화 하지 않고 내부적으로 이미 저장돼있는 security방식의 암호화 키를 복호화하여 비교해주고 일치하면 true, 일치하지않다면 false로 확인 결과를 논리값으로 반환해주면서 문제 해결

관리자 권한

ISSUE
role에 따른 권한 부여 방식, 로그인한 계정에 따라 페이지 접근 문제 발생
SOLVE
기존 테이블에 role칼럼을 추가하고 default값으로 ROLE_USER 설정. 관리자계정을 임의로 ROLE_ADMIN으로 수정 후 Interceptor를 사용하여 로그인 여부를 체크하고 로그인하지 않은 사용자는 로그인 페이지로 redirect할 수 있고, 일반 회원이 관리자페이지로 접근 시도를 하게 되면 메인화면으로 redirect할 수 있도록 코드 수정

junghyun-jacky/ARCOProject

📌목차