[Feature] - touroot v1.1.0 (#458)

* [Feature] - e2e 테스트 초기 설정 및 여행 계획 등록, 로그인, 메인 페이지 e2e 테스트 구현 (#412)

* chore: cypress & eslint-plugin-cypress 의존성 설치

* chore: eslint-plugin-cypress 설정 추가

* chore: cypress 사전 세팅 추가

1. baseUrl 및 viewport 설정 추가

2. root tsconfig.json 내 exclude 옵션에 cypress 추가(__tests__ 내 테스트들 type 보장을 위해)

3. cypress 관련 declaration 설정 추가

4. cypress 내부 tsconfig.json 추가

5. e2e.ts 추가

* feat: 여행 계획 등록 테스트 코드 구현

* feat: 카카오 로그인 테스트 코드 구현

* feat: 메인 페이지 테스트 코드 구현

* refactor(travelPlanRegister): path alias 적용

* chore: ci e2e 테스트 추가

* fix: ci 스크립트 수정

ci 스크립트에서 e2e 테스트 제거(로컬 환경과 ci 환경에서의 테스트 차이로 인해 일단 보류)

* [Feature] - 여행 계획 등록 페이지 리팩터링 (#414)

* refactor: 여행 계획 등록 페이지 내 상태 정리

form, ui, server, authorization, router 상태에 맞게 정리

* chore: immer, use-immer 의존성 추가

* refactor(useTravelPlanDays): use-immer를 활용하여 코드 리팩터링

* refactor(useTravelPlanDays): travelPlanDays에 게으른 초기화 적용

* refactor(useTravelPlanDays): 장소 내 todo 추가 시 기존 todos에 추가만 하도록 변경

1. 여행 변환, 수정, 추가 모두 todos가 존재하기 때문에 todos 필드 여부를 확인하지 않아도 되어 다음과 같이 변경

* fix: 폰트 import path 수정 (#429)

* [Feature] - kakao bundle lazy loading 적용 (#430)

* refactor(index.html): 카카오 sdk script body 태그로 이동

* fix: kakao sdk defer 제외

defer 추가로 인해 카카오 로그인 버튼을 누를 시 에러가 발생하여 제거

* [Feature] - 데모데이 피드백 반영(지니) (#418)

* refactor(GoogleMapView): 코드 리팩터링

* chore(package.json): test-e2e:run 스크립트 수정

chrome이 기본 브라우저로 테스트 되도록 수정

* test(travelPlanRegister): force click으로 변경

* fix(useTravelPlanDays): todo가 제대로 삭제되지 않는 문제 해결

* fix(Input): 모바일 화면에서 확대되는 현상 해결

Input font-size를 16px로 변경

* refactor(Calendar): 캘린더 ui에서 지난 날짜에 대한 별도 처리 추가

이전 or 다음 달에 대한 날짜를 제공하지 않고 오늘 기준 이전 날짜에 대해 gray text 처리 및 disable 처리 하도록 변경

* refactor(GoogleMapView): 불필요한 console 제거

* test(travelPlanRegister): 불필요한 only 제거

* [Feature] - webpack 캐시 버스팅 설정 (#447)

* refactor(webpack): 캐시 버스팅 적용

빌드 할 때마다 번들 파일 이름을 변경 시켜 캐시 무효화 시키도록 변경

* refactor(webpack): chunkFilename 제거

* refactor(webpack): asset들에 대한 파일 경로 및 해시 값 설정 변경

1. assets 내 위치 시키도록 변경

2. hash를 contenthash로 지정하여 파일이 변경될 때만 hash 값이 변경되도록 지정

* [Feature] - 코드 스플리팅 설정 (#450)

* chore: webpack-bundle-analyzer 의존성 추가

* refactor: 코드 스플리팅 적용

* refactor: 코드 스플리팅 필요한 부분만 적용하는 것으로 변경

스켈레톤이 없는 페이지인 검색 시작 페이지, 여행기 & 여행 계획 수정/등록 페이지만 적용하는 것으로 변경

* refactor: BundleAnalyzerPlugin 주석 추가

* [Feature] - 여행 계획 상세 페이지 성능 최적화 (#453)

* refactor(GoogleMapLoadScript): LoadScript 사용 대신 useJsApiLoader로 변경

* refactor(index.html): google map에 대한 preconnect 및 dns-prefetch 옵션 관련 link 태그 추가

* refactor: 불필요한 빈문자열 제거

* [Feature] - Layout Shift 개선 (#454)

* refactor(AccordionRoot): gap 값 수정

* refactor(TravelogueRegisterPage): layout shift 문제 해결

* refactor(TravelogueEditPage): layout shift 문제 해결

* refactor(TravelPlanRegisterPage): layout shift 문제 해결

* refactor(TravelPlanEditPage): layout shift 문제 해결

* refactor(Input): count 있는 경우 미리 공간 차지하도록 수정

* refactor(Input): input 내부에 있던 characterCount 분리

* test(Input): input 속성 변경에 따른 storybook 속성 수정

* [Feature] - 이미지 최적화 (#455)

* feat(resizeAndConvertImage): 이미지 리사이즈,포맷 변환 해주는 util 함수 구현

* feat(TravelogueRegisterPage): 썸네일 이미지 업로드시 리사이즈 및 변환하도록 수정

* feat(useMultiImageUpload): 여행장소 이미지 업로드시 이미지 리사이즈 및 변환하도록 수정

* refactor(resizeAndConvertImage):  2 depth if문 개선

* refactor(resizeAndConvertImage): 함수 책임 분리

* v1.1.0

---------

Co-authored-by: simorimi <[email protected]>
Co-authored-by: choi river <[email protected]>
Co-authored-by: choi river <[email protected]>
Co-authored-by: simorimi <[email protected]>
Co-authored-by: simhorim <[email protected]>

.github/workflows/frontend-ci-development.yml

@@ -43,18 +43,20 @@ jobs:
       - name: stylelint 실행
         run: yarn lint:styled
 
-      - name: 테스트 실행
+      - name: hook 테스트 실행
         run: yarn test
 
       - name: 테스트 결과 PR에 코멘트 등록
         uses: EnricoMi/publish-unit-test-result-action@v2
         if: always()
         with:
-          files: frontend/test-results/results.xml
+          files: |
+            frontend/test-results/results.xml
 
       - name: 테스트 실패 시, 실패한 코드 라인에 Check 코멘트 등록
         uses: mikepenz/action-junit-report@v3
         if: always()
         with:
-          report_paths: frontend/test-results/results.xml
+          report_paths: |
+            frontend/test-results/results.xml
           token: ${{ secrets.GITHUB_TOKEN }}

frontend/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     "plugin:compat/recommended",
     "plugin:storybook/recommended",
     "plugin:jest/recommended",
+    "plugin:cypress/recommended",
   ],
   plugins: ["react-refresh", "prettier", "@typescript-eslint"],
   ignorePatterns: ["dist", ".eslintrc.cjs"],

frontend/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    viewportWidth: 480,
+    viewportHeight: 1000,
+  },
+});

frontend/cypress/cypress.d.ts

@@ -0,0 +1,9 @@
+declare namespace Cypress {
+  interface Chainable {
+    simulateKakaoLogin(): Chainable<Element>;
+    fillTravelPlanBasicInfo(title: string, date: number): Chainable<Element>;
+    addPlace(placeName: string): Chainable<Element>;
+    addTodo(todoText: string): Chainable<Element>;
+    submitTravelPlan(): Chainable<Element>;
+  }
+}

frontend/cypress/e2e/login.cy.ts

@@ -0,0 +1,5 @@
+describe("카카오 로그인 e2e 테스트", () => {
+  it("카카오 로그인이 완료되면 메인 페이지로 이동된다.", () => {
+    cy.simulateKakaoLogin();
+  });
+});

frontend/cypress/e2e/mainPage.cy.ts

@@ -0,0 +1,83 @@
+import travelogueData from "@mocks/data/travelogue.json";
+
+import { CYPRESS_SELECTOR_MAP } from "@constants/cypress";
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+describe("메인 페이지 테스트", () => {
+  beforeEach(() => {
+    cy.intercept("GET", `${Cypress.env("BASE_URL")}travelogues*`, (req) => {
+      const page = (req.query.page === "0" ? 1 : req.query.page) as number;
+      const pageSize = 5;
+      const start = (page - 1) * pageSize;
+      const end = start + pageSize;
+
+      const paginatedData = travelogueData.slice(start, end);
+
+      req.reply({
+        statusCode: 200,
+        body: {
+          content: paginatedData,
+        },
+      });
+    }).as("getTravelogues");
+
+    cy.visit(ROUTE_PATHS_MAP.root);
+  });
+
+  describe("여행기 무한 스크롤 테스트", () => {
+    it("메인 페이지로 진입했을때 보여지는 여행기는 총 5개이다.", () => {
+      // when
+      cy.wait("@getTravelogues").then(() => {
+        // then
+        cy.get(CYPRESS_SELECTOR_MAP.main.travelogueItem, { timeout: 10000 }).should(
+          "have.length",
+          5,
+        );
+      });
+    });
+
+    it("스크롤을 내릴 경우 보여지는 여행기는 총 10개이다.", () => {
+      // when
+      cy.wait("@getTravelogues");
+      cy.scrollTo("bottom");
+      cy.wait("@getTravelogues");
+
+      // then
+      cy.get(CYPRESS_SELECTOR_MAP.main.travelogueItem).should("have.length", 10);
+    });
+  });
+
+  describe("태그 관련 테스트", () => {
+    const SELECTED_CHIP_SELECTOR = '[data-cy="selected-chip"]';
+
+    it("태그 선택 및 해제가 가능해야한다.", () => {
+      // when
+      cy.contains("여름").click();
+
+      // then
+      cy.get(SELECTED_CHIP_SELECTOR).should("have.length", 1);
+
+      // when
+      cy.contains("여름").click();
+
+      // then
+      cy.get(SELECTED_CHIP_SELECTOR).should("have.length", 0);
+    });
+
+    it("최대 태그 선택은 3개까지 가능하다.", () => {
+      // when
+      cy.contains("여름").click();
+      cy.contains("가족").click();
+      cy.contains("도보").click();
+
+      // then
+      cy.get(SELECTED_CHIP_SELECTOR).should("have.length", 3);
+
+      // when
+      cy.contains("맛집").click();
+
+      // then
+      cy.get(SELECTED_CHIP_SELECTOR).should("have.length", 3);
+    });
+  });
+});