Merge pull request #218 from SKKUD/feat-analytics

added google analytics
SKKUD · Aug 22, 2024 · 2d76352 · 2d76352
2 parents 5876cab + 47bc963
commit 2d76352
Show file tree

Hide file tree

Showing 16 changed files with 551 additions and 159 deletions.
diff --git a/app/components/main/Notice/MoreBtn.js b/app/components/main/Notice/MoreBtn.js
@@ -1,32 +1,39 @@
-import styled from "@emotion/styled";
-import { useRouter } from "next/navigation";
+import styled from '@emotion/styled';
+import { useRouter, usePathname } from 'next/navigation';
+import { useEffect } from 'react';
 
 const MoreBtn = styled.button`
-  background-color: #f0f0f0;
-  color: #303030;
-  font-weight: 600;
-  border: none;
-  width: 72px;
-  height: 39px;
-  font-size: 16px;
-  border-radius: 99px;
-  cursor: pointer;
+	background-color: #f0f0f0;
+	color: #303030;
+	font-weight: 600;
+	border: none;
+	width: 72px;
+	height: 39px;
+	font-size: 16px;
+	border-radius: 99px;
+	cursor: pointer;
 
-  @media (max-width: 680px) {
-    width: 73px;
-    height: 25px;
-    font-size: 0.75rem;
-    border-radius: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
+	@media (max-width: 680px) {
+		width: 73px;
+		height: 25px;
+		font-size: 0.75rem;
+		border-radius: 40px;
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
 `;
 
 export default function NoticesRouterBtn() {
-  const router = useRouter();
-  const pushToNotices = () => {
-    router.push(`/notices`);
-  };
-  return <MoreBtn onClick={pushToNotices}>더보기</MoreBtn>;
+	const router = useRouter();
+	const pathname = usePathname();
+
+	const pushToNotices = () => {
+		if (pathname.includes('seoul')) {
+			router.push(`/seoul/notices`);
+		} else {
+			router.push(`/suwon/notices`);
+		}
+	};
+	return <MoreBtn onClick={pushToNotices}>더보기</MoreBtn>;
 }
diff --git a/app/components/main/Notice/NoticeCard.js b/app/components/main/Notice/NoticeCard.js
@@ -1,68 +1,74 @@
-import styled from "@emotion/styled";
-import NoticeDate from "./NoticeDate";
-import NoticeTitle from "./NoticeTitle";
-import Image from "next/image";
-import { useMediaQuery } from "@mui/material";
-import { useRouter } from "next/navigation";
+import styled from '@emotion/styled';
+import NoticeDate from './NoticeDate';
+import NoticeTitle from './NoticeTitle';
+import Image from 'next/image';
+import { useMediaQuery } from '@mui/material';
+import { usePathname, useRouter } from 'next/navigation';
 
 const CardWrapper = styled.div`
-  width: 174px;
-  cursor: pointer;
+	width: 174px;
+	cursor: pointer;
 
-  @media (max-width: 425px) {
-    width: 164px;
-  }
-  @media (max-width: 375px) {
-    width: 140px;
-  }
+	@media (max-width: 425px) {
+		width: 164px;
+	}
+	@media (max-width: 375px) {
+		width: 140px;
+	}
 `;
 const NoticeImg = styled(Image)`
-  border-radius: 10px;
+	border-radius: 10px;
 `;
 
 const NoticeThumbnail = styled.div`
-  display: -webkit-box;
-  word-wrap: break-word;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-family: Pretendard-Regular;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 140%; /* 19.6px */
-  letter-spacing: -0.14px;
-  color: ${({ theme }) => theme.palette.text.secondary};
+	display: -webkit-box;
+	word-wrap: break-word;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	font-family: Pretendard-Regular;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 140%; /* 19.6px */
+	letter-spacing: -0.14px;
+	color: ${({ theme }) => theme.palette.text.secondary};
 
-  @media (max-width: 425px) {
-    whitespace: nowrap;
-    font-size: 12px;
-    letter-spacing: -0.12px;
-  }
+	@media (max-width: 425px) {
+		whitespace: nowrap;
+		font-size: 12px;
+		letter-spacing: -0.12px;
+	}
 `;
 
 export default function NoticeCard({ item }) {
-  const matches_425 = useMediaQuery("(max-width:425px)");
-  const matches_375 = useMediaQuery("(max-width:375px)");
-  const router = useRouter();
-  const pushToNotice = (id) => {
-    router.push(`/notices/${id}`);
-  };
-  return (
-    <CardWrapper
-      onClick={() => pushToNotice(item.noticeId)}
-      key={item.noticeId}
-    >
-      <NoticeImg
-        src={item.thumbnail.url}
-        width={matches_425 ? (matches_375 ? 140 : 164) : 174}
-        height={matches_425 ? (matches_375 ? 140 : 164) : 174}
-        alt="notice thumbnail"
-      />
-      <NoticeDate>{item.createdAt.substr(0, 10)}</NoticeDate>
-      <NoticeTitle>{item.title}</NoticeTitle>
-      <NoticeThumbnail>{item.content}</NoticeThumbnail>
-    </CardWrapper>
-  );
+	const matches_425 = useMediaQuery('(max-width:425px)');
+	const matches_375 = useMediaQuery('(max-width:375px)');
+	const router = useRouter();
+	const pathname = usePathname();
+
+	const pushToNotice = (id) => {
+		if (pathname.includes('seoul')) {
+			router.push(`/seoul/notices/${id}`);
+		} else {
+			router.push(`/suwon/notices/${id}`);
+		}
+	};
+	return (
+		<CardWrapper
+			onClick={() => pushToNotice(item.noticeId)}
+			key={item.noticeId}
+		>
+			<NoticeImg
+				src={item.thumbnail.url}
+				width={matches_425 ? (matches_375 ? 140 : 164) : 174}
+				height={matches_425 ? (matches_375 ? 140 : 164) : 174}
+				alt="notice thumbnail"
+			/>
+			<NoticeDate>{item.createdAt.substr(0, 10)}</NoticeDate>
+			<NoticeTitle>{item.title}</NoticeTitle>
+			<NoticeThumbnail>{item.content}</NoticeThumbnail>
+		</CardWrapper>
+	);
 }
