Skip to content

Commit

Permalink
[design] margin , word-break 속성 추가
Browse files Browse the repository at this point in the history 
[design] margin , word-break 속성 추가
  • Loading branch information
@tjrmswo
tjrmswo authored Apr 18, 2024
2 parents e9b5192 + b4ab86f commit 292e790
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 104 deletions.
27 changes: 18 additions & 9 deletions src/app/components/adminComponents/AdminBarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, { SetStateAction } from "react";
import { BarChart } from "@mui/x-charts/BarChart";
import { useQuery } from "@tanstack/react-query";
import { Box } from "@mui/material";
import { css } from "@emotion/react";

// types
import { CompanyMockData } from "@/app/types/aboutAdminPage";
Expand Down Expand Up @@ -61,10 +62,10 @@ const adminBarChart: React.FC<BarChartType> = ({
return (
<div
css={[
`
css`
width: 30vw;
height: 25vh;
`,
`,
]}
>
<Box
Expand All @@ -73,16 +74,24 @@ const adminBarChart: React.FC<BarChartType> = ({
borderRadius="3px"
marginLeft="1rem"
>
<h2>현재 기업 회원 구독 현황</h2>
<h2
css={[
css`
margin-bottom: 0.5rem;
`,
]}
>
현재 기업 회원 구독 현황
</h2>
</Box>
<div
css={[
`
background-color: #f2f0f0;
padding: 0.5rem;
border-radius: 0.5rem;
width: 30vw;
`,
css`
background-color: #f2f0f0;
padding: 0.5rem;
border-radius: 0.5rem;
width: 30vw;
`,
]}
>
<BarChart
Expand Down
140 changes: 73 additions & 67 deletions src/app/components/adminComponents/AdminModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import Telephone from "@/app/assets/svg/phone.svg";

// libraries
import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { css } from "@emotion/react";

interface ModalType {
Expand All @@ -53,6 +53,8 @@ const AdminModal: React.FC<ModalType> = ({
setCompanyData,
setSelectedData,
}) => {
// const queryclient = useQueryClient();
// queryclient.invalidateQueries(["getCompanyData"]);
const handleModal = () => {
setIsVisible(false);
};
Expand All @@ -74,9 +76,7 @@ const AdminModal: React.FC<ModalType> = ({
}));
}
},
onSuccess: () => {
refetch();
},
onSuccess: () => {},
onError: (e) => {
console.log(e.message);
},
Expand Down Expand Up @@ -117,18 +117,18 @@ const AdminModal: React.FC<ModalType> = ({
setCompanyData(response.data.data);
return response;
},
enabled: false, // 초기에는 실행하지 않도록 설정
});

if (isLoading) return <div>로딩중...</div>;
if (error) return <div>{error.message}</div>;

return (
// 로직 설명 구문 추가 - 사용자가 알아보기 조금 어려움
<div
id="modal-container"
css={[
css`
width: 100%;
width: 25vw;
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -141,28 +141,32 @@ const AdminModal: React.FC<ModalType> = ({
<div
css={[
Container,
`
width: ${isVisible && "20vw"};
height: ${isVisible && "43vh"};
display: flex;
flex-direction: column;
border: ${selectedData?.approved === true ? "2px solid #A1EEBD" : "2px solid #ff0000"};
box-shadow: ${selectedData?.approved === true ? "0 1px 4px 1px #A1EEBD" : "0 1px 4px 1px #ff0000"};
`,
css`
width: ${isVisible && "20vw"};
height: ${isVisible && "43vh"};
display: flex;
flex-direction: column;
border: ${selectedData?.approved === true
? "2px solid #A1EEBD"
: "2px solid #ff0000"};
box-shadow: ${selectedData?.approved === true
? "0 1px 4px 1px #A1EEBD"
: "0 1px 4px 1px #ff0000"};
`,
]}
>
<div css={[cancelHeader]}>
<button
css={[
cancelButton,
`
&:hover {
transition: 0.3s transform;
transform: scale(1.1);
background-color: #ff8a00;
color: white;
}
`,
css`
&:hover {
transition: 0.3s transform;
transform: scale(1.1);
background-color: #ff8a00;
color: white;
}
`,
]}
onClick={() => revokeCompany.mutate()}
>
Expand All @@ -171,28 +175,28 @@ const AdminModal: React.FC<ModalType> = ({
<button
css={[
cancelButton,
`
&:hover {
transition: 0.3s transform;
transform: scale(1.1);
background-color: #ff8a00;
color: white;
}
`,
css`
&:hover {
transition: 0.3s transform;
transform: scale(1.1);
background-color: #ff8a00;
color: white;
}
`,
]}
onClick={() => approveCompany.mutate()}
>
기업 승인
</button>
<Image
css={[
`
margin-bottom: 0.5rem;
&:hover {
transition: 0.3s transform;
transform: scale(1.1);
}
`,
css`
margin-bottom: 0.5rem;
&:hover {
transition: 0.3s transform;
transform: scale(1.1);
}
`,
]}
src={CloseButton}
alt="닫기 버튼"
Expand All @@ -203,29 +207,29 @@ const AdminModal: React.FC<ModalType> = ({
{/* userData section */}
<div
css={[
`
display: flex;
flex-direction: row;
margin-top: 1rem;
`,
css`
display: flex;
flex-direction: row;
margin-top: 1rem;
`,
]}
>
<div
css={[
`
display: flex;
flex-direction: column;
width: 50%;
`,
css`
display: flex;
flex-direction: column;
width: 50%;
`,
]}
>
<h3>기업 명</h3>
<div
css={[
sortUserData,
`
flex-direction: row;
`,
css`
flex-direction: row;
`,
]}
>
<Image
Expand All @@ -241,9 +245,10 @@ const AdminModal: React.FC<ModalType> = ({
<div
css={[
sortUserData,
`
flex-direction: row;
`,
css`
flex-direction: row;
word-break: break-word; /* 단어 단위로 줄바꿈 설정 */
`,
]}
>
<Image
Expand All @@ -258,20 +263,21 @@ const AdminModal: React.FC<ModalType> = ({
</div>
<div
css={[
`
display: flex;
flex-direction: column;
width: 50%;
`,
css`
display: flex;
flex-direction: column;
width: 50%;
`,
]}
>
<h3>분야</h3>
<div
css={[
sortUserData,
`
flex-direction: row;
`,
css`
flex-direction: row;
word-break: break-word; /* 단어 단위로 줄바꿈 설정 */
`,
]}
>
<Image
Expand All @@ -287,9 +293,9 @@ const AdminModal: React.FC<ModalType> = ({
<div
css={[
sortUserData,
`
flex-direction: row;
`,
css`
flex-direction: row;
`,
]}
>
<Image
Expand All @@ -307,9 +313,9 @@ const AdminModal: React.FC<ModalType> = ({
<div
css={[
sortUserData,
`
flex-direction: row;
`,
css`
flex-direction: row;
`,
]}
>
<Image css={[Img]} src={Address} alt="주소" width={30} height={35} />{" "}
Expand Down
3 changes: 2 additions & 1 deletion src/app/components/adminComponents/AdminSignupCorporation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const AdminSignupCorporation: React.FC<CorporationData> = ({
changed,
setChanged,
}) => {
const { isLoading, error, data } = useQuery({
const { isLoading, error, refetch } = useQuery({
queryKey: ["getCompanyData"],
queryFn: async () => {
const response = await userAxiosWithAuth.get(
Expand Down Expand Up @@ -69,6 +69,7 @@ const AdminSignupCorporation: React.FC<CorporationData> = ({

if (isLoading) return <div>로딩중...</div>;
if (error) return <div>{error.message}</div>;

return (
<div
style={{
Expand Down
13 changes: 10 additions & 3 deletions src/app/components/adminComponents/AdminSparkline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Box } from "@mui/material";
import { CompanyMockData } from "@/app/types/aboutAdminPage";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { css } from "@emotion/react";

const labels = ["월", "화", "수", "목", "금", "토", "일"];

Expand Down Expand Up @@ -126,9 +127,15 @@ const adminSparkline: React.FC<SparklineChartType> = ({
`,
]}
>
<Box display="flex" alignItems="center" marginLeft="1rem">
<h2>기간별 기업 회원 변화 추이</h2>
</Box>
<h2
css={[
css`
margin-bottom: 0.5rem;
`,
]}
>
기간별 기업 회원 변화 추이
</h2>
<div
css={[
`
Expand Down
Loading

0 comments on commit 292e790

Please sign in to comment.