Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] checklist v1 변동사항을 메인 페이지 체크리스트 리스트 컴포넌트에 반영한다. #893

Merged
merged 4 commits into from
Oct 24, 2024
Merged

[FE] checklist v1 변동사항을 메인 페이지 체크리스트 리스트 컴포넌트에 반영한다. #893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba56d4e
feat: get checklist list v1 에 맞춰 업데이트
healim01 Oct 24, 2024
deaf8e8
refactor: 체크리스트 리스트 v1 으로 업데이트
healim01 Oct 24, 2024
7eecd3c
chore: e2e route 상수처리
healim01 Oct 24, 2024
c8235af
Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…
healim01 Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions frontend/playwright/tests/api/auth.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { test as setup } from '@playwright/test';
import path from 'path';

import { ROUTE_PATH } from '@/constants/routePath';

const authFile = path.join(__dirname, '../../../playwright/.auth/user.json');

setup('authenticate', async ({ page }) => {
const username = process.env.EMAIL || '';
const password = process.env.PASSWORD || '';

await page.goto('/sign-in');
await page.goto(ROUTE_PATH.signIn);
await page.locator('input[name="email"]').fill(username);
await page.locator('input[name="password"]').fill(password);
await page.getByRole('button', { name: '로그인 하기' }).click();
await page.waitForURL('/home');
await page.waitForURL(ROUTE_PATH.home);
await page.context().storageState({ path: authFile });
});
4 changes: 3 additions & 1 deletion frontend/playwright/tests/api/postNewChecklist.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { expect, test } from '@playwright/test';

import { ROUTE_PATH } from '@/constants/routePath';

import { DefaultChecklistTabsNames, FirstCategoryQuestion } from '../constants/constants';

