✨ feat: 회의 만들기 페이지 step3(회의 장소) UI 작성 (#48)

* feat: 회의실 만들기 step3 UI 틀 작성

* feat: 회의실 만들기 step3 UI 틀 작성

* feat: import step3

* style: 버튼 컴포넌트의 hover, focus 속성 제거

src/components/common/Button/Button.tsx

@@ -60,8 +60,8 @@ const StyledButton = styled.button<{
       : props.theme.palette[props.backgroundColor]};
   color: ${(props) => props.theme.palette[props.textColor]};
   transition: opacity 0.1s ease-in-out;
-  &:hover,
+  /* &:hover,
   &:focus {
     opacity: 0.8;
-  }
+  } */
 `;

src/components/createMeetingRoom/index.ts

@@ -1,2 +1,3 @@
 export * from './step1';
 export * from './step2';
+export * from './step3';

src/components/createMeetingRoom/step3.tsx

@@ -0,0 +1,43 @@
+/** @jsxImportSource @emotion/react */
+import { Flex } from '@/components/Wrapper';
+import { Input } from '@/components/common';
+import { FormType } from '@/pages/createMeetingroom';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { FieldErrors, UseFormRegister, UseFormWatch } from 'react-hook-form';
+
+interface Step3Props {
+  register: UseFormRegister<FormType>;
+  watch: UseFormWatch<FormType>;
+  errors?: FieldErrors;
+}
+
+export const Step3 = ({ register, watch, errors }: Step3Props) => {
+  return (
+    <Flex direction="column" align="flex-start">
+      <div
+        css={css`
+          width: 100%;
+        `}>
+        <StyledLabel>회의 장소를 알려주세요</StyledLabel>
+        <Input
+          {...register('meetingRoomPlace')}
+          value={watch('meetingRoomPlace')}
+          type="default"
+          placeholder="선택사항입니다"
+          isError={errors?.meetingRoomPlace ? true : false}
+          errorText={errors?.meetingRoomPlace?.message as string}
+        />
+      </div>
+    </Flex>
+  );
+};
+
+const StyledLabel = styled.label`
+  ${(props) => props.theme.typo.T5}
+  color: ${(props) => props.theme.palette.dark_gray2};
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-bottom: 1rem;
+`;

src/pages/createMeetingroom/index.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { css } from '@emotion/react';
-import { Step1, Step2 } from '@/components/createMeetingRoom';
+import { Step1, Step2, Step3 } from '@/components/createMeetingRoom';
 import { useToast } from '@/store/toast';
 
 export interface FormType {
@@ -75,7 +75,7 @@ const CreateMeetingRoom = () => {
       }
     }
     // 회의실 만들기 Step2
-    else if (currentStep === 2) {
+    if (currentStep === 2) {
       if (
         getValues('meetingRoomDate') &&
         getValues('meetingRoomTime') &&
@@ -86,6 +86,10 @@ const CreateMeetingRoom = () => {
         showToast(toastProps);
       }
     }
+    // 회의실 만들기 Step3
+    if (currentStep === 3) {
+      // api 호출
+    }
   };
 
   return (
@@ -131,6 +135,9 @@ const CreateMeetingRoom = () => {
             setValue={setValue}
           />
         )}
+        {currentStep === 3 && (
+          <Step3 register={register} watch={watch} errors={errors} />
+        )}
       </div>
 
       <StyledButton>