From 0344606f5708403b0e66e0f5ce4ad02b91ffe605 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 9 Apr 2024 23:55:23 +0900 Subject: [PATCH 01/48] =?UTF-8?q?fix:=20=EC=95=84=EC=9D=B4=EB=94=94=20?= =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20api=20=ED=98=B8=EC=B6=9C=20=EC=95=88?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/reset/id.tsx | 9 ++------- src/hooks/api/reset/usePostFindId.ts | 14 +++++++++++++- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/reset/id.tsx b/src/components/reset/id.tsx index e8754c4..0ffdaca 100644 --- a/src/components/reset/id.tsx +++ b/src/components/reset/id.tsx @@ -4,26 +4,24 @@ import { usePostFindId } from '@hooks/api/reset/usePostFindId'; import { useAlert } from '@hooks/useAlert'; import { formatphoneNumber } from '@utils/tell'; import React, { ChangeEvent } from 'react'; -import { useNavigate } from 'react-router-dom'; export default function IdForm() { const [phoneNumber, setPhoneNumber] = React.useState(''); //TODO) 인증번호 전송 여부 Toast 추가 - const navigate = useNavigate(); const { alert } = useAlert(); const handlePhoneChange = (e: ChangeEvent) => { setPhoneNumber(e.target.value); }; - const { mutate } = usePostFindId(); + const { mutate: findId } = usePostFindId(); const handleFindId = (e: React.FormEvent) => { e.preventDefault(); if (phoneNumber.length === 11) { const formattedPhoneNumber = formatphoneNumber(phoneNumber); //TODO) 타입 수정 - mutate({ phoneNumber: formattedPhoneNumber }); + findId({ phoneNumber: formattedPhoneNumber }); } else { alert('올바른 휴대폰번호를 입력해주세요.'); } @@ -43,9 +41,6 @@ export default function IdForm() { 요청 - ); } diff --git a/src/hooks/api/reset/usePostFindId.ts b/src/hooks/api/reset/usePostFindId.ts index c3e7407..3146ebc 100644 --- a/src/hooks/api/reset/usePostFindId.ts +++ b/src/hooks/api/reset/usePostFindId.ts @@ -1,14 +1,26 @@ +import { useToast } from '@components/ui/toast/use-toaster'; import { API_PATH } from '@constants/api'; +import { ROUTES } from '@constants/route'; import { post } from '@libs/api'; import { useMutation, type UseMutationOptions } from '@tanstack/react-query'; +import { useNavigate } from 'react-router-dom'; + interface FindIdRequest { phoneNumber: string; } export const usePostFindId = (options?: UseMutationOptions) => { + const navigate = useNavigate(); + const { toast } = useToast(); return useMutation({ - mutationFn: () => post(API_PATH.USER.RESET.FIND_ID), + mutationFn: ({phoneNumber}: FindIdRequest) => post(API_PATH.USER.RESET.FIND_ID, {phoneNumber}), + onSuccess: () => { + toast({ + title: '인증되었습니다.' + }); + navigate(ROUTES.RESET.PW_VERIFY); + }, ...options, }); }; From a8fa8988d44f10a31377369c9ad0a619981b02c9 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 10 Apr 2024 23:58:03 +0900 Subject: [PATCH 02/48] =?UTF-8?q?fix:=20=EC=9D=B8=EC=A6=9D=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=BD=94=EB=93=9C=20=EC=9D=BC=EC=B9=98=20=EC=8B=9C?= =?UTF-8?q?,=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9E=AC=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/reset/code.tsx | 17 ++++++++++++++--- src/hooks/api/reset/usePostPhoneConfirmCode.ts | 1 + 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/reset/code.tsx b/src/components/reset/code.tsx index b4cfb33..08f42c5 100644 --- a/src/components/reset/code.tsx +++ b/src/components/reset/code.tsx @@ -1,16 +1,19 @@ import { Button } from '@components/ui/button'; import { Input } from '@components/ui/input'; import Message from '@components/ui/text/message'; +import { ROUTES } from '@constants/route'; import { usePostPhoneConfirmCode } from '@hooks/api/reset/usePostPhoneConfirmCode'; import { usePostPhoneVerify } from '@hooks/api/reset/usePostPhoneVerify'; import { useAlert } from '@hooks/useAlert'; import React from 'react'; +import { useNavigate } from 'react-router-dom'; + export default function PwVerifyForm() { const [pwVerifyInfo, setPwVerifyInfo] = React.useState({ phoneNumber: '', code: '' }); const [token, setToken] = React.useState(''); const { alert } = useAlert(); - + const navigate = useNavigate(); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setPwVerifyInfo({ @@ -24,7 +27,7 @@ export default function PwVerifyForm() { setToken(res.token); }, }); - const { mutate: confirmCode } = usePostPhoneConfirmCode(); + const { mutate: confirmCode, isSuccess: codeSuccess } = usePostPhoneConfirmCode(); const handlePhoneVerify = () => { if (pwVerifyInfo.phoneNumber.length === 11) { @@ -46,6 +49,14 @@ export default function PwVerifyForm() { } }; + React.useEffect(() => { + if (codeSuccess) { + navigate(ROUTES.RESET.PW, { + state: token, + }); + } + }, [codeSuccess, navigate, token]); + return (
@@ -76,7 +87,7 @@ export default function PwVerifyForm() { onChange={handleChange} className='mb-4' /> - diff --git a/src/hooks/api/reset/usePostPhoneConfirmCode.ts b/src/hooks/api/reset/usePostPhoneConfirmCode.ts index 096680c..9c119df 100644 --- a/src/hooks/api/reset/usePostPhoneConfirmCode.ts +++ b/src/hooks/api/reset/usePostPhoneConfirmCode.ts @@ -2,6 +2,7 @@ import { API_PATH } from '@constants/api'; import { post } from '@libs/api'; import { useMutation, type UseMutationOptions } from '@tanstack/react-query'; + interface ResetConfirmCodeRequest { token: string; code: string; From 1b2ac10b83725ec67a72cfebdff42ff8c96a31c8 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 10 Apr 2024 23:59:44 +0900 Subject: [PATCH 03/48] =?UTF-8?q?fix:=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=9E=AC=EC=84=A4=EC=A0=95=20HTTP=20=EB=A9=94?= =?UTF-8?q?=EC=84=9C=EB=93=9C=20patch=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/reset/pw.tsx | 16 +++++----------- src/hooks/api/reset/usePostResetPw.ts | 15 ++++++++++++--- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/reset/pw.tsx b/src/components/reset/pw.tsx index d0216cd..9f1b384 100644 --- a/src/components/reset/pw.tsx +++ b/src/components/reset/pw.tsx @@ -4,16 +4,15 @@ import Message from '@components/ui/text/message'; import { usePostResetPw } from '@hooks/api/reset/usePostResetPw'; import { useAlert } from '@hooks/useAlert'; import React, { ChangeEvent } from 'react'; -import { useNavigate } from 'react-router-dom'; + export default function ResetPwForm({ token }: { token: string }) { const [password, setPassword] = React.useState(''); const [passwordConfirm, setPasswordConfirm] = React.useState(''); const [passwordMismatch, setPasswordMismatch] = React.useState(false); - const navigate = useNavigate(); - const { alert } = useAlert(); - const { mutate, isSuccess: resetSuccess } = usePostResetPw(); + const { alert } = useAlert(); + const { mutate } = usePostResetPw(); const handleInputChange = (e: ChangeEvent) => { const { name, value } = e.target; @@ -39,12 +38,7 @@ export default function ResetPwForm({ token }: { token: string }) { } }; - React.useEffect(() => { - if (resetSuccess) { - alert('비밀번호가 변경되었습니다.'); - navigate('/login'); - } - }, [resetSuccess]); + //TODO) 400 (NotSMSSentException) -> 인증번호로 이동 return (
@@ -72,7 +66,7 @@ export default function ResetPwForm({ token }: { token: string }) {

{'비밀번호는 영문과 숫자 1자이상을 포함하는 \n8~16자리여야합니다.'}

-
diff --git a/src/hooks/api/reset/usePostResetPw.ts b/src/hooks/api/reset/usePostResetPw.ts index 3cf3edb..9622437 100644 --- a/src/hooks/api/reset/usePostResetPw.ts +++ b/src/hooks/api/reset/usePostResetPw.ts @@ -1,6 +1,10 @@ +import { useToast } from '@components/ui/toast/use-toaster'; import { API_PATH } from '@constants/api'; -import { post } from '@libs/api'; +import { ROUTES } from '@constants/route'; +import { patch } from '@libs/api'; import { useMutation } from '@tanstack/react-query'; +import { useNavigate } from 'react-router-dom'; + interface ResetPwRequest { token: string; @@ -8,14 +12,19 @@ interface ResetPwRequest { } export const usePostResetPw = () => { + const navigate = useNavigate(); + const { toast } = useToast(); return useMutation({ mutationFn: ({ token, password }: ResetPwRequest) => - post(API_PATH.USER.RESET.RESET_PW, { + patch(API_PATH.USER.RESET.RESET_PW, { token, password, }), onSuccess: () => { - console.log('성공'); + toast({ + title: '비밀번호가 변경되었습니다.' + }); + navigate(ROUTES.LOGIN); }, }); }; From d95d4ea22effcdcaf5c06765bdb3b0fefd8639c0 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:46:13 +0900 Subject: [PATCH 04/48] =?UTF-8?q?feat:=20headerSection=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layouts/HeaderSection.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/components/layouts/HeaderSection.tsx diff --git a/src/components/layouts/HeaderSection.tsx b/src/components/layouts/HeaderSection.tsx new file mode 100644 index 0000000..c453f9d --- /dev/null +++ b/src/components/layouts/HeaderSection.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const HeaderSection = ({ children, className, ...props }: React.ComponentProps<'div'>) => { + return ( +
+ {children} +
+ ); +}; + +export default HeaderSection; \ No newline at end of file From 6917413e0e47c680c98587b971a2ec780a20c290 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:46:56 +0900 Subject: [PATCH 05/48] =?UTF-8?q?feat:=20ContentSection=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layouts/ContentSection.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/components/layouts/ContentSection.tsx diff --git a/src/components/layouts/ContentSection.tsx b/src/components/layouts/ContentSection.tsx new file mode 100644 index 0000000..9a468e8 --- /dev/null +++ b/src/components/layouts/ContentSection.tsx @@ -0,0 +1,23 @@ +import Nav from '@components/common/nav'; +import { AnimatePresence } from 'framer-motion'; +import React from 'react'; + +interface ContentSectionProps extends React.ComponentProps<'div'> { + showNav?: boolean; +} + +const ContentSection = ({ children, className, showNav, ...props }: ContentSectionProps) => { + return ( +
+ {children} + {showNav && ( + +
+ ); +}; + +export default ContentSection; From 9fea6c09691df3193ea62601d4f42005c9f152d5 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:49:04 +0900 Subject: [PATCH 06/48] =?UTF-8?q?refactor:=20Gnh=EC=9D=98=20title,=20subti?= =?UTF-8?q?tle=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/gnh/index.tsx | 33 ++++----- src/components/layouts/DefaultLayout.tsx | 91 ++---------------------- 2 files changed, 20 insertions(+), 104 deletions(-) diff --git a/src/components/common/gnh/index.tsx b/src/components/common/gnh/index.tsx index ea19bad..219c8aa 100644 --- a/src/components/common/gnh/index.tsx +++ b/src/components/common/gnh/index.tsx @@ -1,22 +1,17 @@ -import Selector, { TOption } from '@components/ui/selector'; import React from 'react'; -interface GnhProps { - headingText: string; - subHeadingText?: string; - subHeadingStyle: string; - headingStyle: string; - dropDown?: TOption[]; -} +const GnhTitle = ({ children, className }: React.ComponentProps<'h1'>) => { + return ( +

{children}

+ ); +}; + +const GnhSubtitle = ({ children, className }: React.ComponentProps<'h2'>) => { + return ( +

{children}

+ ); +}; + + +export { GnhTitle, GnhSubtitle }; -const Gnh = ({ headingText, subHeadingText, headingStyle, subHeadingStyle, dropDown }: GnhProps) => ( - - {headingText &&

{headingText}

} - {dropDown !== undefined && dropDown.length > 0 && subHeadingText ? ( - - ) : ( -

{subHeadingText}

- )} - -); -export default Gnh; diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx index c58777a..43ea8e6 100644 --- a/src/components/layouts/DefaultLayout.tsx +++ b/src/components/layouts/DefaultLayout.tsx @@ -1,88 +1,9 @@ -import Gnb from '@components/common/gnb'; -import Gnh from '@components/common/gnh'; -import Nav from '@components/common/nav'; -import Menu from '@components/main/menu'; -import { Toaster } from '@components/ui/toast/toaster'; -import { bottomNavSize } from '@constants/nav'; -import { useDefaultModal } from '@hooks/useDefaultModal'; -import { useEnrollmentStore } from '@stores/enrollment-store'; -import { gnbState } from '@stores/gnb-store'; -import { gnhState } from '@stores/gnh-store'; -import { menuStore } from '@stores/menu-store'; -import { navStore } from '@stores/nav-store'; -import { isLoggedIn } from '@utils/token'; -import { AnimatePresence } from 'framer-motion'; -import React, { useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; - -import { WithReactChildren } from '@/types/default-interfaces'; - -type DefaultLayoutProps = WithReactChildren & React.HTMLAttributes; - -export default function DefaultLayout({ children, ...props }: DefaultLayoutProps) { - const { title, backButton, isMain } = gnbState(); - const { headingText, subHeadingText, headingStyle, subHeadingStyle, dropDown } = gnhState(); - const { fullscreen, rounded, margin } = navStore(); - const { menuOpen } = menuStore(); - const defaultStyle = 'w-[390px] mx-auto bg-black'; - - const { enrollment } = useEnrollmentStore(); - const { pathname } = useLocation(); - const { modal } = useDefaultModal(); - - useEffect(() => { - if (pathname.indexOf('/mypage') === -1 && enrollment === false && isLoggedIn) { - setTimeout(() => { - modal({ - content: '회원 정보 업데이트 후 이용 가능합니다.', - target: '/mypage/update', - disableCancle: true, - }); - }, 500); - } - }, [pathname, enrollment]); +import React from 'react'; +const DefaultLayout = ({ children, className, ...props }: React.ComponentProps<'div'>) => { return ( -
- {menuOpen ? ( - - ) : ( - <> - : isMain ? : null} - center={title ? {title} : null} - /> - {headingText && ( - - )} -
-
- {children} -
-
- - - {!fullscreen && ( - <> -
+
{children}
); -} +}; + +export default DefaultLayout; From 7df7e142747f591edf8541f10078744a598ebb57 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:51:22 +0900 Subject: [PATCH 07/48] =?UTF-8?q?refactor:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95=20*=20Gnb,=20ContentSection=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/signup/index.tsx | 37 ++++++++++++++++-------------------- src/pages/signup/info.tsx | 36 ++++++++++++++++------------------- src/pages/signup/success.tsx | 13 ------------- src/pages/signup/terms.tsx | 37 ++++++++++++++++-------------------- 4 files changed, 48 insertions(+), 75 deletions(-) diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx index 8ade374..c0ace4f 100644 --- a/src/pages/signup/index.tsx +++ b/src/pages/signup/index.tsx @@ -1,28 +1,23 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { ContentSection } from '@components/layouts'; import VerifyForm from '@components/signup/verify'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; -export default function SignupVerify() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: true, - margin: '140px', - rounded: true, - }); - }); +export default function SignupVerify() { return ( -
-

Sign up

-

단국대학교 총학생회 회원가입

-

학생 인증

- -
+ + + + + +
+

Sign up

+

단국대학교 총학생회 회원가입

+

학생 인증

+ +
+ + ); } diff --git a/src/pages/signup/info.tsx b/src/pages/signup/info.tsx index e4fde70..9a576a4 100644 --- a/src/pages/signup/info.tsx +++ b/src/pages/signup/info.tsx @@ -1,11 +1,12 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { ContentSection } from '@components/layouts'; import InfoForm from '@components/signup/info'; import { ROUTES } from '@constants/route'; import { useAlert } from '@hooks/useAlert'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React, { useCallback } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; + export default function SignupInfo() { const navigate = useNavigate(); const location = useLocation(); @@ -13,18 +14,6 @@ export default function SignupInfo() { const { state } = location || {}; const data = state?.data ?? null; const signupToken = data?.signupToken ?? null; - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: true, - margin: '41px', - rounded: true, - }); - }); const handleVerify = useCallback(() => { if (!data) { @@ -38,11 +27,18 @@ export default function SignupInfo() { }, [handleVerify]); return ( -
-

Sign up

-

단국대학교 총학생회 회원가입

-

회원 정보 입력

- -
+ + + + + +
+

Sign up

+

단국대학교 총학생회 회원가입

+

회원 정보 입력

+ +
+ + ); } diff --git a/src/pages/signup/success.tsx b/src/pages/signup/success.tsx index 48499ba..e537136 100644 --- a/src/pages/signup/success.tsx +++ b/src/pages/signup/success.tsx @@ -1,29 +1,16 @@ import SvgIcon from '@components/common/icon/SvgIcon'; import { Button } from '@components/ui/button'; import { ROUTES } from '@constants/route'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; import { useNavigate } from 'react-router-dom'; export default function SignupSuccess() { - const { setLayout } = useLayout(); const navigate = useNavigate(); const handleGoLogin = () => { navigate(ROUTES.LOGIN); }; - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: true, - margin: '140px', - rounded: true, - }); - }); return (
diff --git a/src/pages/signup/terms.tsx b/src/pages/signup/terms.tsx index 3ebd06a..f7b9a2f 100644 --- a/src/pages/signup/terms.tsx +++ b/src/pages/signup/terms.tsx @@ -1,28 +1,23 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { ContentSection } from '@components/layouts'; import Term from '@components/signup/term'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; -export default function SignupTerms() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: true, - margin: '30px', - rounded: true, - }); - }); +export default function SignupTerms() { return ( -
-

Sign up

-

단국대학교 총학생회 회원가입

-

이용약관동의

- -
+ + + + + +
+

Sign up

+

단국대학교 총학생회 회원가입

+

이용약관동의

+ +
+ + ); } From c45cbf6ff93cf32d9ba152dd6aa6de4b2769886a Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:52:27 +0900 Subject: [PATCH 08/48] =?UTF-8?q?refactor:=20reset=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EC=B2=B4=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/reset/resetId.tsx | 28 ++++++-------- src/pages/reset/resetIdPw.tsx | 72 +++++++++++++++++------------------ src/pages/reset/resetPw.tsx | 28 ++++++-------- src/pages/reset/verifyPw.tsx | 29 ++++++-------- 4 files changed, 67 insertions(+), 90 deletions(-) diff --git a/src/pages/reset/resetId.tsx b/src/pages/reset/resetId.tsx index c87fa17..141acb0 100644 --- a/src/pages/reset/resetId.tsx +++ b/src/pages/reset/resetId.tsx @@ -1,26 +1,20 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { ContentSection } from '@components/layouts'; import IdForm from '@components/reset/id'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; -export default function ResetId() { - const { setLayout } = useLayout(); - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: false, - margin: '140px', - rounded: true, - }); - }); +export default function ResetId() { return ( -

Login

-

ID 찾기

- + + + + +

Login

+

ID 찾기

+ + ); } diff --git a/src/pages/reset/resetIdPw.tsx b/src/pages/reset/resetIdPw.tsx index e729802..cb30668 100644 --- a/src/pages/reset/resetIdPw.tsx +++ b/src/pages/reset/resetIdPw.tsx @@ -1,14 +1,15 @@ import Box from '@components/ui/box'; import { Button } from '@components/ui/button'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; +import { HEADING_TEXT } from '@constants/heading'; import { ROUTES } from '@constants/route'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; +import { Gnb, GnbGoBack } from '@/components/common/gnb'; +import { GnhSubtitle, GnhTitle } from '@/components/common/gnh'; +import { ContentSection, HeaderSection } from '@/components/layouts'; + export default function ResetIdPw() { - const { setLayout } = useLayout(); const navigate = useNavigate(); const [searchParams] = useSearchParams(); @@ -20,44 +21,39 @@ export default function ResetIdPw() { navigate(`${ROUTES.RESET.PW_VERIFY}?${searchParams.toString()}`); }; - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.LOGIN.HEAD, - subHeadingText: HEADING_TEXT.RESET_ID_PW.SUBHEAD, - headingStyle: HEADING_STYLE.RESET.HEAD, - subHeadingStyle: HEADING_STYLE.RESET.SUBHEAD, - rounded: true, - }); - }); - return ( -
-
+ + + + + + {HEADING_TEXT.LOGIN.HEAD} + {HEADING_TEXT.RESET_ID_PW.SUBHEAD} + + +
+ +

ID 찾기

+

+ {'잃어버린 ID에 대해서 휴대전화 번호를 입력하면,\n 문자를 통해서 ID를 제공 받습니다.'} +

+ + +
-

ID 찾기

-

- {'잃어버린 ID에 대해서 휴대전화 번호를 입력하면,\n 문자를 통해서 ID를 제공 받습니다.'} +

PW 재설정

+

+ { + '잃어버린 PW에 대해서 휴대전화번호를 입력하면,\n 인증번호 제공을 통해 새로운 비밀번호를 설정합니다.' + }

- -
- -

PW 재설정

-

- { - '잃어버린 PW에 대해서 휴대전화번호를 입력하면,\n 인증번호 제공을 통해 새로운 비밀번호를 설정합니다.' - } -

- - -
+ + + ); } diff --git a/src/pages/reset/resetPw.tsx b/src/pages/reset/resetPw.tsx index 3667313..39bd461 100644 --- a/src/pages/reset/resetPw.tsx +++ b/src/pages/reset/resetPw.tsx @@ -1,26 +1,15 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { ContentSection } from '@components/layouts'; import ResetPwForm from '@components/reset/pw'; import { ROUTES } from '@constants/route'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; + export default function ResetPw() { const location = useLocation(); const navigate = useNavigate(); const { state } = location; - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: false, - margin: '140px', - rounded: true, - }); - }); React.useEffect(() => { if (!state) { @@ -31,9 +20,14 @@ export default function ResetPw() { return ( -

Login

-

PW 재설정

- + + + + +

Login

+

PW 재설정

+ + ); } diff --git a/src/pages/reset/verifyPw.tsx b/src/pages/reset/verifyPw.tsx index 45a4a39..5a86748 100644 --- a/src/pages/reset/verifyPw.tsx +++ b/src/pages/reset/verifyPw.tsx @@ -1,27 +1,20 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { ContentSection } from '@components/layouts'; import PwVerifyForm from '@components/reset/code'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; import React from 'react'; -export default function VerifyPw() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: null, - backButton: true, - isMain: false, - fullscreen: false, - margin: '140px', - rounded: true, - }); - }); +export default function VerifyPw() { return ( -

Login

-

PW 재설정

- + + + + +

Login

+

PW 재설정

+ + ); } From 54056325396a4b00b9090ff4ead85191b014f5d0 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:54:34 +0900 Subject: [PATCH 09/48] =?UTF-8?q?refactor:=20council=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EC=B2=B4=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95=20*=20Gnb,=20HeaderSection,=20Co?= =?UTF-8?q?ntentSection=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/council/index.tsx | 76 ++++++++++++------------ src/pages/council/location.tsx | 95 ++++++++++++++++-------------- src/pages/council/organization.tsx | 50 ++++++++-------- src/pages/council/recruitment.tsx | 80 ++++++++++++------------- 4 files changed, 151 insertions(+), 150 deletions(-) diff --git a/src/pages/council/index.tsx b/src/pages/council/index.tsx index d8e9228..697a57d 100644 --- a/src/pages/council/index.tsx +++ b/src/pages/council/index.tsx @@ -1,50 +1,48 @@ +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { ContentSection, HeaderSection } from '@components/layouts'; import SinglePageLayout from '@components/layouts/SinglePageLayout'; import Box from '@components/ui/box'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; +import Selector from '@components/ui/selector'; +import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading'; import React from 'react'; -export default function Greeting() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.COUNCIL.HEAD, - subHeadingText: HEADING_TEXT.GREETING.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); +export default function Greeting() { return ( - - - - - -
-