test('체크리스트가 인풋을 채우고 제출할 수 있다.', async ({ page }) => {
await page.goto('/checklist/new');
await page.goto(ROUTE_PATH.checklistNew);
const tabs = page.locator('.tab');
const roomInfoTab = tabs.nth(0);

Expand Down
6 changes: 4 additions & 2 deletions frontend/playwright/tests/api/renderTab.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import test, { expect } from '@playwright/test';

import { ROUTE_PATH } from '@/constants/routePath';

import {
DefaultChecklistTabsNames,
DefaultQuestionSelectTabsNames,
Expand All @@ -8,7 +10,7 @@ import {
} from '../constants/constants';

test('체크리스트 생성 페이지에 들어가면 탭과 질문들이 잘 렌더링된다.', async ({ page }) => {
await page.goto('/checklist/new');
await page.goto(ROUTE_PATH.checklistNew);
const tabs = page.locator('.tab');
await expect(tabs).toHaveCount(6, { timeout: 3000 });

Expand Down Expand Up @@ -37,7 +39,7 @@ test('체크리스트 질문 선택 페이지에 들어가면 탭과 질문들
});

test('체크리스트 편집 페이지에 들어가면 탭과 질문들이 잘 렌더링된다.', async ({ page }) => {
await page.goto('/checklist');
await page.goto(ROUTE_PATH.checklistList);
await page.getByTestId('checklist-card').nth(0).click();
const checklistEditButton = page.locator('button[id="checklistEditButton"]');
await checklistEditButton.click();
Expand Down
6 changes: 4 additions & 2 deletions frontend/playwright/tests/mock/postNewChecklist.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { test } from '@playwright/test';

import { ROUTE_PATH } from '@/constants/routePath';

test('빈 체크리스트를 제출할 수 있다.', async ({ page }) => {
await page.goto('/checklist/new');
await page.goto(ROUTE_PATH.checklistNew);
await page.getByRole('button', { name: '저장' }).click();
await page.getByRole('button', { name: '체크리스트 저장하기' }).click();
await page.waitForURL('/checklist');
await page.waitForURL(ROUTE_PATH.checklistList);
});
2 changes: 1 addition & 1 deletion frontend/src/apis/checklist.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const getChecklistDetail = async (id: number) => {

export const getChecklists = async (isLikeFiltered: boolean = false) => {
const response = await fetcher.get({
url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE : ENDPOINT.CHECKLISTS),
url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE : ENDPOINT.CHECKLISTS_V1),
Copy link
Contributor

@skiende74 skiende74 Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ENDPOINT.CHECKLISTS_LIKE는 과거 API인데 얘도 V1으로 되는지 백엔드와 상의해서 되게끔해주세요

Copy link
Contributor

@skiende74 skiende74 Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

말해놓았습니다 앞에 v1/만 붙이면 돼요 (백엔드 머지후)

});
const data = await response.json();
return data.checklists.map(mapObjNullToUndefined).slice(0, 10);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Main/ChecklistPreviewCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const ChecklistPreviewCard = ({ index, checklist }: Props) => {
const colorList = ['green', 'blue', 'red'];
const { color200, color500 } = getSeqColor(index, colorList);

const { checklistId, station, walkingTime, roomName, deposit, rent } = checklist;
const { checklistId, station, roomName, deposit, rent } = checklist;

const handleClick = () => {
navigate(ROUTE_PATH.checklistOne(checklistId));
Expand All @@ -29,7 +29,7 @@ const ChecklistPreviewCard = ({ index, checklist }: Props) => {
<HomeCircle color={color500} bgColor={color200} aria-hidden="true" />
<S.Column>
<S.Label>
{formattedUndefined(station)}역 · {formattedUndefined(walkingTime)}분
{formattedUndefined(station?.stationName)}역 · {formattedUndefined(station?.walkingTime)}분
</S.Label>
<S.Row>
<S.Title>{roomName}</S.Title>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/_common/Subway/SubwayLineIcon/SubwayLineIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import styled from '@emotion/styled';
import { flexCenter, title4 } from '@/styles/common';
import SUBWAY_LINE_PALLETE, { SubwayLineName } from '@/styles/subway';

const SubwayLineIcon = ({ lineName }: { lineName: SubwayLineName }) => {
interface Props {
lineName: SubwayLineName;
}

const SubwayLineIcon = ({ lineName }: Props) => {
const lineColor = SUBWAY_LINE_PALLETE[lineName];

const isNumberTypeSubwayName = lineName.slice(-2) === '호선' && lineName.length === 3;
Expand Down
24 changes: 16 additions & 8 deletions frontend/src/mocks/fixtures/checklistList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ export const checklistList = {
address: '서울 광진구 구의동 센트럴빌',
deposit: 800,
rent: 65,
station: '건대입구',
walkingTime: 10,
station: {
stationName: '잠실(송파구청)',
stationLine: ['8호선', '2호선'],
walkingTime: 10,
},
createdAt: '2024-01-01T10:00:00Z',
summary: '전체적으로 무난, 방 크기는 평범',
isLiked: true,
Expand All @@ -18,8 +21,11 @@ export const checklistList = {
address: '서울시 관악구 봉천동 관악로 23',
deposit: 1000,
rent: 50,
station: '서울대 입구',
walkingTime: 10,
station: {
stationName: '서울대입구',
stationLine: ['2호선'],
walkingTime: 10,
},
createdAt: '2024-02-01T10:00:00Z',
summary: '트리플 역세권이나 회사에서 조금 멀다.',
isLiked: false,
Expand All @@ -30,8 +36,7 @@ export const checklistList = {
address: '서울 동작구 사당동',
deposit: 500,
rent: 45,
station: '사당',
walkingTime: 5,
station: null,
createdAt: '2024-03-01T10:00:00Z',
summary: '방은 좁으나 싼 가격이 장점!',
isLiked: false,
Expand All @@ -42,8 +47,11 @@ export const checklistList = {
address: '서울 동작구 사당동',
deposit: 500,
rent: 45,
station: '사당',
walkingTime: 5,
station: {
stationName: '사당',
stationLine: ['4호선', '2호선'],
walkingTime: 10,
},
createdAt: '2024-08-21T10:00:00Z',
summary: '방은 좁으나 싼 가격이 장점!',
isLiked: false,
Expand Down
15 changes: 14 additions & 1 deletion frontend/src/mocks/handlers/checklist.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ export const checklistHandlers = [
return HttpResponse.json(checklistList, { status: 200 });
}),

http.get(BASE_URL + ENDPOINT.CHECKLISTS_V1, () => {
return HttpResponse.json(checklistList, { status: 200 });
}),

http.get(BASE_URL + ENDPOINT.CHECKLISTS_LIKE, () => {
const newChecklistList = {
...checklistList,
Expand All @@ -36,9 +40,18 @@ export const checklistHandlers = [
}),

http.post(BASE_URL + ENDPOINT.CHECKLISTS_V1, () => {
return HttpResponse.json(checklistList, { status: 201 });
return HttpResponse.json({}, { status: 200 });
}),

// http.post(BASE_URL + ENDPOINT.CHECKLISTS_V1, () => {
// return HttpResponse.json(
// {
// bangggoodCode: 'AUTH_TOKEN_EMPTY',
// },
// { status: 401 },
// );
// }),

http.put(BASE_URL + ENDPOINT.CHECKLIST_CUSTOM, () => {
return HttpResponse.json({ status: 200 });
}),
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/types/checklist.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,10 @@ export interface ChecklistPreview {
address: string;
deposit: number;
rent: number;
station: SubwayStation;
createdAt: string;
summary: string;
isLiked: boolean;
station: string;
walkingTime: number;
}

// 체크리스트 디테일
Expand Down
Loading