[FE] 런칭 UT 피드백을 일부 반영한다. (UI 관련) (#884)

woowacourse-teams · Oct 24, 2024 · d3b6e50 · d3b6e50
1 parent 5cad0bb
commit d3b6e50
Show file tree

Hide file tree

Showing 35 changed files with 143 additions and 84 deletions.
diff --git a/frontend/src/assets/assets.tsx b/frontend/src/assets/assets.tsx
@@ -16,7 +16,6 @@ import Retry from '@/assets/icons/common/retry.svg';
 import SmallCheck from '@/assets/icons/common/small-check.svg';
 import PlusBlack from '@/assets/icons/plusMinus/plus-black.svg';
 import PlusWhite from '@/assets/icons/plusMinus/plus-white.svg';
-
 // room
 import Building from '@/assets/icons/room/building.svg';
 import Calendar from '@/assets/icons/room/calendar.svg';

diff --git a/frontend/src/assets/icons/kakao/kakao-logo.svg b/frontend/src/assets/icons/kakao/kakao-logo.svg
diff --git a/frontend/src/assets/icons/map/search.svg b/frontend/src/assets/icons/map/search.svg
diff --git a/frontend/src/components/ArticleList/ArticleCard.tsx b/frontend/src/components/ArticleList/ArticleCard.tsx
@@ -47,6 +47,10 @@ const S = {
     background-color: ${({ theme }) => theme.palette.white};
     ${boxShadow};
     cursor: pointer;
+
+    :hover {
+      background-color: ${({ theme }) => theme.palette.grey200};
+    }
   `,
   Keyword: styled.span<{ bgColor: string }>`
     padding: 0.4rem 0.8rem;

diff --git a/frontend/src/components/ChecklistList/ChecklistCard.tsx b/frontend/src/components/ChecklistList/ChecklistCard.tsx
@@ -58,6 +58,10 @@ const S = {
     background-color: ${({ theme }) => theme.palette.white};
     ${boxShadow};
     cursor: pointer;
+
+    :hover {
+      background-color: ${({ theme }) => theme.palette.grey200};
+    }
   `,
   Row: styled.div`
     ${flexSpaceBetween}

diff --git a/frontend/src/components/ChecklistList/CustomBanner.tsx b/frontend/src/components/ChecklistList/CustomBanner.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { PencilIcon } from '@/assets/assets';
+import Button from '@/components/_common/Button/Button';
 import { boxShadow, flexCenter, flexRow } from '@/styles/common';
 
 interface Props {
@@ -12,9 +13,9 @@ const CustomBanner = ({ onClick }: Props) => {
     <S.Banner onClick={onClick}>
       <S.Wrapper>
         <PencilIcon width={30} height={30} aria-hidden="true" />
-        <S.Title>체크리스트 질문 선택하기</S.Title>
+        <S.Title>체크리스트 질문 템플릿</S.Title>
       </S.Wrapper>
-      <S.Button aria-label="체크리스트 질문을 편집하려면 이 버튼을 누르세요.">편집하기</S.Button>
+      <S.Button aria-label="체크리스트 질문 템플릿을 편집하려면 이 버튼을 누르세요." label={'수정하기'} />
     </S.Banner>
   );
 };
@@ -46,15 +47,15 @@ const S = {
   Title: styled.span`
     ${flexCenter}
   `,
-  Button: styled.button`
-    padding: 0.4rem 0.8rem;
+  Button: styled(Button)`
+    padding: 0.6rem 1rem;
 
     background-color: ${({ theme }) => theme.palette.green500};
 
     color: ${({ theme }) => theme.palette.white};
     border-radius: 0.8rem;
 
-    font-size: ${({ theme }) => theme.text.size.xSmall};
+    font-size: ${({ theme }) => theme.text.size.small};
 
     cursor: pointer;
   `,

diff --git a/frontend/src/components/Landing/FirstSection.tsx b/frontend/src/components/Landing/FirstSection.tsx
@@ -80,10 +80,12 @@ const S = {
     }
   `,
   BasicLoginButton: styled(Button)`
+    height: 4.5rem;
+
     background-color: ${({ theme }) => theme.palette.green500};
-    border-radius: 1rem;
 
     color: ${({ theme }) => theme.palette.white};
+    border-radius: 0.8rem;
   `,
 
   CheckRelativeText: styled.span`
@@ -107,8 +109,9 @@ const S = {
     }
   `,
   Button: styled(Button)`
-    height: 5rem;
-    border-radius: 1rem;
+    border-radius: 0.8rem;
+
+    height: 4.5rem;
   `,
   LogoBox: styled.div`
     width: 100%;

diff --git a/frontend/src/components/Main/ChecklistCardContainer.tsx b/frontend/src/components/Main/ChecklistCardContainer.tsx
@@ -26,7 +26,7 @@ const ChecklistCardContainer = () => {
         .map((checklist: ChecklistPreview, index: number) => (
           <ChecklistPreviewCard key={checklist.checklistId} index={index} checklist={checklist} />
         ))}
-      <S.NewButton label="+ 새로운 체크리스트 생성하기" isSquare size="full" onClick={handleNewChecklist} />
+      <S.NewButton label="+ 새로운 방 체크하기" isSquare size="full" onClick={handleNewChecklist} />
     </>
   );
 };
@@ -39,6 +39,6 @@ const S = {
     padding: 1.8rem 4.8rem;
     border-radius: 0.8rem;
 
-    background-color: ${({ theme }) => theme.palette.grey50};
+    background-color: ${({ theme }) => theme.palette.grey100};
   `,
 };
diff --git a/frontend/src/components/Main/ChecklistSection.tsx b/frontend/src/components/Main/ChecklistSection.tsx
@@ -22,7 +22,7 @@ const ChecklistSection = () => {
       <S.Title>방 둘러볼 때 꼭 필요한 체크리스트</S.Title>
       <S.Container>
         <S.Row>
-          <ErrorBoundary fallback={<TitleErrorFallback title="나의 체크리스트" />}>
+          <ErrorBoundary fallback={<TitleErrorFallback title="내가 둘러본 방" />}>
             <ChecklistSectionTitle />
           </ErrorBoundary>
           <Button size="xSmall" label="전체 보기" onClick={handleClickList} />

diff --git a/frontend/src/components/Main/ChecklistSectionTitle.tsx b/frontend/src/components/Main/ChecklistSectionTitle.tsx
@@ -7,7 +7,7 @@ const ChecklistSectionTitle = () => {
   const { data: checklistList } = useGetChecklistListQuery();
   return (
     <S.ContainerTitle>
-      나의 체크리스트 <S.Count>{checklistList?.length}</S.Count>
+      내가 둘러본 방 <S.Count>{checklistList?.length}</S.Count>
     </S.ContainerTitle>
   );
 };

diff --git a/frontend/src/components/MyPage/FeatureSection.tsx b/frontend/src/components/MyPage/FeatureSection.tsx
@@ -6,7 +6,7 @@ import UserFeature from '@/components/MyPage/UserFeature';
 const FeatureSection = () => {
   return (
     <ErrorBoundary FallbackComponent={GuestFeature}>
-      <UserFeature />;
+      <UserFeature />
     </ErrorBoundary>
   );
 };

diff --git a/frontend/src/components/MyPage/UserFeature.tsx b/frontend/src/components/MyPage/UserFeature.tsx
@@ -105,6 +105,7 @@ const S = {
   `,
   TextButton: styled.button`
     width: fit-content;
+    margin-top: 1rem;
 
     color: ${({ theme }) => theme.palette.grey500};
     font-size: ${({ theme }) => theme.text.size.xxSmall};

diff --git a/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx
@@ -54,7 +54,7 @@ const DaumAddressModal = () => {
         label="주소 검색"
         size="full"
         isSquare={true}
-        color="dark"
+        color="light"
         Icon={Search}
       />
       <Modal position="bottom" isOpen={isModalOpen} onClose={closeModal}>
@@ -72,10 +72,10 @@ export default DaumAddressModal;
 const S = {
   AddressButton: styled(Button)`
     width: 50%;
-    height: 4.2rem;
+    height: 4.5rem;
     padding: 0.4rem;
 
-    font-size: ${({ theme }) => theme.text.size.xSmall};
+    font-size: ${({ theme }) => theme.text.size.small};
   `,
   EmptyBox: styled.div`
     width: 100%;

diff --git a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx
@@ -91,10 +91,10 @@ export default RealTimeAddressModal;
 const S = {
   AddressButton: styled(Button)`
     width: 50%;
-    height: 4.2rem;
+    height: 4.5rem;
     padding: 0.4rem;
 
-    font-size: ${({ theme }) => theme.text.size.xSmall};
+    font-size: ${({ theme }) => theme.text.size.small};
   `,
   AddressText: styled.span`
     ${title4}

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx
@@ -36,12 +36,11 @@ const S = {
     ${flexRow}
     ${flexSpaceBetween}
     padding: 1.6rem;
-    gap: 0.5rem;
+    border-radius: 0.8rem;
 
     box-sizing: border-box;
 
     background-color: ${({ theme }) => theme.palette.white};
-    border-radius: 0.8rem;
   `,
   Question: styled.div`
     display: flex;

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import Divider from '@/components/_common/Divider/Divider';
 import Layout from '@/components/_common/layout/Layout';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
@@ -19,13 +20,21 @@ const ChecklistQuestionTemplate = () => {
   return (
     <Layout bgColor={theme.palette.background} withHeader withTab>
       <S.ContentBox>
-        {questions?.questions.map((question: ChecklistQuestion) => {
+        {questions?.questions.map((question: ChecklistQuestion, index) => {
           const answer = checklistActions.getQuestionAnswer({
             categoryId: currentTabId,
             questionId: question.questionId,
           });
+          const isLastQuestion = questions?.questions.length - 1 === index;
           return (
-            <ChecklistQuestionItem key={`${currentTabId}-${question.questionId}`} question={question} answer={answer} />
+            <>
+              <ChecklistQuestionItem
+                key={`${currentTabId}-${question.questionId}`}
+                question={question}
+                answer={answer}
+              />
+              {!isLastQuestion && <Divider />}
+            </>
           );
         })}
       </S.ContentBox>
@@ -39,12 +48,12 @@ const S = {
   ContentBox: styled.div`
     ${flexColumn}
     margin-bottom: 2rem;
+    border-radius: 0.8rem;
 
-    background-color: ${({ theme }) => theme.palette.background};
-    gap: 1rem;
+    background-color: ${({ theme }) => theme.palette.white};
+    gap: 0.2rem;
   `,
   QuestionBox: styled.div`
     background-color: ${({ theme }) => theme.palette.white};
-    border-radius: 0.8rem;
   `,
 };
diff --git a/frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx b/frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx
@@ -1,6 +1,8 @@
+import styled from '@emotion/styled';
 import { useMemo } from 'react';
 
 import ChecklistTabFallback from '@/components/_common/errorBoundary/ChecklistTabFallback';
+import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import Tabs from '@/components/_common/Tabs/Tabs';
 import useInitialChecklist from '@/hooks/useInitialChecklist';
 import useTabs from '@/hooks/useTabs';
@@ -20,7 +22,17 @@ const NewChecklistTab = () => {
 
   if (isLoading) return <ChecklistTabFallback />;
 
-  return <Tabs tabList={categoryTabs} />;
+  return (
+    <FlexBox.Vertical gap={'1rem'}>
+      <Tabs tabList={categoryTabs} />
+      <S.Box />
+    </FlexBox.Vertical>
+  );
 };
 
+const S = {
+  Box: styled.div`
+    height: 0.5rem;
+  `,
+};
 export default NewChecklistTab;
diff --git a/frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx b/frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx
@@ -48,6 +48,6 @@ const S = {
     outline: none;
     cursor: pointer;
 
-    background-color: ${({ theme }) => theme.palette.yellow500};
+    background-color: ${({ theme }) => theme.palette.grey200};
   `,
 };
diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx
@@ -18,7 +18,7 @@ const Address = () => {
       ) : (
         <FormField.TextBox text={'주소를 추가해 주세요.'} id="address" />
       )}
-      <FlexBox.Horizontal style={{ marginTop: '2rem' }}>
+      <FlexBox.Horizontal style={{ marginTop: '2rem', alignContent: 'center', justifyContent: 'center' }}>
         {/*실시간 위치 모달*/}
         <RealTimeAddressModal />
         {/*주소 찾기 모달*/}

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import Layout from '@/components/_common/layout/Layout';
+import FocusTrap from '@/components/_common/Modal/FocusTrap/FocusTrap';
 import Address from '@/components/NewChecklist/NewRoomInfoForm/Address';
 import DepositAndRent from '@/components/NewChecklist/NewRoomInfoForm/DepositAndRent';
 import IncludedMaintenances from '@/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances';
@@ -25,22 +26,24 @@ const RoomInfoTemplate = () => {
 
   return (
     <Layout withHeader withTab>
-      <S.Container onBlur={handleTrackInput}>
-        <ErrorBoundary FallbackComponent={RoomNameNoDefault}>
-          <RoomName />
-        </ErrorBoundary>
-        <Address />
-        <NearSubwayStations />
-        <DepositAndRent />
-        <MaintenanceFee />
-        <IncludedMaintenances />
-        <RoomFloor />
-        <RoomStructure />
-        <RoomSize />
-        <RoomContractTerm />
-        <OccupancyMonth />
-        <RealEstate />
-      </S.Container>
+      <FocusTrap>
+        <S.Container onBlur={handleTrackInput}>
+          <ErrorBoundary FallbackComponent={RoomNameNoDefault}>
+            <RoomName />
+          </ErrorBoundary>
+          <Address />
+          <NearSubwayStations />
+          <DepositAndRent />
+          <MaintenanceFee />
+          <IncludedMaintenances />
+          <RoomFloor />
+          <RoomStructure />
+          <RoomSize />
+          <RoomContractTerm />
+          <OccupancyMonth />
+          <RealEstate />
+        </S.Container>
+      </FocusTrap>
     </Layout>
   );
 };
@@ -49,8 +52,7 @@ const S = {
   Container: styled.div`
     ${flexColumn}
     justify-content: start;
-    row-gap: 2rem;
-
+    row-gap: 1.5rem;
     margin-bottom: 2rem;
   `,
 };

diff --git a/frontend/src/components/_common/Accordion/AccordionBody.tsx b/frontend/src/components/_common/Accordion/AccordionBody.tsx
@@ -34,10 +34,10 @@ const AccordionBody = ({ children, id }: Props) => {
 const S = {
   Container: styled.div<{ isOpen: boolean; maxHeight: number }>`
     overflow: hidden;
-    margin-top: 1rem;
+    margin: 1rem 0 0.5rem;
     max-height: ${({ maxHeight }) => maxHeight}px;
     transition: max-height 0.4s cubic-bezier(0.15, 0.1, 0.25, 1);
-    border-radius: 1.2rem;
+    border-radius: 0.8rem;
 
     background-color: ${({ theme }) => theme.palette.white};
   `,