Merge pull request #62 from cau-likelion-org/feat/#61

Feat/#61

.github/workflows/deploy.yml

@@ -6,6 +6,7 @@ env:
   NEXT_PUBLIC_GOOGLE_CLIENT_ID: '${{secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID}}'
   NEXT_PUBLIC_GOOGLE_REDIRECT_URI: '${{secrets.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}}'
   NEXT_PUBLIC_GOOGLE_SCOPE: '${{secrets.NEXT_PUBLIC_GOOGLE_SCOPE}}'
+  NEXT_PUBLIC_GOOGLE_ANALYTICS: '${{secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS}}'
   NEXT_PUBLIC_API_KEY: '${{secrets.NEXT_PUBLIC_API_KEY}}'
   NEXT_PUBLIC_NOTION_KEY: '${{secrets.NEXT_PUBLIC_NOTION_KEY}}'
   NEXT_PUBLIC_NOTION_DATABASE_ID: '${{secrets.NEXT_PUBLIC_NOTION_DATABASE_ID}}'

.production/serverless.yml

@@ -2,7 +2,7 @@ cau-likelion-next:
   component: '@sls-next/serverless-component'
   inputs:
     deploy: true
-    bucketName: 'cau-likelion'
+    bucketName: 'cau-like-lion'
     bucketRegion: 'ap-northeast-2'
     nextConfigDir: '../'
     name:
@@ -11,4 +11,5 @@ cau-likelion-next:
     timeout: 30
     memory: 1024
     cloudfront:
-      comment: 'next deploy' # CloudFront 설명 설정
+      comment: 'next deploy' # CloudFront 설명 설정
+      distributionId: 'E2G1YIN91GY4FL'

next.config.js

@@ -7,9 +7,9 @@ const nextConfig = {
     dangerouslyAllowSVG: true,
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
     domains: [
-      'cau-likelion.s3.ap-northeast-2.amazonaws.com',
-      'chunghaha.s3.ap-northeast-2.amazonaws.com',
-      'dsu3068f46mzk.cloudfront.net',
+      'cau-like-lion.s3.ap-northeast-2.amazonaws.com',
+      'chunghahaha.s3.ap-northeast-2.amazonaws.com',
+      'd1sgygn8l0lfd5.cloudfront.net',
     ],
   },
   webpack(config) {

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@next/font": "13.1.1",
     "@notionhq/client": "^2.2.3",
+    "@types/gtag.js": "^0.0.18",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",

src/components/common/header/MobileNavModal.tsx

@@ -7,7 +7,7 @@ import { IMenu } from './NavBar';
 import NavButton from './NavButton';
 import NavProfileCard from './NavProfileCard';
 
-const MobileNavModal = ({ isModalOn }: { isModalOn: boolean; }) => {
+const MobileNavModal = ({ isModalOn }: { isModalOn: boolean }) => {
   const { access: tokenState } = useRecoilValue(token);
   const [visibilityAnimation, setVisibilityAnimation] = useState(false);
   const [repeat, setRepeat] = useState<any>(null);
@@ -21,6 +21,8 @@ const MobileNavModal = ({ isModalOn }: { isModalOn: boolean; }) => {
     { title: '프로젝트', routing: '/project' },
     { title: '세션', routing: '/session' },
     { title: '추억', routing: '/gallery' },
+    { title: '위키', routing: 'https://wiki.cau-likelion.org', target: '_blank' },
+    { title: '피드', routing: 'https://blog.cau-likelion.org', target: '_blank' },
   ];
 
   useEffect(() => {
@@ -46,7 +48,7 @@ const MobileNavModal = ({ isModalOn }: { isModalOn: boolean; }) => {
           <ButtonWrapper>
             {isLogin && <NavButton title={'출석체크'} routing={'/attendance'} />}
             {menu.map((m, i) => (
-              <NavButton key={i} title={m.title} routing={m.routing} />
+              <NavButton key={i} title={m.title} routing={m.routing} target={m.target} />
             ))}
           </ButtonWrapper>
         </Wrapper>
@@ -57,7 +59,7 @@ const MobileNavModal = ({ isModalOn }: { isModalOn: boolean; }) => {
 
 export default MobileNavModal;
 
-const Layer = styled.div<{ isModalOn: boolean; }>`
+const Layer = styled.div<{ isModalOn: boolean }>`
   max-width: 100vw;
   width: 100%;
   display: ${(props) => (props.isModalOn ? 'block' : 'none')};

src/components/common/header/NavBar.tsx

@@ -19,11 +19,12 @@ export interface IHoverButton {
 export interface IMenu {
   title: string;
   routing: string;
+  target?: string;
 }
 
 const NavBar = () => {
   const { access: tokenState } = useRecoilValue(token);
-  const [isLogin, setIsLogin] = useState(false);
+  const [isLogin, setIsLogin] = useState(true);
 
   useEffect(() => {
     if (tokenState) setIsLogin(true);
@@ -38,11 +39,13 @@ const NavBar = () => {
   const menuDataSelector = (): IMenu[] => {
     const resultArray = [
       { title: '프로젝트', routing: '/project' },
+      { title: '위키', routing: 'https://wiki.cau-likelion.org', target: '_blank' },
+      { title: '피드', routing: 'https://blog.cau-likelion.org', target: '_blank' },
       { title: isLogin ? 'MY' : 'Log in', routing: isLogin ? '/mypage' : '/login' },
     ];
     if (isLogin) {
-      const [project, login] = resultArray;
-      return [project, { title: '출석체크', routing: '/attendance' }, login];
+      const [project, wiki, feed, login] = resultArray;
+      return [project, wiki, feed, { title: '출석체크', routing: '/attendance' }, login];
     }
     return resultArray;
   };
@@ -61,8 +64,8 @@ const NavBar = () => {
       </LogoWrapper>
       <ButtonWrapper>
         <HoverButton hover={hover} dropdown={dropdown} />
-        {menuDataSelector().map(({ title, routing }, index) => (
-          <NavButton key={index + routing} title={title} routing={routing} />
+        {menuDataSelector().map(({ title, routing, target }, index) => (
+          <NavButton key={index + routing} title={title} routing={routing} target={target} />
         ))}
       </ButtonWrapper>
     </Wrapper>

src/components/common/header/NavButton.tsx

@@ -5,17 +5,22 @@ import styled from 'styled-components';
 interface INavBarButton {
   title: string;
   routing: string;
+  target?: string;
 }
 
-const NavButton = ({ title, routing }: INavBarButton) => {
+const NavButton = ({ title, routing, target }: INavBarButton) => {
   if (title === 'Log in' || title === 'MY')
     return (
       <Link href={routing}>
         <LoginButton>{title}</LoginButton>
       </Link>
     );
 
-  return (
+  return target ? (
+    <a href={routing} target={target}>
+      <Button>{title}</Button>
+    </a>
+  ) : (
     <Link href={routing}>
       <Button>{title}</Button>
     </Link>

src/components/home/project/ProjectSection.tsx

@@ -21,7 +21,7 @@ const ProjectSection = () => {
     <FadeInComponent variants={fadeInAnimation}>
       <Wrapper>
         <TitleWrapper>
-          <Title>각 트랙이 모여 함께 만든 프로젝트</Title>
+          <Title>프로젝트 소개</Title>
           <Text>멋쟁이 사자처럼에서 탄생한 서비스들을 소개합니다. </Text>
         </TitleWrapper>
         <ProjectSlider />