diff --git a/app/components/notices/NoticeBanner.js b/app/components/notices/NoticeBanner.js
@@ -1,52 +1,52 @@
-import styled from "@emotion/styled";
+import styled from '@emotion/styled';
 
 const BannerWrapper = styled.div`
-  width: 100%;
-  height: 236px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.7);
-  @media (max-width: 768px) {
-    gap: 30px;
-  }
+	width: 100%;
+	height: 236px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	justify-content: center;
+	align-items: center;
+	background-color: rgba(0, 0, 0, 0.7);
+	@media (max-width: 768px) {
+		gap: 30px;
+	}
 `;
 
 const SubTitle = styled.div`
-  color: #fff;
-  text-align: center;
-  font-family: GmarketSansMedium;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  @media (max-width: 768px) {
-    font-weight: 400;
-    font-size: 1.25rem;
-    line-height: 72%;
-  }
+	color: #fff;
+	text-align: center;
+	font-family: GmarketSansMedium;
+	font-size: 1rem;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+	@media (max-width: 768px) {
+		font-weight: 400;
+		font-size: 1.25rem;
+		line-height: 72%;
+	}
 `;
 const Title = styled.div`
-  color: #fff;
-  font-family: GmarketSansBold;
-  font-size: 2rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  @media (max-width: 768px) {
-    font-weight: 900;
-    font-size: 2.5rem;
-    line-height: 72%;
-  }
+	color: #fff;
+	font-family: GmarketSansBold;
+	font-size: 2rem;
+	font-style: normal;
+	font-weight: 500;
+	line-height: normal;
+	@media (max-width: 768px) {
+		font-weight: 900;
+		font-size: 2.5rem;
+		line-height: 72%;
+	}
 `;
 
-export default function NoticeBanner() {
-  return (
-    <BannerWrapper>
-      <SubTitle>성균관대학교 동아리연합회</SubTitle>
-      <Title>공지사항</Title>
-    </BannerWrapper>
-  );
+export default function NoticeBanner({ campus }) {
+	return (
+		<BannerWrapper>
+			<SubTitle>성균관대학교 {campus} 동아리연합회</SubTitle>
+			<Title>공지사항</Title>
+		</BannerWrapper>
+	);
 }
diff --git a/app/components/notices/NoticeRadioBtns.js b/app/components/notices/NoticeRadioBtns.js
@@ -36,12 +36,12 @@ export default function NoticeRadioBtns({ value, setValue }) {
         <FormControlLabel
           value="ROLE_ADMIN_SEOUL_CENTRAL"
           control={<StyledRadioBtn size="small" />}
-          label="명륜 동아리"
+          label="명륜"
         />
         <FormControlLabel
           value="ROLE_ADMIN_SUWON_CENTRAL"
           control={<StyledRadioBtn size="small" />}
-          label="율전 동아리"
+          label="율전"
         />
       </StyledRadioGroup>
     </FormControl>

diff --git a/app/layouts/layout.js b/app/layouts/layout.js
@@ -0,0 +1,10 @@
+import { GoogleAnalytics } from '@next/third-parties/google';
+
+export default function RootLayout({ children }) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+			<GoogleAnalytics gaId="G-99BWPDQWN4" />
+		</html>
+	);
+}
diff --git a/app/notices/page.js b/app/notices/page.js
diff --git a/app/notices/[noticeId]/loading.js → app/seoul/notices/[noticeId]/loading.js b/app/notices/[noticeId]/loading.js → app/seoul/notices/[noticeId]/loading.js
diff --git a/app/notices/[noticeId]/page.js → app/seoul/notices/[noticeId]/page.js b/app/notices/[noticeId]/page.js → app/seoul/notices/[noticeId]/page.js
diff --git a/app/notices/loading.js → app/seoul/notices/loading.js b/app/notices/loading.js → app/seoul/notices/loading.js
diff --git a/app/seoul/notices/page.js b/app/seoul/notices/page.js
@@ -0,0 +1,33 @@
+'use client';
+
+import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
+import NoticeRadioBtns from '@/app/components/notices/NoticeRadioBtns';
+import NoticeTableBody from '@/app/components/notices/NoticeTableBody';
+import NoticeBanner from '@/app/components/notices/NoticeBanner';
+import { usePathname } from 'next/navigation';
+
+const NoticesContentWrapper = styled.div`
+	max-width: 1200px;
+	margin: 0 auto;
+	margin-top: 1.5rem;
+	margin-bottom: 100px;
+	@media (max-width: 1200px) {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+	@media (max-width: 768px) {
+		margin-top: 0;
+	}
+`;
+
+export default function Notices() {
+	return (
+		<>
+			<NoticeBanner campus="명륜" />
+			<NoticesContentWrapper>
+				<NoticeTableBody role="ROLE_ADMIN_SEOUL_CENTRAL" />
+			</NoticesContentWrapper>
+		</>
+	);
+}
diff --git a/app/suwon/notices/[noticeId]/loading.js b/app/suwon/notices/[noticeId]/loading.js
@@ -0,0 +1,5 @@
+import LoadingLayout from "@/app/layouts/loading/LoadingLayout";
+
+export default function Loading() {
+  return <LoadingLayout />;
+}