Skip to content

Commit

Permalink
feat: 도시 수정 버튼 및 기능 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
LJW25 committed Feb 1, 2024
1 parent 8f9faf4 commit ac0226d
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 7 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const CityAddModal = ({ cityId, initialData, isOpen = true, onClose }: CityAddMo
updateInputValue,
handleSubmit,
} = UseAddCityForm({
cityId,
initialData,
onSuccess: onClose,
});
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { css } from '@emotion/react';

import { Theme } from 'hang-log-design-system';

export const buttonStyling = css({
width: '20px',
height: '20px',
border: 'none',
outline: 0,

backgroundColor: 'transparent',

cursor: 'pointer',

'& svg': {
width: '20px',
height: '20px',
},
});

export const editIconStyling = css({
'& path': {
fill: Theme.color.gray600,
},

'&:hover path': {
fill: Theme.color.gray800,
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { useOverlay } from 'hang-log-design-system';

import CityAddModal from '../CityAddModal/CityAddModal';

import type { CityData } from '@/types/city';

import { buttonStyling, editIconStyling } from './CityEditMenu.style';

import EditIcon from '@assets/svg/edit-icon.svg?react';

const CityEditMenu = ({ ...information }: CityData) => {
const { isOpen: isEditModalOpen, open: openEditModal, close: closeEditModal } = useOverlay();

return (
<>
<button type="button" aria-label="도시 수정 버튼" onClick={openEditModal} css={buttonStyling}>
<EditIcon css={editIconStyling} />
</button>
{isEditModalOpen && (
<CityAddModal onClose={closeEditModal} cityId={information.id} initialData={information} />
)}
</>
);
};

export default CityEditMenu;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Flex } from 'hang-log-design-system';
import CityEditMenu from '../CityEditMenu/CityEditMenu';

import { CityData } from '@/types/city';
import type { CityData } from '@/types/city';

import { tableStyling } from './CityTable.style';

Expand Down Expand Up @@ -29,7 +29,9 @@ const CityTable = ({ cities }: CityTableProps) => {
<td>{city.country}</td>
<td>{city.latitude}</td>
<td>{city.longitude}</td>
<td>aa</td>
<td>
<CityEditMenu {...city} />
</td>
</tr>
))}
</tbody>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ export const useUpdateCityMutation = () => {

const updateCityMutation = useMutation({
mutationFn: putCity,
onSuccess: (_) => {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['city'] });
createToast('도시를 성공적으로 수정했습니다.', 'success');
},
onError: (error: ErrorResponseData) => {
createToast('도시 수정에 실패했습니다. 잠시 후 다시 시도해 주세요.');
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { http, HttpResponse } from 'msw';

import { END_POINTS } from '@constants/api';
import { END_POINTS, HTTP_STATUS_CODE } from '@constants/api';

import { cities } from '@mocks/data/city';

Expand All @@ -12,14 +12,14 @@ export const cityHandlers = [
const newCityId = 999;

return new HttpResponse(null, {
status: 201,
status: HTTP_STATUS_CODE.CREATED,
headers: {
Location: `${END_POINTS.CITY}/${newCityId}`,
},
});
}),
http.put(`${END_POINTS.CITY}/:id`, async ({ params, request }) => {
const { id } = params;
return new HttpResponse(null, { status: 204 });
return new HttpResponse(null, { status: HTTP_STATUS_CODE.NO_CONTENT });
}),
];

0 comments on commit ac0226d

Please sign in to comment.