From 75e2410d41494b4aab671c86345d0aecaa23d0e8 Mon Sep 17 00:00:00 2001 From: a1 Date: Thu, 8 Feb 2024 19:25:55 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20?= =?UTF-8?q?=EB=8F=99=EC=95=84=EB=A6=AC=EC=9B=90=20=EA=B2=80=EC=83=89,=20?= =?UTF-8?q?=EC=97=AD=ED=95=A0=20=EA=B2=80=EC=83=89=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=97=94=ED=84=B0=EB=A1=9C=20=EA=B2=80=EC=83=89=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/Login.js | 92 +++++++++++++------------ src/component/home/ProductionDesktop.js | 1 + src/component/home/ProductionMobile.js | 6 +- src/container/admin/FindMemId.js | 30 +++++--- src/container/admin/FindRole.js | 31 +++++---- src/page/AdminPage.js | 16 ++--- src/page/CenterPage.js | 2 +- src/page/ManageGenPage.js | 10 +-- src/page/ManagePage.js | 76 ++++++++++---------- src/page/ManageRolePage.js | 23 ++++--- 10 files changed, 158 insertions(+), 129 deletions(-) diff --git a/src/component/common/Login.js b/src/component/common/Login.js index 908b3ba..f14b40e 100644 --- a/src/component/common/Login.js +++ b/src/component/common/Login.js @@ -21,29 +21,33 @@ export default function Login() { }; // id : 'appcenter', pw : '1q2w3e4r!Appcenter' - const onClick = async () => { - const response = await axios //eslint-disable-line no-unused-vars - .post('https://server.inuappcenter.kr/sign/sign-in', { - id: username, - password: password, - }) - .then((res) => { - const { token } = res.data; - axios.defaults.headers.common['X-AUTH-TOKEN'] = token; - - window.sessionStorage.setItem('token', token); - dispatch({ - type: 'login/setLogin', - payload: { isLoggedIn: true }, - }); - navigate('/admin'); - }) - .catch((err) => { - console.log(err); - alert('아이디 또는 비밀번호가 틀렸습니다.'); - setUsername(''); - setPassword(''); + const onSubmit = async (e) => { + e.preventDefault(); // 기본 form submit 방지 + + try { + const response = await axios.post( + 'https://server.inuappcenter.kr/sign/sign-in', + { + id: username, + password: password, + } + ); + + const { token } = response.data; + axios.defaults.headers.common['X-AUTH-TOKEN'] = token; + + window.sessionStorage.setItem('token', token); + dispatch({ + type: 'login/setLogin', + payload: { isLoggedIn: true }, }); + navigate('/admin'); + } catch (error) { + console.error(error); + alert('아이디 또는 비밀번호가 틀렸습니다.'); + setUsername(''); + setPassword(''); + } }; return ( @@ -51,27 +55,29 @@ export default function Login() { 홈페이지 대시보드 - - - - - +
+ + + + + +
); diff --git a/src/component/home/ProductionDesktop.js b/src/component/home/ProductionDesktop.js index 1183830..af9900b 100644 --- a/src/component/home/ProductionDesktop.js +++ b/src/component/home/ProductionDesktop.js @@ -329,6 +329,7 @@ const ModalContainer = styled(Modal)` left: 50%; padding: 20px; border-radius: 8px; + background-color: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); max-width: 620px; height: 250px; diff --git a/src/component/home/ProductionMobile.js b/src/component/home/ProductionMobile.js index e14f388..c4e0467 100644 --- a/src/component/home/ProductionMobile.js +++ b/src/component/home/ProductionMobile.js @@ -48,7 +48,7 @@ export default function ProductionMobile() {
- { + const findData = async (e) => { + e.preventDefault(); try { const newMemberEncode = encodeURIComponent(newMember); const result = await axios.get( @@ -56,15 +57,17 @@ export default function FindMemId() { onRequestClose={closeModal} contentLabel='Edit Member Modal' > - 이름으로 동아리원 찾기 - 이름 - setNewMember(e.target.value)} - /> - 검색 + + 이름으로 동아리원 찾기 + 이름 + setNewMember(e.target.value)} + /> + 검색 + 번호 이름 @@ -86,6 +89,11 @@ export default function FindMemId() { ); } + +const MemberForm = styled.form` + width: 100%; +`; + const ModalName = styled.div` margin-bottom: 5px; margin-right: auto; @@ -172,7 +180,7 @@ const ModalInput = styled.input` `; const ModalButton = styled.button` - background-color: grey; + background-color: #1e88e5; color: #fff; border: none; border-radius: 4px; diff --git a/src/container/admin/FindRole.js b/src/container/admin/FindRole.js index 1781e94..e34b3a4 100644 --- a/src/container/admin/FindRole.js +++ b/src/container/admin/FindRole.js @@ -25,7 +25,8 @@ export default function FindRole() { document.body.style.removeProperty('overflow'); }, []); - const findData = async () => { + const findData = async (e) => { + e.preventDefault(); try { const newMemberEncode = encodeURIComponent(newMember); const result = await axios.get( @@ -55,15 +56,17 @@ export default function FindRole() { onRequestClose={closeModal} contentLabel='Edit Role Modal' > - 이름으로 역할 찾기 - 이름 - setNewMember(e.target.value)} - /> - 검색 + + 이름으로 역할 찾기 + 이름 + setNewMember(e.target.value)} + /> + 검색 + 번호 이름 @@ -80,10 +83,14 @@ export default function FindRole() { ); } + +const RoleForm = styled.form` + width: 100%; +`; + const ModalName = styled.div` margin-bottom: 5px; margin-right: auto; - margin-left: 0.5rem; `; const ModalHeader = styled.div` @@ -166,7 +173,7 @@ const ModalInput = styled.input` `; const ModalButton = styled.button` - background-color: grey; + background-color: #1e88e5; color: #fff; border: none; border-radius: 4px; diff --git a/src/page/AdminPage.js b/src/page/AdminPage.js index 7b7ecad..e764ada 100644 --- a/src/page/AdminPage.js +++ b/src/page/AdminPage.js @@ -71,11 +71,11 @@ export default function AdminPage() { ); } const PhotoBox = styled.div` - width: 7%; - height: 73%; + width: 8%; + height: 78%; background-color: white; margin-bottom: 2.2rem; - border-radius: 12px; + border-radius: 8px; `; const TextBox = styled.div` @@ -85,8 +85,8 @@ const TextBox = styled.div` `; const PhotoImg = styled.img` - width: 40px; - height: 40px; + width: 45px; + height: 45px; `; const MenuText = styled.div` @@ -96,17 +96,17 @@ const MenuText = styled.div` text-transform: uppercase; color: ${(props) => (props.type === 'title' ? '#424242' : '#848484')}; font-weight: ${(props) => - props.type === 'top' ? 400 : props.type === 'title' ? 600 : 300}; + props.type === 'top' ? 300 : props.type === 'title' ? 400 : 400}; margin: auto 0; white-space: pre-line; ${(props) => props.type === 'title' ? css` - font-size: 30px;}; + font-size: ${(props) => props.theme.fontSize.mobile.title}; ` : css` - font-size: ${(props) => props.theme.fontSize.tablet.caption}; + font-size: ${(props) => props.theme.fontSize.mobile.caption}; `} `; diff --git a/src/page/CenterPage.js b/src/page/CenterPage.js index 6a22f84..893ce45 100644 --- a/src/page/CenterPage.js +++ b/src/page/CenterPage.js @@ -74,7 +74,7 @@ const PhotoImg = styled.img` const BoxContainer = styled.div` display: flex; flex-wrap: wrap; - width: 630px; + width: 650px; height: 400px; justify-content: flex-start; margin: 0 auto; diff --git a/src/page/ManageGenPage.js b/src/page/ManageGenPage.js index ed3654a..3c01150 100644 --- a/src/page/ManageGenPage.js +++ b/src/page/ManageGenPage.js @@ -120,10 +120,12 @@ export default function ManageGenPage() { // 수정할 데이터를 가져옵니다. const updatedData = { - role: editedRole, - generation: editedGen, + part: editedRole, + year: editedGen, }; + console.log(updatedData); + try { // group_id를 사용하여 수정 요청을 보냅니다. const response = await axios.patch( @@ -155,7 +157,7 @@ export default function ManageGenPage() { try { // member_id를 사용하여 삭제 요청을 보냅니다. await axios.delete( - `https://server.inuappcenter.kr/groups?${selectedGroupId}` + `https://server.inuappcenter.kr/groups/${selectedGroupId}` ); console.log('Member with ID', selectedGroupId, 'has been deleted.'); @@ -241,7 +243,7 @@ export default function ManageGenPage() { onRequestClose={closeEditModal} contentLabel='Edit Member Modal' > - 역할 수정 + 기수 수정 파트 - prevData.filter((item) => item.member_id !== selectedMemberId) - ); - } catch (error) { - console.error('Error deleting member:', error); - alert(error); - } + await axios + .delete( + `https://server.inuappcenter.kr/members/${selectedMemberId}` + ) + .then((res) => { + alert(res.data.msg); + console.log(res.data.msg); + }); + } catch (error) {} setContextMenuVisible(false); // 컨텍스트 메뉴 닫기 }; @@ -194,15 +186,15 @@ export default function ManagePage() { 동아리원 목록 - - 이름 - 이메일 - 블로그 - 깃허브 - 프로필 이미지 - 자기 소개 - + + 이름 + 이메일 + 블로그 + 깃허브 + 프로필 이미지 + 자기 소개 + {getCurrentPageData().map((content) => ( {content.email}
) : ( -
no Email
+
없음
)} @@ -232,10 +224,10 @@ export default function ManagePage() { target='_blank' rel='noopener noreferrer' > - Blog + 블로그 링크 ) : ( - 'no Blog' +
없음
)} @@ -245,26 +237,30 @@ export default function ManagePage() { target='_blank' rel='noopener noreferrer' > - github + 깃허브 링크 ) : ( - 'no Github' +
없음
)} {content.profileImage ? ( - - profileImage + + 이미지 링크 ) : ( -
no profileImage
+
없음
)} {content.description ? (
{content.description}
) : ( -
no description
+
없음
)} @@ -375,14 +371,14 @@ const Cartegories = styled.div` props.type === 'first' ? 'left: 8rem; width: 60px;' : props.type === 'second' - ? 'left:11.5rem; width: 200px;' + ? 'left:11rem; width: 180px;' : props.type === 'third' - ? 'left: 22.7rem; width: 90px;' + ? 'left: 21rem; width: 183px;' : props.type === 'fourth' - ? 'left: 27.3rem; width: 90px;' + ? 'left: 32.4rem; width: 150px;' : props.type === 'fifth' - ? 'left: 32rem; width: 220px;' - : 'left: 44.5rem; width: 200px;'} + ? 'left: 45em; width: 220px;' + : 'left: 51rem; width: 190px;'} `; const PaginationContainer = styled.div` @@ -518,7 +514,7 @@ const MemberTable = styled.table` } div { - width: 180px; + width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/src/page/ManageRolePage.js b/src/page/ManageRolePage.js index 6a65aaf..5e94d00 100644 --- a/src/page/ManageRolePage.js +++ b/src/page/ManageRolePage.js @@ -150,15 +150,20 @@ export default function ManageRolePage() { try { // member_id를 사용하여 삭제 요청을 보냅니다. - await axios.delete( - `https://server.inuappcenter.kr/roles/${selectedRoleId} ` - ); - console.log('Member with ID', selectedRoleId, 'has been deleted.'); - - // 삭제한 데이터를 data 상태에서 제거합니다. - setData((prevData) => - prevData.filter((item) => item.roleId !== selectedRoleId) - ); + await axios + .delete( + `https://server.inuappcenter.kr/roles/${selectedRoleId} ` + ) + .then((res) => { + alert(res.data.msg); + console.log(res.data.msg); + // 삭제한 데이터를 data 상태에서 제거합니다. + setData((prevData) => + prevData.filter( + (item) => item.roleId !== selectedRoleId + ) + ); + }); } catch (error) { console.error('Error deleting member:', error); alert(error);