그대의 청춘에 단국을 담다,

-
-
-

+ + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.COUNCIL.HEAD} + + + + + + + + +

+

그대의 청춘에 단국을 담다,

+
+
+

안녕하십니까 단국대학교 죽전 캠퍼스 학우 여러분,
- 55대 담다 총학생회입니다.
-

-

+ 55대 담다 총학생회입니다.
+

+

2023년, 우리 단국은 코로나19로부터 벗어나 제약 없는 대면 학교생활을 맞이하게 됩니다.
저희 담다 총학생회는 학우 여러분의 청춘의 한 페이지에 단국을 담을 수 있도록, -

-

학우 여러분의 다양한 목소리를 담아 더 나은 학교를 만들기 위해 노력하겠습니다.

- 감사합니다. -
- - +

+

학우 여러분의 다양한 목소리를 담아 더 나은 학교를 만들기 위해 노력하겠습니다.

+ 감사합니다. +
+ + + + ); } diff --git a/src/pages/council/location.tsx b/src/pages/council/location.tsx index cb5a323..0d5e3d8 100644 --- a/src/pages/council/location.tsx +++ b/src/pages/council/location.tsx @@ -1,53 +1,60 @@ import map from '@assets/images/map.png'; +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { ContentSection, HeaderSection } from '@components/layouts'; import SinglePageLayout from '@components/layouts/SinglePageLayout'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; +import Selector from '@components/ui/selector'; +import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading'; import React from 'react'; -export default function Location() { - const { setLayout } = useLayout(); - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.COUNCIL.HEAD, - subHeadingText: HEADING_TEXT.LOCATION.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); +export default function Location() { + const LOCATION_INFO = [ + { + KEY: '위치', + VALUE: '해당관 406호 총학생회실' + }, + { + KEY: '주소', + VALUE: '(16890) 경기도 용인시 수지구 죽전동 1491 단국대학교 혜당관 406호 총학생회실', + }, + { + KEY: '전화', + VALUE: '031)8005-2680-1', + }, + { + KEY: '이메일', + VALUE: 'dkudamda@gmail.com', + }, + { + KEY: '인스타그램', + VALUE: '@dku_damda', + }, + ]; return ( - - 단국대학교 총학생회 지도 -
    -
  • -

    위치

    - 혜당관 406호 총학생회실 -
    • -
  • -

    주소

    - (16890) 경기도 용인시 수지구 죽전동 1491 단국대학교 혜당관 406호 총학생회실 -
    • -
  • -

    전화

    - {'031)'}8005-2680-1 -
    • -
  • -

    이메일

    - dkudamda@gmail.com -
    • -
  • -

    인스타그램

    - @dku_damda -
    • -
- + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.COUNCIL.HEAD} + + + + + 단국대학교 총학생회 지도 +
    + {LOCATION_INFO.map((info, index) => ( +
  • +

    {info.KEY}

    + {info.VALUE} +
    • + ))} +
+ + + ); } diff --git a/src/pages/council/organization.tsx b/src/pages/council/organization.tsx index c8e0c5c..5ad0a2b 100644 --- a/src/pages/council/organization.tsx +++ b/src/pages/council/organization.tsx @@ -1,36 +1,34 @@ import Organization01 from '@assets/images/organization-01.jpg'; import Organization02 from '@assets/images/organization-02.jpg'; +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { ContentSection, HeaderSection } from '@components/layouts'; import SinglePageLayout from '@components/layouts/SinglePageLayout'; import Box from '@components/ui/box/index'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; +import Selector from '@components/ui/selector'; +import { COUNCIL_LIST, HEADING_TEXT } from '@constants/heading'; import React from 'react'; -export default function Organization() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.COUNCIL.HEAD, - subHeadingText: HEADING_TEXT.ORGANIZATION.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); +export default function Organization() { return ( - - - - - - + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.COUNCIL.HEAD} + + + + + + + + + + + ); } diff --git a/src/pages/council/recruitment.tsx b/src/pages/council/recruitment.tsx index 94d716d..c7b642f 100644 --- a/src/pages/council/recruitment.tsx +++ b/src/pages/council/recruitment.tsx @@ -1,54 +1,52 @@ +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { ContentSection, HeaderSection } from '@components/layouts'; import SinglePageLayout from '@components/layouts/SinglePageLayout'; import Box from '@components/ui/box'; -import { FileBox } from '@components/ui/box/PostBox'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; +import FileBox from '@components/ui/box/FileBox'; +import Selector from '@components/ui/selector'; +import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading'; import React from 'react'; -export default function Recruitment() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.RECRUIT.HEAD, - subHeadingText: HEADING_TEXT.RECRUIT.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); +export default function Recruitment() { return ( - - -

