init

2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
--- a/src/pages/DataManage/UserView.js
+++ b/src/pages/DataManage/UserView.js
@@ -0,0 +1,162 @@
+import { useState, Fragment } from 'react';
+
+import { Title, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
+
+import styled from 'styled-components';
+
+import UserViewSearchBar from '../../components/DataManage/UserViewSearchBar';
+import UserDefaultInfo from '../../components/DataManage/UserDefaultInfo';
+import UserAvatarInfo from '../../components/DataManage/UserAvatarInfo';
+import UserDressInfo from '../../components/DataManage/UserDressInfo';
+import UserToolInfo from '../../components/DataManage/UserToolInfo';
+import UserInventoryInfo from '../../components/DataManage/UserInventoryInfo';
+import UserMailInfo from '../../components/DataManage/UserMailInfo';
+import UserMyHomeInfo from '../../components/DataManage/UserMyHomeInfo';
+import UserFriendInfo from '../../components/DataManage/UserFriendInfo';
+import UserTatttooInfo from '../../components/DataManage/UserTattooInfo';
+import UserQuestInfo from '../../components/DataManage/UserQuestInfo';
+import UserClaimInfo from '../../components/DataManage/UserClaimInfo';
+import Modal from '../../components/common/modal/Modal';
+import Button from '../../components/common/button/Button';
+
+import { useNavigate } from 'react-router-dom';
+import { authList } from '../../store/authList';
+import { useRecoilValue } from 'recoil';
+import AuthModal from '../../components/common/modal/AuthModal';
+import { authType, TabList } from '../../assets/data';
+
+const UserView = () => {
+	const navigate = useNavigate();
+	const userInfo = useRecoilValue(authList);
+
+	const [infoView, setInfoView] = useState('none');
+	const [activeContent, setActiveContent] = useState('기본정보');
+	const [resultData, setResultData] = useState([]);
+
+	const handleTab = title => {
+		setActiveContent(title);
+	};
+
+	return (
+		<>
+			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === authType.userSearchRead) ? (
+				<AuthModal />
+			) : (
+				<>
+					<Title>유저조회</Title>
+					<UserViewSearchBar setInfoView={setInfoView} resultData={resultData} handleTab={handleTab} setResultData={setResultData} />
+					<UserWrapper display={infoView}>
+						<TabScroll>
+							<UserTabWrapper>
+								{TabList.map((el, idx) => {
+									return (
+										<UserTab key={idx} $state={el.title === activeContent ? 'active' : 'unactive'} onClick={() => handleTab(el.title)}>
+											{el.title}
+										</UserTab>
+									);
+								})}
+							</UserTabWrapper>
+						</TabScroll>
+						<UserTabInfo>
+							{activeContent === '기본정보' && <UserDefaultInfo userInfo={resultData && resultData} />}
+							{activeContent === '아바타' && <UserAvatarInfo userInfo={resultData && resultData} />}
+							{activeContent === '의상' && <UserDressInfo userInfo={resultData && resultData} />}
+							{activeContent === '도구' && <UserToolInfo userInfo={resultData && resultData} />}
+							{activeContent === '인벤토리' && <UserInventoryInfo userInfo={resultData && resultData} />}
+							{activeContent === '우편' && <UserMailInfo userInfo={resultData && resultData} />}
+							{activeContent === '마이홈' && <UserMyHomeInfo userInfo={resultData && resultData} />}
+							{activeContent === '친구목록' && <UserFriendInfo userInfo={resultData && resultData} />}
+							{activeContent === '타투' && <UserTatttooInfo userInfo={resultData && resultData} />}
+							{activeContent === '퀘스트' && <UserQuestInfo userInfo={resultData && resultData} />}
+							{activeContent === '클레임' && <UserClaimInfo userInfo={resultData && resultData} />}
+						</UserTabInfo>
+					</UserWrapper>
+				</>
+			)}
+		</>
+	);
+};
+
+export default UserView;
+
+const UserTab = styled.li`
+	display: flex;
+	width: 100%;
+	max-width: 120px;
+	height: 35px;
+	align-items: center;
+	justify-content: center;
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	color: #888;
+	text-align: center;
+	cursor: pointer;
+	&:hover {
+		font-weight: 700;
+		color: #fff;
+		background: #888;
+	}
+	${props =>
+		props.$state === 'active' &&
+		`font-weight: 700;
+		color: #fff;
+		background: #888;`}
+`;
+const TabScroll = styled.div`
+	width: 100%;
+	overflow: auto;
+`;
+const UserTabWrapper = styled.ul`
+	border-bottom: 1px solid #888888;
+	display: flex;
+	background: #fff;
+`;
+const UserWrapper = styled.div`
+	display: ${props => props.display};
+	${props => props.display && `flex-flow:column;`}
+	min-height: calc(100vh - 345px);
+	overflow: hidden;
+	background: #f9f9f9;
+`;
+
+const UserTabInfo = styled.div`
+	padding: 50px;
+
+	overflow: auto;
+	&::-webkit-scrollbar {
+		width: 4px;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: #666666;
+	}
+	&::-webkit-scrollbar-track {
+		background: #d9d9d9;
+	}
+`;
+
+const UserDefaultTable = styled.table`
+	border: 1px solid #e8eaec;
+	border-top: 1px solid #000;
+	font-size: 14px;
+	margin-bottom: 40px;
+	th {
+		background: #efefef;
+		font-weight: 700;
+	}
+	th,
+	td {
+		padding: 12px;
+		text-align: center;
+		border-left: 1px solid #e8eaec;
+		vertical-align: middle;
+	}
+	td {
+		background: #fff;
+		border-bottom: 1px solid #e8eaec;
+		word-break: break-all;
+	}
+	button {
+		height: 24px;
+		font-size: 13px;
+	}
+`;