README.md

Nagne

Member

• 강창우([email protected]) - 프론트엔드 100%
• 김두열([email protected]) - 백엔드 100%

Introduce

나그네는 이러한 고민에서 시작되었습니다.

• 여행 계획을 효율적으로 짤 수 없을까?
• 여행 정보를 좀 더 쉽게 얻을 수 없을까?
• 요즘 핫플레이스를 알 수 있는 방법이 없을까?

나그네는 여행 문화의 활성화를 목표로 합니다.

여행 계획을 자유롭게 공유하고, 여행의 즐거움과 가치를 더 많은 사람과 나누고, 함께 새로운 여행지를 발견하고 떠나는, 우리는 나그네입니다.

Progress Period

2024.05.02 ~ 2024.05.24 (4 Week)

Dev Environment

FlowChart

ERD

WireFrame

Features

1. 회원 관리
   • 로그인/회원가입, 소셜 로그인(구글, 카카오)
   • 회원 정보 수정 및 프로필 사진 변경
   • 회원 탈퇴
   • 팔로우/팔로워 기능
   • 좋아요, 팔로우, 댓글 알림 기능
2. 게시물
   • 게시물 조회, 작성, 수정, 삭제
   • 여러 장의 이미지 첨부해 게시물 작성
   • 여행 계획을 게시물로 작성
   • 좋아요, 댓글, 북마크 기능
3. 국내 관광지 정보 확인
   • 여행지 분류 필터, 키워드 검색 기능
   • 마커 클릭시 상세보기
   • 가고 싶은 관광지에 추가해, 계획 생성
4. 여행 계획 생성
   • 추가한 관광지 순서 변경 지원
   • AI를 통한 여행 계획 생성 및 공유
5. 기타
   • 실시간 날씨 확인
   • 베스트 게시물 확인(좋아요 순, 댓글 순)

Demonstrate