[55대 담다 총학생회 재학생 집행부 모집 ]

-

-

+ + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.RECRUIT.HEAD} + + + + + +

[55대 담다 총학생회 재학생 집행부 모집 ]

+

+

그대의 청춘에 단국을 담다 🫴안녕하십니까 단국대학교 학우 여러분, 55대 담다 총학생회입니다. 담다 총학생회와 함께 2023년 2학기를 만들어 나갈 단국대학교 재학생 집행부를 모집합니다! -

-

-
    -
  • ✅️ 지원기간: 2023년 7월 13일 ~ 2023년 7월 18일
    • -
  • ✅️ 면접기간: 2023년 7월 19일 ~ 2023년 7월 22일
    • -
  • ✅️ 지원방법: 지원서 다운로드 후 작성하여dkudamda@gmail.com 으로 제출
    • -
-

- +

+

+
    +
  • ✅️ 지원기간: 2023년 7월 13일 ~ 2023년 7월 18일
    • +
  • ✅️ 면접기간: 2023년 7월 19일 ~ 2023년 7월 22일
    • +
  • ✅️ 지원방법: 지원서 다운로드 후 작성하여dkudamda@gmail.com 으로 제출
    • +
+

+ ❗️반드시 지원 기간 내에 지원서를 제출해 주시기 바랍니다. - - + + ❗️* 문의는 총학생회장 박성헌 (010-6453-7733) 부총학생회장 박범성 (010-5246-3764)로 부탁드립니다. - - - - + + + + + + ); } From b3f52dd2d5db721c1cf75823810ac671d4f18cf6 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Tue, 16 Apr 2024 23:59:06 +0900 Subject: [PATCH 10/48] =?UTF-8?q?refactor:=20Gnb=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20*=20Gnb,=20GnbLogo,?= =?UTF-8?q?=20GnbGoBack,=20GnbTitle=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20*=20=EA=B0=81=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=95=9C=EB=B2=88=EC=97=90=20export=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/gnb/index.tsx | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/common/gnb/index.tsx b/src/components/common/gnb/index.tsx index 4c21e50..8403245 100644 --- a/src/components/common/gnb/index.tsx +++ b/src/components/common/gnb/index.tsx @@ -5,11 +5,10 @@ import React from 'react'; import { Link, useNavigate } from 'react-router-dom'; interface Props extends React.ComponentProps<'header'> { - left?: JSX.Element | null; - center?: JSX.Element | null; + children: React.ReactNode; } -export default function Gnb({ left, center, ...props }: Props) { +const Gnb = ({ children, ...props }: Props) => { return (
- {left && left} - {center && center} + {children}
); -} +}; -Gnb.Logo = function Logo() { +const GnbLogo = () => { return ( 단국대학교 로고 @@ -33,11 +31,19 @@ Gnb.Logo = function Logo() { ); }; -Gnb.GoBack = function GoBack() { +const GnbGoBack = () => { const navigate = useNavigate(); - return navigate(-1)} />; + return ( + navigate(-1)} /> + ); }; -Gnb.Title = function Title({ children }: { children: string }) { - return

{children}

; + +const GnbTitle = ({ children }: { children: string }) => { + return ( +

{children}

+ ); }; + + +export { Gnb, GnbLogo, GnbGoBack, GnbTitle }; \ No newline at end of file From 639c734f18c28ee9bb6213bb4c3f549fe9a8ec1c Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 17 Apr 2024 00:06:06 +0900 Subject: [PATCH 11/48] =?UTF-8?q?refactor:=20=EC=A0=9C=ED=9C=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/business/[id].tsx | 67 +++++++++++++++++++----------------- src/pages/business/index.tsx | 64 +++++++++++++++++----------------- 2 files changed, 67 insertions(+), 64 deletions(-) diff --git a/src/pages/business/[id].tsx b/src/pages/business/[id].tsx index b799a6b..43cad01 100644 --- a/src/pages/business/[id].tsx +++ b/src/pages/business/[id].tsx @@ -1,45 +1,48 @@ import Carousel from '@components/common/carousel'; +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { ContentSection, HeaderSection } from '@components/layouts'; import PostDetailLayout from '@components/layouts/PostDetailLayout'; -import PostBox, { FileBox } from '@components/ui/box/PostBox'; +import FileBox from '@components/ui/box/FileBox'; +import PostBox from '@components/ui/box/PostBox'; import Collapse from '@components/ui/collapse'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useLayout } from '@hooks/useLayout'; -import React, { useEffect } from 'react'; +import Selector from '@components/ui/selector'; +import { BUSINESS_LIST, HEADING_TEXT } from '@constants/heading'; +import React from 'react'; import { useParams, useLocation } from 'react-router-dom'; +import { CoalitionType } from '@/types/coalition'; + + export default function BusinessDetail() { - const { setLayout } = useLayout(); const params = useParams(); - const category = params.category; + const category = params.id?.toUpperCase(); const location = useLocation(); const coalition = location.state; - useEffect(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.BUSINESS.HEAD, - subHeadingText: - Object.getOwnPropertyDescriptor(HEADING_TEXT.BUSINESS.SUBHEAD, category as string)?.value ?? '', - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.BUSINESS.DROPDOWN, - }); - }, [category]); return ( - - - - - -

{coalition?.createdAt}

-

{coalition?.title}

-

{coalition?.body}

- - {coalition.files.length > 0 && } - + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.BUSINESS.HEAD} + + + + + + + + +

