From 3e925c1e6ad0107ae5560e3006fa402b474c891b Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 1 Dec 2024 17:10:47 +0900 Subject: [PATCH 01/24] =?UTF-8?q?chore/#482=20:=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=EC=9A=A9=20=EB=A7=88=EC=9D=BC=20=EB=A1=9C=EA=B3=A0=20?= =?UTF-8?q?import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/index.tsx | 3 +++ src/assets/svgs/mobileHeaderLogo.svg | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/assets/svgs/mobileHeaderLogo.svg diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 48202095..c3d4e8a1 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -94,3 +94,6 @@ export { default as GroupCuriousIc } from './groupCuriousIcn.svg?react'; export { default as GroupViewIc } from './groupViewIcn.svg?react'; // export { default as LoadingIc } from './loadingSvg.svg?react'; + +//헤더용 마일 아이콘 +export { default as MobileHeaderImg } from './mobileHeaderLogo.svg?react'; diff --git a/src/assets/svgs/mobileHeaderLogo.svg b/src/assets/svgs/mobileHeaderLogo.svg new file mode 100644 index 00000000..29be1247 --- /dev/null +++ b/src/assets/svgs/mobileHeaderLogo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + From 9e8e4358e0748420564e0ae7a18dbb838450ca8a Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 1 Dec 2024 17:12:07 +0900 Subject: [PATCH 02/24] =?UTF-8?q?feat/#482=20:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=95=84=EC=9B=83=EB=90=9C=20=EA=B2=BD=EC=9A=B0=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=ED=97=A4=EB=8D=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 33 ++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 80e0efcd..ba9fdf51 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import Button from './Button'; import LogInOutBtn from './LogInOutBtn'; -import { HeaderLogoIc } from '../../assets/svgs'; +import { HeaderLogoIc, MobileHeaderImg } from '../../assets/svgs'; import { default as useNavigateHome, default as useNavigateToHome, @@ -15,6 +15,8 @@ import CreateGroupBtn from '../../pages/groupFeed/components/CreateGroupBtn'; import MyGroupDropDown from '../../pages/groupFeed/components/MyGroupDropDown'; import { useFetchHeaderGroup } from '../../pages/groupFeed/hooks/queries'; import logout from '../../utils/logout'; +import Responsive from './Responsive/Responsive'; +import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; interface onClickEditProps { onClickEditSave: () => void; @@ -61,10 +63,19 @@ export const UnAuthorizationHeader = () => { const { navigateToLogin } = useNavigateLoginWithPath(); return ( - - - 로그인 - + <> + + + + 로그인 + + + + + + + + ); }; @@ -124,6 +135,12 @@ export const DefaultHeader = () => { ); }; +const MobileHeaderIcon = styled(MobileHeaderImg)` + flex-shrink: 0; + + cursor: pointer; +`; + const HeaderWrapper = styled.div` position: fixed; top: 0%; @@ -138,6 +155,12 @@ const HeaderWrapper = styled.div` background-color: ${({ theme }) => theme.colors.white}; border-bottom: 1px solid ${({ theme }) => theme.colors.gray30}; + + @media ${MOBILE_MEDIA_QUERY} { + height: 5.6rem; + padding-right: 2rem; + padding-left: 2rem; + } `; const HeaderLayout = styled.div` From fc72717683e40d2f72d5d62efcb4074bd9387230 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 1 Dec 2024 17:42:13 +0900 Subject: [PATCH 03/24] =?UTF-8?q?feat/#482=20:=20=EB=A1=9C=EA=B3=A0?= =?UTF-8?q?=EB=A7=8C=20=EC=9E=88=EB=8A=94=20=ED=97=A4=EB=8D=94(GroupInvite?= =?UTF-8?q?,congrats)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 16 +++++-- src/pages/groupInvite/GroupInvite.tsx | 13 ++++-- .../groupJoinCongrats/GroupJoinCongrats.tsx | 43 +++++++++++-------- 3 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index ba9fdf51..ff4abf8c 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -129,9 +129,18 @@ export const EditorTempExistHeader = ({ onClickSubmit }: OnClickTempExistProps) export const DefaultHeader = () => { const { navigateToHome } = useNavigateHome(); return ( - - - + <> + + + + + + + + + + + ); }; @@ -157,6 +166,7 @@ const HeaderWrapper = styled.div` border-bottom: 1px solid ${({ theme }) => theme.colors.gray30}; @media ${MOBILE_MEDIA_QUERY} { + width: 100%; height: 5.6rem; padding-right: 2rem; padding-left: 2rem; diff --git a/src/pages/groupInvite/GroupInvite.tsx b/src/pages/groupInvite/GroupInvite.tsx index 953b7fc7..1afba6fa 100644 --- a/src/pages/groupInvite/GroupInvite.tsx +++ b/src/pages/groupInvite/GroupInvite.tsx @@ -59,9 +59,9 @@ const GroupInvite = () => { }, [data?.data.moims.length]); return ( - <> + + - <Spacing marginBottom="4.8" /> @@ -79,7 +79,6 @@ const GroupInvite = () => { <Spacing marginBottom="7.7" /> </GroupInviteWrapper> - <FullModal isModalOpen={isModalOpen} content={MODAL.ALERT_GROUP_LIMIT}> <FullModalBtn isPrimary={false} @@ -90,16 +89,22 @@ const GroupInvite = () => { }} /> </FullModal> - </> + </InviteWrapper> ); }; export default GroupInvite; +const InviteWrapper = styled.div` + display: flex; + width: 100%; +`; + const GroupInviteWrapper = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; width: 82.6rem; + margin: 0 auto; `; diff --git a/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx b/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx index 014579db..0960ab07 100644 --- a/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx +++ b/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx @@ -17,34 +17,43 @@ const GroupJoinCongrats = () => { navigate(`/group/${groupId}`); }; return ( - <GroupJoinCongratsWrapper> + <JoinWrapper> <DefaultHeader /> - <Spacing marginBottom="15.6" /> - <GroupJoinCongratsContainer> - <GroupJoinTitleWrapper> - <GroupJoinTitle>{location?.state?.moimTitle} 가입을 축하해요!</GroupJoinTitle> - <GroupJoinText>글 모임에서 당신의 소중한 이야기를 들려주세요.</GroupJoinText> - </GroupJoinTitleWrapper> - <Spacing marginBottom="4.8" /> - <picture> - <source srcSet={groupJoinCongratsWebp} /> - <img src={groupJoinCongratsIlust} /> - </picture> - <Spacing marginBottom="4.8" /> - <GoToGroupFeedBtn onClick={onClickGoToGroupFeedBtn}>모임 페이지 보러가기</GoToGroupFeedBtn> - </GroupJoinCongratsContainer> - </GroupJoinCongratsWrapper> + <GroupJoinCongratsWrapper> + <Spacing marginBottom="15.6" /> + <GroupJoinCongratsContainer> + <GroupJoinTitleWrapper> + <GroupJoinTitle>{location?.state?.moimTitle} 가입을 축하해요!</GroupJoinTitle> + <GroupJoinText>글 모임에서 당신의 소중한 이야기를 들려주세요.</GroupJoinText> + </GroupJoinTitleWrapper> + <Spacing marginBottom="4.8" /> + <picture> + <source srcSet={groupJoinCongratsWebp} /> + <img src={groupJoinCongratsIlust} /> + </picture> + <Spacing marginBottom="4.8" /> + <GoToGroupFeedBtn onClick={onClickGoToGroupFeedBtn}> + 모임 페이지 보러가기 + </GoToGroupFeedBtn> + </GroupJoinCongratsContainer> + </GroupJoinCongratsWrapper> + </JoinWrapper> ); }; export default GroupJoinCongrats; +const JoinWrapper = styled.div` + display: flex; + width: 100%; +`; + const GroupJoinCongratsWrapper = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; - width: 82.6rem; + width: 100%; `; const GroupJoinCongratsContainer = styled.main` From a9493d50991259d53060408e6c52f0fcd079e870 Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Sun, 1 Dec 2024 17:47:15 +0900 Subject: [PATCH 04/24] =?UTF-8?q?chore/#482=20:=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EB=A1=9C=EA=B3=A0=EB=A5=BC=20=EA=B8=B0=EC=A1=B4=20?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=88=ED=95=B4=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EA=B2=83=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/index.tsx | 3 -- src/assets/svgs/mobileHeaderLogo.svg | 18 ----------- src/components/commons/Header.tsx | 47 +++++++++------------------- 3 files changed, 14 insertions(+), 54 deletions(-) delete mode 100644 src/assets/svgs/mobileHeaderLogo.svg diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index c3d4e8a1..48202095 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -94,6 +94,3 @@ export { default as GroupCuriousIc } from './groupCuriousIcn.svg?react'; export { default as GroupViewIc } from './groupViewIcn.svg?react'; // export { default as LoadingIc } from './loadingSvg.svg?react'; - -//헤더용 마일 아이콘 -export { default as MobileHeaderImg } from './mobileHeaderLogo.svg?react'; diff --git a/src/assets/svgs/mobileHeaderLogo.svg b/src/assets/svgs/mobileHeaderLogo.svg deleted file mode 100644 index 29be1247..00000000 --- a/src/assets/svgs/mobileHeaderLogo.svg +++ /dev/null @@ -1,18 +0,0 @@ -<svg width="70" height="17" viewBox="0 0 70 17" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g id="headerLogoImg"> -<g id="Group 2"> -<g id="Group 26"> -<path id="Vector" d="M23.2353 14.206C23.2353 13.0419 22.2916 12.0981 21.1274 12.0981C19.9633 12.0981 19.0195 13.0419 19.0195 14.206C19.0195 15.3702 19.9633 16.3139 21.1274 16.3139C22.2916 16.3139 23.2353 15.3702 23.2353 14.206Z" fill="#010101"/> -<g id="Group 25"> -<path id="Vector_2" d="M5.28851 1.6157V5.50306C5.28851 5.88997 4.97488 6.2036 4.58797 6.2036H0.700548C0.313638 6.2036 0 6.51723 0 6.90414V16.0804C0 16.4673 0.313638 16.7809 0.700548 16.7809H17.8099C18.1968 16.7809 18.5105 16.4673 18.5105 16.0804V12.193C18.5105 11.8061 18.8241 11.4925 19.211 11.4925H23.0984C23.4853 11.4925 23.799 11.1789 23.799 10.7919V1.6157C23.799 1.2288 23.4853 0.915161 23.0984 0.915161H5.98906C5.60215 0.915161 5.28851 1.2288 5.28851 1.6157Z" fill="#010101"/> -</g> -</g> -</g> -<g id="Group 17"> -<path id="Vector_3" d="M27.9515 0.685425H32.8182C32.9474 0.685425 33.0617 0.768861 33.1006 0.891157L36.5936 11.5688C36.6313 11.7048 36.6667 11.834 36.6998 11.9597L37.014 11.9563C37.046 11.8317 37.0803 11.7037 37.1169 11.5688L40.4556 0.894586C40.4944 0.770004 40.6087 0.685425 40.739 0.685425H45.5795C45.7441 0.685425 45.8767 0.818008 45.8767 0.982593V16.0788C45.8767 16.2433 45.7441 16.3759 45.5795 16.3759H42.8558C42.6912 16.3759 42.5587 16.2433 42.5587 16.0788V6.28934C42.5587 6.28134 42.5587 5.88603 42.5587 5.88603H42.127L38.9686 16.1645C38.9309 16.2902 38.8154 16.3759 38.684 16.3759H35.0413C34.9122 16.3759 34.7979 16.2925 34.759 16.1702L31.3071 5.96202H30.9472C30.9472 5.99288 30.9472 6.28134 30.9472 6.3122V16.0788C30.9472 16.2433 30.8146 16.3759 30.65 16.3759H27.9515C27.7869 16.3759 27.6543 16.2433 27.6543 16.0788V0.982593C27.6543 0.818008 27.7869 0.685425 27.9515 0.685425Z" fill="#010101"/> -<path id="Vector_4" d="M48.6553 5.3912H51.3115C51.4761 5.3912 51.6087 5.52378 51.6087 5.68837V16.0767C51.6087 16.2413 51.4761 16.3739 51.3115 16.3739H48.6553C48.4907 16.3739 48.3581 16.2413 48.3581 16.0767V5.68837C48.3581 5.52378 48.4907 5.3912 48.6553 5.3912ZM48.1455 1.77032C48.1455 0.716511 48.885 -0.00012207 49.9834 -0.00012207C51.3241 -0.00012207 52.1779 1.11426 51.6761 2.60467C51.5516 2.97385 51.1344 3.35331 50.7583 3.45503C49.2473 3.86193 48.1455 3.08357 48.1455 1.77032Z" fill="#010101"/> -<path id="Vector_5" d="M54.3235 0.685425H56.9798C57.1444 0.685425 57.277 0.818008 57.277 0.982593V16.0788C57.277 16.2433 57.1444 16.3759 56.9798 16.3759H54.3235C54.159 16.3759 54.0264 16.2433 54.0264 16.0788V0.982593C54.0264 0.818008 54.159 0.685425 54.3235 0.685425Z" fill="#010101"/> -<path id="Vector_6" d="M58.9054 10.8612C58.9054 7.34208 61.236 5.0116 64.554 5.0116C67.8721 5.0116 70.0003 7.3878 70.0003 11.019V11.3493C70.0003 11.5139 69.8677 11.6465 69.7031 11.6465H62.5149C62.3412 11.6465 62.2006 11.795 62.2189 11.9688C62.3664 13.346 63.3287 14.3141 64.6203 14.3141C65.5724 14.3141 66.3713 13.8364 66.6114 12.9689C66.6479 12.8374 66.7634 12.7448 66.8994 12.7448H69.5911C69.774 12.7448 69.9168 12.9106 69.8848 13.0912C69.5019 15.2056 67.5566 16.7795 64.6203 16.7795C61.3034 16.7795 58.9043 14.673 58.9043 10.8624L58.9054 10.8612ZM66.3622 9.51599C66.5428 9.51599 66.6571 9.37649 66.6571 9.17767C66.6011 8.08719 65.6836 7.34208 64.5311 7.34208C62.9295 7.34208 62.1954 8.36742 62.1954 9.16785C62.1954 9.34258 62.3401 9.51599 62.5309 9.51599H66.3622Z" fill="#010101"/> -</g> -</g> -</svg> diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index ff4abf8c..e6980290 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import Button from './Button'; import LogInOutBtn from './LogInOutBtn'; -import { HeaderLogoIc, MobileHeaderImg } from '../../assets/svgs'; +import { HeaderLogoIc } from '../../assets/svgs'; import { default as useNavigateHome, default as useNavigateToHome, @@ -15,7 +15,7 @@ import CreateGroupBtn from '../../pages/groupFeed/components/CreateGroupBtn'; import MyGroupDropDown from '../../pages/groupFeed/components/MyGroupDropDown'; import { useFetchHeaderGroup } from '../../pages/groupFeed/hooks/queries'; import logout from '../../utils/logout'; -import Responsive from './Responsive/Responsive'; + import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; interface onClickEditProps { @@ -63,19 +63,10 @@ export const UnAuthorizationHeader = () => { const { navigateToLogin } = useNavigateLoginWithPath(); return ( - <> - <Responsive only="desktop"> - <HeaderWrapper> - <HeaderLogoIcon onClick={navigateToHome} /> - <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> - </HeaderWrapper> - </Responsive> - <Responsive only="mobile"> - <HeaderWrapper> - <MobileHeaderIcon onClick={navigateToHome}></MobileHeaderIcon> - </HeaderWrapper> - </Responsive> - </> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome} /> + <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> + </HeaderWrapper> ); }; @@ -129,27 +120,12 @@ export const EditorTempExistHeader = ({ onClickSubmit }: OnClickTempExistProps) export const DefaultHeader = () => { const { navigateToHome } = useNavigateHome(); return ( - <> - <Responsive only="desktop"> - <HeaderWrapper> - <HeaderLogoIcon onClick={navigateToHome} /> - </HeaderWrapper> - </Responsive> - <Responsive only="mobile"> - <HeaderWrapper> - <MobileHeaderIcon onClick={navigateToHome}></MobileHeaderIcon> - </HeaderWrapper> - </Responsive> - </> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome}></HeaderLogoIcon> + </HeaderWrapper> ); }; -const MobileHeaderIcon = styled(MobileHeaderImg)` - flex-shrink: 0; - - cursor: pointer; -`; - const HeaderWrapper = styled.div` position: fixed; top: 0%; @@ -191,4 +167,9 @@ const HeaderLogoIcon = styled(HeaderLogoIc)` flex-shrink: 0; cursor: pointer; + + @media ${MOBILE_MEDIA_QUERY} { + width: 7rem; + height: 1.68rem; + } `; From 0a40f6b2582cb64c66161baf887744a5682ca775 Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Sun, 1 Dec 2024 18:04:39 +0900 Subject: [PATCH 05/24] =?UTF-8?q?feat/#482=20:=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=EC=9E=90=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/hamburgerIcon.svg | 7 +++++++ src/assets/svgs/index.tsx | 3 +++ src/assets/svgs/linkIcon.svg | 3 +++ src/components/commons/Header.tsx | 31 ++++++++++++++++++++++++++++++- src/pages/admin/Admin.tsx | 4 ++-- 5 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 src/assets/svgs/hamburgerIcon.svg create mode 100644 src/assets/svgs/linkIcon.svg diff --git a/src/assets/svgs/hamburgerIcon.svg b/src/assets/svgs/hamburgerIcon.svg new file mode 100644 index 00000000..1682b89f --- /dev/null +++ b/src/assets/svgs/hamburgerIcon.svg @@ -0,0 +1,7 @@ +<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g id="Group 33728"> +<path id="Vector 1674" d="M1.5 1.5H20.5" stroke="#747474" stroke-width="2" stroke-linecap="round"/> +<path id="Vector 1675" d="M1.5 8H20.5" stroke="#747474" stroke-width="2" stroke-linecap="round"/> +<path id="Vector 1676" d="M1.5 14.5H20.5" stroke="#747474" stroke-width="2" stroke-linecap="round"/> +</g> +</svg> diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 48202095..022d9662 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -94,3 +94,6 @@ export { default as GroupCuriousIc } from './groupCuriousIcn.svg?react'; export { default as GroupViewIc } from './groupViewIcn.svg?react'; // export { default as LoadingIc } from './loadingSvg.svg?react'; + +export { default as LinkIc } from './linkIcon.svg?react'; +export { default as HamburgerIc } from './hamburgerIcon.svg?react'; diff --git a/src/assets/svgs/linkIcon.svg b/src/assets/svgs/linkIcon.svg new file mode 100644 index 00000000..53fb9343 --- /dev/null +++ b/src/assets/svgs/linkIcon.svg @@ -0,0 +1,3 @@ +<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path id="Vector" d="M9.98585 15.6945C10.0907 15.799 10.1739 15.9232 10.2307 16.06C10.2875 16.1967 10.3167 16.3433 10.3167 16.4914C10.3167 16.6394 10.2875 16.7861 10.2307 16.9228C10.1739 17.0595 10.0907 17.1837 9.98585 17.2883L9.50585 17.7683C8.99631 18.2797 8.39045 18.685 7.72328 18.9608C7.05612 19.2366 6.3409 19.3775 5.61897 19.3751C4.53178 19.3755 3.46892 19.0534 2.56484 18.4495C1.66077 17.8457 0.956109 16.9872 0.540013 15.9828C0.123917 14.9784 0.015082 13.8732 0.227278 12.8069C0.439474 11.7406 0.963165 10.7612 1.7321 9.99263L4.98991 6.73482C5.68285 6.04198 6.54838 5.54695 7.49689 5.30096C8.44541 5.05498 9.44243 5.06698 10.3847 5.33574C11.3271 5.60449 12.1804 6.12023 12.8565 6.82955C13.5325 7.53887 14.0067 8.416 14.2299 9.37013C14.2669 9.5152 14.2745 9.66619 14.2524 9.81425C14.2303 9.96232 14.1788 10.1045 14.101 10.2324C14.0232 10.3603 13.9207 10.4714 13.7994 10.5592C13.6782 10.647 13.5406 10.7097 13.3948 10.7436C13.249 10.7776 13.0979 10.7821 12.9503 10.7569C12.8027 10.7317 12.6617 10.6772 12.5354 10.5968C12.4091 10.5164 12.3002 10.4116 12.2149 10.2885C12.1297 10.1655 12.0699 10.0266 12.039 9.88013C11.9065 9.31691 11.626 8.79928 11.2265 8.38077C10.827 7.96225 10.323 7.65803 9.76652 7.49956C9.21006 7.34109 8.62137 7.33412 8.06131 7.47937C7.50126 7.62462 6.99016 7.91682 6.58085 8.32575L3.32304 11.5836C2.86892 12.0373 2.55956 12.6155 2.43408 13.2451C2.30861 13.8747 2.37265 14.5273 2.6181 15.1205C2.86356 15.7137 3.27942 16.2207 3.81307 16.5776C4.34672 16.9344 4.9742 17.1249 5.61616 17.1251C6.04271 17.1264 6.46526 17.043 6.85937 16.8798C7.25347 16.7167 7.61128 16.4769 7.9121 16.1745L8.39116 15.6945C8.49569 15.5895 8.61995 15.5061 8.75678 15.4493C8.89361 15.3924 9.04033 15.3631 9.18851 15.3631C9.33668 15.3631 9.4834 15.3924 9.62023 15.4493C9.75706 15.5061 9.88132 15.5895 9.98585 15.6945ZM20.2655 2.23482C19.2344 1.20405 17.8362 0.625 16.3782 0.625C14.9202 0.625 13.522 1.20405 12.4908 2.23482L12.0118 2.71388C11.8004 2.92522 11.6817 3.21187 11.6817 3.51075C11.6817 3.80964 11.8004 4.09628 12.0118 4.30763C12.2231 4.51897 12.5098 4.6377 12.8087 4.6377C13.1075 4.6377 13.3942 4.51897 13.6055 4.30763L14.0855 3.82763C14.6947 3.21846 15.5209 2.87623 16.3824 2.87623C17.2439 2.87623 18.0701 3.21846 18.6793 3.82763C19.2885 4.4368 19.6307 5.26301 19.6307 6.1245C19.6307 6.986 19.2885 7.81221 18.6793 8.42138L15.4158 11.6745C15.115 11.9769 14.7572 12.2167 14.3631 12.3798C13.969 12.543 13.5465 12.6264 13.1199 12.6251C12.3882 12.6246 11.6781 12.3769 11.1048 11.9222C10.5315 11.4675 10.1286 10.8325 9.96147 10.1201C9.89384 9.82947 9.71352 9.57758 9.46017 9.41987C9.20682 9.26217 8.9012 9.21156 8.61054 9.27919C8.31988 9.34682 8.06799 9.52715 7.91028 9.78049C7.75257 10.0338 7.70197 10.3395 7.7696 10.6301C8.05189 11.8366 8.73345 12.9123 9.70375 13.6828C10.6741 14.4533 11.8762 14.8735 13.1152 14.8751H13.1199C13.8422 14.8771 14.5577 14.7359 15.225 14.4596C15.8923 14.1833 16.4982 13.7774 17.0077 13.2654L20.2655 10.0076C20.776 9.4973 21.1809 8.89141 21.4571 8.22458C21.7334 7.55774 21.8756 6.84302 21.8756 6.12122C21.8756 5.39943 21.7334 4.6847 21.4571 4.01787C21.1809 3.35103 20.776 2.74515 20.2655 2.23482Z" fill="#6139D1"/> +</svg> diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index e6980290..04469476 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import Button from './Button'; import LogInOutBtn from './LogInOutBtn'; -import { HeaderLogoIc } from '../../assets/svgs'; +import { HamburgerIc, HeaderLogoIc, LinkIc } from '../../assets/svgs'; import { default as useNavigateHome, default as useNavigateToHome, @@ -17,6 +17,7 @@ import { useFetchHeaderGroup } from '../../pages/groupFeed/hooks/queries'; import logout from '../../utils/logout'; import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; +import Responsive from './Responsive/Responsive'; interface onClickEditProps { onClickEditSave: () => void; @@ -126,6 +127,27 @@ export const DefaultHeader = () => { ); }; +// 관리자 헤더 +export const AdminHeader = () => { + const { navigateToHome } = useNavigateHome(); + return ( + <> + <Responsive only="desktop"> + <AuthorizationHeader /> + </Responsive> + <Responsive only="mobile"> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome} /> + <MobileHeaderButtons> + <LinkIc /> + <HamburgerIc /> + </MobileHeaderButtons> + </HeaderWrapper> + </Responsive> + </> + ); +}; + const HeaderWrapper = styled.div` position: fixed; top: 0%; @@ -149,6 +171,13 @@ const HeaderWrapper = styled.div` } `; +const MobileHeaderButtons = styled.div` + display: flex; + gap: 1.6rem; + align-items: center; + ${({ theme }) => theme.fonts.mSubtitle4}; +`; + const HeaderLayout = styled.div` display: flex; gap: 2rem; diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index d7b5ab6e..9cfe6799 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -8,7 +8,7 @@ import RenderAdminContent from './components/RenderAdminContent'; import { useFetchInvitationLink } from './hooks/queries'; import { AdminHomeIc } from '../../assets/svgs'; -import { AuthorizationHeader } from '../../components/commons/Header'; +import { AdminHeader, AuthorizationHeader } from '../../components/commons/Header'; import Spacing from '../../components/commons/Spacing'; import { copyLink } from '../../utils/copyLink'; @@ -39,7 +39,7 @@ const Admin = () => { } return ( <AdminWrapper> - {accessToken && <AuthorizationHeader />} + {accessToken && <AdminHeader />} <Spacing marginBottom="13.6" /> <AdminLayout> <SideNavbar> From 6e3bcca893c287eacd2b74b2fb4b5b6ba1716ed7 Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Sun, 1 Dec 2024 18:14:28 +0900 Subject: [PATCH 06/24] =?UTF-8?q?feat/#482=20:=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EB=B2=84=ED=8A=BC=EC=9A=A9=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 63 +++++++++++++++++++++++-------- 1 file changed, 47 insertions(+), 16 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 04469476..30494220 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -45,16 +45,28 @@ export const AuthorizationHeader = () => { if (data?.data?.moims) setMoims(data?.data.moims); }, [data?.data?.moims]); return ( - <HeaderWrapper> - <HeaderLogoIcon onClick={navigateToHome} /> - <HeaderLayout> - <MyGroupDropDown groupData={moims ?? []} /> - <HeaderBtnContainer> - <CreateGroupBtn groupCount={data?.data.moims.length ?? 0} /> - <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> - </HeaderBtnContainer> - </HeaderLayout> - </HeaderWrapper> + <> + <Responsive only="desktop"> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome} /> + <HeaderLayout> + <MyGroupDropDown groupData={moims ?? []} /> + <HeaderBtnContainer> + <CreateGroupBtn groupCount={data?.data.moims.length ?? 0} /> + <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> + </HeaderBtnContainer> + </HeaderLayout> + </HeaderWrapper> + </Responsive> + <Responsive only="mobile"> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome} /> + <MobileHeaderButtons> + <HamburgerIcon /> + </MobileHeaderButtons> + </HeaderWrapper> + </Responsive> + </> ); }; @@ -64,10 +76,22 @@ export const UnAuthorizationHeader = () => { const { navigateToLogin } = useNavigateLoginWithPath(); return ( - <HeaderWrapper> - <HeaderLogoIcon onClick={navigateToHome} /> - <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> - </HeaderWrapper> + <> + <Responsive only="desktop"> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome} /> + <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> + </HeaderWrapper> + </Responsive> + <Responsive only="mobile"> + <HeaderWrapper> + <HeaderLogoIcon onClick={navigateToHome} /> + <MobileHeaderButtons> + <HamburgerIcon /> + </MobileHeaderButtons> + </HeaderWrapper> + </Responsive> + </> ); }; @@ -139,8 +163,8 @@ export const AdminHeader = () => { <HeaderWrapper> <HeaderLogoIcon onClick={navigateToHome} /> <MobileHeaderButtons> - <LinkIc /> - <HamburgerIc /> + <LinkIcon /> + <HamburgerIcon /> </MobileHeaderButtons> </HeaderWrapper> </Responsive> @@ -171,6 +195,13 @@ const HeaderWrapper = styled.div` } `; +const LinkIcon = styled(LinkIc)` + cursor: pointer; +`; +const HamburgerIcon = styled(HamburgerIc)` + cursor: pointer; +`; + const MobileHeaderButtons = styled.div` display: flex; gap: 1.6rem; From bf051726faadccb0e6811e628c4b655a1bfbfc0a Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Tue, 3 Dec 2024 23:22:21 +0900 Subject: [PATCH 07/24] =?UTF-8?q?chore/#482=20:=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EA=B3=B5=ED=86=B5=20=EB=B2=84=ED=8A=BC=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 16 +- src/components/commons/LogInOutBtn.tsx | 1 + src/pages/createGroup/CreateGroup.tsx | 139 +++++++++--------- .../groupFeed/components/MyGroupDropDown.tsx | 2 +- .../groupFeed/components/MyMobileSidebar.tsx | 51 +++++++ 5 files changed, 140 insertions(+), 69 deletions(-) create mode 100644 src/pages/groupFeed/components/MyMobileSidebar.tsx diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 30494220..173a460d 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -18,6 +18,7 @@ import logout from '../../utils/logout'; import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; import Responsive from './Responsive/Responsive'; +import MyMobileSidebar from '../../pages/groupFeed/components/MyMobileSidebar'; interface onClickEditProps { onClickEditSave: () => void; @@ -44,6 +45,8 @@ export const AuthorizationHeader = () => { useEffect(() => { if (data?.data?.moims) setMoims(data?.data.moims); }, [data?.data?.moims]); + + const [isSidebarOpen, setIsSidebarOpen] = useState(false); return ( <> <Responsive only="desktop"> @@ -62,10 +65,21 @@ export const AuthorizationHeader = () => { <HeaderWrapper> <HeaderLogoIcon onClick={navigateToHome} /> <MobileHeaderButtons> - <HamburgerIcon /> + <HamburgerIcon + onClick={() => { + setIsSidebarOpen(true); + }} + /> </MobileHeaderButtons> </HeaderWrapper> </Responsive> + {isSidebarOpen && ( + <MyMobileSidebar + onClose={() => { + setIsSidebarOpen(false); + }} + /> + )} </> ); }; diff --git a/src/components/commons/LogInOutBtn.tsx b/src/components/commons/LogInOutBtn.tsx index d6ae5394..7f0f7533 100644 --- a/src/components/commons/LogInOutBtn.tsx +++ b/src/components/commons/LogInOutBtn.tsx @@ -16,6 +16,7 @@ const LogInOutBtn = ({ children, onClick }: LogInOutPropTypes) => { export default LogInOutBtn; const LogInOutWrapper = styled.button` + width: 100%; height: 4rem; padding: 1rem 1.6rem; diff --git a/src/pages/createGroup/CreateGroup.tsx b/src/pages/createGroup/CreateGroup.tsx index fa3c5a81..76470a9f 100644 --- a/src/pages/createGroup/CreateGroup.tsx +++ b/src/pages/createGroup/CreateGroup.tsx @@ -154,81 +154,86 @@ const CreateGroup = () => { setCurrentPage('GroupInfoPage'); }; return ( - <CreateGroupWrapper> + <GroupWrapper> {localStorage.getItem('accessToken') ? <AuthorizationHeader /> : <UnAuthorizationHeader />} - {currentPage === 'GroupInfoPage' && ( - <CreateGroupInfo - setCurrentPage={setCurrentPage} - groupName={groupName} - setGroupName={setGroupName} - groupInfo={groupInfo} - setGroupInfo={setGroupInfo} - isPublic={isPublic} - setIsPublic={setIsPublic} - topic={topic} - topicTag={topicTag} - topicDesc={topicDesc} - setTopic={setTopic} - setTopicTag={setTopicTag} - setTopicDesc={setTopicDesc} - groupImageView={groupImageView} - setGroupImageView={setGroupImageView} - setImageFile={setImageFile} - /> - )} - {currentPage === 'GroupLeaderInfoPage' && ( - <CreateGroupLeaderInfo - leaderPenName={leaderPenName} - setLeaderPenName={setLeaderPenName} - leaderDesc={leaderDesc} - setIsGroupLeaderValid={setIsGroupLeaderValid} - setLeaderDesc={setLeaderDesc} - isGroupLeaderValid={isGroupLeaderValid} - /> - )} - {currentPage === 'GroupLeaderInfoPage' && ( - <BtnWrapper> - <CreateGroupBtn type="button" onClick={handleShowModal}> - 생성하기 - </CreateGroupBtn> - <BackPageBtn type="button" onClick={handleBackBtn}> - 뒤로가기 - </BackPageBtn> - </BtnWrapper> - )} + <CreateGroupWrapper> + {currentPage === 'GroupInfoPage' && ( + <CreateGroupInfo + setCurrentPage={setCurrentPage} + groupName={groupName} + setGroupName={setGroupName} + groupInfo={groupInfo} + setGroupInfo={setGroupInfo} + isPublic={isPublic} + setIsPublic={setIsPublic} + topic={topic} + topicTag={topicTag} + topicDesc={topicDesc} + setTopic={setTopic} + setTopicTag={setTopicTag} + setTopicDesc={setTopicDesc} + groupImageView={groupImageView} + setGroupImageView={setGroupImageView} + setImageFile={setImageFile} + /> + )} + {currentPage === 'GroupLeaderInfoPage' && ( + <CreateGroupLeaderInfo + leaderPenName={leaderPenName} + setLeaderPenName={setLeaderPenName} + leaderDesc={leaderDesc} + setIsGroupLeaderValid={setIsGroupLeaderValid} + setLeaderDesc={setLeaderDesc} + isGroupLeaderValid={isGroupLeaderValid} + /> + )} + {currentPage === 'GroupLeaderInfoPage' && ( + <BtnWrapper> + <CreateGroupBtn type="button" onClick={handleShowModal}> + 생성하기 + </CreateGroupBtn> + <BackPageBtn type="button" onClick={handleBackBtn}> + 뒤로가기 + </BackPageBtn> + </BtnWrapper> + )} - <DefaultModal - isModalOpen={isModalOpen} - onClickBg={handleCloseModal} - sizeType="DEFAULT" - content={MODAL.ALERT_NICKNAME} - modalImg="POST" - > - <DefaultModalBtn - btnText={['아니요', '예']} - onClickLeft={handleCloseModal} - onClickRight={createGroup} - /> - </DefaultModal> + <DefaultModal + isModalOpen={isModalOpen} + onClickBg={handleCloseModal} + sizeType="DEFAULT" + content={MODAL.ALERT_NICKNAME} + modalImg="POST" + > + <DefaultModalBtn + btnText={['아니요', '예']} + onClickLeft={handleCloseModal} + onClickRight={createGroup} + /> + </DefaultModal> - {/* 페이지 이탈 모달 */} - <DefaultModal - isModalOpen={isPageExitModalOpen} - onClickBg={handleClosePageExitModal} - content={MODAL.PAGE_EXIT_WARN} - > - <DefaultModalBtn - btnText={['예', '아니요']} - onClickLeft={handleExitPage} - onClickRight={handleClosePageExitModal} - /> - </DefaultModal> - </CreateGroupWrapper> + {/* 페이지 이탈 모달 */} + <DefaultModal + isModalOpen={isPageExitModalOpen} + onClickBg={handleClosePageExitModal} + content={MODAL.PAGE_EXIT_WARN} + > + <DefaultModalBtn + btnText={['예', '아니요']} + onClickLeft={handleExitPage} + onClickRight={handleClosePageExitModal} + /> + </DefaultModal> + </CreateGroupWrapper> + </GroupWrapper> ); }; export default CreateGroup; +const GroupWrapper = styled.div` + width: 100%; +`; const BackPageBtn = styled.button` display: flex; align-items: center; diff --git a/src/pages/groupFeed/components/MyGroupDropDown.tsx b/src/pages/groupFeed/components/MyGroupDropDown.tsx index ec8a1e03..60396759 100644 --- a/src/pages/groupFeed/components/MyGroupDropDown.tsx +++ b/src/pages/groupFeed/components/MyGroupDropDown.tsx @@ -59,7 +59,7 @@ const MyGroupDropDownWrapper = styled.section` align-items: center; `; -const MyGroupBtnLayout = styled.button` +export const MyGroupBtnLayout = styled.button` display: flex; align-items: center; justify-content: center; diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/pages/groupFeed/components/MyMobileSidebar.tsx new file mode 100644 index 00000000..8d471294 --- /dev/null +++ b/src/pages/groupFeed/components/MyMobileSidebar.tsx @@ -0,0 +1,51 @@ +import styled from '@emotion/styled'; +import useClickOutside from '../../../hooks/useClickOutside'; +import logout from '../../../utils/logout'; +import useNavigateToHome from '../../../hooks/useNavigateHome'; + +import { useRef } from 'react'; +import LogInOutBtn from '../../../components/commons/LogInOutBtn'; + +const MyMobileSidebar = ({ onClose }: { onClose: () => void }) => { + const sidebarRef = useRef<HTMLDivElement>(null); + const { navigateToHome } = useNavigateToHome(); + + useClickOutside(sidebarRef, () => { + if (sidebarRef.current) onClose(); + }); + const handleLogOut = () => { + logout(); + navigateToHome(); + }; + return ( + <> + <Background onClick={onClose} /> + <SideBarLayout> + <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> + </SideBarLayout> + </> + ); +}; + +export default MyMobileSidebar; + +const Background = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +`; + +const SideBarLayout = styled.div` + position: fixed; + right: 0; + z-index: 3; + display: flex; + width: 19.1rem; + height: 100vh; + padding: 1.2rem 1.6rem; + + background-color: white; + box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%); +`; From 73dddeb9624a9146c2fd0dedb25590e601ad433a Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Tue, 3 Dec 2024 23:23:25 +0900 Subject: [PATCH 08/24] =?UTF-8?q?feat/#482=20:=20useOutsideClick=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/groupFeed/components/MyMobileSidebar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/pages/groupFeed/components/MyMobileSidebar.tsx index 8d471294..68132cd1 100644 --- a/src/pages/groupFeed/components/MyMobileSidebar.tsx +++ b/src/pages/groupFeed/components/MyMobileSidebar.tsx @@ -11,6 +11,7 @@ const MyMobileSidebar = ({ onClose }: { onClose: () => void }) => { const { navigateToHome } = useNavigateToHome(); useClickOutside(sidebarRef, () => { + //헤더 이외부분 클릭시 닫히게 if (sidebarRef.current) onClose(); }); const handleLogOut = () => { From 96eddcf0e806484c343ab1998af168c5a47661e8 Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Tue, 3 Dec 2024 23:25:57 +0900 Subject: [PATCH 09/24] =?UTF-8?q?fix/#482=20:=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20mobile=20=ED=99=98=EA=B2=BD=EC=97=90?= =?UTF-8?q?=EC=84=9C=EB=A7=8C=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=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/commons/Header.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 173a460d..8a54995f 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -72,14 +72,14 @@ export const AuthorizationHeader = () => { /> </MobileHeaderButtons> </HeaderWrapper> + {isSidebarOpen && ( + <MyMobileSidebar + onClose={() => { + setIsSidebarOpen(false); + }} + /> + )} </Responsive> - {isSidebarOpen && ( - <MyMobileSidebar - onClose={() => { - setIsSidebarOpen(false); - }} - /> - )} </> ); }; From 460d7737647f4aaf2fbd5483c5ab87db970e71fe Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Tue, 3 Dec 2024 23:50:07 +0900 Subject: [PATCH 10/24] =?UTF-8?q?feat/#482=20:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8/=EB=B9=84=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=ED=97=A4=EB=8D=94=20=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 30 ++++++++++++++++--- .../groupFeed/components/MyMobileSidebar.tsx | 26 ++++++++++++++-- 2 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 8a54995f..b0014fad 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -18,7 +18,10 @@ import logout from '../../utils/logout'; import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; import Responsive from './Responsive/Responsive'; -import MyMobileSidebar from '../../pages/groupFeed/components/MyMobileSidebar'; +import { + MobileUnAuthorizedSidebar, + MobileAuthorizedSidebar, +} from '../../pages/groupFeed/components/MyMobileSidebar'; interface onClickEditProps { onClickEditSave: () => void; @@ -73,7 +76,7 @@ export const AuthorizationHeader = () => { </MobileHeaderButtons> </HeaderWrapper> {isSidebarOpen && ( - <MyMobileSidebar + <MobileAuthorizedSidebar onClose={() => { setIsSidebarOpen(false); }} @@ -89,21 +92,36 @@ export const UnAuthorizationHeader = () => { const { navigateToHome } = useNavigateHome(); const { navigateToLogin } = useNavigateLoginWithPath(); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + return ( <> <Responsive only="desktop"> <HeaderWrapper> <HeaderLogoIcon onClick={navigateToHome} /> - <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> + <LogInWrapper> + <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> + </LogInWrapper> </HeaderWrapper> </Responsive> <Responsive only="mobile"> <HeaderWrapper> <HeaderLogoIcon onClick={navigateToHome} /> <MobileHeaderButtons> - <HamburgerIcon /> + <HamburgerIcon + onClick={() => { + setIsSidebarOpen(true); + }} + /> </MobileHeaderButtons> </HeaderWrapper> + {isSidebarOpen && ( + <MobileUnAuthorizedSidebar + onClose={() => { + setIsSidebarOpen(false); + }} + /> + )} </Responsive> </> ); @@ -186,6 +204,10 @@ export const AdminHeader = () => { ); }; +const LogInWrapper = styled.div` + width: 8.1rem; +`; + const HeaderWrapper = styled.div` position: fixed; top: 0%; diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/pages/groupFeed/components/MyMobileSidebar.tsx index 68132cd1..7d2d3163 100644 --- a/src/pages/groupFeed/components/MyMobileSidebar.tsx +++ b/src/pages/groupFeed/components/MyMobileSidebar.tsx @@ -6,7 +6,7 @@ import useNavigateToHome from '../../../hooks/useNavigateHome'; import { useRef } from 'react'; import LogInOutBtn from '../../../components/commons/LogInOutBtn'; -const MyMobileSidebar = ({ onClose }: { onClose: () => void }) => { +export const MobileUnAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => { const sidebarRef = useRef<HTMLDivElement>(null); const { navigateToHome } = useNavigateToHome(); @@ -22,13 +22,33 @@ const MyMobileSidebar = ({ onClose }: { onClose: () => void }) => { <> <Background onClick={onClose} /> <SideBarLayout> - <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> + <LogInOutBtn onClick={handleLogOut}>로그인</LogInOutBtn> </SideBarLayout> </> ); }; -export default MyMobileSidebar; +export const MobileAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => { + const sidebarRef = useRef<HTMLDivElement>(null); + const { navigateToHome } = useNavigateToHome(); + + useClickOutside(sidebarRef, () => { + //헤더 이외부분 클릭시 닫히게 + if (sidebarRef.current) onClose(); + }); + const handleLogOut = () => { + logout(); + navigateToHome(); + }; + return ( + <> + <Background onClick={onClose} /> + <SideBarLayout> + <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> + </SideBarLayout> + </> + ); +}; const Background = styled.div` position: fixed; From 0640f415230371d3d11a522b7140d20738ec60dd Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Wed, 4 Dec 2024 21:33:04 +0900 Subject: [PATCH 11/24] =?UTF-8?q?feat/#482=20:=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B3=B5=ED=86=B5css=20=EB=B9=BC=EC=84=9C?= =?UTF-8?q?=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 2 +- src/components/commons/HeaderButton.tsx | 87 +++++++++++++++++++ src/components/commons/LogInOutBtn.tsx | 45 ---------- .../groupFeed/components/CreateGroupBtn.tsx | 36 +------- .../groupFeed/components/MyGroupDropDown.tsx | 37 +------- .../groupFeed/components/MyMobileSidebar.tsx | 2 +- 6 files changed, 92 insertions(+), 117 deletions(-) create mode 100644 src/components/commons/HeaderButton.tsx delete mode 100644 src/components/commons/LogInOutBtn.tsx diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index b0014fad..ac871f18 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import Button from './Button'; -import LogInOutBtn from './LogInOutBtn'; +import { LogInOutBtn } from './HeaderButton'; import { HamburgerIc, HeaderLogoIc, LinkIc } from '../../assets/svgs'; import { diff --git a/src/components/commons/HeaderButton.tsx b/src/components/commons/HeaderButton.tsx new file mode 100644 index 00000000..6a9b4b63 --- /dev/null +++ b/src/components/commons/HeaderButton.tsx @@ -0,0 +1,87 @@ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; + +const basicCSS = css` + display: flex; + align-items: center; + justify-content: center; + height: 4rem; + padding: 1rem 1.6rem; + + white-space: nowrap; + + cursor: pointer; + border-radius: 0.8rem; + + transition: + transform 0.5s, + background-color 0.5s, + color 0.5s; +`; + +// 글모임 만들기 버튼 +export const CreateGroupBtnWrapper = styled.div` + ${basicCSS}; + gap: 0.6rem; + + color: ${({ theme }) => theme.colors.white}; + + background-color: ${({ theme }) => theme.colors.black}; + + ${({ theme }) => theme.fonts.button3}; + + :hover { + color: ${({ theme }) => theme.colors.mainViolet}; + + background-color: ${({ theme }) => theme.colors.white}; + box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%); + transform: scale(0.95); + } + + :active { + transform: scale(1.1); + } +`; + +// 로그인/로그아웃 버튼 +export const LogInOutBtn = styled.button` + ${basicCSS}; + width: 100%; + + color: ${({ theme }) => theme.colors.gray70}; + + ${({ theme }) => theme.fonts.button3}; + + :hover { + color: ${({ theme }) => theme.colors.mainViolet}; + + background-color: ${({ theme }) => theme.colors.gray10}; + transform: scale(0.95); + } + + :active { + transform: scale(1.1); + } +`; + +// 내 글 모임 버튼 +export const MyGroupBtn = styled.button` + ${basicCSS}; + width: 9.5rem; + + color: ${({ theme }) => theme.colors.gray70}; + + ${({ theme }) => theme.fonts.subtitle6}; + + :hover { + color: ${({ theme }) => theme.colors.mainViolet}; + + background-color: ${({ theme }) => theme.colors.gray10}; + transform: scale(0.95); + border-radius: 0.8rem; + } + + :active { + transform: scale(1.1); + } +`; diff --git a/src/components/commons/LogInOutBtn.tsx b/src/components/commons/LogInOutBtn.tsx deleted file mode 100644 index 7f0f7533..00000000 --- a/src/components/commons/LogInOutBtn.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import styled from '@emotion/styled'; -import { ReactNode } from 'react'; - -type LogInOutPropTypes = { - children: ReactNode; - onClick?: () => void; -}; -const LogInOutBtn = ({ children, onClick }: LogInOutPropTypes) => { - return ( - <LogInOutWrapper type="button" onClick={onClick}> - {children} - </LogInOutWrapper> - ); -}; - -export default LogInOutBtn; - -const LogInOutWrapper = styled.button` - width: 100%; - height: 4rem; - padding: 1rem 1.6rem; - - color: ${({ theme }) => theme.colors.gray70}; - white-space: nowrap; - - cursor: pointer; - border-radius: 8px; - - ${({ theme }) => theme.fonts.button3}; - - :hover { - color: ${({ theme }) => theme.colors.mainViolet}; - - background-color: ${({ theme }) => theme.colors.gray10}; - transform: scale(0.95); - - transition: 0.5s; - } - - :active { - transform: scale(1.1); - - transition: 0.5s; - } -`; diff --git a/src/pages/groupFeed/components/CreateGroupBtn.tsx b/src/pages/groupFeed/components/CreateGroupBtn.tsx index 8468698a..cdcbd3c4 100644 --- a/src/pages/groupFeed/components/CreateGroupBtn.tsx +++ b/src/pages/groupFeed/components/CreateGroupBtn.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -6,6 +5,7 @@ import { MakeGroupPlusBtn, MakeGroupPlusHoverBtn } from '../../../assets/svgs'; import { FullModal, FullModalBtn } from '../../../components/commons/modal/FullModal'; import useModal from '../../../hooks/useModal'; import { MODAL } from '../constants/modalContent'; +import { CreateGroupBtnWrapper } from '../../../components/commons/HeaderButton'; interface groupCountProps { groupCount: number; @@ -52,37 +52,3 @@ const CreateGroupBtn = ({ groupCount }: groupCountProps) => { }; export default CreateGroupBtn; - -const CreateGroupBtnWrapper = styled.button` - display: flex; - gap: 0.6rem; - align-items: center; - justify-content: center; - width: auto; - height: 4rem; - padding: 1rem 1.6rem; - - color: ${({ theme }) => theme.colors.white}; - white-space: nowrap; - - background-color: ${({ theme }) => theme.colors.black}; - cursor: pointer; - border-radius: 8px; - - :hover { - color: ${({ theme }) => theme.colors.mainViolet}; - - background-color: ${({ theme }) => theme.colors.white}; - box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%); - transform: scale(0.95); - - transition: 0.5s; - } - ${({ theme }) => theme.fonts.button3}; - - :active { - transform: scale(1.1); - - transition: 0.5s; - } -`; diff --git a/src/pages/groupFeed/components/MyGroupDropDown.tsx b/src/pages/groupFeed/components/MyGroupDropDown.tsx index 60396759..06bbfd7f 100644 --- a/src/pages/groupFeed/components/MyGroupDropDown.tsx +++ b/src/pages/groupFeed/components/MyGroupDropDown.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; - +import { MyGroupBtn } from '../../../components/commons/HeaderButton'; import { Moim } from '../apis/fetchHeaderGroup'; import useClickOutside from '../../../hooks/useClickOutside'; @@ -29,7 +29,7 @@ const MyGroupDropDown = ({ groupData }: CreateGroupBtnProps) => { return ( <MyGroupDropDownWrapper ref={dropDownRef}> - <MyGroupBtnLayout onClick={handleOnClick}>내 글 모임</MyGroupBtnLayout> + <MyGroupBtn onClick={handleOnClick}>내 글 모임</MyGroupBtn> <MyGroupListLayout $isOpen={isOpen}> {groupData?.length > 0 ? ( groupData.map(({ moimId, moimName }: Moim) => ( @@ -59,39 +59,6 @@ const MyGroupDropDownWrapper = styled.section` align-items: center; `; -export const MyGroupBtnLayout = styled.button` - display: flex; - align-items: center; - justify-content: center; - width: 9.5rem; - height: 4rem; - padding: 1rem 1.6rem; - - color: ${({ theme }) => theme.colors.gray70}; - white-space: nowrap; - text-align: center; - - cursor: pointer; - - ${({ theme }) => theme.fonts.subtitle6} - - :hover { - color: ${({ theme }) => theme.colors.mainViolet}; - - background-color: ${({ theme }) => theme.colors.gray10}; - transform: scale(0.95); - border-radius: 0.8rem; - - transition: 0.5s; - } - - :active { - transform: scale(1.1); - - transition: 0.5s; - } -`; - const MyGroupListLayout = styled.div<{ $isOpen: boolean }>` position: absolute; top: 6rem; diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/pages/groupFeed/components/MyMobileSidebar.tsx index 7d2d3163..f715fb19 100644 --- a/src/pages/groupFeed/components/MyMobileSidebar.tsx +++ b/src/pages/groupFeed/components/MyMobileSidebar.tsx @@ -4,7 +4,7 @@ import logout from '../../../utils/logout'; import useNavigateToHome from '../../../hooks/useNavigateHome'; import { useRef } from 'react'; -import LogInOutBtn from '../../../components/commons/LogInOutBtn'; +import { LogInOutBtn } from '../../../components/commons/HeaderButton'; export const MobileUnAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => { const sidebarRef = useRef<HTMLDivElement>(null); From 83ecaddd80d0b238653a770f68dc497308f7fd3f Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Wed, 4 Dec 2024 21:35:19 +0900 Subject: [PATCH 12/24] chore/#482 : import build error --- src/pages/admin/Admin.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index 9cfe6799..05345428 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -8,7 +8,7 @@ import RenderAdminContent from './components/RenderAdminContent'; import { useFetchInvitationLink } from './hooks/queries'; import { AdminHomeIc } from '../../assets/svgs'; -import { AdminHeader, AuthorizationHeader } from '../../components/commons/Header'; +import { AdminHeader } from '../../components/commons/Header'; import Spacing from '../../components/commons/Spacing'; import { copyLink } from '../../utils/copyLink'; From 7f80b2b484aed3c6a8fd921067e0961c87497a96 Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Wed, 4 Dec 2024 22:21:38 +0900 Subject: [PATCH 13/24] =?UTF-8?q?Feat/#482=20:=20=EB=82=B4=20=EA=B8=80?= =?UTF-8?q?=EB=AA=A8=EC=9E=84=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 2 + .../groupFeed/components/MyMobileSidebar.tsx | 87 +++++++++++++++++-- 2 files changed, 82 insertions(+), 7 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index ac871f18..88c67992 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -80,6 +80,8 @@ export const AuthorizationHeader = () => { onClose={() => { setIsSidebarOpen(false); }} + groupCount={data?.data.moims.length ?? 0} + groupData={moims ?? []} /> )} </Responsive> diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/pages/groupFeed/components/MyMobileSidebar.tsx index f715fb19..c40f54e1 100644 --- a/src/pages/groupFeed/components/MyMobileSidebar.tsx +++ b/src/pages/groupFeed/components/MyMobileSidebar.tsx @@ -5,32 +5,42 @@ import useNavigateToHome from '../../../hooks/useNavigateHome'; import { useRef } from 'react'; import { LogInOutBtn } from '../../../components/commons/HeaderButton'; +import CreateGroupBtn from './CreateGroupBtn'; +import useNavigateLoginWithPath from '../../../hooks/useNavigateLoginWithPath'; +import { Moim } from '../apis/fetchHeaderGroup'; +import { useNavigate } from 'react-router-dom'; export const MobileUnAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => { const sidebarRef = useRef<HTMLDivElement>(null); - const { navigateToHome } = useNavigateToHome(); + const { navigateToLogin } = useNavigateLoginWithPath(); useClickOutside(sidebarRef, () => { //헤더 이외부분 클릭시 닫히게 if (sidebarRef.current) onClose(); }); - const handleLogOut = () => { - logout(); - navigateToHome(); - }; + return ( <> <Background onClick={onClose} /> <SideBarLayout> - <LogInOutBtn onClick={handleLogOut}>로그인</LogInOutBtn> + <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> </SideBarLayout> </> ); }; -export const MobileAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => { +export const MobileAuthorizedSidebar = ({ + onClose, + groupCount, + groupData, +}: { + onClose: () => void; + groupCount: number; + groupData: Moim[] | []; +}) => { const sidebarRef = useRef<HTMLDivElement>(null); const { navigateToHome } = useNavigateToHome(); + const navigate = useNavigate(); useClickOutside(sidebarRef, () => { //헤더 이외부분 클릭시 닫히게 @@ -40,16 +50,66 @@ export const MobileAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => logout(); navigateToHome(); }; + + const handleRoutingGroupFeed = (groupId: string) => { + navigate(`/group/${groupId}`); + }; + return ( <> <Background onClick={onClose} /> <SideBarLayout> <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> + <CreateGroupBtn groupCount={groupCount} /> + <CustomLine /> + <MyGroup> 내 글 모임</MyGroup> + <GroupList> + {groupData?.length > 0 ? ( + groupData.map(({ moimId, moimName }: Moim) => ( + <GroupData key={moimId} onClick={() => handleRoutingGroupFeed(moimId)}> + {moimName} + </GroupData> + )) + ) : ( + <div>{`가입한 글 모임이\n 없습니다.`}</div> + )} + </GroupList> </SideBarLayout> </> ); }; +const GroupList = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +const GroupData = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 15.9rem; + height: 4.4rem; + + color: ${({ theme }) => theme.colors.gray70}; + + border-radius: 0.8rem; + ${({ theme }) => theme.fonts.mSubtitle2}; + + :hover { + color: black; + + background-color: ${({ theme }) => theme.colors.gray20}; + } +`; + +const MyGroup = styled.p` + display: flex; + justify-content: center; + ${({ theme }) => theme.fonts.mButton1}; +`; + const Background = styled.div` position: fixed; top: 0; @@ -58,11 +118,24 @@ const Background = styled.div` height: 100%; `; +const CustomLine = styled.hr` + width: 161px; + height: 2px; + margin: 0.4rem 0; + + background-color: #eaeaea; + border: none; + border-radius: 1px; /* 선의 끝을 둥글게 설정 */ +`; + const SideBarLayout = styled.div` position: fixed; right: 0; z-index: 3; display: flex; + flex-direction: column; + gap: 1.2rem; + align-items: center; width: 19.1rem; height: 100vh; padding: 1.2rem 1.6rem; From b45d7f469abf322c13f9248b4475bab27ff0485a Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Wed, 4 Dec 2024 22:29:25 +0900 Subject: [PATCH 14/24] =?UTF-8?q?feat/#482=20:=20=ED=96=84=EB=B2=84?= =?UTF-8?q?=EA=B1=B0=EB=B0=94=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 8 +++++++- src/components/commons/HeaderButton.tsx | 1 + src/pages/groupFeed/components/MyMobileSidebar.tsx | 1 + 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 88c67992..77c60a85 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -58,7 +58,9 @@ export const AuthorizationHeader = () => { <HeaderLayout> <MyGroupDropDown groupData={moims ?? []} /> <HeaderBtnContainer> - <CreateGroupBtn groupCount={data?.data.moims.length ?? 0} /> + <CreateGroupWrapper> + <CreateGroupBtn groupCount={data?.data.moims.length ?? 0} /> + </CreateGroupWrapper> <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn> </HeaderBtnContainer> </HeaderLayout> @@ -271,3 +273,7 @@ const HeaderLogoIcon = styled(HeaderLogoIc)` height: 1.68rem; } `; + +const CreateGroupWrapper = styled.div` + width: 13.6rem; +`; diff --git a/src/components/commons/HeaderButton.tsx b/src/components/commons/HeaderButton.tsx index 6a9b4b63..c2e88157 100644 --- a/src/components/commons/HeaderButton.tsx +++ b/src/components/commons/HeaderButton.tsx @@ -23,6 +23,7 @@ const basicCSS = css` export const CreateGroupBtnWrapper = styled.div` ${basicCSS}; gap: 0.6rem; + width: 100%; color: ${({ theme }) => theme.colors.white}; diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/pages/groupFeed/components/MyMobileSidebar.tsx index c40f54e1..f072fbe4 100644 --- a/src/pages/groupFeed/components/MyMobileSidebar.tsx +++ b/src/pages/groupFeed/components/MyMobileSidebar.tsx @@ -94,6 +94,7 @@ const GroupData = styled.div` color: ${({ theme }) => theme.colors.gray70}; + cursor: pointer; border-radius: 0.8rem; ${({ theme }) => theme.fonts.mSubtitle2}; From 1d3139846c48ec0f239860600138ea63687e46d2 Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Wed, 4 Dec 2024 22:36:51 +0900 Subject: [PATCH 15/24] =?UTF-8?q?Feat/#482=20:=20=EC=B4=88=EB=8C=80=20?= =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EB=B3=B5=EC=82=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 38 +++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 77c60a85..fb3b5c1b 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -23,6 +23,10 @@ import { MobileAuthorizedSidebar, } from '../../pages/groupFeed/components/MyMobileSidebar'; +import { useParams } from 'react-router-dom'; +import { useFetchInvitationLink } from '../../pages/admin/hooks/queries'; +import { copyLink } from '../../utils/copyLink'; + interface onClickEditProps { onClickEditSave: () => void; } @@ -190,6 +194,23 @@ export const DefaultHeader = () => { // 관리자 헤더 export const AdminHeader = () => { const { navigateToHome } = useNavigateHome(); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const [moims, setMoims] = useState<Moim[]>([]); + const { data } = useFetchHeaderGroup(); + const { groupId } = useParams(); + const { invitationCode } = useFetchInvitationLink(groupId); + + const handleCopyLink = (invitationCode: string) => { + copyLink(import.meta.env.VITE_INVITE_URL + `group/${invitationCode}/groupInvite`); + }; + + const handleInviteBtnClick = () => { + handleCopyLink(invitationCode?.invitationCode || ''); + }; + + useEffect(() => { + if (data?.data?.moims) setMoims(data?.data.moims); + }, [data?.data?.moims]); return ( <> <Responsive only="desktop"> @@ -199,10 +220,23 @@ export const AdminHeader = () => { <HeaderWrapper> <HeaderLogoIcon onClick={navigateToHome} /> <MobileHeaderButtons> - <LinkIcon /> - <HamburgerIcon /> + <LinkIcon type="button" onClick={handleInviteBtnClick} /> + <HamburgerIcon + onClick={() => { + setIsSidebarOpen(true); + }} + /> </MobileHeaderButtons> </HeaderWrapper> + {isSidebarOpen && ( + <MobileAuthorizedSidebar + onClose={() => { + setIsSidebarOpen(false); + }} + groupCount={data?.data.moims.length ?? 0} + groupData={moims ?? []} + /> + )} </Responsive> </> ); From c53f2a83739299480f4038f6eb314648c3cbe03e Mon Sep 17 00:00:00 2001 From: Moon Dahyun <dahyun723@ajou.ac.kr> Date: Fri, 6 Dec 2024 10:35:03 +0900 Subject: [PATCH 16/24] =?UTF-8?q?fix/#482/=EB=8B=A4=EC=9D=80=EC=9D=B4=20?= =?UTF-8?q?=EC=BD=94=EB=A6=AC=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 10 +- .../commons}/MyMobileSidebar.tsx | 29 +- .../groupJoinCongrats/GroupJoinCongrats.tsx | 2 +- stats.html | 4842 +++++++++++++++++ 4 files changed, 4861 insertions(+), 22 deletions(-) rename src/{pages/groupFeed/components => components/commons}/MyMobileSidebar.tsx (85%) create mode 100644 stats.html diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index fb3b5c1b..384f3513 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -18,10 +18,7 @@ import logout from '../../utils/logout'; import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; import Responsive from './Responsive/Responsive'; -import { - MobileUnAuthorizedSidebar, - MobileAuthorizedSidebar, -} from '../../pages/groupFeed/components/MyMobileSidebar'; +import { MobileUnAuthorizedSidebar, MobileAuthorizedSidebar } from './MyMobileSidebar'; import { useParams } from 'react-router-dom'; import { useFetchInvitationLink } from '../../pages/admin/hooks/queries'; @@ -186,7 +183,7 @@ export const DefaultHeader = () => { const { navigateToHome } = useNavigateHome(); return ( <HeaderWrapper> - <HeaderLogoIcon onClick={navigateToHome}></HeaderLogoIcon> + <HeaderLogoIcon onClick={navigateToHome} /> </HeaderWrapper> ); }; @@ -264,8 +261,7 @@ const HeaderWrapper = styled.div` @media ${MOBILE_MEDIA_QUERY} { width: 100%; height: 5.6rem; - padding-right: 2rem; - padding-left: 2rem; + padding: 0 2rem; } `; diff --git a/src/pages/groupFeed/components/MyMobileSidebar.tsx b/src/components/commons/MyMobileSidebar.tsx similarity index 85% rename from src/pages/groupFeed/components/MyMobileSidebar.tsx rename to src/components/commons/MyMobileSidebar.tsx index f072fbe4..6ad0b745 100644 --- a/src/pages/groupFeed/components/MyMobileSidebar.tsx +++ b/src/components/commons/MyMobileSidebar.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; -import useClickOutside from '../../../hooks/useClickOutside'; -import logout from '../../../utils/logout'; -import useNavigateToHome from '../../../hooks/useNavigateHome'; +import useClickOutside from '../../hooks/useClickOutside'; +import logout from '../../utils/logout'; +import useNavigateToHome from '../../hooks/useNavigateHome'; import { useRef } from 'react'; -import { LogInOutBtn } from '../../../components/commons/HeaderButton'; -import CreateGroupBtn from './CreateGroupBtn'; -import useNavigateLoginWithPath from '../../../hooks/useNavigateLoginWithPath'; -import { Moim } from '../apis/fetchHeaderGroup'; +import { LogInOutBtn } from './HeaderButton'; +import CreateGroupBtn from '../../pages/groupFeed/components/CreateGroupBtn'; +import useNavigateLoginWithPath from '../../hooks/useNavigateLoginWithPath'; +import { Moim } from '../../pages/groupFeed/apis/fetchHeaderGroup'; import { useNavigate } from 'react-router-dom'; export const MobileUnAuthorizedSidebar = ({ onClose }: { onClose: () => void }) => { @@ -21,23 +21,24 @@ export const MobileUnAuthorizedSidebar = ({ onClose }: { onClose: () => void }) return ( <> - <Background onClick={onClose} /> - <SideBarLayout> + <SideBarLayout ref={sidebarRef}> <LogInOutBtn onClick={navigateToLogin}>로그인</LogInOutBtn> </SideBarLayout> </> ); }; +interface AuthorizedPropTypes { + onClose: () => void; + groupCount: number; + groupData: Moim[] | []; +} + export const MobileAuthorizedSidebar = ({ onClose, groupCount, groupData, -}: { - onClose: () => void; - groupCount: number; - groupData: Moim[] | []; -}) => { +}: AuthorizedPropTypes) => { const sidebarRef = useRef<HTMLDivElement>(null); const { navigateToHome } = useNavigateToHome(); const navigate = useNavigate(); diff --git a/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx b/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx index 0960ab07..a6160db4 100644 --- a/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx +++ b/src/pages/groupJoinCongrats/GroupJoinCongrats.tsx @@ -29,7 +29,7 @@ const GroupJoinCongrats = () => { <Spacing marginBottom="4.8" /> <picture> <source srcSet={groupJoinCongratsWebp} /> - <img src={groupJoinCongratsIlust} /> + <img src={groupJoinCongratsIlust} alt="가입 축하 일러스트" /> </picture> <Spacing marginBottom="4.8" /> <GoToGroupFeedBtn onClick={onClickGoToGroupFeedBtn}> diff --git a/stats.html b/stats.html new file mode 100644 index 00000000..702f690e --- /dev/null +++ b/stats.html @@ -0,0 +1,4842 @@ + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="ie=edge" /> + <title>Rollup Visualizer + + + +
+ + + + + From 4fb9fc2b4008324af6c4060cedfe0de7a7b3ec02 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Fri, 6 Dec 2024 10:35:57 +0900 Subject: [PATCH 17/24] chore/#482 : delete stat.html --- stats.html | 4842 ---------------------------------------------------- 1 file changed, 4842 deletions(-) delete mode 100644 stats.html diff --git a/stats.html b/stats.html deleted file mode 100644 index 702f690e..00000000 --- a/stats.html +++ /dev/null @@ -1,4842 +0,0 @@ - - - - - - - - Rollup Visualizer - - - -
- - - - - From 5561560d3ea1401918ab3a3f809d011603c48234 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Fri, 6 Dec 2024 17:27:46 +0900 Subject: [PATCH 18/24] =?UTF-8?q?fix/#482=20:=20=EC=84=9C=EC=A7=84?= =?UTF-8?q?=EC=96=B8=EB=8B=88=20=EC=BD=94=EB=A6=AC=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Header.tsx | 18 +- src/components/commons/MyMobileSidebar.tsx | 4 +- src/pages/groupFeed/hooks/queries.ts | 4 +- stats.html | 4842 ++++++++++++++++++++ 4 files changed, 4856 insertions(+), 12 deletions(-) create mode 100644 stats.html diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index 384f3513..f1430359 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -41,14 +41,14 @@ interface OnClickTempExistProps { export const AuthorizationHeader = () => { const [moims, setMoims] = useState([]); const { navigateToHome } = useNavigateToHome(); - const { data } = useFetchHeaderGroup(); + const { moimsData } = useFetchHeaderGroup(); const handleLogOut = () => { logout(); navigateToHome(); }; useEffect(() => { - if (data?.data?.moims) setMoims(data?.data.moims); - }, [data?.data?.moims]); + if (moimsData) setMoims(moimsData); + }, [moimsData]); const [isSidebarOpen, setIsSidebarOpen] = useState(false); return ( @@ -60,7 +60,7 @@ export const AuthorizationHeader = () => { - + 로그아웃 @@ -83,7 +83,7 @@ export const AuthorizationHeader = () => { onClose={() => { setIsSidebarOpen(false); }} - groupCount={data?.data.moims.length ?? 0} + groupCount={moimsData?.length ?? 0} groupData={moims ?? []} /> )} @@ -193,7 +193,7 @@ export const AdminHeader = () => { const { navigateToHome } = useNavigateHome(); const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [moims, setMoims] = useState([]); - const { data } = useFetchHeaderGroup(); + const { moimsData } = useFetchHeaderGroup(); const { groupId } = useParams(); const { invitationCode } = useFetchInvitationLink(groupId); @@ -206,8 +206,8 @@ export const AdminHeader = () => { }; useEffect(() => { - if (data?.data?.moims) setMoims(data?.data.moims); - }, [data?.data?.moims]); + if (moimsData) setMoims(moimsData); + }, [moimsData]); return ( <> @@ -230,7 +230,7 @@ export const AdminHeader = () => { onClose={() => { setIsSidebarOpen(false); }} - groupCount={data?.data.moims.length ?? 0} + groupCount={moimsData?.length ?? 0} groupData={moims ?? []} /> )} diff --git a/src/components/commons/MyMobileSidebar.tsx b/src/components/commons/MyMobileSidebar.tsx index 6ad0b745..a646bf15 100644 --- a/src/components/commons/MyMobileSidebar.tsx +++ b/src/components/commons/MyMobileSidebar.tsx @@ -125,7 +125,7 @@ const CustomLine = styled.hr` height: 2px; margin: 0.4rem 0; - background-color: #eaeaea; + background-color: ${({ theme }) => theme.colors.gray20}; border: none; border-radius: 1px; /* 선의 끝을 둥글게 설정 */ `; @@ -142,6 +142,6 @@ const SideBarLayout = styled.div` height: 100vh; padding: 1.2rem 1.6rem; - background-color: white; + background-color: ${({ theme }) => theme.colors.white}; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%); `; diff --git a/src/pages/groupFeed/hooks/queries.ts b/src/pages/groupFeed/hooks/queries.ts index 9c8fdb5d..127a6b83 100644 --- a/src/pages/groupFeed/hooks/queries.ts +++ b/src/pages/groupFeed/hooks/queries.ts @@ -119,7 +119,9 @@ export const useFetchHeaderGroup = () => { queryFn: () => fetchHeaderGroup(), retry: 3, }); - return { data }; + + const moimsData = data?.data.moims; + return { moimsData }; }; export const useFetchWriterInfo = ( diff --git a/stats.html b/stats.html new file mode 100644 index 00000000..1b98a4d6 --- /dev/null +++ b/stats.html @@ -0,0 +1,4842 @@ + + + + + + + + Rollup Visualizer + + + +
+ + + + + From e2038e4178b504a61d807e141add5c6769b2e4df Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Fri, 6 Dec 2024 17:28:12 +0900 Subject: [PATCH 19/24] chore/#482 : delete stats.html --- stats.html | 4842 ---------------------------------------------------- 1 file changed, 4842 deletions(-) delete mode 100644 stats.html diff --git a/stats.html b/stats.html deleted file mode 100644 index 1b98a4d6..00000000 --- a/stats.html +++ /dev/null @@ -1,4842 +0,0 @@ - - - - - - - - Rollup Visualizer - - - -
- - - - - From ead11588ab5adc59a5b6d2ad3ccfb5bb9df33daa Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Fri, 6 Dec 2024 17:28:54 +0900 Subject: [PATCH 20/24] chore/#482 : stat html gitignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 1cac5597..543ffcd2 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ dist-ssr *.njsproj *.sln *.sw? -.env \ No newline at end of file +.env + +stat.html \ No newline at end of file From 804df4a86be2dd6c79ffcbe1df6bab5bd675ce06 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Fri, 6 Dec 2024 17:30:57 +0900 Subject: [PATCH 21/24] =?UTF-8?q?feat/#482=20:=20groupInvite=20=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8A=94=20=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- src/pages/groupInvite/GroupInvite.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 543ffcd2..07b39178 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,4 @@ dist-ssr *.sw? .env -stat.html \ No newline at end of file +stats.html \ No newline at end of file diff --git a/src/pages/groupInvite/GroupInvite.tsx b/src/pages/groupInvite/GroupInvite.tsx index 1afba6fa..1ce8d067 100644 --- a/src/pages/groupInvite/GroupInvite.tsx +++ b/src/pages/groupInvite/GroupInvite.tsx @@ -25,7 +25,7 @@ const GroupInvite = () => { useGetGroupInfo(groupId); // 글모임 5개 가입 제한 - const { data } = useFetchHeaderGroup(); + const { moimsData } = useFetchHeaderGroup(); useEffect(() => { if (isError && isAxiosError(error)) { @@ -53,10 +53,10 @@ const GroupInvite = () => { }, [error, isError, groupId]); useEffect(() => { - if (data?.data.moims && data?.data.moims.length >= 5) { + if (moimsData && moimsData?.length >= 5) { handleShowModal(); } - }, [data?.data.moims.length]); + }, [moimsData?.length]); return ( From 0d7e7f8af02045c1c5ed4c944c3b78f56fc71023 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Tue, 17 Dec 2024 18:52:51 +0900 Subject: [PATCH 22/24] =?UTF-8?q?fix/#492:=20groupLeaderInfoPage=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=201=EB=B2=88=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createGroup/CreateGroup.tsx | 37 +++++++++++++-------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/pages/createGroup/CreateGroup.tsx b/src/pages/createGroup/CreateGroup.tsx index 76470a9f..d275dbed 100644 --- a/src/pages/createGroup/CreateGroup.tsx +++ b/src/pages/createGroup/CreateGroup.tsx @@ -178,26 +178,25 @@ const CreateGroup = () => { /> )} {currentPage === 'GroupLeaderInfoPage' && ( - - )} - {currentPage === 'GroupLeaderInfoPage' && ( - - - 생성하기 - - - 뒤로가기 - - + <> + + + + 생성하기 + + + 뒤로가기 + + + )} - Date: Tue, 17 Dec 2024 18:53:30 +0900 Subject: [PATCH 23/24] =?UTF-8?q?fix/#492=20:=20=EC=98=B5=EC=85=94?= =?UTF-8?q?=EB=84=90=20=EC=B2=B4=EC=9D=B4=EB=8B=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/groupFeed/hooks/queries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/groupFeed/hooks/queries.ts b/src/pages/groupFeed/hooks/queries.ts index 127a6b83..7584cc94 100644 --- a/src/pages/groupFeed/hooks/queries.ts +++ b/src/pages/groupFeed/hooks/queries.ts @@ -120,7 +120,7 @@ export const useFetchHeaderGroup = () => { retry: 3, }); - const moimsData = data?.data.moims; + const moimsData = data?.data?.moims; return { moimsData }; }; From ea8f2b3e3889d26f4fa2d91a8db8e4ec3bb50412 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Tue, 17 Dec 2024 19:01:51 +0900 Subject: [PATCH 24/24] =?UTF-8?q?fix/#482=20:=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=EC=9E=90=ED=8E=98=EC=9D=B4=EC=A7=80=20conflict?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index 53723a46..74a33e2a 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -1,14 +1,11 @@ import styled from '@emotion/styled'; import { useNavigate, useParams } from 'react-router-dom'; - import { useGroupInfo } from '../groupFeed/hooks/queries'; import Loading from '../loading/Loading'; import RenderAdminContent from './components/RenderAdminContent'; import { useFetchInvitationLink } from './hooks/queries'; - import { AdminHomeIc } from '../../assets/svgs'; import { AdminHeader } from '../../components/commons/Header'; - import Responsive from '../../components/commons/Responsive/Responsive'; import Spacing from '../../components/commons/Spacing'; import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery';