Merge pull request #312 from Bamdoliro/feat/#311

바뀐 메인 페이지 퍼블리싱
Bamdoliro · Aug 22, 2023 · 5d33362 · 5d33362
2 parents 54f342c + 56f649b
commit 5d33362
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 26 deletions.
diff --git a/apps/user/public/svg/school_logo.svg b/apps/user/public/svg/school_logo.svg
diff --git a/apps/user/src/app/signup/signup.hooks.ts b/apps/user/src/app/signup/signup.hooks.ts
@@ -1,7 +1,7 @@
-import { PostJoinAuthReq } from '@/types/auth/remote';
 import { useJoinUserMutation, useRequestEmailMutation } from '@/services/auth/mutations';
+import { PostJoinAuthReq } from '@/types/auth/remote';
+import { useBooleanState } from '@maru/hooks';
 import { ChangeEventHandler, useState } from 'react';
-import { useBoolean } from '@maru/hooks';
 
 export const useJoinAction = (joinUserData: PostJoinAuthReq, termsAgree: boolean) => {
     const { joinUserMutate } = useJoinUserMutation(joinUserData);
@@ -28,9 +28,9 @@ export const useJoinAction = (joinUserData: PostJoinAuthReq, termsAgree: boolean
 
 export const useRequestEmailAction = (email: string) => {
     // 이메일 요청을 보냈는가?
-    const { value: isRequestEmail, setValue: setIsRequestEmail } = useBoolean(false);
+    const { value: isRequestEmail, setValue: setIsRequestEmail } = useBooleanState(false);
     // 이메일 전송 활성화 비활성화
-    const { value: isButtonDisabled, setValue: setIsButtonDisabled } = useBoolean(false);
+    const { value: isButtonDisabled, setValue: setIsButtonDisabled } = useBooleanState(false);
     const { requestEmailMutate } = useRequestEmailMutation(email);
 
     const handleRequestEmailButtonClick = () => {

diff --git a/apps/user/src/components/common/Footer/Footer.tsx b/apps/user/src/components/common/Footer/Footer.tsx
@@ -15,9 +15,15 @@ const Footer = () => {
                 <Image src="/svg/logo_gray.svg" width={107} height={32} alt="logo_gray" />
                 <Column gap="20px">
                     <ContentBox>
-                        <p>주소: 부산광역시 강서구 가락대로 1393 봉림동 15 (46708)</p>
-                        <p>교무실(입학처): 051-971-2153, Fax: 051-971-2061</p>
-                        <p> 행정실:051-971-2152, Fax: 051-971-6325</p>
+                        <Text fontType="p2" color={color.gray600}>
+                            주소: 부산광역시 강서구 가락대로 1393 봉림동 15 (46708)
+                        </Text>
+                        <Text fontType="p2" color={color.gray600}>
+                            교무실(입학처): 051-971-2153, Fax: 051-971-2061
+                        </Text>
+                        <Text fontType="p2" color={color.gray600}>
+                            행정실:051-971-2152, Fax: 051-971-6325
+                        </Text>
                     </ContentBox>
                     <Text fontType="p3" color={color.gray600}>
                         Copyright © 밤돌이로 all rights reserved.
@@ -69,8 +75,6 @@ const StyledFooter = styled.div`
 `;
 
 const InfoBox = styled.div`
-    ${font.p3}
-    color: ${color.gray600};
     ${flex({ flexDirection: 'column' })}
     gap: 40px;
     width: 489px;
@@ -84,9 +88,9 @@ const ContentBox = styled.div`
 `;
 
 const NavigationBox = styled.div`
+    // @TODO Link 리팩토링하면서
     ${font.p3}
     color: ${color.gray600};
     display: flex;
-    // @TODO 확인
     gap: 132px;
 `;
diff --git a/apps/user/src/components/common/Header/Header.tsx b/apps/user/src/components/common/Header/Header.tsx
@@ -35,10 +35,10 @@ const Header = () => {
         <StyledHeader>
             <HeaderBar>
                 <Image
-                    src="/svg/logo.svg"
+                    src="/svg/school_logo.svg"
                     style={{ cursor: 'pointer' }}
-                    width={107}
-                    height={72}
+                    width={318}
+                    height={64}
                     onClick={() => router.push(ROUTES.MAIN)}
                     alt="logo"
                 />

diff --git a/apps/user/src/components/common/Header/Profile/Profile.tsx b/apps/user/src/components/common/Header/Profile/Profile.tsx
@@ -1,18 +1,18 @@
 import { ROUTES } from '@/constants/common/constant';
+import { useUser } from '@/hooks';
 import { useLogoutUserMutation } from '@/services/auth/mutations';
-import { useBoolean, useOutsideClick } from '@maru/hooks';
+import { useBooleanState, useOutsideClick } from '@maru/hooks';
 import { IconArrowDropdown } from '@maru/icon';
 import { color, font } from '@maru/theme';
 import { Text } from '@maru/ui';
 import { flex } from '@maru/utils';
 import { useRouter } from 'next/navigation';
-import { useUser } from '@/hooks';
 import styled from 'styled-components';
 
 const Profile = () => {
     const router = useRouter();
     const { userData } = useUser();
-    const { value: isMenuOpen, toggle: toggleMenuOpen, setFalse: closeMenu } = useBoolean();
+    const { value: isMenuOpen, toggle: toggleMenuOpen, setFalse: closeMenu } = useBooleanState();
     const { logoutUserMutate } = useLogoutUserMutation();
     const menuListBoxRef = useOutsideClick(closeMenu);
 

diff --git a/apps/user/src/components/main/Schedule/Schedule.tsx b/apps/user/src/components/main/Schedule/Schedule.tsx
@@ -31,7 +31,7 @@ const Schedule = () => {
     return (
         <StyledSchedule>
             <Text fontType="H3" color={color.gray900}>
-                입학일정
+                2024학년도 부산소마고 입학 일정
             </Text>
             <StyledScheduleList>
                 {SCHEDULE_DATA.map((item) => (

diff --git a/packages/maru-hooks/index.ts b/packages/maru-hooks/index.ts
@@ -1,4 +1,4 @@
-export { default as useInterval } from './src/useInterval';
+export { default as useBooleanState } from './src/useBooleanState';
 export { default as useDebounceInput } from './src/useDebounceInput';
+export { default as useInterval } from './src/useInterval';
 export { default as useOutsideClick } from './src/useOutsideClick';
-export { default as useBoolean } from './src/useBoolean';
diff --git a/packages/maru-hooks/src/useBoolean.ts → packages/maru-hooks/src/useBooleanState.ts b/packages/maru-hooks/src/useBoolean.ts → packages/maru-hooks/src/useBooleanState.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-const useBoolean = (initialValue?: boolean) => {
+const useBooleanState = (initialValue?: boolean) => {
     const [value, setValue] = useState(!!initialValue);
 
     const setTrue = useCallback(() => setValue(true), []);
@@ -10,4 +10,4 @@ const useBoolean = (initialValue?: boolean) => {
     return { value, setValue, setTrue, setFalse, toggle };
 };
 
-export default useBoolean;
+export default useBooleanState;
diff --git a/packages/maru-ui/src/Button/Button.style.ts b/packages/maru-ui/src/Button/Button.style.ts
@@ -43,7 +43,7 @@ export const getButtonStyle = {
     `,
     DISABLED: css`
         background-color: ${color.gray700};
-        color: ${color.white};
+        color: ${color.gray400};
         cursor: auto;
     `,
 };

diff --git a/packages/maru-ui/src/Dropdown/Dropdown.tsx b/packages/maru-ui/src/Dropdown/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { useBoolean, useOutsideClick } from '@maru/hooks';
+import { useBooleanState, useOutsideClick } from '@maru/hooks';
 import { IconArrowBottom, IconArrowTop } from '@maru/icon';
 import { color, font } from '@maru/theme';
 import { flex } from '@maru/utils';
@@ -33,7 +33,7 @@ const Dropdown = ({
         value: isOpen,
         setFalse: closeDropdown,
         toggle: handleToggleButtonClick,
-    } = useBoolean();
+    } = useBooleanState();
     const dropdownRef = useOutsideClick(closeDropdown);
 
     const handleDropdownItemButtonClick = (data: string) => {

diff --git a/packages/maru-ui/src/Input/PreviewInput.tsx b/packages/maru-ui/src/Input/PreviewInput.tsx
@@ -1,4 +1,4 @@
-import { useBoolean } from '@maru/hooks';
+import { useBooleanState } from '@maru/hooks';
 import { IconInvisibleEye, IconVisibleEye } from '@maru/icon';
 import { color, font } from '@maru/theme';
 import { flex } from '@maru/utils';
@@ -17,7 +17,7 @@ const PreviewInput = ({
     isError = false,
     onChange,
 }: InputProps) => {
-    const { value: isPreview, toggle: toggleIsPreview } = useBoolean();
+    const { value: isPreview, toggle: toggleIsPreview } = useBooleanState();
 
     return (
         <div style={{ width }}>