[Refactor] : Signup 페이지 QA 개선 반영 (#79)

* fix: 하단 absolute 처리 * fix: bottom간격 해결 * fix: signup QA * chore: wow-ui 버전 업데이트
GDSC-Hongik · Aug 3, 2024 · d05a763 · d05a763
1 parent 909c3c5
commit d05a763
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "react-toastify": "^10.0.4",
     "zustand": "^4.5.0",
     "wowds-tokens": "^0.0.9",
-    "wowds-ui": "^0.1.7",
+    "wowds-ui": "^0.1.8",
     "wowds-icons": "^0.1.0"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/auth/DepartmentSelect.tsx b/src/components/auth/DepartmentSelect.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { useGetDepartmentList } from '@/hooks/query';
 import { Control, Controller } from 'react-hook-form';
 import DropDown from 'wowds-ui/DropDown';
@@ -32,28 +33,35 @@ const DepartmentSelect = ({ control }: DepartmentSelectProps) => {
         }
       }}
       render={({ field }) => (
-        <DropDown
-          {...field}
-          label="학과"
-          placeholder="선택하세요"
-          onChange={({ selectedValue }) => {
-            field.onChange(selectedValue);
-          }}>
-          <React.Fragment key={`${field}-option`}>
-            {departmentList.map((department, index) => {
-              return (
-                <DropDownOption
-                  key={`${index}-dropdownOption`}
-                  text={department.name}
-                  value={department.code}
-                />
-              );
-            })}
-          </React.Fragment>
-        </DropDown>
+        <InputFormWrapper>
+          <DropDown
+            {...field}
+            label="학과"
+            placeholder="선택하세요"
+            onChange={({ selectedValue }) => {
+              field.onChange(selectedValue);
+            }}>
+            <React.Fragment key={`${field}-option`}>
+              {departmentList.map((department, index) => {
+                return (
+                  <DropDownOption
+                    key={`${index}-dropdownOption`}
+                    text={department.name}
+                    value={department.code}
+                  />
+                );
+              })}
+            </React.Fragment>
+          </DropDown>
+        </InputFormWrapper>
       )}
     />
   );
 };
 
 export default DepartmentSelect;
+
+const InputFormWrapper = styled.div`
+  height: 84.8px;
+  width: 100%;
+`;
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
@@ -75,7 +75,7 @@ export const SignUp = () => {
         style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: '24px',
+          gap: '10px',
           width: '100%'
         }}>
         <Controller
@@ -93,16 +93,18 @@ export const SignUp = () => {
             }
           }}
           render={({ field, fieldState }) => (
-            <TextField
-              label="이름"
-              error={fieldState.invalid}
-              ref={field.ref}
-              value={field.value}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              helperText={fieldState.error?.message}
-              placeholder="내용을 입력하세요"
-            />
+            <InputFormWrapper>
+              <TextField
+                label="이름"
+                error={fieldState.invalid}
+                ref={field.ref}
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                helperText={fieldState.error?.message}
+                placeholder="내용을 입력하세요"
+              />
+            </InputFormWrapper>
           )}
         />
         <Controller
@@ -121,16 +123,18 @@ export const SignUp = () => {
           }}
           render={({ field, fieldState }) => {
             return (
-              <TextField
-                label="학번"
-                error={fieldState.invalid}
-                ref={field.ref}
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-                helperText={fieldState.error?.message}
-                placeholder="내용을 입력하세요"
-              />
+              <InputFormWrapper>
+                <TextField
+                  label="학번"
+                  error={fieldState.invalid}
+                  ref={field.ref}
+                  value={field.value}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  helperText={fieldState.error?.message}
+                  placeholder="내용을 입력하세요"
+                />
+              </InputFormWrapper>
             );
           }}
         />
@@ -153,16 +157,18 @@ export const SignUp = () => {
             }
           }}
           render={({ field, fieldState }) => (
-            <TextField
-              label="전화번호"
-              error={fieldState.invalid}
-              ref={field.ref}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              value={formatPhoneNumberInProgress(field.value)}
-              helperText={fieldState.error?.message}
-              placeholder="내용을 입력하세요"
-            />
+            <InputFormWrapper>
+              <TextField
+                label="전화번호"
+                error={fieldState.invalid}
+                ref={field.ref}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                value={formatPhoneNumberInProgress(field.value)}
+                helperText={fieldState.error?.message}
+                placeholder="내용을 입력하세요"
+              />
+            </InputFormWrapper>
           )}
         />
         <Suspense fallback={<LoadingForm label="학과" />}>
@@ -205,22 +211,36 @@ export const SignUp = () => {
               }
             }}
             render={({ field }) => (
-              <DropDown
-                placeholder="선택하세요"
-                onChange={({ selectedValue }) => {
-                  field.onChange(selectedValue);
-                }}
-                defaultValue=""
-                value={field.value}
-                style={{ marginTop: '15px', flex: 1, width: '10rem' }}>
-                <DropDownOption text="@gmail.com" value="@gmail.com" />
-                <DropDownOption text="@naver.com" value="@naver.com" />
-                <DropDownOption
-                  text="@g.hongik.ac.kr"
-                  value="@g.hongik.ac.kr"
-                />
-                <DropDownOption text="@daum.net" value="@daum.net" />
-              </DropDown>
+              <TextFieldWrapper>
+                <DropDown
+                  placeholder="선택하세요"
+                  {...field}
+                  onChange={({ selectedValue }) => {
+                    field.onChange(selectedValue);
+                  }}
+                  style={{ marginTop: '22px', flex: 1, width: '100%' }}>
+                  <DropDownOption
+                    key="gmail"
+                    text="@gmail.com"
+                    value="@gmail.com"
+                  />
+                  <DropDownOption
+                    key="naver"
+                    text="@naver.com"
+                    value="@naver.com"
+                  />
+                  <DropDownOption
+                    key="hongik"
+                    text="@g.hongik.ac.kr"
+                    value="@g.hongik.ac.kr"
+                  />
+                  <DropDownOption
+                    key="daum"
+                    text="@daum.net"
+                    value="@daum.net"
+                  />
+                </DropDown>
+              </TextFieldWrapper>
             )}
           />
         </EmailFieldWrapper>
@@ -231,6 +251,9 @@ export const SignUp = () => {
           align="center"
           css={css`
             margin-top: 16px;
+            @media (max-height: 750px) {
+              bottom: 0rem;
+            }
             position: absolute;
             bottom: 1.75rem;
             width: 100%;
@@ -316,6 +339,9 @@ export const SignUp = () => {
 const Container = styled(Flex)`
   position: relative;
   flex-direction: column;
+  @media (max-height: 765px) {
+    min-height: 105vh;
+  }
   min-height: calc(100vh - 54px);
   justify-content: flex-start;
   background-color: ${color.mono50};
@@ -346,8 +372,14 @@ const GuideLink = styled(Link)<{ color?: colorKey }>`
   }
 `;
 
+const InputFormWrapper = styled.div`
+  height: 84.8px;
+  width: 100%;
+`;
+
 const TextFieldWrapper = styled.div`
   flex: 1;
+  height: 84.8px;
   width: 50%;
 `;