Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…

…ng-ggood into chore/759-init-setting-playwright
woowacourse-teams · Oct 8, 2024 · 32eb83d · 32eb83d
2 parents 690dece + c4d3c03
commit 32eb83d
Show file tree

Hide file tree

Showing 14 changed files with 148 additions and 35 deletions.
diff --git a/frontend/playwright-report/index.html b/frontend/playwright-report/index.html
diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx
@@ -12,11 +12,11 @@ const Address = () => {
 
   return (
     <FormField>
-      <FormField.Label label="주소" />
+      <FormField.Label label="주소" htmlFor="address" />
       {address ? (
-        <FormField.TextBox text={`${address} ${buildingName}`} />
+        <FormField.TextBox text={`${address} ${buildingName}`} id="address" />
       ) : (
-        <FormField.TextBox text={'주소를 추가해 주세요.'} />
+        <FormField.TextBox text={'주소를 추가해 주세요.'} id="address" />
       )}
       <FlexBox.Horizontal style={{ marginTop: '20px' }}>
         {/*실시간 위치 모달*/}

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/DepositAndRent.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/DepositAndRent.tsx
@@ -17,9 +17,22 @@ const DepositAndRent = () => {
     <FormField>
       <FormField.Label label="보증금 / 월세 (만원)" />
       <FormStyled.FieldBox>
-        <FormField.Input width="medium" onChange={actions.onChange} name="deposit" value={deposit} />
+        <FormField.Input
+          width="medium"
+          onChange={actions.onChange}
+          name="deposit"
+          value={deposit}
+          aria-label="보증금"
+        />
         <FormStyled.FlexLabel label=" / " />
-        <FormField.Input width="medium" placeholder="" onChange={actions.onChange} name="rent" value={rent} />
+        <FormField.Input
+          width="medium"
+          placeholder=""
+          onChange={actions.onChange}
+          name="rent"
+          value={rent}
+          aria-label="월세"
+        />
       </FormStyled.FieldBox>
       <FormField.ErrorMessage value={errorMessage} />
     </FormField>

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/MaintenanceFee.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/MaintenanceFee.tsx
@@ -12,9 +12,16 @@ const MaintenanceFee = () => {
 
   return (
     <FormField>
-      <FormField.Label label="관리비" />
+      <FormField.Label label="관리비" htmlFor="maintenanceFee" />
       <FormStyled.FieldBox>
-        <Input width="medium" placeholder="" onChange={actions.onChange} name="maintenanceFee" value={maintenanceFee} />
+        <Input
+          width="medium"
+          placeholder=""
+          onChange={actions.onChange}
+          name="maintenanceFee"
+          value={maintenanceFee}
+          id="maintenanceFee"
+        />
         <FormStyled.FlexLabel label="만원"></FormStyled.FlexLabel>
       </FormStyled.FieldBox>
       <FormField.ErrorMessage value={errorMessage} />

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/OccupancyMonth.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/OccupancyMonth.tsx
@@ -18,9 +18,15 @@ const OccupancyMonth = () => {
 
   return (
     <FlexBox.Vertical gap="1.5rem">
-      <FormField.Label label="입주 가능일" />
+      <FormField.Label label="입주 가능일" htmlFor="occupancyMonth" />
       <FormStyled.FieldBox>
-        <FormField.Input width="medium" onChange={actions.onChange} name="occupancyMonth" value={occupancyMonth} />
+        <FormField.Input
+          width="medium"
+          onChange={actions.onChange}
+          name="occupancyMonth"
+          value={occupancyMonth}
+          id="occupancyMonth"
+        />
         <FormStyled.FlexLabel label="월  " />
         <Dropdown
           initialValue={occupancyPeriod}

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RealEstate.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RealEstate.tsx
@@ -10,14 +10,15 @@ const RealEstate = () => {
 
   return (
     <FormField>
-      <FormField.Label label={'부동산 이름'} required={false} />
+      <FormField.Label label={'부동산 이름'} required={false} htmlFor="realEstate" />
       <FormField.Input
         placeholder=""
         width="full"
         type={'string'}
         onChange={actions.onChange}
         name={'realEstate'}
         value={realEstate}
+        id="realEstate"
       />
       <FormField.ErrorMessage value={errorMessage} />
     </FormField>

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomContractTerm.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomContractTerm.tsx
@@ -13,9 +13,16 @@ const RoomContractTerm = () => {
 
   return (
     <FormField>
-      <FormField.Label label="계약 기간" />
+      <FormField.Label label="계약 기간" htmlFor="contractTerm" />
       <S.FieldBox>
-        <Input width="medium" placeholder="" onChange={actions.onChange} name="contractTerm" value={contractTerm} />
+        <Input
+          width="medium"
+          placeholder=""
+          onChange={actions.onChange}
+          name="contractTerm"
+          value={contractTerm}
+          id="contractTerm"
+        />
         <FormStyled.FlexLabel label="개월"></FormStyled.FlexLabel>
       </S.FieldBox>
       <FormField.ErrorMessage value={errorMessage} />

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomFloor.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomFloor.tsx
@@ -21,7 +21,7 @@ const RoomFloor = () => {
   };
   return (
     <FormField>
-      <FormField.Label label="층수" />
+      <FormField.Label label="층수" htmlFor="floor" />
       <FormStyled.FieldBox>
         <Dropdown
           initialValue={floorLevel}
@@ -35,6 +35,7 @@ const RoomFloor = () => {
           name="floor"
           value={floor}
           onChange={actions.onChange}
+          id="floor"
         />
         <FormStyled.FlexLabel label="층"></FormStyled.FlexLabel>
       </FormStyled.FieldBox>

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomName.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomName.tsx
@@ -14,8 +14,8 @@ const RoomName = () => {
 
   return (
     <FormField>
-      <FormField.Label label="방 이름" required={true} />
-      <FormField.Input placeholder="" onChange={actions.onChange} name="roomName" value={roomName} />
+      <FormField.Label label="방 이름" htmlFor="roomName" required={true} />
+      <FormField.Input placeholder="" onChange={actions.onChange} name="roomName" id="roomName" value={roomName} />
       <FormField.ErrorMessage value={errorMessage} />
     </FormField>
   );

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomSize.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomSize.tsx
@@ -12,9 +12,9 @@ const RoomSize = () => {
 
   return (
     <FormField>
-      <FormField.Label label="방 크기" />
+      <FormField.Label label="방 크기" htmlFor="size" />
       <FormStyled.FieldBox>
-        <Input width="medium" placeholder="" onChange={actions.onChange} name="size" value={roomSize} />
+        <Input width="medium" placeholder="" onChange={actions.onChange} name="size" value={roomSize} id="size" />
         <FormStyled.FlexLabel label="평"></FormStyled.FlexLabel>
       </FormStyled.FieldBox>
       <FormField.ErrorMessage value={errorMessage} />

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomStructure.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomStructure.tsx
@@ -21,17 +21,18 @@ const RoomStructure = () => {
 
   return (
     <FlexBox.Vertical>
-      <FormField.Label label="방 구조" />
+      <FormField.Label as="legend" label="방 구조" />
       <FormStyled.OptionButtonContainer flexWrap="wrap">
         {roomStructures.map(structure => (
-          <Badge
-            key={structure}
-            label={structure}
-            name={structure}
-            size="button"
-            isSelected={structure === roomStructure}
-            onClick={() => handleClickTagButton(structure)}
-          />
+          <label key={structure}>
+            <Badge
+              label={structure}
+              name={structure}
+              size="button"
+              isSelected={structure === roomStructure}
+              onClick={() => handleClickTagButton(structure)}
+            />
+          </label>
         ))}
       </FormStyled.OptionButtonContainer>
       <FormField.BottomEmptyBox />

diff --git a/frontend/src/components/_common/Badge/Badge.tsx b/frontend/src/components/_common/Badge/Badge.tsx
@@ -21,7 +21,7 @@ const Badge = ({ size = 'short', label, isSelected = false, onClick, name, ...re
   };
 
   return (
-    <S.Button size={size} onClick={handleClick} isSelected={isSelected} name={name} {...rest}>
+    <S.Button size={size} onClick={handleClick} isSelected={isSelected} name={name} aria-pressed={isSelected} {...rest}>
       {label}
     </S.Button>
   );

diff --git a/frontend/src/components/_common/FormField/FormField.tsx b/frontend/src/components/_common/FormField/FormField.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { HTMLAttributes } from 'react';
+import { ElementType, HTMLAttributes, LabelHTMLAttributes } from 'react';
 
 import { InputRequiredDot } from '@/assets/assets';
 import Input from '@/components/_common/Input/Input';
@@ -8,9 +8,10 @@ import theme from '@/styles/theme';
 
 type GetProps<T> = T extends React.FC<infer P> ? P : never;
 
-interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   label: string;
   required?: boolean;
+  as?: ElementType;
 }
 
 const FormFieldWrapper = styled.div<{ rowGap?: string }>`
@@ -21,13 +22,17 @@ const FormFieldWrapper = styled.div<{ rowGap?: string }>`
 `;
 
 const FormField = Object.assign(FormFieldWrapper, {
-  Label: ({ label, required = false, ...rest }: LabelProps) => (
-    <S.LabelContainer {...rest} style={{ fontSize: theme.text.size.medium, fontWeight: theme.text.weight.bold }}>
-      {label}
-      {required && <S.MovedRequiredDot />}
-    </S.LabelContainer>
+  Label: ({ label, required = false, ...rest }: LabelProps) => {
+    return (
+      <S.LabelContainer {...rest} style={{ fontSize: theme.text.size.medium, fontWeight: theme.text.weight.bold }}>
+        {label}
+        {required && <S.MovedRequiredDot />}
+      </S.LabelContainer>
+    );
+  },
+  TextBox: ({ text, ...rest }: { text: string } & HTMLAttributes<HTMLDivElement>) => (
+    <S.TextBox {...rest}>{text}</S.TextBox>
   ),
-  TextBox: ({ text }: { text: string }) => <S.TextBox>{text}</S.TextBox>,
   Input: ({ ...rest }: GetProps<typeof Input>) => <Input {...rest} />,
   ErrorMessage: ({ value, ...rest }: { value?: string } & HTMLAttributes<HTMLParagraphElement>) => (
     <S.ErrorMessage {...rest}>{value ?? ''}</S.ErrorMessage>

diff --git a/frontend/test-results/.last-run.json b/frontend/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "interrupted",
+  "failedTests": []
+}