Merge pull request #124 from Step3-kakao-tech-campus/feat/#78

Style: 특성 점수 컴포넌트 UI 변경 / 로그인, 회원가입 페이지 반응형 추가
Step3-kakao-tech-campus · Oct 20, 2023 · 98c2ed0 · 98c2ed0
2 parents fcf9dad + 4ca40a9
commit 98c2ed0
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -27,12 +27,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/src/commons/LogoButton.tsx b/src/commons/LogoButton.tsx
@@ -1,11 +1,22 @@
 import { Link } from 'react-router-dom';
 
-const LogoButton = () => {
+type LogoButtonProps = {
+  imageClassName?: string;
+  logoClassName?: string;
+};
+
+const LogoButton = ({ imageClassName, logoClassName }: LogoButtonProps) => {
   return (
     <Link to="/">
-      <div className="flex gap-2">
-        <img className="w-8" src="/assets/images/paw.png" alt="애니모리 로고" />
-        <h1 className="text-brand-color font-bold text-2xl">애니모리</h1>
+      <div className="flex gap-2 items-center">
+        <img
+          className={`w-8 ${imageClassName}`}
+          src="/assets/images/paw.png"
+          alt="애니모리 로고"
+        />
+        <h1 className={`text-brand-color font-bold text-2xl ${logoClassName}`}>
+          애니모리
+        </h1>
       </div>
     </Link>
   );

diff --git a/src/commons/cookie/getUser.ts b/src/commons/cookie/getUser.ts
@@ -8,6 +8,6 @@ export const getLoginState = () => {
   return '로그인';
 };
 
-export const removeUser = () => {
+export const removeToken = () => {
   removeCookie('loginToken');
 };
diff --git a/src/layouts/VGNB.tsx b/src/layouts/VGNB.tsx
@@ -1,5 +1,5 @@
 import LogoButton from 'commons/LogoButton';
-import { getLoginState, removeUser } from 'commons/cookie/getUser';
+import { getLoginState, removeToken } from 'commons/cookie/getUser';
 import { Link } from 'react-router-dom';
 
 export interface VGNBProps {
@@ -39,7 +39,7 @@ const VGNB = (props: VGNBProps) => {
               <Link to="/login">
                 <button
                   className="border border-2 box-border border-brand-color text-brand-color rounded-md w-28 py-1"
-                  onClick={removeUser}
+                  onClick={removeToken}
                 >
                   {getLoginState()}
                 </button>

diff --git a/src/layouts/VLargeGNB.tsx b/src/layouts/VLargeGNB.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import LogoButton from 'commons/LogoButton';
-import { getLoginState, removeUser } from 'commons/cookie/getUser';
+import { getLoginState, removeToken } from 'commons/cookie/getUser';
 
 export interface VLargeGNBProps {
   handleCategoryButtonClick: () => void;
@@ -64,7 +64,7 @@ const VLargeGNB = (props: VLargeGNBProps) => {
           <Link to="/login">
             <button
               className="border border-2 box-content border-brand-color text-brand-color rounded-md py-1 px-4 transition duration-300 hover:bg-brand-color hover:text-white"
-              onClick={removeUser}
+              onClick={removeToken}
             >
               {getLoginState()}
             </button>

diff --git a/src/pages/login/LoginInputForm.tsx b/src/pages/login/LoginInputForm.tsx
@@ -24,16 +24,17 @@ const LoginInputForm = () => {
     setIsEmailEmpty(false);
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const checkEmpty = () => {
     if (!userInfo.email) {
       setErrorText('이메일을 입력해주세요');
       setIsEmailEmpty(true);
     }
     if (!userInfo.password) {
       setIsPasswordEmpty(true);
     }
-    // email, password 보내기
+  };
+
+  const userfetch = () => {
     fetch(`${process.env.REACT_APP_URI}/account/login`, {
       method: 'POST',
       headers: {
@@ -63,6 +64,14 @@ const LoginInputForm = () => {
       });
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // email, password 비었는지 확인
+    checkEmpty();
+    // email, password 보내기
+    userfetch();
+  };
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const target = event.target as HTMLInputElement;
     if (target.id === 'id') {

diff --git a/src/pages/login/VLoginInputForm.tsx b/src/pages/login/VLoginInputForm.tsx
@@ -1,11 +1,20 @@
 import InputGroup from 'commons/InputGroup';
 
-type Props = {
+interface LoginInputFormProps {
   handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
   isEmailEmpty: boolean;
   isPasswordEmpty: boolean;
   errorText: string;
+}
+
+interface ErrorTextProps {
+  isEmpty: boolean;
+  text: string;
+}
+
+const ErrorText = ({ isEmpty, text }: ErrorTextProps) => {
+  return <div>{isEmpty && <span className="text-red-500">{text}</span>}</div>;
 };
 
 const VLoginInputForm = ({
@@ -14,7 +23,7 @@ const VLoginInputForm = ({
   isEmailEmpty,
   isPasswordEmpty,
   errorText,
-}: Props) => {
+}: LoginInputFormProps) => {
   return (
     <form
       className="flex flex-col gap-4 w-full max-w-[400px]"
@@ -30,7 +39,8 @@ const VLoginInputForm = ({
         }}
         autocomplete="off"
       />
-      {isEmailEmpty && <div className="text-red-500">{errorText}</div>}
+      <ErrorText isEmpty={isEmailEmpty} text={errorText} />
+
       <InputGroup
         id="password"
         name="비밀번호"
@@ -41,9 +51,7 @@ const VLoginInputForm = ({
         }}
         autocomplete="off"
       />
-      {isPasswordEmpty && (
-        <div className="text-red-500">비밀번호를 입력해주세요.</div>
-      )}
+      <ErrorText isEmpty={isPasswordEmpty} text="비밀번호를 입력해주세요." />
       <button className="bg-brand-color text-white w-full rounded-md p-2">
         로그인
       </button>

diff --git a/src/pages/login/VLoginPage.tsx b/src/pages/login/VLoginPage.tsx
@@ -1,4 +1,5 @@
 import Banner from 'commons/Banner';
+import LogoButton from 'commons/LogoButton';
 import LoginInputForm from 'pages/login/LoginInputForm';
 
 type Props = {
@@ -7,27 +8,34 @@ type Props = {
 
 const VLoginPage = ({ redirectSignupPage }: Props) => {
   return (
-    <div
-      className="flex flex-col justify-center items-center gap-4 h-screen"
-      style={{
-        backgroundImage: 'url(assets/images/backgroundImage.png)',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-      }}
-    >
-      <Banner className="font-bold text-2xl">로그인</Banner>
-      <Banner className="font-semibold text-lg">
-        애니모리 친구들이 기다리고 있어요 :)
-      </Banner>
+    <div className="flex flex-col justify-around">
+      <div
+        className="flex flex-col justify-center items-center gap-4 h-screen"
+        style={{
+          backgroundImage: 'url(assets/images/backgroundImage.png)',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        }}
+      >
+        <div className="absolute sm:top-[150px] md:top-[120px] lg:top-[100px]">
+          <LogoButton
+            imageClassName="sm:w-6 md:w-8 lg:w-12"
+            logoClassName="sm:text-2xl md:text-3xl lg:text-4xl"
+          />
+        </div>
+        <Banner className="font-bold text-2xl">로그인</Banner>
+        <Banner className="font-semibold text-lg">
+          애니모리 친구들이 기다리고 있어요 :)
+        </Banner>
 
-      <LoginInputForm />
+        <LoginInputForm />
 
-      <div className="signUp-button flex justify-between min-w-[15rem]">
-        <span className="text-gray-400">계정이 없다면? </span>
-        <span className="font-medium text-brand-color">
-          <button onClick={redirectSignupPage}>회원가입</button>{' '}
-          <span>하러가기</span>
-        </span>
+        <div className="signUp-button flex justify-between min-w-[15rem]">
+          <span className="text-gray-400">계정이 없다면? </span>
+          <span className="font-medium text-brand-color">
+            <button onClick={redirectSignupPage}>회원가입 하러가기</button>
+          </span>
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/register/StatusScore.tsx b/src/pages/register/StatusScore.tsx
@@ -24,49 +24,57 @@ const StatusScore = ({ status, selectedOption, handleChange }: StatusProps) => {
       String(selectedOption) !== option
         ? 'border-[#C4C4C4] bg-[#C4C4C4]'
         : 'border-brand-color bg-brand-color'
-    } border-8 rounded-full w-[50px] h-[50px] cursor-pointer`;
+    } border-8 rounded-full w-[2rem] h-[2rem] md:w-[3rem] md:h-[3rem] lg:w-[4rem] lg:h-[4rem] cursor-pointer`;
   };
 
   return (
-    <div className="flex flex-col justify-center items-center m-2">
-      <div className="text-lg font-semibold">{status}</div>
-      <div className="flex flex-row m-2 items-center">
-        <span className="text-sm font-semibold mx-1">Low</span>
-        <input
-          type="radio"
-          value="1"
-          className={getButtonColor('1')}
-          onClick={() => handleChange(status, 1)}
-        />
-        <Dash />
-        <input
-          type="radio"
-          value="2"
-          className={getButtonColor('2')}
-          onClick={() => handleChange(status, 2)}
-        />
-        <Dash />
-        <input
-          type="radio"
-          value="3"
-          className={getButtonColor('3')}
-          onClick={() => handleChange(status, 3)}
-        />
-        <Dash />
-        <input
-          type="radio"
-          value="4"
-          className={getButtonColor('4')}
-          onClick={() => handleChange(status, 4)}
-        />
-        <Dash />
-        <input
-          type="radio"
-          value="5"
-          className={getButtonColor('5')}
-          onClick={() => handleChange(status, 5)}
-        />
-        <span className="text-sm font-semibold mx-1">High</span>
+    <div className="flex flex-col justify-center gap-2 items-center my-2 sm:my-2 md:my-3 lg:my-4 w-[100%]">
+      <div className="flex justify-center lg:text-lg font-semibold">
+        {status}
+      </div>
+      <div className="flex flex-row gap-2 items-center">
+        <span className="flex text-base sm:text-sm lg:text-lg font-semibold">
+          Low
+        </span>
+        <div className="flex flex-row items-center">
+          <input
+            type="radio"
+            value="1"
+            className={getButtonColor('1')}
+            onClick={() => handleChange(status, 1)}
+          />
+          <Dash />
+          <input
+            type="radio"
+            value="2"
+            className={getButtonColor('2')}
+            onClick={() => handleChange(status, 2)}
+          />
+          <Dash />
+          <input
+            type="radio"
+            value="3"
+            className={getButtonColor('3')}
+            onClick={() => handleChange(status, 3)}
+          />
+          <Dash />
+          <input
+            type="radio"
+            value="4"
+            className={getButtonColor('4')}
+            onClick={() => handleChange(status, 4)}
+          />
+          <Dash />
+          <input
+            type="radio"
+            value="5"
+            className={getButtonColor('5')}
+            onClick={() => handleChange(status, 5)}
+          />
+        </div>
+        <span className="text-base sm:text-sm lg:text-lg font-semibold">
+          High
+        </span>
       </div>
     </div>
   );

diff --git a/src/pages/register/StatusSelectGroup.tsx b/src/pages/register/StatusSelectGroup.tsx
@@ -73,31 +73,31 @@ const StatusSelectGroup = () => {
   return (
     <div>
       <StatusScore
-        status={'intelligence'}
+        status={'영리함'}
         score={petPolygonProfileDto.intelligence}
         selectedOption={intelligenceOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
-        status={'affinity'}
+        status={'친화력'}
         score={petPolygonProfileDto.affinity}
         selectedOption={affinityOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
-        status={'athletic'}
+        status={'운동신경'}
         score={petPolygonProfileDto.athletic}
         selectedOption={athleticOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
-        status={'adaptability'}
+        status={'적응력'}
         score={petPolygonProfileDto.adaptability}
         selectedOption={adaptabilityOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
-        status={'activeness'}
+        status={'활발함'}
         score={petPolygonProfileDto.activeness}
         selectedOption={activenessOption}
         handleChange={handleOptionChange}

diff --git a/src/pages/signUp/VSignupInputForm.tsx b/src/pages/signUp/VSignupInputForm.tsx
@@ -25,7 +25,7 @@ const VSignupInputForm = ({
 }: VSignupInputProps) => {
   return (
     <form
-      className="flex flex-col gap-4 w-full max-w-[400px]"
+      className="flex flex-col gap-4 w-full max-w-[400px] px-2"
       onSubmit={handleSubmit}
     >
       <div className="email-confirm flex place-items-end justify-center">