From 2f2a18bba5f463891d178a81fa96949f044ebe6d Mon Sep 17 00:00:00 2001 From: Jungwoo Hong <79641160+Martinelli-3535@users.noreply.github.com> Date: Mon, 26 Feb 2024 16:05:08 +0900 Subject: [PATCH] =?UTF-8?q?style:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC?= =?UTF-8?q?=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/home/ProductionDesktop.js | 5 + src/page/ManageGenPage.js | 42 ++-- src/page/ManagePage.js | 21 +- src/page/ManageRolePage.js | 6 +- src/page/QnAPage.js | 272 +++++++----------------- yarn.lock | 5 - 6 files changed, 120 insertions(+), 231 deletions(-) diff --git a/src/component/home/ProductionDesktop.js b/src/component/home/ProductionDesktop.js index af9900b..ba17bb5 100644 --- a/src/component/home/ProductionDesktop.js +++ b/src/component/home/ProductionDesktop.js @@ -299,6 +299,7 @@ const DetailInfo = styled.div` width: 70%; margin: 0 auto; top: -1rem; + `; const InstallBtn = styled.button` @@ -361,6 +362,10 @@ const AppTitle = styled.h2` `; const AppDescription = styled.p` + width: 60%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; font-size: 16px; color: #666; position: relative; diff --git a/src/page/ManageGenPage.js b/src/page/ManageGenPage.js index 590bd01..c2cd92c 100644 --- a/src/page/ManageGenPage.js +++ b/src/page/ManageGenPage.js @@ -24,7 +24,6 @@ export default function ManageGenPage() { y: 0, }); const [selectedGroupId, setSelectedGroupId] = useState(null); - const [selectedRoleId, setSelectedRoleId] = useState(null); const contextMenuRef = useRef(null); const [isEditModalOpen, setEditModalOpen] = useState(false); @@ -114,12 +113,6 @@ export default function ManageGenPage() { }; }, []); - const setRoleId = (content) => { - if (content === '센터장') setSelectedRoleId(1); - else if (content === '파트장') setSelectedRoleId(2); - else if (content === '파트원') setSelectedRoleId(3); - }; - const handleEdit = async () => { if (selectedGroupId === null) { return; // 선택된 항목이 없으면 무시 @@ -136,7 +129,7 @@ export default function ManageGenPage() { try { // group_id를 사용하여 수정 요청을 보냅니다. const response = await axios.patch( - `https://server.inuappcenter.kr/groups?groupId=${selectedGroupId}&roleId=${selectedRoleId}`, + `https://server.inuappcenter.kr/groups?id=${selectedGroupId}`, updatedData ); console.log('Member with ID', selectedGroupId, 'has been updated.'); @@ -200,21 +193,19 @@ export default function ManageGenPage() { onContextMenu={(e) => { e.preventDefault(); setSelectedGroupId(content.group_id); - setRoleId(content.role); setContextMenuPosition({ x: e.clientX, y: e.clientY, }); setContextMenuVisible(true); console.log(content.group_id); - console.log(content.role_id); }} > {content.member} {content.role} {content.year} {content.part ??
{content.part}
} - {content.email} + {content.email} ))} @@ -297,14 +288,14 @@ const Cartegories = styled.div` position: absolute; ${(props) => props.type === 'first' - ? 'left: 8rem; width: 90px;' + ? 'left: 8rem; width: 120px;' : props.type === 'second' - ? 'left:13rem; width: 100px;' + ? 'left:15rem; width: 100px;' : props.type === 'third' - ? 'left: 18rem; width: 100px;' + ? 'left: 21rem; width: 120px;' : props.type === 'fourth' - ? 'left: 22.5rem; width: 120px;' - : 'left: 28.5rem; width: 270px;'} + ? 'left: 28rem; width: 120px;' + : 'left: 34rem; width: 180px;'} `; const PaginationContainer = styled.div` @@ -410,7 +401,7 @@ const Regisbutton = styled.button` color: white; width: 5rem; height: 2rem; - margin-left: 40rem; + margin-left: 37rem; margin-top: 0.6rem; &:hover { @@ -424,12 +415,20 @@ const MemberTable = styled.table` margin: 20px auto 20px auto; td { + width: 90px; padding: 6px; text-align: center; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); border-radius: 4px; overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + ${(props) => + props.type === 'email' + ? 'width: 150px;' : ''} th { font-weight: 700; @@ -442,6 +441,13 @@ const MemberTable = styled.table` text-decoration: none; } + div { + width: 90px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + tr { border-radius: 20%; } @@ -463,4 +469,4 @@ const MemberList = styled.div` .menu { margin-left: auto; } -`; +`; \ No newline at end of file diff --git a/src/page/ManagePage.js b/src/page/ManagePage.js index b707e6d..1cec1c9 100644 --- a/src/page/ManagePage.js +++ b/src/page/ManagePage.js @@ -447,20 +447,20 @@ const Cartegories = styled.div` : props.type === 'second' ? 'left:11rem; width: 150px;' : props.type === 'third' - ? 'left: 19.5rem; width: 120px;' + ? 'left: 20rem; width: 140px;' : props.type === 'fourth' - ? 'left: 26.5rem; width: 120px;' + ? 'left: 28.5rem; width: 140px;' : props.type === 'fifth' - ? 'left: 37.5em; width: 120px;' + ? 'left: 41em; width: 150px;' : props.type === 'sixth' - ? 'left: 45.5em; width: 120px;' + ? 'left: 51em; width: 140px;' : props.type === 'seventh' - ? 'left: 53.5em; width: 150px;' + ? 'left: 59.5em; width: 150px;' : props.type === 'eighth' - ? 'left: 63em; width: 150px;' + ? 'left: 69.5em; width: 150px;' : props.type === 'ninth' - ? 'left: 72.5em; width: 150px;' - : 'left: 81.5em; width: 150px;'} + ? 'left: 79em; width: 150px;' + : 'left: 88em; width: 150px;'} `; const PaginationContainer = styled.div` @@ -607,6 +607,9 @@ const MemberTable = styled.table` width:100px; color: #0078d4; text-decoration: none; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } tr { @@ -630,4 +633,4 @@ const MemberList = styled.div` .menu { margin-left: auto; } -`; +`; \ No newline at end of file diff --git a/src/page/ManageRolePage.js b/src/page/ManageRolePage.js index 5e94d00..bfbc417 100644 --- a/src/page/ManageRolePage.js +++ b/src/page/ManageRolePage.js @@ -282,8 +282,8 @@ const Cartegories = styled.div` props.type === 'first' ? 'left: 8rem; width: 180px;' : props.type === 'second' - ? 'left:19rem; width: 420px;' - : 'left: 41rem; width: 170px;'} + ? 'left:18rem; width: 440px;' + : 'left: 39rem; width: 170px;'} `; const PaginationContainer = styled.div` @@ -442,4 +442,4 @@ const MemberList = styled.div` .menu { margin-left: auto; } -`; +`; \ No newline at end of file diff --git a/src/page/QnAPage.js b/src/page/QnAPage.js index 3c9bea4..e2c2fc2 100644 --- a/src/page/QnAPage.js +++ b/src/page/QnAPage.js @@ -1,21 +1,22 @@ import styled from 'styled-components'; import axios from 'axios'; import React, { useState, useEffect, useRef } from 'react'; -import Modal from 'react-modal'; // react-modal 라이브러리 import import Pagination from '../component/manage/Pagenation'; +import { RMopen, MODopen } from '../modules/ProductSlice'; +import { useSelector, useDispatch } from 'react-redux'; +import { useCallback } from 'react'; +import ModifyModal from '../container/product/ModifyModal'; import InOut from '../component/common/InOut'; import IntroBox from '../component/admin/IntroBox'; import { introInfo } from '../resource/data/adminInfo'; -import { RMopen } from '../modules/ProductSlice'; -import { useSelector, useDispatch } from 'react-redux'; -import { useCallback } from 'react'; -import QnARegis from '../container/product/QnARegis'; +import ProductRegis from '../container/product/ProductRegis'; -export default function QnAPage() { +export default function ProductPage() { const [data, setData] = useState([]); const regisModalOpen = useSelector((state) => state.product.regisModalOpen); // prettier-ignore + const modifyModalOpen = useSelector((state) => state.product.modifyModalOpen); const dispatch = useDispatch(); const [contextMenuVisible, setContextMenuVisible] = useState(false); @@ -23,18 +24,13 @@ export default function QnAPage() { x: 0, y: 0, }); - const [selectedQnaId, setSelectedQnaId] = useState(null); + const [selectedProductId, setselectedProductId] = useState(null); const contextMenuRef = useRef(null); - const [isEditModalOpen, setEditModalOpen] = useState(false); - - //* 수정 기능을 이용할 때 값을 저장하기 위해 사용합니다. */ - const [editedPart, setEditedPart] = useState(''); - const [editedQuestion, setEditedQuestion] = useState(''); - const [editedAnswer, setEditedAnswer] = useState(''); + const [productId, setProductId] = useState(''); // 페이지네이션을 구현할때 사용합니다. const [currentPage, setCurrentPage] = useState(1); - const itemsPerPage = 10; + const itemsPerPage = 3; // 페이지당 데이터를 분할하는 함수입니다. const paginateData = (data, currentPage, itemsPerPage) => { @@ -52,24 +48,10 @@ export default function QnAPage() { setCurrentPage(pageNumber); }; - const openEditModal = (selectedQnaId) => { + const openEditModal = (selectedProductId) => { // 수정할 때 해당 memberId의 데이터를 가져와서 모달에 미리 채워넣을 수 있습니다. setContextMenuVisible(false); - setEditModalOpen(true); - }; - - useEffect(() => { - const QnaToEdit = data.find((item) => item.id === selectedQnaId); - if (QnaToEdit) { - setEditedPart(QnaToEdit.part); - setEditedQuestion(QnaToEdit.question); - setEditedAnswer(QnaToEdit.answer); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedQnaId]); - - const closeEditModal = () => { - setEditModalOpen(false); + dispatch(MODopen()); }; const addData = () => { @@ -85,14 +67,14 @@ export default function QnAPage() { const fetchData = async () => { const viewData = await axios //eslint-disable-line no-unused-vars .get( - 'https://server.inuappcenter.kr/faqs/public/all-faq-boards' + 'https://server.inuappcenter.kr/introduction-board/public/all-boards-contents' ) .then((res) => { setData(res.data); }); }; fetchData(); - }, [regisModalOpen]); + }, [regisModalOpen, modifyModalOpen]); useEffect(() => { const handleContextMenuClick = (e) => { @@ -113,56 +95,25 @@ export default function QnAPage() { }; }, []); - const handleEdit = async () => { - if (selectedQnaId === null) { - return; // 선택된 항목이 없으면 무시 - } - - // 수정할 데이터를 가져옵니다. - const updatedData = { - part: editedPart, - question: editedQuestion, - answer: editedAnswer, - }; - - try { - // member_id를 사용하여 수정 요청을 보냅니다. - const response = await axios.patch( - `https://server.inuappcenter.kr/faqs?id=${selectedQnaId}`, - updatedData - ); - console.log('Qna with ID', selectedQnaId, 'has been updated.'); - console.log(response); - // 업데이트된 데이터를 data 상태에서 업데이트합니다. - setData((prevData) => - prevData.map((item) => - item.id === selectedQnaId - ? { ...item, ...updatedData } - : item - ) - ); - } catch (error) { - console.error('Error updating member:', error); - } - setEditModalOpen(false); - setContextMenuVisible(false); // 컨텍스트 메뉴 닫기 - }; - const handleDelete = async () => { - if (selectedQnaId === null) { + if (selectedProductId === null) { return; // 선택된 항목이 없으면 무시 } try { - // member_id를 사용하여 삭제 요청을 보냅니다. + // id를 사용하여 삭제 요청을 보냅니다. await axios.delete( - `https://server.inuappcenter.kr/faqs/${selectedQnaId}` + `https://server.inuappcenter.kr/introduction-board/${selectedProductId}` + ); + console.log( + 'Member with ID', + selectedProductId, + 'has been deleted.' ); - console.log('Member with ID', selectedQnaId, 'has been deleted.'); // 삭제한 데이터를 data 상태에서 제거합니다. setData((prevData) => - prevData.filter((item) => item.id !== selectedQnaId) + prevData.filter((item) => item.id !== selectedProductId) ); } catch (error) { console.error('Error deleting member:', error); @@ -174,13 +125,13 @@ export default function QnAPage() { return ( <> - - 질문 및 답변 목록 + + 앱 목록 - 파트 - 질문 - 답변 + 썸네일 + 제목 + 부제목 {getCurrentPageData().map((content) => ( @@ -188,18 +139,29 @@ export default function QnAPage() { key={content.id} onContextMenu={(e) => { e.preventDefault(); - setSelectedQnaId(content.id); + setselectedProductId(content.id); setContextMenuPosition({ x: e.clientX, y: e.clientY, }); setContextMenuVisible(true); + setProductId(content.id); console.log(content.id); }} > - {content.part} - {content.question} - {content.answer} + +
+ +
+ + {content.title} + {content.subTitle} ))} @@ -220,6 +182,8 @@ export default function QnAPage() { 등록 + {regisModalOpen && } + {modifyModalOpen && } {/* 컨텍스트 메뉴 */} {contextMenuVisible && ( 삭제 )} - {regisModalOpen && } - {/* 수정 팝업 모달 */} - - QnA 수정 - 파트 - setEditedPart(e.target.value)} - /> - 질문 - setEditedQuestion(e.target.value)} - /> - 답변 - setEditedAnswer(e.target.value)} - /> - - - 수정 완료 - 취소 - - ); } +const MemberBar = styled.div` + display: flex; + + justify-content: center; + align-items: center; + height: 40px; + transform: translate(-8rem); +`; + const Cartegories = styled.div` width: 80px; height: 20px; @@ -279,19 +220,26 @@ const Cartegories = styled.div` position: absolute; ${(props) => props.type === 'first' - ? 'left: 8rem;' + ? 'left: 8rem; width: 250px;' : props.type === 'second' - ? 'left:12rem; width: 250px;' - : 'left: 26rem; width: 410px;'} + ? 'left:19.5rem; width: 340px;' + : 'left: 36.5rem; width: 250px;'} `; -const MemberBar = styled.div` - display: flex; +const AppTd = styled.td` + width: 200px; + ${({ regisModalOpen }) => + regisModalOpen && + ` opacity: 0.1; +`} +`; - justify-content: center; - align-items: center; - height: 40px; - transform: translate(-8rem); +const AppImage = styled.img` + width: 7rem; + height: 7rem; + max-height: 200px; + object-fit: cover; + border-radius: 8px; `; const PaginationContainer = styled.div` @@ -300,67 +248,6 @@ const PaginationContainer = styled.div` margin-top: 20px; `; -const ModalContainer = styled(Modal)` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #fff; - border-radius: 8px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - padding: 20px; - width: 500px; - margin: 0 auto; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -`; - -const ModalTitle = styled.h2` - font-size: 1.5rem; - margin-bottom: 15px; -`; - -const ModalLabel = styled.label` - font-size: 1rem; - margin-bottom: 5px; -`; - -const ModalInput = styled.input` - width: 70%; - padding: 8px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 1rem; -`; - -const ModalButtonWrapper = styled.div` - display: flex; - justify-content: space-between; - margin-top: 15px; -`; - -const ModalButton = styled.button` - background-color: #1e88e5; - color: #fff; - border: none; - border-radius: 4px; - padding: 8px 16px; - font-size: 1rem; - cursor: pointer; - transition: background-color 0.2s ease-in-out; - - & + & { - margin: 0 10px; - } - - &:hover { - background-color: #8181f7; - } -`; - const MenuItem = styled.div` display: flex; align-items: center; @@ -397,7 +284,7 @@ const Regisbutton = styled.button` color: white; width: 5rem; height: 2rem; - margin-left: 37rem; + margin-left: 30rem; margin-top: 0.6rem; &:hover { @@ -413,17 +300,10 @@ const MemberTable = styled.table` th, td { + width: 200px; padding: 5px; text-align: center; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); - - :nth-child(2) { - width: 200px; - } - - :nth-child(3) { - width: 400px; - } } th { @@ -437,10 +317,10 @@ const MemberTable = styled.table` tr { border-radius: 20%; + } - &:hover { - background-color: #f2f2f2; - } + tr:hover { + background-color: #f2f2f2; } `; @@ -456,4 +336,4 @@ const MemberList = styled.div` .menu { margin-left: auto; } -`; +`; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 76c6321..191209e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5095,11 +5095,6 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@^2.3.2, fsevents@~2.3.2: - version "2.3.2" - resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" - integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== - function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"