From 6c795b5f02d84c5487f79e2a7901d40045094a3a Mon Sep 17 00:00:00 2001 From: namdaeun Date: Thu, 28 Nov 2024 17:54:00 +0900 Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20nav?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 76 +++++++++---------- .../admin/components/RenderAdminContent.tsx | 20 ++++- .../admin/components/navbar/DesktopNav.tsx | 65 ++++++++++++++++ .../admin/components/navbar/MobileNav.tsx | 38 ++++++++++ 4 files changed, 154 insertions(+), 45 deletions(-) create mode 100644 src/pages/admin/components/navbar/DesktopNav.tsx create mode 100644 src/pages/admin/components/navbar/MobileNav.tsx diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index d7b5ab6e..815edebb 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -9,8 +9,11 @@ import { useFetchInvitationLink } from './hooks/queries'; import { AdminHomeIc } from '../../assets/svgs'; import { AuthorizationHeader } from '../../components/commons/Header'; +import Responsive from '../../components/commons/Responsive/Responsive'; import Spacing from '../../components/commons/Spacing'; import { copyLink } from '../../utils/copyLink'; +import DesktopNav from './components/navbar/DesktopNav'; +import MobileNav from './components/navbar/MobileNav'; const Admin = () => { const accessToken = localStorage.getItem('accessToken'); @@ -38,49 +41,37 @@ const Admin = () => { return ; } return ( - + <> {accessToken && } - - - - - - - Home - - {infoResponse?.moimName} - - - - 관리자 페이지 - - - { - setAdmin('topic'); - }} - isActive={admin === 'topic'} - > - 글감 설정 - - setAdmin('member')} isActive={admin === 'member'}> - 멤버 관리 - - setAdmin('groupInfo')} isActive={admin === 'groupInfo'}> - 모임 정보 수정 - - - - - {invitationCode && ( - - 초대링크 복사하기 - - )} - - - - + + + + + + + + + + + + Home + + {infoResponse?.moimName} + + + + + {invitationCode && ( + + 초대링크 복사하기 + + )} + + + + + + ); }; @@ -88,6 +79,7 @@ export default Admin; const AdminWrapper = styled.div` width: 100%; + padding: 0 2rem; `; const AdminLayout = styled.div` diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index 8da0831f..954b9262 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -13,10 +13,12 @@ import { useAdminTopic, useDeleteGroup, useFetchMemberInfo } from '../hooks/quer import { useNavigate } from 'react-router-dom'; import { MakeGroupAdminIc } from '../../../assets/svgs'; import { DefaultModal, DefaultModalBtn } from '../../../components/commons/modal/DefaultModal'; +import Responsive from '../../../components/commons/Responsive/Responsive'; import Spacing from '../../../components/commons/Spacing'; import useBlockPageExit from '../../../hooks/useBlockPageExit'; import useModal from '../../../hooks/useModal'; import Loading from '../../loading/Loading'; + const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo' }) => { const { groupId } = useParams(); const [page, setPage] = useState(1); @@ -68,11 +70,23 @@ const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo'
- 글감 설정 - + + 글감 설정 + + {`${topicCount}개의 글감이 저장되어있어요`}
- + + + + + + {showModal && ( diff --git a/src/pages/admin/components/navbar/DesktopNav.tsx b/src/pages/admin/components/navbar/DesktopNav.tsx new file mode 100644 index 00000000..ca51ce36 --- /dev/null +++ b/src/pages/admin/components/navbar/DesktopNav.tsx @@ -0,0 +1,65 @@ +import styled from '@emotion/styled'; +import { useState } from 'react'; +import Spacing from '../../../../components/commons/Spacing'; + +const DesktopNav = () => { + const [admin, setAdmin] = useState<'topic' | 'member' | 'groupInfo'>('topic'); + + return ( + + 관리자 페이지 + + + { + setAdmin('topic'); + }} + isActive={admin === 'topic'} + > + 글감 설정 + + setAdmin('member')} isActive={admin === 'member'}> + 멤버 관리 + + setAdmin('groupInfo')} isActive={admin === 'groupInfo'}> + 모임 정보 수정 + + + + ); +}; + +export default DesktopNav; + +const AdminMenu = styled.div` + width: 100%; + height: 23.8rem; + padding: 2.4rem; + + background: ${({ theme }) => theme.colors.white}; + border-radius: 8px; +`; + +const Title = styled.h1` + ${({ theme }) => theme.fonts.title9}; + color: ${({ theme }) => theme.colors.mainViolet}; +`; + +const MenuList = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +const Menu = styled.div<{ isActive: boolean }>` + padding: 1rem 1.6rem; + + ${({ theme }) => theme.fonts.subtitle3}; + + color: ${({ isActive, theme }) => (isActive ? theme.colors.black : theme.colors.gray70)}; + + background-color: ${({ isActive, theme }) => + isActive ? theme.colors.backGroundGray : theme.colors.white}; + cursor: pointer; + border-radius: 8px; +`; diff --git a/src/pages/admin/components/navbar/MobileNav.tsx b/src/pages/admin/components/navbar/MobileNav.tsx new file mode 100644 index 00000000..6e2d0a75 --- /dev/null +++ b/src/pages/admin/components/navbar/MobileNav.tsx @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; + +const MobileNav = () => { + return ( + + + 글감 설정 + 멤버 관리 + 모임 정보 수정 + + + ); +}; + +export default MobileNav; + +const NavWrapper = styled.nav` + display: flex; + justify-content: center; + width: 100%; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: 0.8rem; +`; + +const NavListLayout = styled.ul` + display: flex; +`; + +const NavListItem = styled.li` + padding: 1.1rem 2.8rem; + + white-space: nowrap; + + list-style-type: none; + + ${({ theme }) => theme.fonts.mSubtitle1}; +`; From ce05974103eb32c5bff917287ccf5c76cbb33044 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Fri, 29 Nov 2024 19:57:32 +0900 Subject: [PATCH 02/17] =?UTF-8?q?style:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20na?= =?UTF-8?q?v=20flex=20=EB=B9=84=EC=9C=A8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/components/navbar/MobileNav.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/admin/components/navbar/MobileNav.tsx b/src/pages/admin/components/navbar/MobileNav.tsx index 6e2d0a75..763a6726 100644 --- a/src/pages/admin/components/navbar/MobileNav.tsx +++ b/src/pages/admin/components/navbar/MobileNav.tsx @@ -16,7 +16,6 @@ export default MobileNav; const NavWrapper = styled.nav` display: flex; - justify-content: center; width: 100%; background-color: ${({ theme }) => theme.colors.white}; @@ -25,14 +24,19 @@ const NavWrapper = styled.nav` const NavListLayout = styled.ul` display: flex; + justify-content: space-between; + width: 100%; `; const NavListItem = styled.li` + display: flex; + flex: 1; + justify-content: center; padding: 1.1rem 2.8rem; white-space: nowrap; list-style-type: none; - ${({ theme }) => theme.fonts.mSubtitle1}; + cursor: pointer; `; From 5e4c3bc8c8142ec1edb0982586237ac85fa64b5d Mon Sep 17 00:00:00 2001 From: namdaeun Date: Fri, 29 Nov 2024 21:08:56 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 12 +++--- .../admin/components/RenderAdminContent.tsx | 19 ++++++---- .../admin/components/navbar/DesktopNav.tsx | 23 ++++++------ .../admin/components/navbar/MobileNav.tsx | 37 ++++++++++++++++--- src/pages/admin/hooks/useMenu.ts | 32 ++++++++++++++++ src/pages/admin/types/menu.ts | 1 + 6 files changed, 94 insertions(+), 30 deletions(-) create mode 100644 src/pages/admin/hooks/useMenu.ts create mode 100644 src/pages/admin/types/menu.ts diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index 815edebb..ca1446a5 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import { useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useGroupInfo } from '../groupFeed/hooks/queries'; @@ -14,17 +13,18 @@ import Spacing from '../../components/commons/Spacing'; import { copyLink } from '../../utils/copyLink'; import DesktopNav from './components/navbar/DesktopNav'; import MobileNav from './components/navbar/MobileNav'; +import useMenu from './hooks/useMenu'; const Admin = () => { const accessToken = localStorage.getItem('accessToken'); - - const [admin, setAdmin] = useState<'topic' | 'member' | 'groupInfo'>('topic'); const { groupId } = useParams(); const navigate = useNavigate(); const { invitationCode } = useFetchInvitationLink(groupId); const { infoResponse, isLoading } = useGroupInfo(groupId || ''); + const { menu, handleMenuItem, isClicked } = useMenu(); + const handleCopyLink = (invitationCode: string) => { copyLink(import.meta.env.VITE_INVITE_URL + `group/${invitationCode}/groupInvite`); }; @@ -46,7 +46,7 @@ const Admin = () => { - + @@ -59,7 +59,7 @@ const Admin = () => { {infoResponse?.moimName} - + {invitationCode && ( @@ -68,7 +68,7 @@ const Admin = () => { )} - + diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index 954b9262..67033781 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -18,8 +18,13 @@ import Spacing from '../../../components/commons/Spacing'; import useBlockPageExit from '../../../hooks/useBlockPageExit'; import useModal from '../../../hooks/useModal'; import Loading from '../../loading/Loading'; +import { Menu } from '../types/menu'; -const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo' }) => { +interface RenderAdminContentPropTypes { + menu: Menu; +} + +const RenderAdminContent = ({ menu }: RenderAdminContentPropTypes) => { const { groupId } = useParams(); const [page, setPage] = useState(1); const [pageNum, setPageNum] = useState(1); @@ -47,8 +52,8 @@ const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo' // groupInfo일 때만 페이지 이탈 감지 활성화 useEffect(() => { - admin === 'groupInfo' ? setIgnoreBlocker(false) : setIgnoreBlocker(true); - }, [admin]); + menu === '모임 정보 수정' ? setIgnoreBlocker(false) : setIgnoreBlocker(true); + }, [menu]); const { mutate: deleteGroup, isPending, isError } = useDeleteGroup(groupId || ''); @@ -64,8 +69,8 @@ const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo' return ; } - switch (admin) { - case 'topic': + switch (menu) { + case '글감 설정': return ( @@ -99,7 +104,7 @@ const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo' ); - case 'member': + case '멤버 관리': return ( 멤버 관리 @@ -110,7 +115,7 @@ const RenderAdminContent = ({ admin }: { admin: 'topic' | 'member' | 'groupInfo' ); - case 'groupInfo': + case '모임 정보 수정': return ( <> diff --git a/src/pages/admin/components/navbar/DesktopNav.tsx b/src/pages/admin/components/navbar/DesktopNav.tsx index ca51ce36..50a94e15 100644 --- a/src/pages/admin/components/navbar/DesktopNav.tsx +++ b/src/pages/admin/components/navbar/DesktopNav.tsx @@ -1,27 +1,28 @@ import styled from '@emotion/styled'; -import { useState } from 'react'; import Spacing from '../../../../components/commons/Spacing'; +import type { Menu } from '../../types/menu'; -const DesktopNav = () => { - const [admin, setAdmin] = useState<'topic' | 'member' | 'groupInfo'>('topic'); +interface DesktopNavPropTypes { + isClicked: Record; + handleMenuItem: (menu: Menu) => void; +} +const DesktopNav = ({ isClicked, handleMenuItem }: DesktopNavPropTypes) => { return ( 관리자 페이지 - { - setAdmin('topic'); - }} - isActive={admin === 'topic'} - > + handleMenuItem('글감 설정')} isActive={isClicked['글감 설정']}> 글감 설정 - setAdmin('member')} isActive={admin === 'member'}> + handleMenuItem('멤버 관리')} isActive={isClicked['멤버 관리']}> 멤버 관리 - setAdmin('groupInfo')} isActive={admin === 'groupInfo'}> + handleMenuItem('모임 정보 수정')} + isActive={isClicked['모임 정보 수정']} + > 모임 정보 수정 diff --git a/src/pages/admin/components/navbar/MobileNav.tsx b/src/pages/admin/components/navbar/MobileNav.tsx index 763a6726..589ab819 100644 --- a/src/pages/admin/components/navbar/MobileNav.tsx +++ b/src/pages/admin/components/navbar/MobileNav.tsx @@ -1,12 +1,34 @@ import styled from '@emotion/styled'; +import theme from '../../../../styles/theme'; +import { Menu } from '../../types/menu'; -const MobileNav = () => { +interface MobileNavPropTypes { + isClicked: Record; + handleMenuItem: (menu: Menu) => void; +} + +const MobileNav = ({ isClicked, handleMenuItem }: MobileNavPropTypes) => { return ( - 글감 설정 - 멤버 관리 - 모임 정보 수정 + handleMenuItem('글감 설정')} + $isClicked={isClicked['글감 설정']} + > + 글감 설정 + + handleMenuItem('멤버 관리')} + $isClicked={isClicked['멤버 관리']} + > + 멤버 관리 + + handleMenuItem('모임 정보 수정')} + $isClicked={isClicked['모임 정보 수정']} + > + 모임 정보 수정 + ); @@ -17,6 +39,7 @@ export default MobileNav; const NavWrapper = styled.nav` display: flex; width: 100%; + padding: 0.2rem 0.48rem; background-color: ${({ theme }) => theme.colors.white}; border-radius: 0.8rem; @@ -28,7 +51,7 @@ const NavListLayout = styled.ul` width: 100%; `; -const NavListItem = styled.li` +const NavListItem = styled.li<{ $isClicked: boolean }>` display: flex; flex: 1; justify-content: center; @@ -37,6 +60,8 @@ const NavListItem = styled.li` white-space: nowrap; list-style-type: none; - ${({ theme }) => theme.fonts.mSubtitle1}; + ${({ $isClicked }) => ($isClicked ? theme.fonts.mButton1 : theme.fonts.mSubtitle2)}; + background-color: ${({ $isClicked }) => ($isClicked ? theme.colors.gray10 : theme.colors.white)}; cursor: pointer; + border-radius: 0.8rem; `; diff --git a/src/pages/admin/hooks/useMenu.ts b/src/pages/admin/hooks/useMenu.ts new file mode 100644 index 00000000..a3e3d2cb --- /dev/null +++ b/src/pages/admin/hooks/useMenu.ts @@ -0,0 +1,32 @@ +import { useState } from 'react'; + +import { Menu } from '../types/menu'; + +const useMenu = () => { + const [menu, setMenu] = useState('글감 설정'); + + const [isClicked, setIsClicked] = useState>({ + '글감 설정': true, + '멤버 관리': false, + '모임 정보 수정': false, + }); + + const handleMenuItem = (menu: Menu) => { + setMenu(menu); + + setIsClicked(() => ({ + '글감 설정': false, + '멤버 관리': false, + '모임 정보 수정': false, + [menu]: true, + })); + }; + + return { + menu, + isClicked, + handleMenuItem, + }; +}; + +export default useMenu; diff --git a/src/pages/admin/types/menu.ts b/src/pages/admin/types/menu.ts new file mode 100644 index 00000000..72f96456 --- /dev/null +++ b/src/pages/admin/types/menu.ts @@ -0,0 +1 @@ +export type Menu = '글감 설정' | '멤버 관리' | '모임 정보 수정'; From df83b2b808860dc1c95dc60151130ff00ff253f3 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Fri, 29 Nov 2024 21:21:25 +0900 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20admin=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B7=B0=20?= =?UTF-8?q?=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 53 ++++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index ca1446a5..6e47c37d 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -44,9 +44,28 @@ const Admin = () => { <> {accessToken && } - + + + + + + + + + + {infoResponse?.moimName} + 관리자 페이지 + + + + Home + + + + + @@ -116,15 +135,6 @@ const GroupName = styled.h3` cursor: default; `; -const AdminMenu = styled.div` - width: 100%; - height: 23.8rem; - padding: 2.4rem; - - background: ${({ theme }) => theme.colors.white}; - border-radius: 8px; -`; - const AdminInviteBtn = styled.button` display: flex; align-items: center; @@ -147,26 +157,17 @@ const AdminInviteBtn = styled.button` } `; -const Title = styled.h1` - ${({ theme }) => theme.fonts.title9}; - color: ${({ theme }) => theme.colors.mainViolet}; +const GroupLayout = styled.div` + display: flex; + justify-content: space-between; `; -const MenuList = styled.div` +const NameBox = styled.div` display: flex; flex-direction: column; - gap: 0.8rem; `; -const Menu = styled.div<{ isActive: boolean }>` - padding: 1rem 1.6rem; - - ${({ theme }) => theme.fonts.subtitle3}; - - color: ${({ isActive, theme }) => (isActive ? theme.colors.black : theme.colors.gray70)}; - - background-color: ${({ isActive, theme }) => - isActive ? theme.colors.backGroundGray : theme.colors.white}; - cursor: pointer; - border-radius: 8px; +const PageName = styled.h1` + color: ${({ theme }) => theme.colors.mainViolet}; + ${({ theme }) => theme.fonts.mTitle6}; `; From 03a7c791df1e76ca502303c45c4e0f8b9c9f8b86 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Fri, 29 Nov 2024 21:22:20 +0900 Subject: [PATCH 05/17] chore: fix spacing --- 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 6e47c37d..3a013e84 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -48,7 +48,7 @@ const Admin = () => { - + From 63d5768b8679569678bf60e5f2fc96af88c018a9 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Fri, 29 Nov 2024 21:54:52 +0900 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=EA=B8=80=EA=B0=90=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B7=B0=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 6 +- .../admin/components/AddEditTopicModal.tsx | 63 ++++++++++++++++--- .../admin/components/RenderAdminContent.tsx | 7 ++- src/pages/admin/components/TopicAdmin.tsx | 8 ++- 4 files changed, 74 insertions(+), 10 deletions(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index 3a013e84..ad4e5d6f 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -53,7 +53,7 @@ const Admin = () => { - {infoResponse?.moimName} + {infoResponse?.moimName} 관리자 페이지 @@ -135,6 +135,10 @@ const GroupName = styled.h3` cursor: default; `; +const MobileGroupName = styled.h3` + ${({ theme }) => theme.fonts.mSubtitle4}; +`; + const AdminInviteBtn = styled.button` display: flex; align-items: center; diff --git a/src/pages/admin/components/AddEditTopicModal.tsx b/src/pages/admin/components/AddEditTopicModal.tsx index 4dec75ef..d9a49d6d 100644 --- a/src/pages/admin/components/AddEditTopicModal.tsx +++ b/src/pages/admin/components/AddEditTopicModal.tsx @@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'; import { useEditAdminTopic, usePostAdminTopic } from '../hooks/queries'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface topicPropTypes { topicStored?: string; @@ -41,12 +42,12 @@ const AddEditTopicModal = ({ const { postMutateAdminTopic } = usePostAdminTopic(groupId, pageNum); const { editMutateAdminTopic } = useEditAdminTopic(topicId, groupId, pageNum); - const handleTopicNameChange = (e: React.ChangeEvent) => { + const handleTopicNameChange = (e: React.ChangeEvent) => { setTopic(e.target.value); setTopicNameError(false); //다시 입력할때의 초기화 }; - const handleTopicTagChange = (e: React.ChangeEvent) => { + const handleTopicTagChange = (e: React.ChangeEvent) => { setTopicTag(e.target.value); setTopicTagError(false); }; @@ -107,7 +108,7 @@ const AddEditTopicModal = ({ 90 || topicDescriptionError}> theme.colors.white}; transform: translate(-50%, -50%); - ${({ theme }) => theme.fonts.subtitle2} border-radius: 8px; + + ${({ theme }) => theme.fonts.subtitle2} + + @media ${MOBILE_MEDIA_QUERY} { + gap: 1.8rem; + max-width: 33.5rem; + padding: 1.8rem; + + ${({ theme }) => theme.fonts.mTitle1}; + } `; const InputWrapper = styled.div<{ isError: boolean }>` @@ -156,11 +166,21 @@ const InputWrapper = styled.div<{ isError: boolean }>` border: 1px solid ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; border-radius: 6px; + + @media ${MOBILE_MEDIA_QUERY} { + align-items: end; + justify-content: baseline; + width: 100%; + min-height: 6rem; + padding: 1rem 1.3rem; + } `; -const TopicInput = styled.input` +const TopicInput = styled.textarea` width: 46.4rem; height: 100%; + padding: 0; + overflow: hidden; color: ${({ theme }) => theme.colors.gray100}; @@ -171,6 +191,13 @@ const TopicInput = styled.input` ::placeholder { color: ${({ theme }) => theme.colors.gray50}; + white-space: pre-line; + + @media ${MOBILE_MEDIA_QUERY} { + min-height: 4rem; + + ${({ theme }) => theme.fonts.mSubtitle2}; + } } `; @@ -184,18 +211,24 @@ const SubmitForm = styled.button` background-color: ${({ theme }) => theme.colors.mainViolet}; ${({ theme }) => theme.fonts.button2} border-radius: 10px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + height: 4.4rem; + padding: 1rem 2rem; + ${({ theme }) => theme.fonts.mButton1}; + } `; const TopicDescriptionInput = styled.textarea<{ isError: boolean }>` width: 52.8rem; height: 7.8rem; + overflow: scroll; color: ${({ theme }) => theme.colors.gray100}; ${({ theme }) => theme.fonts.button2} background-color: ${({ theme }) => theme.colors.gray5}; - border: 1px solid - ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; border: none; border-radius: 6px; @@ -203,11 +236,19 @@ const TopicDescriptionInput = styled.textarea<{ isError: boolean }>` ::placeholder { color: ${({ theme }) => theme.colors.gray50}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle2}; + } } :focus { outline: none; } + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const TextAreaWrapper = styled.div<{ isError: boolean }>` @@ -222,9 +263,17 @@ const TextAreaWrapper = styled.div<{ isError: boolean }>` border: 1px solid ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; border-radius: 6px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const TextCount = styled.div<{ isError: boolean }>` ${({ theme }) => theme.fonts.button3} color: ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray70)}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mButton1}; + } `; diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index 67033781..ceb5745e 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -93,7 +93,12 @@ const RenderAdminContent = ({ menu }: RenderAdminContentPropTypes) => { /> - + + + + + + {showModal && ( <> diff --git a/src/pages/admin/components/TopicAdmin.tsx b/src/pages/admin/components/TopicAdmin.tsx index e9afedfa..63db726c 100644 --- a/src/pages/admin/components/TopicAdmin.tsx +++ b/src/pages/admin/components/TopicAdmin.tsx @@ -4,6 +4,7 @@ import { Dispatch, SetStateAction, useState } from 'react'; import EachTopic from './EachTopic'; import Pagenation from '../../../components/commons/Pagenation'; +import Responsive from '../../../components/commons/Responsive/Responsive'; import Spacing from '../../../components/commons/Spacing'; interface AdminTopicPropTypes { @@ -42,7 +43,12 @@ const TopicAdmin = ({ ))} - + + + + + + {data && data.topicCount && ( Date: Sun, 1 Dec 2024 17:24:48 +0900 Subject: [PATCH 07/17] =?UTF-8?q?style:=20=EB=B0=98=EC=9D=91=ED=98=95?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=EA=B8=80=EA=B0=90=20=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EB=B8=94=20width=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=A4=84?= =?UTF-8?q?=EC=96=B4=EB=93=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 28 ++++++++++++--- src/pages/admin/components/EachTopic.tsx | 36 ++++++++++++++++++- .../admin/components/RenderAdminContent.tsx | 3 +- src/pages/admin/components/TopicAdmin.tsx | 27 ++++++++++++-- .../admin/components/navbar/MobileNav.tsx | 4 ++- src/utils/PageNumber.tsx | 5 +++ 6 files changed, 93 insertions(+), 10 deletions(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index ad4e5d6f..bbc4acf1 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -10,6 +10,7 @@ import { AdminHomeIc } from '../../assets/svgs'; import { AuthorizationHeader } from '../../components/commons/Header'; import Responsive from '../../components/commons/Responsive/Responsive'; import Spacing from '../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; import { copyLink } from '../../utils/copyLink'; import DesktopNav from './components/navbar/DesktopNav'; import MobileNav from './components/navbar/MobileNav'; @@ -41,7 +42,7 @@ const Admin = () => { return ; } return ( - <> + {accessToken && } @@ -90,22 +91,35 @@ const Admin = () => { - + ); }; export default Admin; +const Wrapper = styled.div` + width: 100%; +`; + const AdminWrapper = styled.div` width: 100%; - padding: 0 2rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + padding: 2rem; + } `; const AdminLayout = styled.div` display: flex; gap: 6rem; justify-content: center; - padding: 0 16.5rem; + + @media ${MOBILE_MEDIA_QUERY} { + display: flex; + flex-basis: 100%; + width: 100%; + } `; const SideNavbar = styled.nav` @@ -128,6 +142,10 @@ const HomeBtn = styled.button` color: ${({ theme }) => theme.colors.gray60}; ${({ theme }) => theme.fonts.body1}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle4}; + } `; const GroupName = styled.h3` @@ -137,6 +155,7 @@ const GroupName = styled.h3` const MobileGroupName = styled.h3` ${({ theme }) => theme.fonts.mSubtitle4}; + white-space: nowrap; `; const AdminInviteBtn = styled.button` @@ -174,4 +193,5 @@ const NameBox = styled.div` const PageName = styled.h1` color: ${({ theme }) => theme.colors.mainViolet}; ${({ theme }) => theme.fonts.mTitle6}; + white-space: nowrap; `; diff --git a/src/pages/admin/components/EachTopic.tsx b/src/pages/admin/components/EachTopic.tsx index 944e38b9..3cf380a9 100644 --- a/src/pages/admin/components/EachTopic.tsx +++ b/src/pages/admin/components/EachTopic.tsx @@ -11,6 +11,8 @@ import { MODAL } from '../constants/modal'; import { useDeleteAdminTopic } from '../hooks/queries'; import { DeleteIc, EditIc } from '../../../assets/svgs'; +import Responsive from '../../../components/commons/Responsive/Responsive'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface AdminTopicPropTypes { topicId: string; @@ -44,7 +46,9 @@ const EachTopic = ({ data, pageNum }: eachTopicPropTypes) => { {createdAt} {topicTag} - {topicDescription} + + {topicDescription} + theme.colors.black}; + white-space: nowrap; + text-overflow: ellipsis; ${({ theme }) => theme.fonts.body1}; + + @media ${MOBILE_MEDIA_QUERY} { + max-width: 13rem; + ${({ theme }) => theme.fonts.mSubtitle2}; + } `; const TopicDate = styled.p` color: ${({ theme }) => theme.colors.gray60}; ${({ theme }) => theme.fonts.body6}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle1}; + } `; const TopicTag = styled.p` @@ -150,6 +180,10 @@ const TopicTag = styled.p` color: ${({ theme }) => theme.colors.black}; ${({ theme }) => theme.fonts.body1}; text-align: center; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle2}; + } `; const TopicDescription = styled.p` diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index ceb5745e..df6c84cd 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -196,8 +196,7 @@ const ModalOverlay = styled.div` const AdminContainer = styled.div` display: flex; flex-direction: column; - - /* width: 78.1rem; */ + width: 100%; `; const Title = styled.h1` diff --git a/src/pages/admin/components/TopicAdmin.tsx b/src/pages/admin/components/TopicAdmin.tsx index 63db726c..898c4211 100644 --- a/src/pages/admin/components/TopicAdmin.tsx +++ b/src/pages/admin/components/TopicAdmin.tsx @@ -6,6 +6,7 @@ import EachTopic from './EachTopic'; import Pagenation from '../../../components/commons/Pagenation'; import Responsive from '../../../components/commons/Responsive/Responsive'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface AdminTopicPropTypes { topicCount: number; @@ -34,7 +35,9 @@ const TopicAdmin = ({ 글감 글감 태그 - 글감 설명 + + 글감 설명 + {data && @@ -68,7 +71,7 @@ export default TopicAdmin; const TopicListWrapper = styled.div` display: flex; flex-direction: column; - width: 78.1rem; + width: 100%; `; const TopicAdminCategory = styled.ul` @@ -84,16 +87,31 @@ const TopicAdminCategory = styled.ul` background-color: ${({ theme }) => theme.colors.mileViolet}; border-radius: 8px 8px 0 0; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + height: 4rem; + } `; const Topic = styled.li` width: 20.8rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 13rem; + ${({ theme }) => theme.fonts.editor}; + } `; const TopicTag = styled.li` width: 7rem; text-align: center; + + @media ${MOBILE_MEDIA_QUERY} { + width: 6.1rem; + ${({ theme }) => theme.fonts.editor}; + } `; const TopicDescription = styled.li` @@ -108,4 +126,9 @@ const TopicList = styled.div` background-color: ${({ theme }) => theme.colors.white}; border-radius: 0 0 8px 8px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + ${({ theme }) => theme.fonts.editor}; + } `; diff --git a/src/pages/admin/components/navbar/MobileNav.tsx b/src/pages/admin/components/navbar/MobileNav.tsx index 589ab819..d756f7b0 100644 --- a/src/pages/admin/components/navbar/MobileNav.tsx +++ b/src/pages/admin/components/navbar/MobileNav.tsx @@ -39,6 +39,7 @@ export default MobileNav; const NavWrapper = styled.nav` display: flex; width: 100%; + min-width: 33.5rem; padding: 0.2rem 0.48rem; background-color: ${({ theme }) => theme.colors.white}; @@ -47,6 +48,7 @@ const NavWrapper = styled.nav` const NavListLayout = styled.ul` display: flex; + gap: 0.2rem; justify-content: space-between; width: 100%; `; @@ -55,7 +57,7 @@ const NavListItem = styled.li<{ $isClicked: boolean }>` display: flex; flex: 1; justify-content: center; - padding: 1.1rem 2.8rem; + padding: 1.1rem; white-space: nowrap; diff --git a/src/utils/PageNumber.tsx b/src/utils/PageNumber.tsx index 3bf81578..fce0498d 100644 --- a/src/utils/PageNumber.tsx +++ b/src/utils/PageNumber.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { MOBILE_MEDIA_QUERY } from '../styles/mediaQuery'; const PageNumber = ({ children, @@ -28,4 +29,8 @@ const NumberLayout = styled.button<{ isActive: boolean }>` border-radius: 4px; ${({ theme, isActive }) => (isActive ? theme.fonts.subtitle3 : theme.fonts.body1)}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle2}; + } `; From 7febd94e9df3f7283aae0343250f898476ddd426 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 00:22:31 +0900 Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=EA=B8=80=EA=B0=90=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/inputModal/InputModal.tsx | 284 ++++++++++++++++++ src/constants/modal.ts | 7 + src/pages/admin/Admin.tsx | 1 + 3 files changed, 292 insertions(+) create mode 100644 src/components/commons/inputModal/InputModal.tsx create mode 100644 src/constants/modal.ts diff --git a/src/components/commons/inputModal/InputModal.tsx b/src/components/commons/inputModal/InputModal.tsx new file mode 100644 index 00000000..a4c0e335 --- /dev/null +++ b/src/components/commons/inputModal/InputModal.tsx @@ -0,0 +1,284 @@ +import styled from '@emotion/styled'; +import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; + +import Spacing from '../../../components/commons/Spacing'; +import { useEditAdminTopic, usePostAdminTopic } from '../../../pages/admin/hooks/queries'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; + +interface topicPropTypes { + topicStored?: string; + topicTagStored?: string; + topicDescriptionStored?: string; + topicId?: string; + pageNum: number; + setShowModal: Dispatch>; + topicPlaceholder: string; + tagPlaceholder: string; + descPlaceholder: string; +} + +const InputModal = ({ + topicStored, + topicTagStored, + topicDescriptionStored, + topicId, + pageNum, + setShowModal, + topicPlaceholder, + tagPlaceholder, + descPlaceholder, +}: topicPropTypes) => { + useEffect(() => { + setTopic(topicStored || ''); + setTopicTag(topicTagStored || ''); + setTopicDescription(topicDescriptionStored || ''); + }, []); + + const [topic, setTopic] = useState(''); + const [topicTag, setTopicTag] = useState(''); + const [topicDescription, setTopicDescription] = useState(''); + const [topicNameError, setTopicNameError] = useState(false); + const [topicTagError, setTopicTagError] = useState(false); + const [topicDescriptionError, setTopicDescriptionError] = useState(false); + + const { groupId } = useParams(); + + const { postMutateAdminTopic } = usePostAdminTopic(groupId, pageNum); + const { editMutateAdminTopic } = useEditAdminTopic(topicId, groupId, pageNum); + + const handleTopicNameChange = (e: React.ChangeEvent) => { + setTopic(e.target.value); + setTopicNameError(false); //다시 입력할때의 초기화 + }; + + const handleTopicTagChange = (e: React.ChangeEvent) => { + setTopicTag(e.target.value); + setTopicTagError(false); + }; + + const handleTopicDescriptionChange = (e: React.ChangeEvent) => { + const newDescription = e.target.value; + setTopicDescription(newDescription); + setTopicDescriptionError(false); + }; + + const handleSubmit = (topicStored: string) => { + const isTopicNameError = topic.trim() === '' || topic.length > 15; + const isTopicTagError = topicTag.trim() === '' || topicTag.length > 5; + const isTopicDescriptionError = topicDescription.length > 90; + + setTopicNameError(isTopicNameError); + setTopicTagError(isTopicTagError); + setTopicDescriptionError(isTopicDescriptionError); + + if (!isTopicNameError && !isTopicTagError && !isTopicDescriptionError) { + topicStored + ? editMutateAdminTopic({ topic, topicTag, topicDescription, topicId }) + : postMutateAdminTopic({ topic, topicTag, topicDescription, groupId }); + setShowModal(false); + } + }; + + return ( + +
+ 글감* + + 15 || topicNameError}> + + 15 || topicNameError}>{topic.length}/15 + +
+
+ 글감 태그* + + 5 || topicTagError}> + + 5 || topicTagError}>{topicTag.length}/5 + +
+
+ 글감 소개 + + 90 || topicDescriptionError}> + + 90 || topicDescriptionError}> + {topicDescription.length}/90 + + +
+ handleSubmit(topicStored || '')}> + {topicStored ? '글감 수정하기' : '글감 생성하기'} + + + ); +}; + +export default InputModal; + +const ModalWrapper = styled.div` + position: fixed; + top: 50%; + left: 50%; + z-index: 6; + display: flex; + flex-direction: column; + gap: 3.2rem; + width: 61.6rem; + padding: 3.2rem; + + background-color: ${({ theme }) => theme.colors.white}; + transform: translate(-50%, -50%); + border-radius: 8px; + + ${({ theme }) => theme.fonts.subtitle2} + + @media ${MOBILE_MEDIA_QUERY} { + gap: 1.8rem; + max-width: 33.5rem; + padding: 1.8rem; + + ${({ theme }) => theme.fonts.mTitle1}; + } +`; + +const InputWrapper = styled.div<{ isError: boolean }>` + display: flex; + align-items: center; + justify-content: space-between; + width: 55.2rem; + height: 3.9rem; + padding: 1rem 1.2rem; + + background-color: ${({ theme }) => theme.colors.gray5}; + border: 1px solid + ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; + border-radius: 6px; + + @media ${MOBILE_MEDIA_QUERY} { + align-items: end; + justify-content: baseline; + width: 100%; + min-height: 6rem; + padding: 1rem 1.3rem; + } +`; + +const TopicInput = styled.textarea` + width: 46.4rem; + height: 100%; + padding: 0; + overflow: hidden; + + color: ${({ theme }) => theme.colors.gray100}; + + ${({ theme }) => theme.fonts.button2} + + background-color: ${({ theme }) => theme.colors.gray5}; + border: none; + + ::placeholder { + color: ${({ theme }) => theme.colors.gray50}; + white-space: pre-line; + + @media ${MOBILE_MEDIA_QUERY} { + min-height: 4rem; + + ${({ theme }) => theme.fonts.mSubtitle2}; + } + } +`; + +const SubmitForm = styled.button` + width: 55.2rem; + height: 5.1rem; + padding: 1.6rem 2rem; + + color: ${({ theme }) => theme.colors.white}; + + background-color: ${({ theme }) => theme.colors.mainViolet}; + ${({ theme }) => theme.fonts.button2} + border-radius: 10px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + height: 4.4rem; + padding: 1rem 2rem; + ${({ theme }) => theme.fonts.mButton1}; + } +`; + +const TopicDescriptionInput = styled.textarea<{ isError: boolean }>` + width: 52.8rem; + height: 7.8rem; + overflow: scroll; + + color: ${({ theme }) => theme.colors.gray100}; + ${({ theme }) => theme.fonts.button2} + + background-color: ${({ theme }) => theme.colors.gray5}; + border: none; + border-radius: 6px; + + resize: none; + + ::placeholder { + color: ${({ theme }) => theme.colors.gray50}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle2}; + } + } + + :focus { + outline: none; + } + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } +`; + +const TextAreaWrapper = styled.div<{ isError: boolean }>` + display: flex; + flex-direction: column; + align-items: end; + width: 55.2rem; + height: 11.8rem; + padding: 1rem 1.2rem; + + background-color: ${({ theme }) => theme.colors.gray5}; + border: 1px solid + ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; + border-radius: 6px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } +`; + +const TextCount = styled.div<{ isError: boolean }>` + ${({ theme }) => theme.fonts.button3} + color: ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray70)}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mButton1}; + } +`; diff --git a/src/constants/modal.ts b/src/constants/modal.ts new file mode 100644 index 00000000..9b5f59e4 --- /dev/null +++ b/src/constants/modal.ts @@ -0,0 +1,7 @@ +export const ADMIN = { + PLACEHOLER: { + TOPIC: '함께 작성하고 싶은 글감을 입력해주세요. ex) 마음이 담긴 선물', + TAG: '위에 적은 글감을 한 단어로 요약해주세요. ex) 선물', + DESC: `글감에 대해 자유롭게 소개해주세요.\nex) 마음이 담긴 선물을 주거나 받은 기억을 떠올려보세요. 그 순간이 당신에게 어떤 의미로 남았는지 이야기해주세요.`, + }, +}; diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index bbc4acf1..1bbd8ca5 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -103,6 +103,7 @@ const Wrapper = styled.div` const AdminWrapper = styled.div` width: 100%; + padding: 0 16.5rem; @media ${MOBILE_MEDIA_QUERY} { width: 100%; From 6a551805d5c10196a5b53f8ff451968321550e0e Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 01:16:55 +0900 Subject: [PATCH 09/17] =?UTF-8?q?style:=20=EC=8A=A4=ED=83=80=EC=9D=BC=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 --- src/pages/admin/components/EachTopic.tsx | 13 ++++++++- .../admin/components/RenderAdminContent.tsx | 12 +++++++-- src/pages/admin/components/TopicAdmin.tsx | 27 ++++++++++++++++++- 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src/pages/admin/components/EachTopic.tsx b/src/pages/admin/components/EachTopic.tsx index 3cf380a9..6d056884 100644 --- a/src/pages/admin/components/EachTopic.tsx +++ b/src/pages/admin/components/EachTopic.tsx @@ -134,6 +134,7 @@ const TopicData = styled.div` height: 5.2rem; @media ${MOBILE_MEDIA_QUERY} { + gap: 1.6rem; width: 100%; } `; @@ -147,6 +148,7 @@ const Topic = styled.div` @media ${MOBILE_MEDIA_QUERY} { width: 100%; + max-width: 13rem; } `; @@ -174,14 +176,22 @@ const TopicDate = styled.p` `; const TopicTag = styled.p` + align-content: center; width: 7rem; padding: 0.6rem 0; color: ${({ theme }) => theme.colors.black}; - ${({ theme }) => theme.fonts.body1}; + white-space: nowrap; text-align: center; + text-overflow: ellipsis; + + ${({ theme }) => theme.fonts.body1}; @media ${MOBILE_MEDIA_QUERY} { + display: flex; + justify-content: center; + width: 6.1rem; + ${({ theme }) => theme.fonts.mSubtitle2}; } `; @@ -200,5 +210,6 @@ const TopicDescription = styled.p` const TopicAction = styled.div` display: flex; + flex-shrink: 1; gap: 0.8rem; `; diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index df6c84cd..0783aa78 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; -import AddEditTopicModal from './AddEditTopicModal'; import EditGroupInfo from './EditGroupInfo'; import MemberManage from './MemberManage'; import TopicAdmin from './TopicAdmin'; @@ -12,9 +11,11 @@ import { useAdminTopic, useDeleteGroup, useFetchMemberInfo } from '../hooks/quer import { useNavigate } from 'react-router-dom'; import { MakeGroupAdminIc } from '../../../assets/svgs'; +import InputModal from '../../../components/commons/inputModal/InputModal'; import { DefaultModal, DefaultModalBtn } from '../../../components/commons/modal/DefaultModal'; import Responsive from '../../../components/commons/Responsive/Responsive'; import Spacing from '../../../components/commons/Spacing'; +import { ADMIN } from '../../../constants/modal'; import useBlockPageExit from '../../../hooks/useBlockPageExit'; import useModal from '../../../hooks/useModal'; import Loading from '../../loading/Loading'; @@ -102,7 +103,13 @@ const RenderAdminContent = ({ menu }: RenderAdminContentPropTypes) => { {showModal && ( <> - + )} @@ -197,6 +204,7 @@ const AdminContainer = styled.div` display: flex; flex-direction: column; width: 100%; + padding-right: 16.5rem; `; const Title = styled.h1` diff --git a/src/pages/admin/components/TopicAdmin.tsx b/src/pages/admin/components/TopicAdmin.tsx index 898c4211..e8c7e082 100644 --- a/src/pages/admin/components/TopicAdmin.tsx +++ b/src/pages/admin/components/TopicAdmin.tsx @@ -38,6 +38,11 @@ const TopicAdmin = ({ 글감 설명 +
+ + 수정/삭제 + +
{data && @@ -46,12 +51,14 @@ const TopicAdmin = ({ ))} + + {data && data.topicCount && ( theme.fonts.editor}; + + ${({ theme }) => theme.fonts.editor} } `; const TopicTag = styled.li` width: 7rem; + white-space: nowrap; text-align: center; @media ${MOBILE_MEDIA_QUERY} { @@ -115,7 +129,17 @@ const TopicTag = styled.li` `; const TopicDescription = styled.li` + display: flex; width: 21.3rem; + margin-left: auto; + + white-space: nowrap; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + margin-right: 2rem; + ${({ theme }) => theme.fonts.editor} + } `; const TopicList = styled.div` @@ -129,6 +153,7 @@ const TopicList = styled.div` @media ${MOBILE_MEDIA_QUERY} { width: 100%; + min-width: 33.5rem; ${({ theme }) => theme.fonts.editor}; } `; From 19e80139560980958fc51bdabe9ab0b56a56199b Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 01:29:03 +0900 Subject: [PATCH 10/17] =?UTF-8?q?chore:=20gitignore=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 4 +++- src/pages/admin/components/RenderAdminContent.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 1cac5597..07b39178 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ dist-ssr *.njsproj *.sln *.sw? -.env \ No newline at end of file +.env + +stats.html \ No newline at end of file diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index 0783aa78..3a90b198 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -94,6 +94,7 @@ const RenderAdminContent = ({ menu }: RenderAdminContentPropTypes) => { /> + @@ -204,7 +205,6 @@ const AdminContainer = styled.div` display: flex; flex-direction: column; width: 100%; - padding-right: 16.5rem; `; const Title = styled.h1` From 2c0dde7cf36ee666b2fda027bab0a594d9346029 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 01:34:14 +0900 Subject: [PATCH 11/17] =?UTF-8?q?fix:=20=EA=B8=B0=EC=A1=B4=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/inputModal/InputModal.tsx | 6 +- .../admin/components/AddEditTopicModal.tsx | 279 ------------------ src/pages/admin/components/EachTopic.tsx | 5 +- 3 files changed, 5 insertions(+), 285 deletions(-) delete mode 100644 src/pages/admin/components/AddEditTopicModal.tsx diff --git a/src/components/commons/inputModal/InputModal.tsx b/src/components/commons/inputModal/InputModal.tsx index a4c0e335..5bddd0dc 100644 --- a/src/components/commons/inputModal/InputModal.tsx +++ b/src/components/commons/inputModal/InputModal.tsx @@ -13,9 +13,9 @@ interface topicPropTypes { topicId?: string; pageNum: number; setShowModal: Dispatch>; - topicPlaceholder: string; - tagPlaceholder: string; - descPlaceholder: string; + topicPlaceholder?: string; + tagPlaceholder?: string; + descPlaceholder?: string; } const InputModal = ({ diff --git a/src/pages/admin/components/AddEditTopicModal.tsx b/src/pages/admin/components/AddEditTopicModal.tsx deleted file mode 100644 index d9a49d6d..00000000 --- a/src/pages/admin/components/AddEditTopicModal.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import styled from '@emotion/styled'; -import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; - -import { useEditAdminTopic, usePostAdminTopic } from '../hooks/queries'; - -import Spacing from '../../../components/commons/Spacing'; -import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; - -interface topicPropTypes { - topicStored?: string; - topicTagStored?: string; - topicDescriptionStored?: string; - topicId?: string; - pageNum: number; - setShowModal: Dispatch>; -} - -const AddEditTopicModal = ({ - topicStored, - topicTagStored, - topicDescriptionStored, - topicId, - pageNum, - setShowModal, -}: topicPropTypes) => { - useEffect(() => { - setTopic(topicStored || ''); - setTopicTag(topicTagStored || ''); - setTopicDescription(topicDescriptionStored || ''); - }, []); - - const [topic, setTopic] = useState(''); - const [topicTag, setTopicTag] = useState(''); - const [topicDescription, setTopicDescription] = useState(''); - const [topicNameError, setTopicNameError] = useState(false); - const [topicTagError, setTopicTagError] = useState(false); - const [topicDescriptionError, setTopicDescriptionError] = useState(false); - - const { groupId } = useParams(); - - const { postMutateAdminTopic } = usePostAdminTopic(groupId, pageNum); - const { editMutateAdminTopic } = useEditAdminTopic(topicId, groupId, pageNum); - - const handleTopicNameChange = (e: React.ChangeEvent) => { - setTopic(e.target.value); - setTopicNameError(false); //다시 입력할때의 초기화 - }; - - const handleTopicTagChange = (e: React.ChangeEvent) => { - setTopicTag(e.target.value); - setTopicTagError(false); - }; - - const handleTopicDescriptionChange = (e: React.ChangeEvent) => { - const newDescription = e.target.value; - setTopicDescription(newDescription); - setTopicDescriptionError(false); - }; - - const handleSubmit = (topicStored: string) => { - const isTopicNameError = topic.trim() === '' || topic.length > 15; - const isTopicTagError = topicTag.trim() === '' || topicTag.length > 5; - const isTopicDescriptionError = topicDescription.length > 90; - - setTopicNameError(isTopicNameError); - setTopicTagError(isTopicTagError); - setTopicDescriptionError(isTopicDescriptionError); - - if (!isTopicNameError && !isTopicTagError && !isTopicDescriptionError) { - topicStored - ? editMutateAdminTopic({ topic, topicTag, topicDescription, topicId }) - : postMutateAdminTopic({ topic, topicTag, topicDescription, groupId }); - setShowModal(false); - } - }; - - return ( - -
- 글감* - - 15 || topicNameError}> - - 15 || topicNameError}>{topic.length}/15 - -
-
- 글감 태그* - - 5 || topicTagError}> - - 5 || topicTagError}>{topicTag.length}/5 - -
-
- 글감 소개 - - 90 || topicDescriptionError}> - - 90 || topicDescriptionError}> - {topicDescription.length}/90 - - -
- handleSubmit(topicStored || '')}> - {topicStored ? '글감 수정하기' : '글감 생성하기'} - - - ); -}; - -export default AddEditTopicModal; - -const ModalWrapper = styled.div` - position: fixed; - top: 50%; - left: 50%; - z-index: 6; - display: flex; - flex-direction: column; - gap: 3.2rem; - width: 61.6rem; - padding: 3.2rem; - - background-color: ${({ theme }) => theme.colors.white}; - transform: translate(-50%, -50%); - border-radius: 8px; - - ${({ theme }) => theme.fonts.subtitle2} - - @media ${MOBILE_MEDIA_QUERY} { - gap: 1.8rem; - max-width: 33.5rem; - padding: 1.8rem; - - ${({ theme }) => theme.fonts.mTitle1}; - } -`; - -const InputWrapper = styled.div<{ isError: boolean }>` - display: flex; - align-items: center; - justify-content: space-between; - width: 55.2rem; - height: 3.9rem; - padding: 1rem 1.2rem; - - background-color: ${({ theme }) => theme.colors.gray5}; - border: 1px solid - ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; - border-radius: 6px; - - @media ${MOBILE_MEDIA_QUERY} { - align-items: end; - justify-content: baseline; - width: 100%; - min-height: 6rem; - padding: 1rem 1.3rem; - } -`; - -const TopicInput = styled.textarea` - width: 46.4rem; - height: 100%; - padding: 0; - overflow: hidden; - - color: ${({ theme }) => theme.colors.gray100}; - - ${({ theme }) => theme.fonts.button2} - - background-color: ${({ theme }) => theme.colors.gray5}; - border: none; - - ::placeholder { - color: ${({ theme }) => theme.colors.gray50}; - white-space: pre-line; - - @media ${MOBILE_MEDIA_QUERY} { - min-height: 4rem; - - ${({ theme }) => theme.fonts.mSubtitle2}; - } - } -`; - -const SubmitForm = styled.button` - width: 55.2rem; - height: 5.1rem; - padding: 1.6rem 2rem; - - color: ${({ theme }) => theme.colors.white}; - - background-color: ${({ theme }) => theme.colors.mainViolet}; - ${({ theme }) => theme.fonts.button2} - border-radius: 10px; - - @media ${MOBILE_MEDIA_QUERY} { - width: 100%; - height: 4.4rem; - padding: 1rem 2rem; - ${({ theme }) => theme.fonts.mButton1}; - } -`; - -const TopicDescriptionInput = styled.textarea<{ isError: boolean }>` - width: 52.8rem; - height: 7.8rem; - overflow: scroll; - - color: ${({ theme }) => theme.colors.gray100}; - ${({ theme }) => theme.fonts.button2} - - background-color: ${({ theme }) => theme.colors.gray5}; - border: none; - border-radius: 6px; - - resize: none; - - ::placeholder { - color: ${({ theme }) => theme.colors.gray50}; - - @media ${MOBILE_MEDIA_QUERY} { - ${({ theme }) => theme.fonts.mSubtitle2}; - } - } - - :focus { - outline: none; - } - - @media ${MOBILE_MEDIA_QUERY} { - width: 100%; - } -`; - -const TextAreaWrapper = styled.div<{ isError: boolean }>` - display: flex; - flex-direction: column; - align-items: end; - width: 55.2rem; - height: 11.8rem; - padding: 1rem 1.2rem; - - background-color: ${({ theme }) => theme.colors.gray5}; - border: 1px solid - ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray50)}; - border-radius: 6px; - - @media ${MOBILE_MEDIA_QUERY} { - width: 100%; - } -`; - -const TextCount = styled.div<{ isError: boolean }>` - ${({ theme }) => theme.fonts.button3} - color: ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray70)}; - - @media ${MOBILE_MEDIA_QUERY} { - ${({ theme }) => theme.fonts.mButton1}; - } -`; diff --git a/src/pages/admin/components/EachTopic.tsx b/src/pages/admin/components/EachTopic.tsx index 6d056884..34420552 100644 --- a/src/pages/admin/components/EachTopic.tsx +++ b/src/pages/admin/components/EachTopic.tsx @@ -2,8 +2,6 @@ import styled from '@emotion/styled'; import { useState } from 'react'; import { useParams } from 'react-router-dom'; -import AddEditTopicModal from './AddEditTopicModal'; - import { DefaultModal, DefaultModalBtn } from '../../../components/commons/modal/DefaultModal'; import useModal from '../../../hooks/useModal'; @@ -11,6 +9,7 @@ import { MODAL } from '../constants/modal'; import { useDeleteAdminTopic } from '../hooks/queries'; import { DeleteIc, EditIc } from '../../../assets/svgs'; +import InputModal from '../../../components/commons/inputModal/InputModal'; import Responsive from '../../../components/commons/Responsive/Responsive'; import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; @@ -63,7 +62,7 @@ const EachTopic = ({ data, pageNum }: eachTopicPropTypes) => { {showEditModal && ( <> setShowEditModal(false)} /> - Date: Tue, 3 Dec 2024 01:39:49 +0900 Subject: [PATCH 12/17] =?UTF-8?q?chore:=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/components/navbar/DesktopNav.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/admin/components/navbar/DesktopNav.tsx b/src/pages/admin/components/navbar/DesktopNav.tsx index 50a94e15..fe531085 100644 --- a/src/pages/admin/components/navbar/DesktopNav.tsx +++ b/src/pages/admin/components/navbar/DesktopNav.tsx @@ -46,13 +46,13 @@ const Title = styled.h1` color: ${({ theme }) => theme.colors.mainViolet}; `; -const MenuList = styled.div` +const MenuList = styled.ul` display: flex; flex-direction: column; gap: 0.8rem; `; -const Menu = styled.div<{ isActive: boolean }>` +const Menu = styled.li<{ isActive: boolean }>` padding: 1rem 1.6rem; ${({ theme }) => theme.fonts.subtitle3}; From 6e59aeccd2b79719673936433d09bef4895d6def Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 01:57:50 +0900 Subject: [PATCH 13/17] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=20=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index 1bbd8ca5..63593ea6 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -50,8 +50,6 @@ const Admin = () => { - - {infoResponse?.moimName} @@ -63,11 +61,10 @@ const Admin = () => { - - + From 9d00ee7f7be4780db5031cb7e282148e3b18cf0e Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 01:59:21 +0900 Subject: [PATCH 14/17] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/components/RenderAdminContent.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/admin/components/RenderAdminContent.tsx b/src/pages/admin/components/RenderAdminContent.tsx index 3a90b198..cc0db313 100644 --- a/src/pages/admin/components/RenderAdminContent.tsx +++ b/src/pages/admin/components/RenderAdminContent.tsx @@ -94,13 +94,6 @@ const RenderAdminContent = ({ menu }: RenderAdminContentPropTypes) => { /> - - - - - - - {showModal && ( <> @@ -113,6 +106,12 @@ const RenderAdminContent = ({ menu }: RenderAdminContentPropTypes) => { /> )} + + + + + + ); From 121f9a5fda08862a2748f4acdc56eecf48ba287d Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 02:06:17 +0900 Subject: [PATCH 15/17] =?UTF-8?q?style:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/Admin.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx index 63593ea6..0f182703 100644 --- a/src/pages/admin/Admin.tsx +++ b/src/pages/admin/Admin.tsx @@ -114,8 +114,6 @@ const AdminLayout = styled.div` justify-content: center; @media ${MOBILE_MEDIA_QUERY} { - display: flex; - flex-basis: 100%; width: 100%; } `; From dd34458b74eeb4ade8fc4680da21c7c7ca985eba Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 22:15:08 +0900 Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/components/EachTopic.tsx | 52 +++++++++++++---------- src/pages/admin/components/TopicAdmin.tsx | 8 ++-- 2 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/pages/admin/components/EachTopic.tsx b/src/pages/admin/components/EachTopic.tsx index 34420552..ffe0e526 100644 --- a/src/pages/admin/components/EachTopic.tsx +++ b/src/pages/admin/components/EachTopic.tsx @@ -48,17 +48,18 @@ const EachTopic = ({ data, pageNum }: eachTopicPropTypes) => { {topicDescription} + + { + setShowEditModal(true); + }} + /> + + {/* setShowDeleteModal(true)} /> */} + handleShowModal()} /> + - - { - setShowEditModal(true); - }} - /> - - {/* setShowDeleteModal(true)} /> */} - handleShowModal()} /> - + {showEditModal && ( <> setShowEditModal(false)} /> @@ -116,12 +117,11 @@ const TopicWrapper = styled.div` display: flex; gap: 2.4rem; align-items: center; - width: 74.5rem; + width: 100%; height: 8.4rem; @media ${MOBILE_MEDIA_QUERY} { width: 100%; - max-width: 81rem; } `; @@ -129,7 +129,7 @@ const TopicData = styled.div` display: flex; gap: 4rem; align-items: flex-start; - width: 64.9rem; + width: 74.5rem; height: 5.2rem; @media ${MOBILE_MEDIA_QUERY} { @@ -142,22 +142,25 @@ const Topic = styled.div` display: flex; flex-direction: column; gap: 0.4rem; - width: 20.8rem; + min-width: 20.8rem; padding: 0.6rem 0; @media ${MOBILE_MEDIA_QUERY} { width: 100%; + min-width: 13rem; max-width: 13rem; } `; const TopicTitle = styled.p` + width: 18.2rem; overflow: hidden; color: ${({ theme }) => theme.colors.black}; white-space: nowrap; text-overflow: ellipsis; - ${({ theme }) => theme.fonts.body1}; + + ${({ theme }) => theme.fonts.body1} @media ${MOBILE_MEDIA_QUERY} { max-width: 13rem; @@ -175,21 +178,21 @@ const TopicDate = styled.p` `; const TopicTag = styled.p` - align-content: center; width: 7rem; padding: 0.6rem 0; + overflow: hidden; color: ${({ theme }) => theme.colors.black}; white-space: nowrap; text-align: center; text-overflow: ellipsis; - ${({ theme }) => theme.fonts.body1}; + ${({ theme }) => theme.fonts.body1} @media ${MOBILE_MEDIA_QUERY} { - display: flex; justify-content: center; width: 6.1rem; + min-width: 6.1rem; ${({ theme }) => theme.fonts.mSubtitle2}; } @@ -197,18 +200,21 @@ const TopicTag = styled.p` const TopicDescription = styled.p` display: -webkit-box; - width: 29rem; + width: 100%; + min-width: 3rem; + max-width: 29rem; padding-top: 0.2rem; overflow: hidden; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: ${({ theme }) => theme.colors.gray100}; - ${({ theme }) => theme.fonts.body8}; -`; + text-overflow: ellipsis; + ${({ theme }) => theme.fonts.body8} +`; const TopicAction = styled.div` display: flex; - flex-shrink: 1; gap: 0.8rem; + margin-left: auto; `; diff --git a/src/pages/admin/components/TopicAdmin.tsx b/src/pages/admin/components/TopicAdmin.tsx index e8c7e082..f32f46a2 100644 --- a/src/pages/admin/components/TopicAdmin.tsx +++ b/src/pages/admin/components/TopicAdmin.tsx @@ -85,7 +85,7 @@ const TopicAdminCategory = styled.ul` display: flex; gap: 4rem; align-items: center; - width: 78.1rem; + max-width: 78.1rem; height: 4.8rem; padding: 0 1.8rem; @@ -106,6 +106,7 @@ const TopicAdminCategory = styled.ul` const Topic = styled.li` width: 20.8rem; + max-width: 20.8rem; white-space: nowrap; @@ -118,6 +119,7 @@ const Topic = styled.li` const TopicTag = styled.li` width: 7rem; + max-width: 7rem; white-space: nowrap; text-align: center; @@ -130,7 +132,7 @@ const TopicTag = styled.li` const TopicDescription = styled.li` display: flex; - width: 21.3rem; + max-width: 21.3rem; margin-left: auto; white-space: nowrap; @@ -145,7 +147,7 @@ const TopicDescription = styled.li` const TopicList = styled.div` display: flex; flex-direction: column; - width: 78.1rem; + max-width: 78.1rem; padding: 0.4rem 1.8rem; background-color: ${({ theme }) => theme.colors.white}; From 60b13b0fb0ff7ac6fa101a85a80b6cd1a3c7778a Mon Sep 17 00:00:00 2001 From: namdaeun Date: Tue, 3 Dec 2024 22:23:36 +0900 Subject: [PATCH 17/17] =?UTF-8?q?style:=20flex=20=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=A4=84=EC=96=B4=EB=93=9C=EB=8A=94=20=EC=9D=B4=EC=8A=88=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/components/EachTopic.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/admin/components/EachTopic.tsx b/src/pages/admin/components/EachTopic.tsx index ffe0e526..1d54a919 100644 --- a/src/pages/admin/components/EachTopic.tsx +++ b/src/pages/admin/components/EachTopic.tsx @@ -153,7 +153,8 @@ const Topic = styled.div` `; const TopicTitle = styled.p` - width: 18.2rem; + width: 20.9rem; + max-width: 20.9rem; overflow: hidden; color: ${({ theme }) => theme.colors.black}; @@ -178,6 +179,7 @@ const TopicDate = styled.p` `; const TopicTag = styled.p` + flex-shrink: 0; width: 7rem; padding: 0.6rem 0; overflow: hidden;