(https://www.youtube.com/watch?v=oAt-QPJr80U)

Trouble Shooting

1. 토큰 무한 갱신으로 인한 로그아웃 불가 https://groovy-balaur-25d.notion.site/e106186a1b1b46529de92fb28ea99e3f?pvs=4

2. 게시글 무한 로딩 문제 해결 https://groovy-balaur-25d.notion.site/319ea3d7ecc94ccb997bafcf70fd28fd?pvs=4

Git Convention

```
  Feat :
  새로운 기능 추가

  Fix :
  버그 수정

  Docs :
  문서 수정

  Style :
  코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우

  Refactor :
  코드 리펙토링

  Test :
  테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)

  Chore :
  위에 걸리지 않는 기타 변경사항 (빌드 스크립트 수정, assets image, 패키지 매니저 등)

  Design :
  CSS 등 사용자 UI 디자인 변경

  Comment :
  필요한 주석 추가 및 변경

  Init :
  프로젝트 초기 생성

  Rename :
  파일 혹은 폴더명 수정하거나 옮기는 경우

  Remove :
  파일을 삭제하는 작업만 수행하는 경우

  출처:
  <https://chlolisher.tistory.com/173>
```

2024.05.24

1. 지도에서 찾기 페이지(FindByMapPage.vue)
   1. 지도 마커를 클릭하면 해당 관광지 상세 보기 모달 창 띄우기 기능 추가
   2. 사용자 위치 좌표를 GPS로 받아오지 않고, 고정 좌표로 주도록 설정 (백엔드 https 문제)
2. 게시글 작성 페이지, 게시글 수정 페이지
   1. 이미지 업로드시 미리보기가 안되는 오류 수정
3. 여행 계획 작성 페이지(PlanWritePage.vue)
   1. 세션에 여행 계획이 담겨있는 경우, 여행 계획을 작성하는 input창에 로드
   2. GPT 프롬프트 수정 - 구체적인 좌표를 언급하지 않도록 수정
4. 날씨 컴포넌트(TheWeather.vue)
   1. 사용자 위치 좌표를 GPS로 받아오지 않고, 고정 좌표로 주도록 설정 (백엔드 https 문제)
5. 북마크 페이지
   1. 북마크한 게시물 갯수 API 연동
6. 기타
   1. axios BaseURL 변경.
   2. 서버 ↔ 로컬 URL 변경
7. 배포 완료

2024.05.22-23 - monam2

1. 지도에서찾기 페이지(FindByMapPage.vue)
   1. attraction_type.js - API 호출 결과에 따라 바인딩할 데이터 객체 생성
   2. 필터 선택시 지도에 보여줄 마커 이미지 추가
   3. 선택된 필터에 따른 관광지를 마커로 지도에 표시
   4. 지도 필터, 키워드 검색 기능 추가
   5. 관광지 관리 pinia Store 추가
   6. 로그아웃 상태에서 지도 페이지 진입 시 로그인 화면으로 라우팅 되지 않는 문제 해결
   7. 관광지 목록에서 여행지 담기 기능 추가
   8. 계획 만들기 버튼 클릭 시 내가 담은 관광지 정보를 저장 → 계획 작성 페이지로 이동
   9. 담은 관광지 정보를 세션 스토리지에 저장
2. 여행계획 작성 페이지(PlanWritePage.vue)
   1. 생성 및 컴포넌트 추가
   2. openAI - ChatGPT 연동
3. 게시물 상세보기 모달 및 페이지
   1. 댓글 로드 및 무한 스크롤 적용 오류, 해결
   2. 댓글 로드 함수 실행 시 인자로 게시글 id 보내기
   3. 여러 장의 이미지를 Swipe로 미리볼 수 있도록 변경
   4. Swipe 미리보기 : 컴포넌트가 props를 받는 경우와 Store에서 tempUrl을 직접 호출하는 경우로 케이스 분류해 처리(props의 경우 유저 정보 페이지나 북마크 페이지에서 게시물을 클릭해 넘어온 경우임)
   5. 게시물 상세보기에서 댓글이 없을 경우 발생하는 undefined Error를 해결
4. 게시물 수정 페이지
   1. 게시물 수정 불가 에러 해결
   2. 여러 장의 이미지를 Swipe로 미리볼 수 있도록 변경
5. 게시물 작성 페이지
   1. S3 이미지 테스트 위한 이미지 바인딩 추가
   2. 게시글 작성 시 이미지 이름 blob으로 설정되는 오류 해결
   3. 여러 장의 이미지를 Swipe로 미리볼 수 있도록 변경
6. 검색 결과 페이지
   1. 쿼리스트링을 포함하는 라우터 추가
   2. 전체 검색 결과 API 연동
   3. 엔터키 입력 이벤트 추가
7. 헤더
   1. 알림 모두 읽기 기능 추가 (API 연동)
   2. 헤더 로그인한 유저 이미지 엑박 뜰 경우 대체 이미지 설정(oneerror)
   3. 검색 관련 컴포넌트 및 모달 추가
   4. 검색 결과 페이지로 라우터 추가
8. 회원 정보 수정 페이지
   1. 라우터 추가
   2. 정보 수정 및 삭제 API 연동 - 백엔드 500 에러 발생, 해결
9. 북마크 페이지
   1. 북마크한 게시물 클릭시 해당 게시물 상세보기 페이지로 이동 기능 추가
10. 로그인/로그아웃/회원가입 페이지
    1. 소셜 로그인 시 세션 스토리지에 소셜 로그인 여부를 기록
11. 기타
    1. build를 위해 public에 assets 폴더 복사 및 assets 파일들 경로 수정

2024.05.21 - monam2

1. 헤더(TheHeader.vue)
   1. 알림 목록 조회 API 연동
   2. 로그인 여부에 따라 알림 목록 API 호출 여부 결정
   3. 알림 읽기 patch 관련 401 에러 해결 - 백엔드 API 수정 요청
   4. 알림 읽기 시 읽음 여부가 바로 반영되도록 수정 - API 재 호출
   5. 알림을 클릭하면 해당 게시물 상세 페이지로 이동 기능 추가
   6. 팔로우 알림의 경우 게시글 이동이 아닌, 해당 유저 프로필로 이동하도록 수정
   7. 알림 관련 401 에러 해결
2. 북마크 페이지(BookMarkPage.vue)
   1. 북마크한 게시물 목록 보기 API 연동
   2. 라우터 추가 → ArticleDeatilPage.vue 로 이동
   3. 북마크한 게시물 컴포넌트 추가 및 props로 데이터 바인딩
3. 메인 페이지
   1. 베스트 게시물
      1. 클릭한 베스트 게시물 - 게시물 상세보기 페이지에서 보기
4. 게시글 상세보기 페이지(ArticleDetailPage.vue)
   1. 댓글 작성 기능 추가
   2. 댓글 작성 관련 오류 발생 (해결 시도 중)
5. 지도로 찾기 페이지(FindByMapPage.vue)
6. 메인 페이지

   1. 불필요한 비동기 및 API 호출 코드 리팩터링

   2. 리팩터링 후 좋아요, 북마크가 메인에 반영되지 않는 오류 수정

      → 백엔드 API 수정으로 인해 바로 반영하지 않고, 새로고침 페이지 이동 시 반영되도록 협의

2024.05.20 - monam2

1. 유저 정보 페이지

   1. 상단 유저 정보 컴포넌트

      1. 유저 팔로우/팔로우 해제 API 연동

      2. 현재 로그인한 유저의 유저 정보 페이지라면 팔로우/팔로잉 버튼 대신 프로필 편집 버튼이 렌더링되도록 설정

         → 프로필 편집이 안뜨는 문제 해결 : 문자열로 처리되던 파라미터 값을 Number로 변환해서 처리

      3. 유저를 팔로우/팔로우 해제 시 팔로워 수가 바로 렌더링 되도록 수정

         → watch로 API 재 호출

   2. 팔로잉/팔로워 컴포넌트

      1. API 연동
      2. 모달로 팔로잉 목록/팔로워 목록 열고 닫기
      3. 팔로잉/팔로워 여부에 따라 버튼 다르게 보이도록 설정
      4. 목록에서 현재 로그인 한 유저(자신)은 팔로우/팔로잉 버튼이 보이지 않도록 설정
      5. 무한 스크롤 추가

   3. 내가 작성한 게시물 보기 컴포넌트 추가

   4. 기타

      1. 로그인 여부 검증

      2. 다른 유저 프로필로 이동해도 컴포넌트가 새로 렌더링되지 않는 문제 해결

         → userIdByParams를 콜백함수에 넣어서 watch로 처리

2. 메인 페이지 및 게시물 상세 보기

   1. 게시글의 댓글 컴포넌트가 게시글을 무한 로드하는 현상 해결

      → 각 게시물 하단의 댓글 컴포넌트를 삭제

   2. 게시물 무한 로드 문제 해결

      → article 객체 변화를 감지하는 watch를 삭제

   3. 메인 페이지 게시물 무한 스크롤, 스피너 추가

   4. 게시물 삭제 불가 오류 해결

   5. 게시물 작성 에러 해결

3. 지도로 찾기 페이지(FindByMapPage.vue)

   1. 관광지 리스트 불러오기 API 연동

4. 헤더(TheHeader.vue)

   1. 헤더 알림 버튼 클릭시 알림 모달 열기 추가
   2. 알림을 보낸(좋아요 누른, 댓글 작성한) 유저 정보를 클릭시 유저 페이지로 이동

2024.05.19 - monam2

1. 지도로 찾기 페이지(FindByMapPage.vue)
   1. Geolocation으로 현재 위치 받아와, 현재 위치로 이동 버튼 추가 (TheWeather.vue에서 map.js에 저장한 좌표를 사용하려 했으나, 새로고침 시 초기화 문제로 인해 수정)
   2. 관광지 리스트 컴포넌트 추가
2. 메인 페이지
   1. 사이드바
      1. 베스트 게시물 API 연동 (추후 댓글순, 좋아요순 필터 추가 - 백엔드에 API 수정 요청)
      2. 메인페이지 로드시 API 호출해 props로 넘겨주기
3. 게시물 작성 페이지
   1. 게시물 작성페이지 오픈시 이미지 선택 컴포넌트가 뜨지 않는 문제 해결 시도(계속 진행 중)
4. 모든 페이지 컴포넌트
   1. 로그인 여부 검증을 pinia → 세션 스토리지의 Token 확인으로 변경 (새로고침시 로그아웃 되는 문제)
5. 게시물 보기(모달) 및 상세 보기 페이지
   1. 오류 수정
      1. Token 저장 위치 변경(세션스토리지)으로 인해 좋아요, 북마크가 반영되지 않는 오류
6. 유저 정보 페이지(UserInfoPage.vue)
   1. 유저 프로필 보기 페이지 컴포넌트 추가
   2. index.js 라우터 추가 및 다른 페이지에서 유저 정보를 클릭하면 해당 페이지로 이동하도록 설정

2024.05.18 - monam2

1. 지도 메인 페이지(MapMainPage.vue)
   1. [지도로 보기], [키워드로 보기], [저장한 장소], [내 여행 계획] 버튼 추가
   2. index.js 라우터 추가
2. 지도로 찾기 페이지(FindByMapPage.vue)
   1. 카카오 맵 api 추가 (Vue-kakao-map)
3. Map 관련 pinia Store 생성(map.js)
4. 날씨 컴포넌트(TheWeather.vue)에서 로드한 위치 좌표를 map.js 스토어에 저장
5. 기타
   1. Map 마커 이미지 생성
   2. Top 이동 버튼을 헤더에서 메인 페이지로 이전
   3. 태그로 찾기, 저장한 장소 보기, 내 여행 계획 페이지 생성

2024.05.17 - monam2

1. 로그인 페이지 / 회원가입 페이지
   1. 소셜 로그인 기능 구현(임시, 로그인/가입 페이지에서 파라미터로 받기)
   2. 이후 REST API 방식으로 보완 예정
2. 게시물 수정 페이지
   1. 수정할 게시물(작성자가 클릭한 게시물) API로 불러오기 - 수정 후 PATCH 구현 필요
   2. index.js 라우터 추가

2024.05.16 - monam2

1. 게시물 작성 페이지
   1. 게시물 작성 step을 라우터 방식에서 컴포넌트(탭) 방식으로 변경 → 라우트 경로 삭제
   2. writeStore 생성 - pinia
      1. input[type=file] 로 받아온 이미지 객체 저장
      2. 이미지를 임시 URL(URL.createObjectURL())을 생성하는 업로드 이미지 미리보기 기능 추가
      3. 게시물 작성 API 연동 → request : { … } 를 Json이 아닌 Blob으로
2. 로그인 페이지
   1. 로그인 시 Email 기억하기 체크박스 추가 - 쿠키에 저장
   2. 로그인 시 user Id를 pinia auth Store에 저장
3. 게시물 상세 페이지(모달)
   1. 내가 작성한 게시물 삭제 기능 추가
   2. 내 게시물 수정 기능 추가했으나 문제 발생
4. 회원가입 페이지
   1. 회원가입 API 추가 및 기능 구현 완료

2024.05.15 - monam2

1. 로그인 페이지 & 로그아웃 페이지
   1. 로그아웃 불가 에러 해결 → Trouble Shooting 1. [토큰 무한 갱신으로 인한 로그아웃 불가]
2. 게시글 작성 페이지
   1. 라우터 경로 추가
   2. 로그인 여부에 따른 리다이렉트 기능 추가
   3. 배경 이미지 및 CSS/레이아웃 설정

2024.05.14 - monam2

1. 메인 페이지
   1. 게시물 목록 보기
      1. 로그인 여부에 따라 다른 게시물 목록 보여주기(토큰 여부, 좋아요/북마크 클릭 여부 등)
      2. 게시글에 댓글이 있으면 목록에서 1개의 댓글 보여주기
      3. 상세 보기에서 변경한 좋아요, 북마크가 목록에 반영되도록 변경(API 재호출)
   2. 게시물 상세 보기
      1. 좋아요 및 북마크 클릭 기능 API 연동
      2. 게시물 객체를 props로 받는 방식에서 axios로 각 호출하는 방식으로 변경
      3. 댓글 컴포넌트 추가 및 API 연동
2. 로그아웃 페이지
   1. 로그아웃 관련 로직 추가

2024.05.13 - monam2

1. 메인 페이지
   1. 로그아웃 상태에서도 게시물 보도록 설정
      1. API 추가
2. 로그인 페이지
   1. 로그인 Axios 분리 - login.js
   2. 로그인 기능 에러 수정
      1. 로그아웃 불가 문제 수정
3. Pinia 설치 및 AuthStore 생성
   1. 토큰, 인증 여부 변수로 저장
   2. login.js에서 토큰을 받아오는 getToken()
   3. 토큰, 인증 여부 초기화하는 getLogout()

2024.05.12 - monam2

1. 메인 페이지
   1. Swipper 반응형 수정
   2. 게시글 상세보기 모달
      • 반응형(1300px 기준 가로 세로 배치) 및 레이아웃 수정
      • 모달 내 스크롤 이벤트
      • 검은 영역 클릭 또는 X버튼 클릭 시 모달 닫기
      • Dot 메뉴 버튼 클릭 시 메뉴 토글
2. 게시물 컴포넌트
   1. 게시물 객체에 이미지가 없으면 기본 이미지 보이도록 설정.
3. 헤더 컴포넌트
   1. CSS 수정 - 반응형
   2. 이벤트 수정 - 유저 아이콘 클릭시 유저 메뉴를 아이콘 하단에 위치
4. App.vue
   1. font 추가 - 나눔고딕

2024.05.11 - monam2

1. 헤더 컴포넌트
   1. CSS 수정(반응형 관련)
2. 메인 페이지
   1. Swipe 컴포넌트
      • auto, infinity swipe 추가.
      • 추후 디자인 수정 필요.
   2. 게시글 영역
      • [이슈] 게시글 컴포넌트의 user 정보 추가(API 수정 필요).
        • 현재 전체 게시물 조회 API는 게시물 id를 제외한 게시물 정보가 없음.
        • 임시로 user 정보 조회 API를 연동해 게시물의 유저 정보를 렌더링
        • API 수정 시 삭제 예정
   3. 게시글 상세보기 모달
   4. 사이드바
      • 스크롤 이벤트 추가
        • 메인 페이지와 별개 스크롤 구성.
        • ScrollX가 0이 되면 사이드바의 ScrollX도 0이 됨.
      • 날씨 컴포넌트
        • 생성 및 OpenWeather API 추가.
        • 로딩 스피너 추가.
      • Notice, BestArticle, Footer 컴포넌트 생성
3. 기타
   1. assets폴더
      • logo 폴더 생성 - logo 이미지.
   2. .env 파일 ignore 추가 및 API키 재생성(ignore하기 이전에 생성한 .env파일로 인해 커밋됨).

2024.05.10 - monam2

1. 각 페이지 레이아웃 수정.
2. 소셜로그인 버튼(이미지) 추가.
3. 로그인 페이지 / 페이지 이동 및 로그인 후 이전 경로로 되돌아가기.
4. 로그인 페이지 / jwt토큰 받기 및 저장(로컬스토리지).
5. 메인 페이지 / 전체 게시글 조회 api 연결.

2024.05.08 - monam2

1. 헤더 컴포넌트 / 모바일뷰 햄버거 메뉴(사이드바) 구현 (1/2).

2024.05.07 - monam2

1. 프로젝트 생성 및 헤더 추가.
2. 헤더 컴포넌트 / 1300px, 840px, 640px 반응형 구현.