{coalition?.createdAt}

+

{coalition?.title}

+

{coalition?.body}

+ + {coalition.files.length > 0 && } + + + ); } diff --git a/src/pages/business/index.tsx b/src/pages/business/index.tsx index 1158c66..2bebb00 100644 --- a/src/pages/business/index.tsx +++ b/src/pages/business/index.tsx @@ -1,22 +1,26 @@ +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { ContentSection, HeaderSection } from '@components/layouts'; import Board from '@components/ui/board'; import IntersectionBox from '@components/ui/box/intersectionBox'; import ItemList from '@components/ui/item-list'; +import Selector from '@components/ui/selector'; import { Spinner } from '@components/ui/spinner/indext'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; +import { HEADING_TEXT, BUSINESS_LIST } from '@constants/heading'; +import { ROUTES } from '@constants/route'; import { useGetCoalitionList } from '@hooks/api/coalition/useGetCoalitionList'; import { CoalitionContentResponse } from '@hooks/api/coalition/useGetCoalitionList'; import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; -import { useLayout } from '@hooks/useLayout'; import React, { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useParams } from 'react-router-dom'; -import { ROUTES } from '@/constants/route'; + import { CoalitionType } from '@/types/coalition'; + export default function BusinessBoard() { const category = useParams(); - const { setLayout } = useLayout(); const navigate = useNavigate(); const categoryType = category.category?.toUpperCase(); @@ -32,23 +36,6 @@ export default function BusinessBoard() { refetch(); }, [category, refetch]); - useEffect(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.BUSINESS.HEAD, - subHeadingText: - Object.getOwnPropertyDescriptor(HEADING_TEXT.BUSINESS.SUBHEAD, categoryType as CoalitionType) - ?.value ?? '', - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.BUSINESS.DROPDOWN, - }); - }, [category]); - const goToBusinessDetail = (item: CoalitionContentResponse) => { navigate(ROUTES.BUSINESS.DETAIL(category.category?.toLowerCase() as string, item.id.toString()), { state: item, @@ -56,16 +43,29 @@ export default function BusinessBoard() { }; return ( - - {coalition?.pages.map((page) => - page.content.map((item) => ( - goToBusinessDetail(item)}> - - - )), - )} - - {isFetchingNextPage && } - + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.BUSINESS.HEAD} + + + + + {coalition?.pages.map((page) => + page.content.map((item) => ( + goToBusinessDetail(item)}> + + + )), + )} + + {isFetchingNextPage && } + + + ); } From d89a45f9c76c98b9aa8ee991e214746696f832be Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 17 Apr 2024 00:06:43 +0900 Subject: [PATCH 12/48] =?UTF-8?q?refactor:=20=EA=B3=B5=EC=A7=80=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/notice/[id].tsx | 69 ++++++++++++++++------------------- src/pages/notice/index.tsx | 73 +++++++++++++------------------------- src/pages/notice/post.tsx | 35 ++++++++++++------ 3 files changed, 78 insertions(+), 99 deletions(-) diff --git a/src/pages/notice/[id].tsx b/src/pages/notice/[id].tsx index 3e60a0f..29774e8 100644 --- a/src/pages/notice/[id].tsx +++ b/src/pages/notice/[id].tsx @@ -1,47 +1,38 @@ -import Carousel from '@components/common/carousel'; +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { HeaderSection, ContentSection } from '@components/layouts'; import PostDetailLayout from '@components/layouts/PostDetailLayout'; -import PostBox, { FileBox } from '@components/ui/box/PostBox'; -import Collapse from '@components/ui/collapse'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useGetNoticeItem } from '@hooks/api/notice/useGetNoticeItem'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; -import React from 'react'; +import NoticeItem from '@components/notice/[id]'; +import Selector from '@components/ui/selector'; +import NoticeSkeleton from '@components/ui/skeleton/main'; +import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading'; +import React, { Suspense } from 'react'; import { useParams } from 'react-router-dom'; -export default function NoticeDetail() { - const { setLayout } = useLayout(); - const params = useParams(); - const id = params.id; - const noticeId = id?.toString(); - - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.COUNCIL.HEAD, - subHeadingText: HEADING_TEXT.NOTICE.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); - const { data: notice } = useGetNoticeItem(noticeId as string); +export default function NoticeDetail() { + const params = useParams(); + const id = params.id as string; + const noticeId = id.toString(); + return ( - - - - - -

{notice.title}

-

{notice.body}

