Merge pull request #60 from Goorm-Lucky7/develop/uiresult

[PR] UI TEST 결과 개선 및 공통 컴포넌트 생성

index.html

@@ -10,6 +10,7 @@
     <div id="alert-portal"></div>
     <div id="gallery-info-portal"></div>
     <div id="chat-portal"></div>
+    <div id="content-portal"></div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

src/apis/instance.ts

@@ -19,15 +19,14 @@ instance.interceptors.request.use(async (config) => {
 });
 
 instance.interceptors.response.use(
-  (response) => {
-    return response;
-  },
+  (response) => response,
   async (error) => {
     const originalRequest = error.config;
-    const setMember = memberStore((state) => state.setMember);
+
     if (error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       try {
+        const setMember = memberStore().setMember;
         const response = await getNewToken();
         const { accessToken } = response.data;
         setMember(accessToken);
@@ -37,6 +36,7 @@ instance.interceptors.response.use(
         return Promise.reject(refreshError);
       }
     }
+
     return Promise.reject(error);
   },
 );

src/apis/member.ts

@@ -24,7 +24,7 @@ export const postCheckNickname = async (formData: { nickname: string }) => {
 
 export const postLogin = async (formData: LoginFormData) => {
   const response = await instance.post(`/api/login`, formData);
-  return response?.data;
+  return response?.data as { accessToken: string };
 };
 
 export const getMemberInfo = async (nickname?: string) => {

src/components/SignupCheckPortal.tsx

@@ -0,0 +1,24 @@
+import { checkModalStore } from '@/stores/modal';
+import { createPortal } from 'react-dom';
+import { CheckModal } from '@/pages/signup/components';
+import { useEffect } from 'react';
+
+const SignupCheckPortal = () => {
+  const { checkModalValue, close } = checkModalStore();
+  const $portal_root = document.getElementById('content-portal');
+  useEffect(() => {
+    return () => close();
+  }, [close]);
+  return (
+    <>
+      {$portal_root
+        ? createPortal(
+            <div>{checkModalValue.open && <CheckModal {...checkModalValue} />}</div>,
+            $portal_root,
+          )
+        : null}
+    </>
+  );
+};
+
+export default SignupCheckPortal;

src/components/alert/index.tsx

@@ -30,12 +30,14 @@ const Alert = ({
           <Icon value="cancel" size={15} onClick={close} />
         </S.HeaderBox>
         {typeof description === 'string' ? (
-          <Text typography="t4">{description}</Text>
+          <Text typography="t5" bold="regular">
+            {description}
+          </Text>
         ) : (
           <>{description}</>
         )}
 
-        <Button bold="regular" onClick={onClickButton}>
+        <Button bold="bold" size="smMd" onClick={onClickButton}>
           {buttonLabel}
         </Button>
       </S.Container>

src/components/alert/styles.ts

@@ -8,7 +8,9 @@ export const Container = styled.div`
   justify-content: space-between;
   ${LayoutMap.absoluteCenter}
   padding: 35px;
-  width: 600px;
+  width: fit-content;
+  max-width: 600px;
+  min-width: 400px;
   background-color: ${colors.white};
   border-radius: 10px;
   min-height: 300px;

src/components/ApiErrorBoundary.tsx → src/components/errorBoundary/FetchBoundary.tsx

@@ -18,7 +18,7 @@ const initialState: State = {
   error: null,
 };
 
-class ApiErrorBoundary extends Component<PropsWithChildren<Props>, State> {
+class FetchBoundary extends Component<PropsWithChildren<Props>, State> {
   constructor(props: Props) {
     super(props);
     this.state = initialState;
@@ -42,4 +42,4 @@ class ApiErrorBoundary extends Component<PropsWithChildren<Props>, State> {
   }
 }
 
-export default ApiErrorBoundary;
+export default FetchBoundary;

src/components/errorBoundary/GlobalBoundary.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren, useEffect } from 'react';
+
+const GlobalErrorBoundary = ({ children }: PropsWithChildren) => {
+  const captureReject = (e) => {
+    e.preventDefault();
+    if (e.reason instanceof Error) {
+      console.log(e.reason);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('unhandledrejection', captureReject);
+    return () => window.removeEventListener('unhandledrejection', captureReject);
+  }, []);
+
+  return <div>{children}</div>;
+};
+
+export default GlobalErrorBoundary;

src/components/icon/index.tsx

@@ -28,6 +28,7 @@ export type IconValues =
   | 'up'
   | 'down'
   | 'select'
+  | 'search'
   | 'send'
   | 'step_one'
   | 'step_two';
@@ -448,6 +449,19 @@ const renderIcon = (
           />
         </svg>
       );
+    case 'search':
+      return (
+        <svg width="15" height="19" viewBox="0 0 15 19" fill="none">
+          <path
+            d="M6.75 2.22998C9.23 2.22998 11.25 4.24998 11.25 6.72998C11.25 9.20998 9.23 11.23 6.75 11.23C4.27 11.23 2.25 9.20998 2.25 6.72998C2.25 4.24998 4.27 2.22998 6.75 2.22998ZM6.75 0.22998C3.16 0.22998 0.25 3.13998 0.25 6.72998C0.25 10.32 3.16 13.23 6.75 13.23C10.34 13.23 13.25 10.32 13.25 6.72998C13.25 3.13998 10.34 0.22998 6.75 0.22998Z"
+            fill="black"
+          />
+          <path
+            d="M13.7504 18.0499C13.4404 18.0499 13.1404 17.9099 12.9404 17.6399L9.4404 12.8199C9.1204 12.3699 9.2104 11.7499 9.6604 11.4199C10.1104 11.0899 10.7304 11.1899 11.0604 11.6399L14.5604 16.4599C14.8804 16.9099 14.7904 17.5299 14.3404 17.8599C14.1604 17.9899 13.9604 18.0499 13.7504 18.0499Z"
+            fill="black"
+          />
+        </svg>
+      );
   }
 };
 

src/components/index.ts

@@ -1,18 +1,20 @@
-export { default as Navbar } from './navbar';
-export { default as Alert } from './alert';
 export { default as Icon } from './icon';
-export { default as InputField } from './inputField';
+export { default as Alert } from './alert';
+export { default as Navbar } from './navbar';
 export { default as Button } from './button';
-export { default as NicknameNProfile } from './nicknameNProfile';
+export { default as NoneData } from './noneData';
 export { default as StarRate } from './starRate';
+export { default as InputField } from './inputField';
 export { default as PageButtons } from './pageButtons';
-export { default as NoneData } from './noneData';
 export { default as CircleLoader } from './circleLoader';
+export { default as NicknameNProfile } from './nicknameNProfile';
+export { default as FetchBoundary } from './errorBoundary/FetchBoundary';
+export { default as GlobalBoundary } from './errorBoundary/GlobalBoundary';
 
 export { default as Text } from './Text';
 export { default as Dimmed } from './Dimmed';
+export { default as UserCircle } from './UserCircle';
+export { default as ChatPortal } from './ChatPortal';
 export { default as AlertPortal } from './AlertPortal';
 export { default as GalleryInfoPortal } from './GalleryInfoPortal';
-export { default as ChatPortal } from './ChatPortal';
-export { default as UserCircle } from './UserCircle';
-export { default as ApiErrorBoundary } from './ApiErrorBoundary';
+export { default as SignupCheckPortal } from './SignupCheckPortal';

src/components/inputField/index.tsx

@@ -10,7 +10,6 @@ interface InputFieldProps {
   register: UseFormRegisterReturn<string>;
   error?: FieldError | undefined;
   disabled?: boolean;
-  inputType?: 'default' | 'alert';
 }
 
 const InputField = ({
@@ -19,7 +18,6 @@ const InputField = ({
   register,
   error,
   disabled = false,
-  inputType = 'default',
 }: InputFieldProps) => {
   const [isFocused, setIsFocused] = useState<boolean>(false);
   const [isBlind, setIsBlind] = useState<boolean>(true);
@@ -46,7 +44,6 @@ const InputField = ({
           }
         }}
         disabled={disabled}
-        inputType={inputType}
       />
       {value.includes('password') && (
         <S.BlindIcon

src/components/inputField/styles.ts

@@ -26,48 +26,29 @@ export const Label = styled.label<{ isFocused: boolean }>`
   transition: all 0.5s;
 `;
 
-export const Input = styled.input<{ inputType?: 'default' | 'alert'; disabled: boolean }>`
+export const Input = styled.input<{ disabled: boolean }>`
   font-size: 24px;
   margin-top: 10px;
   padding: 0 10px 10px;
+  color: ${colors.white};
+  border-bottom: 1px solid ${colors.white};
   ${({ disabled }) =>
     disabled
       ? css`
           background-color: ${colors.gray500};
         `
       : null};
-  ${({ inputType = 'default' }) =>
-    inputType === 'default'
-      ? css`
-          color: ${colors.white};
-          border-bottom: 1px solid ${colors.white};
-
-          // autocomplete css 속성
-          :-webkit-autofill,
-          :-webkit-autofill:hover,
-          :-webkit-autofill:focus,
-          :-webkit-autofill:active {
-            -webkit-text-fill-color: ${colors.white};
-            -webkit-box-shadow: 0 0 0px 1000px inherit inset;
-            box-shadow: 0 0 0px 1000px inherit inset;
-            transition: background-color 5000s ease-in-out 0s;
-          }
-        `
-      : css`
-          color: ${colors.black};
-          border-bottom: 1px solid ${colors.black};
 
-          // autocomplete css 속성
-          :-webkit-autofill,
-          :-webkit-autofill:hover,
-          :-webkit-autofill:focus,
-          :-webkit-autofill:active {
-            -webkit-text-fill-color: ${colors.black};
-            -webkit-box-shadow: 0 0 0px 1000px inherit inset;
-            box-shadow: 0 0 0px 1000px inherit inset;
-            transition: background-color 5000s ease-in-out 0s;
-          }
-        `}
+  // autocomplete css 속성
+  :-webkit-autofill,
+  :-webkit-autofill:hover,
+  :-webkit-autofill:focus,
+  :-webkit-autofill:active {
+    -webkit-text-fill-color: ${colors.black};
+    -webkit-box-shadow: 0 0 0px 1000px inherit inset;
+    box-shadow: 0 0 0px 1000px inherit inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
 `;
 
 export const ErrorMessage = styled(Text)`

src/components/navbar/index.tsx

@@ -19,7 +19,9 @@ const Navbar = () => {
     <>
       <S.Container>
         <S.MaxWidthWrapper>
-          <S.MainLogo alt="main-logo" src={mainlogo} />
+          <a href="/">
+            <S.MainLogo alt="main-logo" src={mainlogo} />
+          </a>
           <S.ButtonBox>
             {navbarInfo.map(({ path, value }, index) => {
               if (value === '로그인') {

src/components/pageButtons/index.tsx

@@ -4,6 +4,7 @@ import getVisiblePage from '@/utils/getPage';
 
 import * as S from './styles';
 import { Typograph } from '@/styles/typography';
+import { useEffect } from 'react';
 
 export interface PageButtonsProps {
   orientation?: 'horizontal' | 'vertical';
@@ -18,7 +19,15 @@ const PageButtons = ({
     nextPage,
     pageInfo: { isDone, isFirst, pageIndex },
     prevPage,
+    resetPageInfo,
   } = pageStore();
+
+  useEffect(() => {
+    return () => {
+      console.log('hi');
+      resetPageInfo();
+    };
+  }, [resetPageInfo]);
   return (
     <S.Container orientation={orientation}>
       <S.ButtonBox orientation={orientation}>

src/consts/signup.ts

@@ -6,18 +6,24 @@ interface FormField {
   title?: string;
   value: keyof ExtendedSignupForm;
   registerOptions?: RegisterOptions;
-  buttonLabel?: string;
-  successMessage?: string;
+  checkOption?: CheckOption;
   type?: 'input' | 'textarea';
 }
 
+interface CheckOption {
+  buttonLabel: string;
+  successMessage: string;
+}
+
 export const essentiolFormData: FormField[] = [
   {
     label: '이메일',
     value: 'email',
     title: '이메일 검증',
-    buttonLabel: '인증번호 받기',
-    successMessage: '인증 번호 발송 완료',
+    checkOption: {
+      buttonLabel: '인증번호 받기',
+      successMessage: '인증 번호 발송 완료',
+    },
     registerOptions: {
       required: '이메일을 입력해주세요',
       pattern: {
@@ -30,8 +36,10 @@ export const essentiolFormData: FormField[] = [
     label: '닉네임',
     value: 'nickname',
     title: '닉네임 중복 검사',
-    buttonLabel: '중복확인',
-    successMessage: '유효한 닉네임입니다.',
+    checkOption: {
+      buttonLabel: '중복확인',
+      successMessage: '유효한 닉네임입니다.',
+    },
     registerOptions: {
       required: '닉네임을 입력해주세요',
       pattern: {

src/hooks/useCustomNavigate.ts

@@ -1,5 +1,6 @@
 import { memberStore } from '@/stores/member';
 import { alertStore } from '@/stores/modal';
+import { LoginFormData } from '@/types/member';
 import { NavigateOptions, To, useNavigate } from 'react-router-dom';
 
 interface CustomNavigateOption extends NavigateOptions {
@@ -18,12 +19,15 @@ const useCustomNavigate = () => {
       return baseNavigate(to);
     }
     if (option?.hasAuth && !isLogin) {
-      open({ title: 'test', description: 'test' });
+      open({
+        title: '로그인 권장 서비스',
+        description: '로그인 페이지로 이동하시겠습니까?',
+        onClickButton: () => baseNavigate('/login'),
+      });
     } else {
       baseNavigate(to, option);
     }
   }
-
   return customNavigate;
 };
 

src/hooks/useInput.ts

@@ -14,12 +14,12 @@ export const useInput = <T>(
       const value = event.target.value as unknown as T;
       const name = event.target.name;
       const newValue = {
-        ...value,
+        ...form,
         [name]: value,
       };
       setForm(newValue);
     },
-    [setForm],
+    [form],
   );
   return [form, onChange, setForm];
 };