Nagne Trip

Stack : Vue3.js, Pinia, Vanilla CSS

• Git Convention

    Feat :
    새로운 기능 추가
  
    Fix :
    버그 수정
  
    Docs :
    문서 수정
  
    Style :
    코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
  
    Refactor :
    코드 리펙토링
  
    Test :
    테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
  
    Chore :
    위에 걸리지 않는 기타 변경사항 (빌드 스크립트 수정, assets image, 패키지 매니저 등)
  
    Design :
    CSS 등 사용자 UI 디자인 변경
  
    Comment :
    필요한 주석 추가 및 변경
  
    Init :
    프로젝트 초기 생성
  
    Rename :
    파일 혹은 폴더명 수정하거나 옮기는 경우
  
    Remove :
    파일을 삭제하는 작업만 수행하는 경우
  
    출처:
    <https://chlolisher.tistory.com/173>
  
  

Trouble Shooting

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

20204.05.18 - monam2

1. 지도 메인 페이지
   1. [지도로 보기], [키워드로 보기], [저장한 장소], [내 여행 계획] 버튼 추가
   2. index.js 라우터 추가

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 반응형 구현.