[FE] FE 개발 서버 운영 서버로 배포 (#487)

* chore: develop 브랜치에 비해 누락된 커밋 반영 (#364)

* [FE] Refactor/#365 API 요청 로직 분리 및 컴포넌트 분리 (#368)

* rename: 2 Depth 컴포넌트 디렉토리 구조 변경

* refactor: 서버와 지도 GET API 요청 로직 분리

* refactor: 서버와 로그인 GET API 분리

* refactor: api 요청 로직 에러 핸들링 추가 및 명시적으로 조건문 지정

추가로 content-type을 내로잉한다.

* fix: 누락된 api 수정 적용

* rename: 사용하지 않는 svg 제거 및 오타 수정

* refactor: 타입명 코드 컨벤션에 맞게 모두 변경

* refactor: api get 요청 로직 커스텀 훅으로 분리

* feat: usePost api 요청 커스텀 훅 생성

* feat: usePut api 요청 커스텀 훅 생성

* feat: useDelete api 요청 커스텀 훅 생성

* remove: 사용하지 않는 페이지 컴포넌트 제거

* fix: delete 요청을 두 번씩 날리는 오류 수정

* refactor: Home 컴포넌트 뎁스 줄임 및 fetchGet 적용

* remove: 불필요한 페이지 컴포넌트 제거

* refactor: bookmark 페이지 및 관련 컴포넌트 관심사 분리

* rename: 불필요한 페이지 제거 및 페이지명 변경

* refactor: 누락된 타입 프로퍼티 추가

* fix: 유효하지 않은 주소를 클릭 시 에러 토스트를 띄우는 기능 수정

* rename: Topic Card 컴포넌트를 담는 상위 컨테이너 컴포넌트 명 변경

* design: myInfo의 사용자 성명 font weight 수정

* style: 불필요한 import 제거 및 공백 수정

* refactor: 중복되는 역할의 컴포넌트 제거 후 재사용

* refactor: 잘못된 에러 메시지 수정

* design: 내가 만든 지도가 없을 경우 사용자에게 알림 문구 더 친화적으로 수정

* refactor: 중복 컴포넌트 제거 및 TopicCardList 재사용 반영

* refactor: 10m 이내로 핀이 찍힐 확률을 줄이면서 사용성을 개선할 수 있는 줌 Limit 수정

* rename: 스켈레톤 컴포넌트 불규칙했던 디렉토리 구조 통일

* rename: NotFound 페이지 컴포넌트 디렉토리 위치 조정

* refactor: usePost를 success message 대신 onSuccess 함수 받도록 변경

* refactor: 모달용 토픽 카드 컴포넌트 제거 후 기존 토픽카드에 타입 프롭 추가

추가로 api 요청 커스텀 훅을 적용한다.

* refactor: put, delete api 요청 hook interface 조정

* [FE] refactor/#373 msw 적용 (#374)

* refactor: 변경된 명세에 맞게 get fetch 관련 msw 수정

* refactor: 즐겨찾기, 모아보기, 지도 추가하기, 핀 추가하기 msw 적용

* hotfix: login 에러 해결 (#383)

* [FE] Feature/#382 반응형 대응 (#387)

* feat: Home 페이지 모바일 및 태블릿 사이즈 반응형 대응

* feat: 네비게이션 바 반응형 대응

* refactor: 반응형 로직 재사용 및 방식 변경

* feat: 전체보기 페이지 반응형 적용

* refactor: 반응형 재사용 함수 네이밍 수정

* feat: 즐겨찾기 페이지 반응형 대응

* feat: 마이페이지 반응형 대응

* fix: 뒤로가기를 통해 핀을 선택하지 않았던 때로 돌아가도 pinDetail이 남아있는 오류 수정

* refactor: 불필요한 console.log 제거 및 as section 지정

* feat: 토픽 조회 및 지도 반응형 대응

* refactor: interface 타입 오류 및 이미지 radius 수정

* refactor: 토픽 단일 조회 및 상세조회 반응형 대응

* refactor: 토픽 단일 조회 및 상세페이지 태블릿 반응형 대응 방식 변경

* refactor: 토스트 알림 반응형 대응

* refactor: 네비게이션 반응형 오류 및 height 고정 문제 수정

추가하기 모달의 경우 단일 토픽 조회 페이지 등에서 미디어 쿼리보다 layoutWidth가 우선순위가 더 높아 어색하게 배치되는 문제를 해결한다.

* refactor: 핀추가하기 페이지 반응형 대응

핀 추가하기 페이지는 지도를 하단에 배치하여 가상키보드가 올라왔을 때를 대응한다.

* refactor: 누락된 커밋 추가하기 모달 중앙정렬 추가

* fix: 스타일드 컴포넌트 trasient DOM 에러 해결

* feat: 모달 컴포넌트 반응형 대응

* fix: PC 사이즈에서 position fixed 되는 오류 수정

* feat: 뽑아오기 컴포넌트 반응형 대응

* refactor: 토픽 단일 조회 및 뽑아오기 반응형 대응 일부 수정

* design: 내 지도에 추가하기 모달 가로 사이즈 조정

* refactor: 네이밍 변경 (mediaWidth -> layoutWidth)

* feat: 핀 수정 페이지 반응형 대응 및 에러메세지 기능 수정

빈 값을 입력해도 에러메세지가 뜨지 않는 오류를 수정한다.

* design: 모바일 사이즈에서 input 태그 간 간격이 좁은 오류 수정

* refactor: 태블릿-모바일 사이즈에서 핀 수정 페이지 반응형 수정

* refactor: merge 브랜치 변경 (develop->develop-FE)

* fix: cypress 테스트 자동화 구문 수정

* refactor: jobs 네이밍 수정

* design: navbar 경계선 그림자 추가

* fix: 카카오 대소문자 수정으로 인한 파일 트래킹이 안되는 오류 수정

* test: 반응형 ui 변경으로 인한 cypress 테스트 로직 변경

* chore: github actions 환경에서만 테스트가 실패하는 오류 수정

* test: github actions 환경에서 wait 관련 테스트만 실패하여 wait 타임을 확장

* test: github actions 환경에서만 통과하지 못하는 wait 함수 값 수정

* refactor: 불필요한 로직 제거

* refactor: 불필요한 어트리뷰트 제거

* chore: api 요청 개발서버로 변경

* [FE] Refactor/#395  지도 타입 지정 및 Map 컴포넌트 리팩토링 (#398)

* feat: Tmap api 관련 타입을 선언한다

* refactor: Layout 컴포넌트에서 지도에 관한 관심사를 분리한다

* refactor: Tmap 관련 타입 추가

* refactor: Tmap 관련 타입 적용

* refactor: 불필요한 코드 제거

* refactor: 좌표관련 타입 수정

* refactor: Navbar 클릭시 색 변경 로직 변경 및 타입 수정

* refactor: null 체크

* refactor: 타입 단언 수정

* refactor: null 타입 체크

* fix: 충돌 해결 (#403)

* [FE] Test/#369 Jest 커스텀 훅 테스트 추가 (#394)

* test: 초기값 타입 수정 및 에러 객체 반환 테스트 추가

* refactor: 일부 단어가 정상적인 단어 입력을 방해하는 오류 수정

* test: 유효성 검사 테스트 추가

* style: single quote 적용

* [FE] Refactor/#402 지도 및 핀 권한 부여 여부 확인 및 지도 수정 페이지 구현 (#410)

* feat: 사용자가 선택한 권한 부여 인원을 확인할 수 있도록 표시하는 기능 추가

* feat: 토픽 권한 타입 추가

* refactor: 가독성 개선 및 불필요한 중복 로직 제거

이중 삼항연산자 등 가독성이 저하되는 부분과 불필요한 조건문, 요청로직 등을 모두 제거한다.

* refactor: 의미없는 함수 리턴 제거

* refactor: 토픽 생성 페이지에서 권한 설정 컴포넌트 UI 및 로직 분리

* feat: 토픽 권한 수정 페이지 구현 및 기존에 권한 설정한 친구들 보여주도록 변경

* feat: 토픽 및 핀에 대해서 수정하기 권한이 있을 경우에만 표시하도록 변경하는 기능 추가

* fix: 에러 페이지 레이아웃 width 미설정 오류 수정

* refactor: 수정하기 버튼 클릭 시 오류 발생 문구 수정

* refactor: 토픽 정보 수정 시 이전의 권한 설정 값으로 조정되도록 변경

* refactor: 사용하지 않는 코드 제거 및 if 블록 설정

* refactor: 사용하지 않는 import 및 prop 제거

* refactor: api 요청 커스텀 훅 매개변수 변경 및 에러 전파 옵션 추가

* refactor: api 요청 커스텀훅 로직 변경에 따른 적용

* refactor: 불필요한 코드 제거

* refactor: 수정 후 topicInfo를 다시 불러오도록 변경

* fix: 잘못된 delete permission id 설정 수정

topicId가 아니라 permission id를 사용하도록 변경한다.
추가로 에러메세지를 수정한다.

* refactor: 불필요한 console.log 제거

* [FE] Feat/#386 지도, 핀 이미지에 s3 적용 (#409)

* feat: 지도 추가 때 필요한 이미지 s3 적용

* feat: pin 생성에서 이미지 s3 적용

* feat: 핀 디테일 페이지에서 핀 사진 추가 구현

* refator: prettier 적용

* refactor: 잘못된 경로 수정

* refactor: 필요없는 console.log 삭제

* refactor: event handler method명 컨벤션에 맞게 수정

* refactor: 변경이 필요한 컴포넌트, 변수 이름 수정

* refactor: alt 및 error 처리 시 알림 메시지 사용자가 이해하기 쉽도록 수정

* refactor: 인라인 스타일 태그 styled component로 수정

* refactor: 지도 만들 때 기본 이미지 설정 해주도록 수정

* fix: 핀 이미지 추가할 때 무한 렌더링 에러 해결

* refactor: type 이름 컨벤션에 맞게 수정

* refactor: 필요없는 type 삭제

* refactor: postApi와 postFormApi 합치기 및 필요없는 코드 삭제

* fix: 핀 추가할 때 이미지 여러개 등록하면 하나만 등록되는 에러 해결

* refactor: 지도, 핀 추가 시 이미지 필수 아니도록 설정

* Hotfix/refresh token 1 (#437)

* refactor: 필요없어진 이미지 url 인풋 컨테이너

* feat: refreshToken관련 로직 추가

* feat: refreshToken을 재요청할때 body에 accessToken을 추가 (#438)

* feat: getApi header 컨텐트타입 추가 (#439)

* feat: refreshToken api 요청시 헤더에 content-type 추가 (#440)

* refactor: withTokenRefresh에 return문 추가 (#442)

* refactor: localstorage userToken getItem요청 수정 (#445)

* refactor: refreshToken함수 예외처리 추가 (#446)

* hotfix: 에러상황 확인용 콘솔로그 추가 (#447)

* hotfix: 재발급시 getItem 부분 수정 (#448)

* hotfix: 재발급시 받은 데이터 저장 로직 수정 (#449)

* hotfix: abortController 적용 (#451)

* hotfix: abortController 여러개 적용 (#452)

* fix: 요청 중 재요청 차단 (#453)

* fix: abort 컨트롤러 예외 처리 수정 (#454)

* fix: Promise 상태로 분기처리하여 재요청 차단 (#455)

* fix: response 타입 동일화 (#456)

* console 체크 (#457)

* fix: console.log 추가 (#459)

* fix: console.log response 부분 추가 (#460)

* Hotfix/refresh token 20 (#461)

* fix: json 메서드 에러 핸들링

* merge 충돌 해결

* fix: response clone 하여 오류 수정 (#463)

* Feat/#465 logout (#467)

* feat: 버튼 ui 구현

* feat: 로그아웃 버튼 클릭 이벤트 구현

* refactor: 컨벤션 수정

* [FE] Fix/permission 토픽 권한 수정 오류 해결 (#419)

* fix: 모아보기 시에도 토픽 수정이 가능토록 변경

* refactor: 에러메세지 수정

* fix: 이전 권한 설정을 불러오지 못하는 에러 수정

추가로 기존에 선택한 친구들을 조건적으로 UI 렌더링을 진행했던 로직을 수정한다.

* refactor: 이전에 권한을 부여한 친구들 목록 로직 수정

* test: cypress 개발 서버에 의존인 관계로 임시로 임계값 확장

* refactor: 변수명, 함수명 변경

* hotfix: 로그아웃 post 데이터 타입 변경 (#468)

* [FE] Feature/#435 이미지 압축 기능 구현 (#436)

* feat: 이미지 압축하는 기능 custom hook으로 구현

* feat: 지도, 핀 등에 이미지 추가할 시 이미지 압축 기능 추가

* refactor: NewTopic, NewPin 텍스트 수정

* refactor: 이미지 리사이징 최대 크기 변경

* refactor: 지도 추가 페이지에서 이미지와 파일 추가 버튼 사이에 space 추가

* fix: 네이밍 변경 누락 오류 수정 및 네이밍 통일성 준수 (#470)

* chore: browser-image-compression 패키지 제이슨 누락 수정 (#471)

* [ FE ] Refactor/#404 홈페이지 및 Navbar 리팩토링 (#423)

* refactor: 페이지 직접 이동 로직까지 포함하도록 수정

* refactor: useNavigator 리턴 형식 변경

* feat: Navbar 각 요소 아이템으로 분리

* fix : 아이콘 타입 수정

* refactor: Navbar 중복 로직 제거

* refactor: routePage 함수 리턴값을 추가

* fix: 지도 선택된 상황에서 핀 추가 로직 수정

* refactor: 페이지 이동 로직 분리

* refactor: interface로 수정

* hotfix: 모아보기 누락 로직 추가 (#475)

* [FE] 토큰 재발급 로직 모든 메소드에 적용  (#474)

* refactor: http메소드 refresh 로직 적용

* feat: delete 메소드에 refreshToken 로직 추가

* [FE] Refactor/#469 동적 임포트와 tree shaking으로 코드 스플리팅 (#476)

* refactor: router 부분에 동적 임포트 적용

* feat: tree shaking 적용

* [FE] Fix/#472 토픽 수정 시 권한 수정 보류 (#477)

* refactor: 권한 설정 범위 변수 네이밍 수정

* fix: 특정 인원 권한 설정 로직 오류 수정

* refactor: 권한 수정 기능 및 UI 임시 보류

* design: 추가하기 모달이 반응형 환경에서 위치가 잘못되는 오류 수정

* refactor: 동적 임포트에 suspense 적용 (#478)

* fix: merge 과정 중 충돌 해결 오류 수정 (#480)

* feat: default url 변경 (#483)

* [FE] Refactor/#481 개발 서버 QA 후 발생한 이슈 해결 (#486)

* refactor: 추가하기 모달 위치 왼쪽 하단으로 고정되는 이슈 해결

* refactor: 1078px 이하에서 이미지 숨겨지던 오류 해결

* refactor: 핀 내 지도에 저장 기능 에러 해결

---------

Co-authored-by: 이세민 <89172499+semnil5202@users.noreply.github.com>
Co-authored-by: afds4567 <33995840+afds4567@users.noreply.github.com>

.github/workflows/fe-merge-dev.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
 
   pull_request:
-    branches: [develop]
+    branches: [develop-FE]
     types: [closed]
     paths: frontend/**
 

.github/workflows/fe-pull-request.yml

@@ -1,15 +1,17 @@
 name: Frontend CI For Test Validation
-# 어떤 이벤트가 발생하면 실행할지 결정
+
 on:
-  #pull request open과 reopen 시 실행한다.
+  # pull request open과 reopen 시 실행한다.
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop-FE]
     paths: frontend/**
+
 defaults:
   run:
     working-directory: ./frontend
+
 jobs:
-  jest:
+  jest_cypress:
     runs-on: ubuntu-22.04
 
     steps:
@@ -19,10 +21,16 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: '18'
 
       - name: Install node modules
         run: npm install
 
       - name: Run Jest test
         run: npm run test
+
+      - name: Run Cypress
+        uses: cypress-io/github-action@v5
+        with:
+          working-directory: frontend
+          start: npm run dev

frontend/babel.config.js

@@ -1,15 +1,16 @@
 module.exports = {
   presets: [
     [
-      "@babel/preset-env",
+      '@babel/preset-env',
       {
         targets: {
-          browsers: ["last 2 versions", "not dead", "not ie <= 11"],
+          browsers: ['last 2 versions', 'not dead', 'not ie <= 11'],
         },
+        modules: false,
       },
     ],
-    ["@babel/preset-react"],
-    "@babel/preset-typescript",
+    ['@babel/preset-react'],
+    '@babel/preset-typescript',
   ],
-  plugins: ["babel-plugin-styled-components"],
+  plugins: ['babel-plugin-styled-components'],
 };

frontend/cypress.config.ts

@@ -3,5 +3,6 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
+    defaultCommandTimeout: 20000,
   },
 });

frontend/cypress/e2e/mapbefine.cy.ts

@@ -69,12 +69,34 @@ describe('토픽 상세 페이지', () => {
         if (index === 0) $el.click();
       });
 
-    cy.get('li')
+    cy.wait(5000);
+
+    cy.get('span').each(($el, index) => {
+      if (index === 6) $el.click();
+    });
+
+    cy.get('[data-cy="pin-detail"]').scrollTo('bottom');
+
+    cy.contains('내 지도에 저장하기').should('be.visible');
+  });
+
+  it('핀 상세 페이지에서 내 지도에 저장하기 버튼 누르면 토스트 메시지가 나온다.', () => {
+    cy.get('[data-cy="topic-card"]')
       .children()
       .each(($el, index) => {
         if (index === 0) $el.click();
       });
 
-    cy.contains('내 지도에 저장하기').should('be.visible');
+    cy.wait(5000);
+
+    cy.get('span').each(($el, index) => {
+      if (index === 6) $el.click();
+    });
+
+    cy.get('[data-cy="pin-detail"]').scrollTo('bottom');
+
+    cy.contains('내 지도에 저장하기').click();
+
+    cy.contains('로그인 후 사용해주세요.').should('be.visible');
   });
 });

frontend/package.json

@@ -47,6 +47,7 @@
     "@types/styled-components": "^5.1.26",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
+    "browser-image-compression": "^2.0.2",
     "chromatic": "^6.19.9",
     "cypress": "^12.17.4",
     "dotenv-webpack": "^8.0.1",

frontend/src/__tests__/hooks/useFormValues.test.ts

@@ -2,20 +2,52 @@ import { renderHook } from '@testing-library/react';
 import useFormValues from '../../hooks/useFormValues';
 import { act } from 'react-dom/test-utils';
 
-describe('useFormValues 테스트', () => {
+interface FormValuesProps {
+  name: string;
+  description: string;
+}
+
+describe('useFormValues 훅 초기화 및 수정 테스트', () => {
   test('매개변수로 받은 초기값을 정상적으로 반환하는지 확인한다.', () => {
-    const { result } = renderHook(() => useFormValues<string>('토픽 이름'));
+    const { result } = renderHook(() =>
+      useFormValues<FormValuesProps>({
+        name: '선릉',
+        description: '선릉이란 무엇일까요?',
+      }),
+    );
 
-    expect(result.current.formValues).toBe('토픽 이름');
+    expect(result.current.formValues.name).toBe('선릉');
   });
 
   test('setFormValues를 통해 set할 수 있는지 확인하다.', () => {
-    const { result } = renderHook(() => useFormValues<string>('토픽 이름'));
+    const { result } = renderHook(() =>
+      useFormValues<FormValuesProps>({
+        name: '잠실역 주변 맛집',
+        description: '선릉역 주변에서 먹을 만한 곳들 모음집입니다.',
+      }),
+    );
 
     act(() => {
-      result.current.setFormValues('인기 있는 토픽');
+      result.current.setFormValues((prevState) => ({
+        ...prevState,
+        description: '잠실역 주변에서 맛있고 유명한 곳들을 모아봤습니다.',
+      }));
     });
 
-    expect(result.current.formValues).toBe('인기 있는 토픽');
+    expect(result.current.formValues.description).toBe(
+      '잠실역 주변에서 맛있고 유명한 곳들을 모아봤습니다.',
+    );
+  });
+
+  test('입력 받은 초기값 타입 형식에 맞게 에러 객체를 반환하는지 확인한다.', () => {
+    const { result } = renderHook(() =>
+      useFormValues<FormValuesProps>({
+        name: '혼자 돌기 좋은 서울 산책로',
+        description:
+          '조용하고 혼자 사색에 잠겨 산책할 수 있는 코스들 모음입니다.',
+      }),
+    );
+
+    expect(result.current.errorMessages).toEqual({ name: '', description: '' });
   });
 });