- - {notice.files.length && } - + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.COUNCIL.HEAD} + + + + + }> + + + + + ); } diff --git a/src/pages/notice/index.tsx b/src/pages/notice/index.tsx index 2e38dbb..92ac98a 100644 --- a/src/pages/notice/index.tsx +++ b/src/pages/notice/index.tsx @@ -1,54 +1,29 @@ -import Board from '@components/ui/board'; -import IntersectionBox from '@components/ui/box/intersectionBox'; -import ItemList from '@components/ui/item-list'; -import { Spinner } from '@components/ui/spinner/indext'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { ROUTES } from '@constants/route'; -import { useGetNoticeList } from '@hooks/api/notice/useGetNoticeList'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; -import { useLayout } from '@hooks/useLayout'; -import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { HeaderSection, ContentSection } from '@components/layouts'; +import NoticeList from '@components/notice'; +import Selector from '@components/ui/selector'; +import NoticeSkeleton from '@components/ui/skeleton/notice'; +import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading'; +import React, { Fragment, Suspense } from 'react'; -export default function NoticeBoard() { - const { setLayout } = useLayout(); - - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.COUNCIL.HEAD, - subHeadingText: HEADING_TEXT.NOTICE.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); - - const navigate = useNavigate(); - const { data: notice, fetchNextPage, isFetchingNextPage } = useGetNoticeList(); - const intersectionRef = useInfiniteScroll(fetchNextPage); - - const goToNoticeDetail = (itemId: number) => { - const noticeId = itemId.toString(); - navigate(ROUTES.NOTICE.ID(noticeId)); - }; +export default function NoticeBoard() { return ( - - {notice?.pages.map((page) => - page.content.map((item) => ( - goToNoticeDetail(item.id)}> - - - )), - )} - - {isFetchingNextPage && } - + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.COUNCIL.HEAD} + + + + }> + + + + ); } diff --git a/src/pages/notice/post.tsx b/src/pages/notice/post.tsx index 12cf4e0..93aa51a 100644 --- a/src/pages/notice/post.tsx +++ b/src/pages/notice/post.tsx @@ -1,3 +1,6 @@ +import { Gnb, GnbGoBack } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { HeaderSection, ContentSection } from '@components/layouts'; import Post from '@components/main/post'; import { usePostNoticeForm } from '@hooks/api/notice/usePostNoticeForm'; import { PostFormInfo } from '@hooks/api/notice/usePostNoticeForm'; @@ -5,6 +8,7 @@ import { useFormUpload } from '@hooks/useFormUpload'; import useImageUpload from '@hooks/useImageUpload'; import React from 'react'; + export default function NoticePost() { const initFormInfo: PostFormInfo = { title: '', @@ -13,7 +17,6 @@ export default function NoticePost() { }; const { formInfo, setFormInfo, handleUpdate } = useFormUpload(initFormInfo); - const { mutate } = usePostNoticeForm(); const handleSubmit = (e: React.FormEvent) => { @@ -32,15 +35,25 @@ export default function NoticePost() { const { imageList, addImage, deleteImage } = useImageUpload(); return ( - + + + + + + 공지 + + + + + ); } From 4ff229be5065761ba100aabd57368b776377997a Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 17 Apr 2024 00:07:19 +0900 Subject: [PATCH 13/48] =?UTF-8?q?style:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20margin=20=EA=B0=92=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/selector/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ui/selector/index.tsx b/src/components/ui/selector/index.tsx index fe238d1..0132a43 100644 --- a/src/components/ui/selector/index.tsx +++ b/src/components/ui/selector/index.tsx @@ -33,7 +33,7 @@ export default function Selector({ list, subHeadingText }: { list: TOption[]; su const SubHeadingText = ({ className, id }: SubHeadingProps) => { return ( -
+

{selected}

