[FE] 최종 데모데이 이후 발견된 버그들을 수정한다. (#951)

woowacourse-teams · Nov 12, 2024 · 88a1ace · 88a1ace
1 parent 24eee8a
commit 88a1ace
Show file tree

Hide file tree

Showing 22 changed files with 90 additions and 268 deletions.
diff --git a/frontend/src/apis/checklist.ts b/frontend/src/apis/checklist.ts
@@ -28,7 +28,7 @@ export const getChecklists = async (isLikeFiltered: boolean = false) => {
     url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE_V1 : ENDPOINT.CHECKLISTS_V1),
   });
   const data = await response.json();
-  return data.checklists.map(mapObjNullToUndefined).slice(0, 10);
+  return data.checklists.map(mapObjNullToUndefined);
 };
 
 export const postChecklist = async (checklist: ChecklistPostForm) => {

diff --git a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
@@ -16,7 +16,7 @@ import LikeButton from '@/components/_common/Like/LikeButton';
 import AddressMap from '@/components/_common/Map/AddressMap';
 import SubwayStations from '@/components/_common/Subway/SubwayStations';
 import { IncludedMaintenancesData } from '@/constants/roomInfo';
-import { flexColumn, flexRow, flexSpaceBetween, title2, title3, title4 } from '@/styles/common';
+import { flexColumn, flexRow, flexSpaceBetween, title2, title3 } from '@/styles/common';
 import { Option } from '@/types/option';
 import { RoomInfo } from '@/types/room';
 import { SubwayStation } from '@/types/subway';
@@ -88,10 +88,11 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
       <S.Row>
         <S.Label>
           <Room aria-label="방 구조 / 방 평수" />
-          방 구조 <br />/ 방 평수
+          방 구조 <br />방 평수
         </S.Label>
         <S.Text>
-          {formattedUndefined(structure, 'string')} <br />/ {formattedUndefined(size)} 평
+          {formattedUndefined(structure, 'string')} <br />
+          {formattedUndefined(size)} 평
         </S.Text>
       </S.Row>
 
@@ -121,10 +122,12 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
       <S.Row>
         <S.Label>
           <Calendar aria-label="계약 기간 / 입주 가능일" />
-          계약 기간 <br />/ 입주 가능일
+          계약 기간 <br />
+          입주 가능일
         </S.Label>
         <S.Text>
-          {formattedUndefined(contractTerm)}개월 계약 <br />/{formattedUndefined(occupancyMonth)}월 {occupancyPeriod}
+          {formattedUndefined(contractTerm)}개월 계약 <br />
+          {formattedUndefined(occupancyMonth)}월 {occupancyPeriod}
         </S.Text>
       </S.Row>
 
@@ -237,7 +240,6 @@ const S = {
   MoneyText: styled.div`
     width: 100%;
 
-    /* ${title4} */
     ${title3}
     ${flexRow}
     ${flexSpaceBetween}

diff --git a/frontend/src/components/Main/ArticlePreviewCard.tsx b/frontend/src/components/Main/ArticlePreviewCard.tsx
@@ -17,7 +17,7 @@ const ArticlePreviewCard = ({ index, article }: Props) => {
   const navigate = useNavigate();
   const { articleId, keyword, title } = article;
 
-  const { color600, color200 } = getSeqColor(index);
+  const { color500, color200 } = getSeqColor(index);
 
   const handleClickArticle = () => {
     navigate(ROUTE_PATH.articleOne(articleId));
@@ -31,12 +31,12 @@ const ArticlePreviewCard = ({ index, article }: Props) => {
       tabIndex={1}
       aria-label="클릭하면 해당 아티클 페이지로 이동합니다"
     >
-      <S.Keyword bgColor={theme.palette.background} color={color600}>
+      <S.Keyword bgColor={theme.palette.background} color={color500}>
         {keyword}
       </S.Keyword>
       <S.Title>{title}</S.Title>
       <S.ArrowButton>
-        <ArrowRight stroke={color600} aria-hidden="true" />
+        <ArrowRight stroke={color500} aria-hidden="true" />
       </S.ArrowButton>
     </S.Container>
   );

diff --git a/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx
@@ -24,9 +24,9 @@ const DaumAddressModal = () => {
 
   const { searchSubwayStationsByAddress } = useRoomInfoNonValidated();
 
-  const handleAddress = () => {
-    openModal();
+  const handleClickAddress = () => {
     loadExternalScriptWithCallback('daumAddress', openPostcodeEmbed);
+    openModal();
   };
 
   const openPostcodeEmbed = () => {
@@ -50,7 +50,7 @@ const DaumAddressModal = () => {
   return (
     <>
       <S.AddressButton
-        onClick={handleAddress}
+        onClick={handleClickAddress}
         label="주소 검색"
         size="full"
         isSquare={true}

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances.tsx
@@ -9,7 +9,7 @@ import { IncludedMaintenancesData } from '@/constants/roomInfo';
 import roomInfoStore from '@/store/roomInfoStore';
 
 const IncludedMaintenances = () => {
-  // TODO : nonValidated 에서 관리해야함. 일단은 놔뒀음.
+  // TODO: nonValidated 에서 관리해야함. 일단은 놔뒀음.
 
   const includedMaintenances = useStore(roomInfoStore, state => state.includedMaintenances).rawValue;
   const actions = useStore(roomInfoStore, state => state.actions);

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomFloor.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomFloor.tsx
@@ -15,6 +15,7 @@ const RoomFloor = () => {
       floor.set('');
     }
   };
+
   return (
     <FormField>
       <FormField.Label label="층수" htmlFor="floor" />

diff --git a/frontend/src/components/_common/Dropdown/Dropdown.tsx b/frontend/src/components/_common/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { CSSProperties, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 
 import { DropdownMark } from '@/assets/assets';
 import { flexColumn, flexRow, flexSpaceBetween } from '@/styles/common';
@@ -20,6 +20,10 @@ const Dropdown = ({ initialValue, options, onSelectSetter, id }: Props) => {
   const [selectedValue, setSelectedValue] = useState(initialValue ?? options[0].value ?? '');
   const [isVisibleOptions, setIsVisibleOptions] = useState(false);
 
+  useEffect(() => {
+    if (initialValue) setSelectedValue(initialValue);
+  }, [initialValue]);
+
   const handleOptionClick = (option: Option) => {
     setSelectedValue(option.value);
     setIsVisibleOptions(false);

diff --git a/frontend/src/components/_common/Input/Input.tsx b/frontend/src/components/_common/Input/Input.tsx
@@ -35,6 +35,7 @@ interface StyledProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 const S = {
   Input: styled.input<StyledProps>`
+    ${flexCenter}
     width: ${({ width }) => width};
     height: 5rem;
     padding: 0.6rem 1.1rem;
@@ -44,7 +45,6 @@ const S = {
     color: ${({ $color, theme }) => ($color ? $color : theme.palette.grey600)};
     font-size: ${({ theme }) => theme.text.size.medium};
     outline-color: ${({ theme }) => theme.palette.grey400};
-    ${flexCenter}
     box-sizing: border-box;
   `,
 };
diff --git a/frontend/src/hooks/useMutateChecklist.ts b/frontend/src/hooks/useMutateChecklist.ts
@@ -5,6 +5,7 @@ import APIError from '@/apis/error/APIError';
 import { TOAST_MESSAGE } from '@/constants/messages/message';
 import useAddChecklistQuery from '@/hooks/query/useAddChecklistQuery';
 import usePutChecklistQuery from '@/hooks/query/usePutChecklistQuery';
+import useResetChecklist from '@/hooks/useResetChecklist';
 import useToast from '@/hooks/useToast';
 import roomInfoNonValidatedStore from '@/store/roomInfoNonValidatedStore';
 import roomInfoStore from '@/store/roomInfoStore';
@@ -22,13 +23,12 @@ const useMutateChecklist = (
   const { showToast } = useToast();
   const { mutate: addChecklist } = useAddChecklistQuery();
   const { mutate: putChecklist } = usePutChecklistQuery();
+  const { resetChecklist } = useResetChecklist();
 
   // 방 기본 정보 - validated
   const roomInfoActions = useStore(roomInfoStore, state => state.actions);
   const roomInfo = roomInfoActions.getParsedValues();
-
   // 방 기본 정보 - nonValidated
-  const roomInfoUnvalidatedActions = useStore(roomInfoNonValidatedStore, state => state.actions);
   const roomInfoUnvalidated = useStore(roomInfoNonValidatedStore, state => state);
   // 선택된 옵션
   const selectedOptions = useSelectedOptionStore(state => state.selectedOptions);
@@ -56,8 +56,7 @@ const useMutateChecklist = (
       addChecklist(postData, {
         onSuccess: res => {
           showToast({ message: TOAST_MESSAGE.ADD });
-          roomInfoActions.reset();
-          roomInfoUnvalidatedActions.resetAll();
+          resetChecklist();
           if (onSuccessCallback) {
             onSuccessCallback();
           }
@@ -79,8 +78,7 @@ const useMutateChecklist = (
       putChecklist(putData, {
         onSuccess: res => {
           showToast({ message: TOAST_MESSAGE.EDIT });
-          roomInfoActions.reset();
-          roomInfoUnvalidatedActions.resetAll();
+          resetChecklist();
           if (onSuccessCallback) {
             onSuccessCallback();
           }

diff --git a/frontend/src/hooks/useResetChecklist.ts b/frontend/src/hooks/useResetChecklist.ts
@@ -0,0 +1,24 @@
+import { useStore } from 'zustand';
+
+import useHandleTip from '@/hooks/useHandleTip';
+import roomInfoNonValidatedStore from '@/store/roomInfoNonValidatedStore';
+import roomInfoStore from '@/store/roomInfoStore';
+import useSelectedOptionStore from '@/store/useSelectedOptionStore';
+
+const useResetChecklist = () => {
+  const roomInfoActions = useStore(roomInfoStore, state => state.actions);
+  const roomInfoNonValidatedActions = useStore(roomInfoNonValidatedStore, state => state.actions);
+  const selectedOptionActions = useSelectedOptionStore(state => state.actions);
+  const { resetShowTip } = useHandleTip('OPTION');
+
+  const resetChecklist = () => {
+    roomInfoActions.reset();
+    roomInfoNonValidatedActions.resetAll();
+    selectedOptionActions.reset();
+    resetShowTip();
+  };
+
+  return { resetChecklist };
+};
+
+export default useResetChecklist;
diff --git a/frontend/src/mocks/fixtures/article.ts b/frontend/src/mocks/fixtures/article.ts
@@ -1,4 +1,6 @@
-export const article = {
+import { Article } from '@/types/article';
+
+export const article: Article = {
   articleId: 1,
   keyword: '아파트 임대',
   title: '완벽한 아파트 찾는 팁',

diff --git a/frontend/src/mocks/fixtures/articleList.ts b/frontend/src/mocks/fixtures/articleList.ts
@@ -1,4 +1,6 @@
-export const articleList = {
+import { Article } from '@/types/article';
+
+export const articleList: { articles: Article[] } = {
   articles: [
     {
       articleId: 1,

diff --git a/frontend/src/mocks/fixtures/category.ts b/frontend/src/mocks/fixtures/category.ts
diff --git a/frontend/src/mocks/fixtures/checklistAllQuestions.ts b/frontend/src/mocks/fixtures/checklistAllQuestions.ts
@@ -1,4 +1,6 @@
-export const checklistAllQuestions = {
+import { ChecklistCategoryWithIsSelected } from '@/types/checklist';
+
+export const checklistAllQuestions: { categories: ChecklistCategoryWithIsSelected[] } = {
   categories: [
     {
       categoryId: 1,
@@ -8,73 +10,84 @@ export const checklistAllQuestions = {
           questionId: 1,
           title: '수압/배수를 확인해주세요.',
           subtitle: '화장실과 주방을 확인해주세요',
+          highlights: [],
           isSelected: true,
         },
         {
           questionId: 2,
           title: '벽과 바닥이 깨끗한가요?',
           subtitle: null,
+          highlights: [],
           isSelected: true,
         },
         {
           questionId: 3,
           title: '수압/배수를 확인해주세요.',
           subtitle: '화장실과 주방을 확인해주세요',
+          highlights: [],
           isSelected: true,
         },
         {
           questionId: 4,
           title: '벽과 바닥이 깨끗한가요?',
           subtitle: null,
+          highlights: [],
           isSelected: true,
         },
         {
           questionId: 5,
           title: '수압/배수를 확인해주세요.',
           subtitle: '화장실과 주방을 확인해주세요',
+          highlights: [],
           isSelected: false,
         },
         {
           questionId: 6,
           title: '벽과 바닥이 깨끗한가요?',
           subtitle: null,
+          highlights: [],
           isSelected: false,
         },
         {
           questionId: 7,
           title: '수압/배수를 확인해주세요.',
           subtitle: '화장실과 주방을 확인해주세요',
+          highlights: [],
           isSelected: false,
         },
         {
           questionId: 8,
           title: '벽과 바닥이 깨끗한가요?',
           subtitle: null,
+          highlights: [],
           isSelected: false,
         },
         {
           questionId: 9,
           title: '수압/배수를 확인해주세요.',
           subtitle: '화장실과 주방을 확인해주세요',
+          highlights: [],
           isSelected: false,
         },
         {
           questionId: 10,
           title: '벽과 바닥이 깨끗한가요?',
           subtitle: null,
+          highlights: [],
           isSelected: false,
         },
       ],
     },
 
     {
       categoryId: 2,
-      categoryName: '내부시설',
+      categoryName: '창문',
       questions: [
         {
           questionId: 1,
           title: '지하철 역이 가깝나요?',
           subtitle: '주변 지도를 참고해 보세요.',
+          highlights: [],
           isSelected: true,
         },
       ],

diff --git a/frontend/src/mocks/fixtures/checklistDetail.ts b/frontend/src/mocks/fixtures/checklistDetail.ts
@@ -12,11 +12,11 @@ export const checklistDetail: ChecklistInfo = {
     rent: 50,
     maintenanceFee: 5,
     contractTerm: 12,
-    floor: 5,
+    floorLevel: '반지하/지하',
+    floor: undefined,
     realEstate: undefined,
     structure: '오픈형 원룸',
     size: 25,
-    floorLevel: '지상',
     occupancyMonth: 9,
     occupancyPeriod: '중순',
     includedMaintenances: [2],

diff --git a/frontend/src/mocks/fixtures/checklistList.ts b/frontend/src/mocks/fixtures/checklistList.ts
@@ -1,4 +1,6 @@
-export const checklistList = {
+import { ChecklistPreview } from '@/types/checklist';
+
+export const checklistList: { checklists: ChecklistPreview[] } = {
   checklists: [
     {
       checklistId: 1,
@@ -36,7 +38,7 @@ export const checklistList = {
       address: '서울 동작구 사당동',
       deposit: 500,
       rent: 45,
-      station: null,
+      station: undefined,
       createdAt: '2024-03-01T10:00:00Z',
       summary: '방은 좁으나 싼 가격이 장점!',
       isLiked: false,