Merge pull request #79 from BCSDLab/feature/#78

Feature/#78 디자인 수정 적용 & UI 관련 오류들 수정
BCSDLab · Jul 21, 2023 · 3425801 · 3425801
2 parents b77edf2 + df50f56
commit 3425801
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 99 deletions.
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
@@ -10,7 +10,6 @@ import {
   SendFindEmailParams,
   GetAccountParams,
   FindPasswordParams,
-  ChangePasswordParams,
 } from './entity';
 import userApi from './userApiClient';
 
@@ -27,11 +26,11 @@ export const getMe = () => userApi.get<User>('/me');
 
 export const withdrawUser = () => userApi.delete<User>('/me');
 
-export const modify = (param: ModifyParams) => userApi.patch<User>('/modify', param);
+export const modify = (param: ModifyParams) => userApi.patch<User>('/me', param);
 
 export const sendRegisterEmail = (param: SendRegisterEmailParams) => userApi.post(`/authenticate?email=${param.email}`);
 
-export const sendFindEmail = (param: SendFindEmailParams) => userApi.post(`/email?email=${param.email}`);
+export const sendFindEmail = (param: SendFindEmailParams) => userApi.post(`/email/account?email=${param.email}`);
 
 export const getAccount = (param: GetAccountParams) => userApi.get(`/account?email=${param.email}&code=${param.code}`);
 
@@ -40,5 +39,3 @@ export const findPassowrd = (param: FindPasswordParams) => userApi.post('/passwo
   code: param.code,
   email: param.email,
 });
-
-export const changePassword = (param: ChangePasswordParams) => userApi.patch(`/password?password=${param.password}`);
diff --git a/src/assets/svg/common/my-page.svg b/src/assets/svg/common/my-page.svg
diff --git a/src/assets/svg/common/setting.svg b/src/assets/svg/common/setting.svg
diff --git a/src/assets/svg/common/write.svg b/src/assets/svg/common/write.svg
diff --git a/src/components/common/BottomNavigation/index.tsx b/src/components/common/BottomNavigation/index.tsx
@@ -12,7 +12,7 @@ const NAV_TABS = [
     text: '홈',
   },
   {
-    pathname: '/post',
+    pathname: '/search',
     icon: WriteIcon,
     text: '글쓰기',
   },

diff --git a/src/components/common/TopNavigation/TopNavigation.module.scss b/src/components/common/TopNavigation/TopNavigation.module.scss
@@ -5,9 +5,9 @@
   height: 80px;
   box-shadow: 0 0 5px rgb(0 0 0 / 15%);
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 0.7fr 1fr;
   align-items: center;
-  font-size: 20px;
+  font-size: 18px;
 
   &__logo {
     display: flex;
@@ -45,14 +45,19 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 56px;
+    gap: 48px;
     margin-right: 72px;
     list-style: none;
+    opacity: 0.8;
   }
 
   &__link {
     text-decoration: none;
     font-weight: 500;
-    color: #000000;
+    color: #222222;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
   }
 }
diff --git a/src/components/common/TopNavigation/index.tsx b/src/components/common/TopNavigation/index.tsx
@@ -1,12 +1,33 @@
 import { Link } from 'react-router-dom';
 import { ReactComponent as LogoIcon } from 'assets/svg/common/favicon.svg';
 import { ReactComponent as ArrowIcon } from 'assets/svg/common/arrow.svg';
+import { ReactComponent as SettingIcon } from 'assets/svg/common/setting.svg';
+import { ReactComponent as WriteIcon } from 'assets/svg/common/write.svg';
+import { ReactComponent as MyPageIcon } from 'assets/svg/common/my-page.svg';
 import { useAuth } from 'store/auth';
 import styles from './TopNavigation.module.scss';
 
 export default function TopNavigation(): JSX.Element {
   const auth = useAuth();
 
+  const tabs = [
+    {
+      name: '설정',
+      icon: <SettingIcon />,
+      link: '/setting',
+    },
+    {
+      name: '글쓰기',
+      icon: <WriteIcon />,
+      link: '/search',
+    },
+    {
+      name: auth ? '마이페이지' : '로그인',
+      icon: <MyPageIcon />,
+      link: auth ? '/profile' : '/login',
+    },
+  ];
+
   return (
     <nav className={styles['top-navigation']}>
       <div className={styles['top-navigation__logo']}>
@@ -21,11 +42,14 @@ export default function TopNavigation(): JSX.Element {
       </div>
 
       <ul className={styles['top-navigation__links']}>
-        <li><Link to="/search" className={styles['top-navigation__link']}>검색</Link></li>
-        <li><Link to="/setting" className={styles['top-navigation__link']}>설정</Link></li>
-        {auth
-          ? <li><Link to="/profile" className={styles['top-navigation__link']}>마이페이지</Link></li>
-          : <li><Link to="/login" className={styles['top-navigation__link']}>로그인</Link></li>}
+        {tabs.map((tab) => (
+          <li key={tab.name}>
+            <Link to={tab.link} className={styles['top-navigation__link']}>
+              {tab.icon}
+              {tab.name}
+            </Link>
+          </li>
+        ))}
       </ul>
     </nav>
   );

diff --git a/src/pages/Auth/FindIDPassword/ChangePassword.tsx b/src/pages/Auth/FindIDPassword/ChangePassword.tsx
@@ -1,10 +1,10 @@
 import { useForm } from 'react-hook-form';
-import { changePassword } from 'api/user';
+import { modify } from 'api/user';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import cn from 'utils/ts/classNames';
 import PreviousButton from 'components/PreviousButton/PreviousButton';
 import error from 'assets/svg/auth/error.svg';
-import style from 'pages/Auth/FindIDPassword/index.module.scss';
+import styles from 'pages/Auth/FindIDPassword/index.module.scss';
 import { PasswordInfo } from './entity';
 import Modal from './component/Modal';
 
@@ -20,7 +20,7 @@ export default function ChangePassword(): JSX.Element {
 
   const changeUserPassword = async (param: PasswordInfo) => {
     try {
-      const result = await changePassword(param);
+      const result = await modify({ password: param.password });
       if (result.status === 200) {
         sessionStorage.removeItem('accessToken');
         toggle();
@@ -31,37 +31,37 @@ export default function ChangePassword(): JSX.Element {
   };
 
   return (
-    <div className={style.layout}>
-      <div className={style.back}>
+    <div className={styles.layout}>
+      <div className={styles.back}>
         <PreviousButton />
       </div>
-      <div className={style.page}>
+      <div className={styles.page}>
         <div>
-          <p className={style.page__quote}>
+          <p className={styles.page__quote}>
             새 비밀번호를 설정해 주세요.
           </p>
         </div>
-        <div className={style.page__error}>
+        <div className={styles.page__error}>
           {(errors.password || errors.passwordCheck) && (
-            <span className={style.page__caution}>
-              <img src={error} alt="warning" className={style.page__image} />
+            <span className={styles.page__caution}>
+              <img src={error} alt="warning" className={styles.page__image} />
               {errors.password?.message || errors.passwordCheck?.message}
             </span>
           )}
         </div>
         <form
           className={cn({
-            [style.form]: true,
-            [style.form__space]: true,
+            [styles.form]: true,
+            [styles.form__space]: true,
           })}
           onSubmit={handleSubmit(changeUserPassword)}
         >
-          <div className={style.form__center}>
-            <div className={style.form__label}>새 비밀번호</div>
+          <div className={styles.form__center}>
+            <div className={styles.form__label}>새 비밀번호</div>
             <input
               type="password"
               placeholder="비밀번호를 입력하세요"
-              className={style.form__input}
+              className={styles.form__input}
               {...register('password', {
                 required: '비밀번호를 입력하세요',
                 pattern: {
@@ -70,11 +70,11 @@ export default function ChangePassword(): JSX.Element {
                 },
               })}
             />
-            <div className={cn({ [style['form__label--paddingTop']]: true })}>비밀번호 확인</div>
+            <div className={cn({ [styles['form__label--paddingTop']]: true })}>비밀번호 확인</div>
             <input
               type="password"
               placeholder="비밀번호를 입력하세요"
-              className={style.form__input}
+              className={styles.form__input}
               {...register('passwordCheck', {
                 required: '비밀번호 확인을 입력하세요',
                 validate: (values) => values === getValues('password') || '비밀번호가 일치하지 않습니다.',
@@ -84,8 +84,8 @@ export default function ChangePassword(): JSX.Element {
           <button
             type="submit"
             className={cn({
-              [style.active]: isValid,
-              [style.inactive]: true,
+              [styles.form__submit]: true,
+              [styles['form__submit--active']]: isValid,
             })}
           >
             인증번호 보내기

diff --git a/src/pages/Auth/FindIDPassword/component/Modal.tsx b/src/pages/Auth/FindIDPassword/component/Modal.tsx
@@ -14,9 +14,7 @@ export default function Modal({ children, type }: ModalProp): JSX.Element {
       <div className={style.overay} />
       <div className={style.modal}>
         <div className={style.modal__title}>
-          {type}
-          {' '}
-          찾기 완료
+          {`${type} 찾기 완료`}
         </div>
         <div className={style.modal__content}>{children}</div>
         <Link to="/login"><button type="button" className={style.modal__button}>확인</button></Link>

diff --git a/src/pages/Auth/FindIDPassword/index.module.scss b/src/pages/Auth/FindIDPassword/index.module.scss
@@ -6,13 +6,14 @@
   justify-content: center;
   align-items: center;
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .back {
   grid-column-start: 2;
   width: 270px;
   padding-bottom: 30px;
+  padding-top: 16px;
 }
 
 .page {
@@ -49,6 +50,7 @@
   display: flex;
   flex-direction: column;
   gap: 230px;
+  margin-bottom: 12px;
 
   &__space {
     gap: 190px !important;
@@ -82,23 +84,18 @@
     margin-bottom: 10px;
     background-color: #eeeeee;
   }
-}
 
-.inactive {
-  border: none;
-  border-radius: 100px;
-  width: 250px;
-  height: 40px;
-  color: white;
-  background-color: #c4c4c4;
-}
+  &__submit {
+    border: none;
+    border-radius: 100px;
+    width: 250px;
+    height: 40px;
+    color: white;
+    background-color: #c4c4c4;
 
-.active {
-  border: none;
-  border-radius: 100px;
-  width: 250px;
-  height: 40px;
-  color: white;
-  background-color: #ff7f23;
-  cursor: pointer;
+    &--active {
+      background-color: #ff7f23;
+      cursor: pointer;
+    }
+  }
 }
diff --git a/src/pages/Auth/FindIDPassword/index.tsx b/src/pages/Auth/FindIDPassword/index.tsx
@@ -59,14 +59,14 @@ export default function FindIdPassword({ type }: FindProp): JSX.Element {
             <p className={style.page__quote}>
               아이디를 찾을 때
               <br />
-              사용할 이메일을 입력해주세요.
+              사용할 이메일을 입력해 주세요.
             </p>
           )}
           {type === 'password' && (
             <p className={style.page__quote}>
-              비밀번호를 찾을 때
+              비밀번호를 찾을 때 사용할
               <br />
-              사용할 이메일과 아이디를 입력해주세요.
+              이메일과 아이디를 입력해 주세요.
             </p>
           )}
         </div>
@@ -112,8 +112,8 @@ export default function FindIdPassword({ type }: FindProp): JSX.Element {
             type="submit"
             disabled={isSubmitting || !isValid}
             className={cn({
-              [style.active]: isValid,
-              [style.inactive]: true,
+              [style['form__submit--active']]: isValid,
+              [style.form__submit]: true,
             })}
           >
             인증번호 보내기

diff --git a/src/pages/Home/components/Map/components/OptionButtons/index.tsx b/src/pages/Home/components/Map/components/OptionButtons/index.tsx
@@ -6,7 +6,7 @@ import useBooleanState from 'utils/hooks/useBooleanState';
 import styles from './OptionButtons.module.scss';
 
 export default function OptionButtons() {
-  const [visible,,, toggle] = useBooleanState(false);
+  const [visible, , , toggle] = useBooleanState(false);
   return (
     <div className={styles.button}>
       <div
@@ -27,28 +27,19 @@ export default function OptionButtons() {
             <MenuIcon />
             <span>필터</span>
           </button>
-          <Link to="/post" className={styles.filter__button}>
+          <Link to="/search" className={styles.filter__button}>
             <PencilIcon />
             <span>글쓰기</span>
           </Link>
         </div>
         <div className={styles['slide-filter-list']}>
-          <button
-            type="button"
-            className={styles['slide-filter-list__button']}
-          >
+          <button type="button" className={styles['slide-filter-list__button']}>
             가까운 음식점
           </button>
-          <button
-            type="button"
-            className={styles['slide-filter-list__button']}
-          >
+          <button type="button" className={styles['slide-filter-list__button']}>
             친구 음식점
           </button>
-          <button
-            type="button"
-            className={styles['slide-filter-list__button']}
-          >
+          <button type="button" className={styles['slide-filter-list__button']}>
             북마크 음식점
           </button>
         </div>

diff --git a/src/pages/Search/components/SearchBar/SearchBar.module.scss b/src/pages/Search/components/SearchBar/SearchBar.module.scss
@@ -9,7 +9,6 @@
     word-break: keep-all;
     height: 80px;
     padding-top: 168px;
-    padding-right: 60px;
     padding-left: 30px;
     font-size: 32px;
     font-weight: 300;