@@ -43,11 +43,11 @@ export default function Selector({ list, subHeadingText }: { list: TOption[]; su return ( {!open ? ( - + ) : ( -
    +
      {list .filter((option) => option.text !== subHeadingText) .map((option, index) => ( From 19047315083268f46794d058e2f383cd1277a71c Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 17 Apr 2024 14:35:39 +0900 Subject: [PATCH 14/48] =?UTF-8?q?feat:=20menu=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layouts/DefaultLayout.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx index 43ea8e6..078f6c4 100644 --- a/src/components/layouts/DefaultLayout.tsx +++ b/src/components/layouts/DefaultLayout.tsx @@ -1,8 +1,17 @@ +import Menu from '@components/main/menu'; +import { menuStore } from '@stores/menu-store'; import React from 'react'; const DefaultLayout = ({ children, className, ...props }: React.ComponentProps<'div'>) => { + const { menuOpen } = menuStore(); return ( -
      {children}
      +
      + {menuOpen ? ( + + ) : ( + children + )} +
      ); }; From d398b6df6cc1b7aa4e5dc246dc9f0fef3ee92740 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 17 Apr 2024 14:37:01 +0900 Subject: [PATCH 15/48] =?UTF-8?q?design:=20currentIndex=EC=9D=98=20indicat?= =?UTF-8?q?or=20=EA=B2=80=EC=A0=95=EC=83=89=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/carousel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/carousel/index.tsx b/src/components/common/carousel/index.tsx index e1fd730..efe8021 100644 --- a/src/components/common/carousel/index.tsx +++ b/src/components/common/carousel/index.tsx @@ -47,7 +47,7 @@ export default function Carousel({ data, className }: CarouselProps) {
{data.map((_, index) => ( - + ))}
{data.map((item, index) => ( From 1f89e2c37c5f6a95a5c1e4a1ad3413908069aa97 Mon Sep 17 00:00:00 2001 From: sy-paik Date: Wed, 17 Apr 2024 14:47:10 +0900 Subject: [PATCH 16/48] =?UTF-8?q?refactor:=20=EC=B4=9D=ED=95=99=EC=83=9D?= =?UTF-8?q?=ED=9A=8C=20lazy,=20suspense=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F?= =?UTF-8?q?=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?*=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80,=20=EC=B4=9D?= =?UTF-8?q?=ED=95=99=EC=83=9D=ED=9A=8C=EC=9D=98=20=EC=8A=A4=EC=BC=88?= =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EC=B6=94=EA=B0=80=20*=20=EC=B4=9D?= =?UTF-8?q?=ED=95=99=EC=83=9D=ED=9A=8C=20HeaderSection=EC=9D=98=20padding?= =?UTF-8?q?=EC=97=90=EC=84=9C=20margin=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/business/index.tsx | 48 +++++++ src/components/conference/index.tsx | 33 +++++ src/components/notice/[id].tsx | 23 ++++ src/components/petition/index.tsx | 42 +++++++ src/components/ui/skeleton/cafeteria.tsx | 19 +++ src/components/ui/skeleton/conference.tsx | 16 +++ src/components/ui/skeleton/council.tsx | 21 +--- src/components/ui/skeleton/main.tsx | 49 ++++---- src/components/ui/skeleton/mainBoard.tsx | 31 +++++ src/components/ui/skeleton/notice.tsx | 48 ++----- src/pages/business/index.tsx | 53 ++------ src/pages/conference/index.tsx | 75 ++++------- src/pages/index.tsx | 78 ++++++------ src/pages/notice/index.tsx | 6 +- src/pages/petition/[id].tsx | 145 +++++++++++----------- src/pages/petition/index.tsx | 67 +++------- src/pages/rule/index.tsx | 71 ++++------- 17 files changed, 444 insertions(+), 381 deletions(-) create mode 100644 src/components/business/index.tsx create mode 100644 src/components/conference/index.tsx create mode 100644 src/components/notice/[id].tsx create mode 100644 src/components/petition/index.tsx create mode 100644 src/components/ui/skeleton/cafeteria.tsx create mode 100644 src/components/ui/skeleton/conference.tsx create mode 100644 src/components/ui/skeleton/mainBoard.tsx diff --git a/src/components/business/index.tsx b/src/components/business/index.tsx new file mode 100644 index 0000000..4258643 --- /dev/null +++ b/src/components/business/index.tsx @@ -0,0 +1,48 @@ +import Board from '@components/ui/board'; +import IntersectionBox from '@components/ui/box/intersectionBox'; +import ItemList from '@components/ui/item-list'; +import { Spinner } from '@components/ui/spinner/indext'; +import { ROUTES } from '@constants/route'; +import { CoalitionContentResponse, useGetCoalitionList } from '@hooks/api/coalition/useGetCoalitionList'; +import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; +import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { CoalitionType } from '@/types/coalition'; + +export default function BusinessList({categoryType}: {categoryType: string}) { + const navigate = useNavigate(); + + const { + data: coalition, + refetch, + fetchNextPage, + isFetchingNextPage, + } = useGetCoalitionList(categoryType as CoalitionType); + const intersectionRef = useInfiniteScroll(fetchNextPage); + + useEffect(() => { + refetch(); + }, [categoryType, refetch]); + + + const goToBusinessDetail = (item: CoalitionContentResponse) => { + navigate(ROUTES.BUSINESS.DETAIL(categoryType.toLowerCase() as string, item.id.toString()), { + state: item, + }); + }; + + return ( + + {coalition?.pages.map((page) => + page.content.map((item) => ( + goToBusinessDetail(item)}> + + + )), + )} + + {isFetchingNextPage && } + + ); +} \ No newline at end of file diff --git a/src/components/conference/index.tsx b/src/components/conference/index.tsx new file mode 100644 index 0000000..83c9242 --- /dev/null +++ b/src/components/conference/index.tsx @@ -0,0 +1,33 @@ +import Board from '@components/ui/board'; +import IntersectionBox from '@components/ui/box/intersectionBox'; +import { Spinner } from '@components/ui/spinner/indext'; +import { Date } from '@components/ui/text/board'; +import { useGetConference } from '@hooks/api/conference/useGetConference'; +import { ConferenceContentResponse } from '@hooks/api/conference/useGetConference'; +import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; +import React from 'react'; + +export default function ConferenceList() { + const { data: conference, fetchNextPage, isFetchingNextPage } = useGetConference(); + const intersectionRef = useInfiniteScroll(fetchNextPage); + + const openFile = (item: ConferenceContentResponse) => { + window.open(item.files[0].url); + }; + return ( + + {conference?.pages.map((page) => + page.content.map((item) => ( + openFile(item)}> +
+

{item.title}

+ +
+ + )), + )} + + {isFetchingNextPage && } + + ); +} \ No newline at end of file diff --git a/src/components/notice/[id].tsx b/src/components/notice/[id].tsx new file mode 100644 index 0000000..f10b3df --- /dev/null +++ b/src/components/notice/[id].tsx @@ -0,0 +1,23 @@ +import Carousel from '@components/common/carousel'; +import FileBox from '@components/ui/box/FileBox'; +import PostBox from '@components/ui/box/PostBox'; +import Collapse from '@components/ui/collapse'; +import { useGetNoticeItem } from '@hooks/api/notice/useGetNoticeItem'; +import React from 'react'; + + +export default function NoticeItem({noticeId}: {noticeId: string}) { + const { data: notice } = useGetNoticeItem(noticeId as string); + return ( + + + + {notice?.images.length > 0 && ()} + +

{notice.title}

+

{notice.body}

+ + {notice.files.length && } + + ); +} \ No newline at end of file diff --git a/src/components/petition/index.tsx b/src/components/petition/index.tsx new file mode 100644 index 0000000..a22990c --- /dev/null +++ b/src/components/petition/index.tsx @@ -0,0 +1,42 @@ +import Board from '@components/ui/board'; +import IntersectionBox from '@components/ui/box/intersectionBox'; +import { Spinner } from '@components/ui/spinner/indext'; +import { ROUTES } from '@constants/route'; +import { useGetPetition } from '@hooks/api/petition/useGetPetiition'; +import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; +import { getDaysBetween, getPetitionStatus } from '@pages/petition'; +import React from 'react'; +import { useNavigate } from 'react-router-dom'; + + + +export default function PetitionList() { + const navigate = useNavigate(); + const { data: petition, fetchNextPage, isFetchingNextPage } = useGetPetition(); + const intersectionRef = useInfiniteScroll(fetchNextPage); + + const goToPetitionDetail = (itemId: number) => { + navigate(ROUTES.PETITION.ID(itemId.toString())); + }; + return ( + + {petition?.pages.map((page) => + page.content.map((item) => ( + goToPetitionDetail(item.id)}> +
+

{getPetitionStatus(item.status)}

+

{item.title}

+

+ {getDaysBetween(item.expiresAt!) > 0 + ? `D-${getDaysBetween(item.expiresAt!)}` + : '만료'} +

+
+ + )), + )} + + {isFetchingNextPage && } + + ); +} \ No newline at end of file diff --git a/src/components/ui/skeleton/cafeteria.tsx b/src/components/ui/skeleton/cafeteria.tsx new file mode 100644 index 0000000..bc22fe3 --- /dev/null +++ b/src/components/ui/skeleton/cafeteria.tsx @@ -0,0 +1,19 @@ +import MainSectionLayout from '@components/layouts/MainSectionLayout'; +import { Skeleton } from '@components/ui/skeleton/base'; +import React from 'react'; + +export default function CafeteriaSkeleton() { + return ( + + +
+
    +
    • +
    • +
    • +
+ +
+ + ); +} \ No newline at end of file diff --git a/src/components/ui/skeleton/conference.tsx b/src/components/ui/skeleton/conference.tsx new file mode 100644 index 0000000..fc3ab5f --- /dev/null +++ b/src/components/ui/skeleton/conference.tsx @@ -0,0 +1,16 @@ +import Board from '@components/ui/board'; +import { Skeleton } from '@components/ui/skeleton/base'; +import React from 'react'; + +export default function ConferenceSkeleton() { + const skeletonItems = Array.from({ length: 7 }, (_, index) => ( +
  • + +
    • + )); + return ( + + {skeletonItems} + + ); +} diff --git a/src/components/ui/skeleton/council.tsx b/src/components/ui/skeleton/council.tsx index 34305ce..ea7bf07 100644 --- a/src/components/ui/skeleton/council.tsx +++ b/src/components/ui/skeleton/council.tsx @@ -3,23 +3,14 @@ import { Skeleton } from '@components/ui/skeleton/base'; import React from 'react'; export default function CouncilSkeleton() { + const skeletonItems = Array.from({ length: 6 }, (_, index) => ( +
  • + +
    • + )); return ( -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • + {skeletonItems}     ); } diff --git a/src/components/ui/skeleton/main.tsx b/src/components/ui/skeleton/main.tsx index 66843cf..2747ba7 100644 --- a/src/components/ui/skeleton/main.tsx +++ b/src/components/ui/skeleton/main.tsx @@ -1,31 +1,28 @@ -import MainSectionLayout from '@components/layouts/MainSectionLayout'; +import { Gnb, GnbLogo } from '@components/common/gnb'; +import { GnhTitle, GnhSubtitle } from '@components/common/gnh'; +import { HeaderSection } from '@components/layouts'; import { Skeleton } from '@components/ui/skeleton/base'; -import React from 'react'; +import MainBoardSkeleton from '@components/ui/skeleton/mainBoard'; +import { HEADING_TEXT } from '@constants/heading'; +import React, { Fragment } from 'react'; -export default function NoticeSkeleton() { + +export default function MainSkeleton() { return ( - -
    - - + + + + + + {HEADING_TEXT.MAIN.HEAD} + {HEADING_TEXT.MAIN.SUBHEAD} + +
    + +
    +
    +
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    - +     ); -} +} \ No newline at end of file diff --git a/src/components/ui/skeleton/mainBoard.tsx b/src/components/ui/skeleton/mainBoard.tsx new file mode 100644 index 0000000..ac640f0 --- /dev/null +++ b/src/components/ui/skeleton/mainBoard.tsx @@ -0,0 +1,31 @@ +import MainSectionLayout from '@components/layouts/MainSectionLayout'; +import { Skeleton } from '@components/ui/skeleton/base'; +import React from 'react'; + +export default function MainBoardSkeleton() { + return ( + +
    + + +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +     + ); +} diff --git a/src/components/ui/skeleton/notice.tsx b/src/components/ui/skeleton/notice.tsx index a11d5fb..a8bd854 100644 --- a/src/components/ui/skeleton/notice.tsx +++ b/src/components/ui/skeleton/notice.tsx @@ -3,44 +3,20 @@ import { Skeleton } from '@components/ui/skeleton/base'; import React from 'react'; export default function NoticeSkeleton() { + const noticeList = Array.from({ length: 5 }, (_, index) => ( + +
    + +
    + + +
    +
    +     + )); return ( - -
    - -
    - - -
    -
    -     - -
    - -
    - - -
    -
    -     - -
    - -
    - - -
    -
    -     - -
    - -
    - - -
    -
    -     + {noticeList}     ); } diff --git a/src/pages/business/index.tsx b/src/pages/business/index.tsx index 2bebb00..3f0c956 100644 --- a/src/pages/business/index.tsx +++ b/src/pages/business/index.tsx @@ -1,47 +1,20 @@ import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; import { GnhTitle } from '@components/common/gnh'; import { ContentSection, HeaderSection } from '@components/layouts'; -import Board from '@components/ui/board'; -import IntersectionBox from '@components/ui/box/intersectionBox'; -import ItemList from '@components/ui/item-list'; import Selector from '@components/ui/selector'; -import { Spinner } from '@components/ui/spinner/indext'; +import NoticeSkeleton from '@components/ui/skeleton/notice'; import { HEADING_TEXT, BUSINESS_LIST } from '@constants/heading'; -import { ROUTES } from '@constants/route'; -import { useGetCoalitionList } from '@hooks/api/coalition/useGetCoalitionList'; -import { CoalitionContentResponse } from '@hooks/api/coalition/useGetCoalitionList'; -import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; -import React, { useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; +import React, { Suspense, lazy } from 'react'; import { useParams } from 'react-router-dom'; - import { CoalitionType } from '@/types/coalition'; +const BusinessList = lazy(() => import('@components/business/index')); -export default function BusinessBoard() { - const category = useParams(); - const navigate = useNavigate(); - const categoryType = category.category?.toUpperCase(); - - const { - data: coalition, - refetch, - fetchNextPage, - isFetchingNextPage, - } = useGetCoalitionList(categoryType as CoalitionType); - const intersectionRef = useInfiniteScroll(fetchNextPage); - - useEffect(() => { - refetch(); - }, [category, refetch]); - - const goToBusinessDetail = (item: CoalitionContentResponse) => { - navigate(ROUTES.BUSINESS.DETAIL(category.category?.toLowerCase() as string, item.id.toString()), { - state: item, - }); - }; +export default function BusinessBoard() { + const { category } = useParams(); + const categoryType = category?.toUpperCase() as string; return ( @@ -54,17 +27,9 @@ export default function BusinessBoard() { ?.value ?? ''} /> - - {coalition?.pages.map((page) => - page.content.map((item) => ( - goToBusinessDetail(item)}> - - - )), - )} - - {isFetchingNextPage && } - + }> + + ); diff --git a/src/pages/conference/index.tsx b/src/pages/conference/index.tsx index 016e153..395d011 100644 --- a/src/pages/conference/index.tsx +++ b/src/pages/conference/index.tsx @@ -1,56 +1,29 @@ -import Board from '@components/ui/board'; -import IntersectionBox from '@components/ui/box/intersectionBox'; -import CouncilSkeleton from '@components/ui/skeleton/council'; -import { Spinner } from '@components/ui/spinner/indext'; -import { Date } from '@components/ui/text/board'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; -import { useGetConference } from '@hooks/api/conference/useGetConference'; -import { ConferenceContentResponse } from '@hooks/api/conference/useGetConference'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useInfiniteScroll } from '@hooks/useInfiniteScroll'; -import { useLayout } from '@hooks/useLayout'; -import React, { Suspense } from 'react'; +import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb'; +import { GnhTitle } from '@components/common/gnh'; +import { HeaderSection, ContentSection } from '@components/layouts'; +import Selector from '@components/ui/selector'; +import ConferenceSkeleton from '@components/ui/skeleton/conference'; +import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading'; +import React, { Suspense, lazy } from 'react'; -export default function ConferenceBoard() { - const { setLayout } = useLayout(); - const { data: conference, fetchNextPage, isFetchingNextPage } = useGetConference(); - const intersectionRef = useInfiniteScroll(fetchNextPage); - - useEffectOnce(() => { - setLayout({ - title: HEADING_TEXT.COUNCIL.HEAD, - backButton: true, - isMain: false, - fullscreen: false, - headingText: HEADING_TEXT.COUNCIL.HEAD, - subHeadingText: HEADING_TEXT.CONFERENCE.SUBHEAD, - headingStyle: HEADING_STYLE.COUNCIL.HEAD, - subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD, - rounded: true, - dropDown: HEADING_STYLE.COUNCIL.DROPDOWN, - }); - }); - - const openFile = (item: ConferenceContentResponse) => { - window.open(item.files[0].url); - }; +const ConferenceList = lazy(() => import('@components/conference/index')); +export default function ConferenceBoard() { return ( - }> - - {conference?.pages.map((page) => - page.content.map((item) => ( - openFile(item)}> -
    -

    {item.title}

    - -
    -     - )), - )} - - {isFetchingNextPage && } -     -     + + + + {HEADING_TEXT.COUNCIL.HEAD} + + + {HEADING_TEXT.COUNCIL.HEAD} + + + + }> + + + + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3e01897..ce4c539 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,55 +1,55 @@ -import Carousel from '@components/common/carousel'; -import { Cafeteria, AppDownload, Notice, Petition } from '@components/main/'; -import NoticeSkeleton from '@components/ui/skeleton/main'; +// import Carousel from '@components/common/carousel'; +import { HeaderSection, ContentSection } from '@components/layouts'; +import { AppDownload } from '@components/main/'; +import CafeteriaSkeleton from '@components/ui/skeleton/cafeteria'; import { Spinner } from '@components/ui/spinner/indext'; -import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading'; +import { HEADING_TEXT } from '@constants/heading'; import useGetMain from '@hooks/api/main/useGetMain'; -import { useEffectOnce } from '@hooks/useEffectOnce'; -import { useLayout } from '@hooks/useLayout'; -import React, { Suspense } from 'react'; +import React, { Suspense, lazy } from 'react'; +import { Gnb, GnbLogo } from '@/components/common/gnb'; +import { GnhSubtitle, GnhTitle } from '@/components/common/gnh'; +import Nav from '@/components/common/nav'; + +const Carousel = lazy(() => import('@components/common/carousel')); +const Notice = lazy(() => import('@components/main/notice')); +const Petition = lazy(() => import('@components/main/petition')); +const Cafeteria = lazy(() => import('@components/main/cafeteria')); export default function Main() { - const { setLayout } = useLayout(); const { data: main } = useGetMain(); - useEffectOnce(() => { - setLayout({ - title: null, - backButton: false, - isMain: true, - fullscreen: false, - headingText: HEADING_TEXT.MAIN.HEAD, - subHeadingText: HEADING_TEXT.MAIN.SUBHEAD, - headingStyle: HEADING_STYLE.MAIN.HEAD, - subHeadingStyle: HEADING_STYLE.MAIN.SUBHEAD, - rounded: false, - }); - }); //TODO) Cafeteria skeleton 추가 return ( -
    - }> - - -
    -
    - }> + {/* */} + + + + + {HEADING_TEXT.MAIN.HEAD} + {HEADING_TEXT.MAIN.SUBHEAD} + + +
    + }> + + +
    +
    - - }> - - 로딩중
    }> - -     - -
    + }> + + + +
    + +