Merge pull request #190 from themoment-team/develop

Release v0.1.0

.editorConfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,11 @@
+**/.next
+**/node_modules
+**/style.ts
+*.d.ts
+
+# axios http method function
+packages/api/admin/src/libs/api/admin.ts
+packages/api/client/src/libs/api/client.ts
+
+# page style
+**/styles/page/*.ts

.gitignore

@@ -26,6 +26,7 @@
 
 # local env files
 **/.env*.local
+**/.env
 
 # vercel
 **/.vercel
@@ -34,3 +35,6 @@
 **/*.tsbuildinfo
 **/next-env.d.ts
 **/node_modules
+
+# storybook
+**/storybook-static

.prettierignore

@@ -0,0 +1,2 @@
+**/.next
+**/node_modules

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

README.md

@@ -4,15 +4,20 @@
 
 ## commands
 
+> root `package.json` scripts에 `--filter` command를 포함하여 작성해두었습니다.
+
 ```bash
+$ git clone https://github.com/themoment-team/official-gsm-front.git
+$ cd official-gsm-front
+$ pnpm install
+
+# command of a specific package
 $ pnpm <workspace-name> <command>
 
 # example
 $ pnpm client dev
 ```
 
-`package.json`에 `--filter` command를 포함하여 작성해두었습니다.
-
 ## directory structure
 
 ```bash
@@ -23,9 +28,11 @@ $ pnpm client dev
 │   └── storybook
 │
 │── packages
+│   └── api
 │   └── common
 │   └── eslint-config-custom
 │   └── tsconfig
+│   └── types
 │   └── ui
 ...
 ```

apps/admin/.env.example

@@ -0,0 +1,3 @@
+CLIENT_API_URL = 'client-api-url'
+ADMIN_API_URL = 'admin-api-url'
+ADMIN_SIGNIN_URL = 'admin-signin-url'

apps/admin/next.config.js

@@ -2,10 +2,33 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  transpilePackages: ["ui", "common"],
+  transpilePackages: ['ui', 'common', 'api'],
   compiler: {
     emotion: true,
   },
+  rewrites: async () => [
+    {
+      source: '/api/client/:path*',
+      destination: `${process.env.CLIENT_API_URL}/api/:path*`,
+    },
+    {
+      source: '/api/admin/:path*',
+      destination: `${process.env.ADMIN_API_URL}/api/:path*`,
+    },
+  ],
+  redirects: async () => [
+    {
+      source: '/api/signin',
+      destination: process.env.ADMIN_SIGNIN_URL,
+      permanent: true,
+    },
+  ],
+  images: {
+    domains: [
+      'official-dev-bucket.s3.ap-northeast-2.amazonaws.com',
+      'official-prod-bucket.s3.ap-northeast-2.amazonaws.com',
+    ],
+  },
 };
 
 module.exports = nextConfig;

apps/admin/package.json

@@ -9,20 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@hookform/resolvers": "^3.1.0",
     "@types/node": "20.1.4",
-    "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
+    "api": "workspace:^",
     "common": "workspace:^",
     "eslint": "8.40.0",
-    "next": "13.4.2",
-    "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.44.3",
+    "react-toastify": "^9.1.3",
+    "types": "workspace:^",
     "typescript": "5.0.4",
-    "ui": "workspace:^"
+    "ui": "workspace:^",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@storybook/react": "^7.0.6",
     "eslint-config-custom": "workspace:^",
     "tsconfig": "workspace:^"
   }

apps/admin/src/app/[category]/page.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { redirect } from 'next/navigation';
+
+import styled from '@emotion/styled';
+
+import {
+  Category,
+  Header,
+  Banner,
+  PostList,
+  PostListHeader,
+  GalleryList,
+} from 'admin/components';
+
+import { useGetPostList } from 'api/client';
+
+import { PaginationController } from 'ui';
+
+const categoryParamsArray = ['', 'newsletter', 'gallery'] as const;
+
+const categoryQueryString = {
+  newsletter: 'FAMILY_NEWSLETTER',
+  gallery: 'EVENT_GALLERY',
+} as const;
+
+const PAGE_SIZE = 6;
+
+type CategoryParamsType = keyof typeof categoryQueryString;
+
+interface ListPageProps {
+  params: { category: CategoryParamsType };
+  searchParams: { pageNumber: string };
+}
+
+export default function ListPage({
+  params: { category },
+  searchParams,
+}: ListPageProps) {
+  /** 1 ~ totalPages */
+  const pageNumber = Number(searchParams.pageNumber ?? 1);
+
+  const { data } = useGetPostList(
+    categoryQueryString[category],
+    pageNumber,
+    PAGE_SIZE
+  );
+
+  if (!categoryParamsArray.includes(category)) {
+    redirect('/');
+  }
+
+  if (Number.isNaN(pageNumber) || pageNumber < 1) {
+    redirect(`/${category}`);
+  }
+
+  return (
+    <>
+      <Header />
+      <Banner />
+      <ContentWrapper>
+        <Category category={category} />
+        <PostListHeader category={category} marginTop='3rem' />
+        {category === 'gallery' ? (
+          <GalleryList postList={data?.postList ?? []} />
+        ) : (
+          <PostList postList={data?.postList ?? []} />
+        )}
+        {(data?.totalPages ?? 0) > 1 && (
+          <PaginationController
+            pageNumber={pageNumber}
+            totalPages={data?.totalPages ?? 0}
+          />
+        )}
+      </ContentWrapper>
+    </>
+  );
+}
+
+const ContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 2.5rem;
+  padding-bottom: 5rem;
+`;
+
+// it's not working in client component
+
+// export function generateStaticParams() {
+//   return [{ category: "newsletter" }, { category: "gallery" }];
+// }
+
+// export const dynamicParams = false;

apps/admin/src/app/api/file/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const fileUrl = searchParams.get('fileUrl');
+
+  if (!fileUrl) return NextResponse.error();
+
+  const res = await fetch(fileUrl);
+  const file = await res.blob();
+
+  return new NextResponse(file);
+}

apps/admin/src/app/auth/signin/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Background>{children}</Background>;
+}
+
+const Background = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: #0e0f10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @media (max-height: 26.5rem) {
+    height: auto;
+    align-items: baseline;
+  }
+`;

apps/admin/src/app/auth/signin/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { GoogleLoginButton } from 'admin/components';
+import * as S from 'admin/styles/page/signin';
+
+export default function SignInPage() {
+  return (
+    <S.SignInPage>
+      <S.ModelWrapper>
+        <S.SignInModel modelUrl='/models/school.webm' />
+        <S.ModelCover />
+      </S.ModelWrapper>
+      <S.SignInContent>
+        <S.Description>
+          GSM 홈페이지 <S.LimeHighlight>관리자용 페이지</S.LimeHighlight>
+          입니다.
+          <br />
+          이용하시려면{' '}
+          <S.SkyBlueHighlight>학교 전용 구글 아이디</S.SkyBlueHighlight>로
+          로그인해주세요.
+        </S.Description>
+        <GoogleLoginButton>Google 로그인</GoogleLoginButton>
+      </S.SignInContent>
+    </S.SignInPage>
+  );
+}

apps/admin/src/app/auth/signin/warning/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { WarningIcon } from 'admin/assets';
+import { GoogleLoginButton } from 'admin/components';
+import * as S from 'admin/styles/page/signin';
+
+export default function SignInWarningPage() {
+  return (
+    <S.SignInWarning>
+      <WarningIcon />
+      <S.WarningContent>
+        <S.Description>학교 이메일로만 로그인 가능합니다.</S.Description>
+        <GoogleLoginButton>다시 로그인</GoogleLoginButton>
+      </S.WarningContent>
+    </S.SignInWarning>
+  );
+}

apps/admin/src/app/auth/signup/approve/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'react';
+
+import Link from 'next/link';
+
+import styled from '@emotion/styled';
+
+import { AuthTitle, AuthModel } from 'admin/components';
+
+import { Button } from 'ui';
+
+export default function IntroPage() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  return (
+    <>
+      <AuthTitle textAlign='center' marginTop='6.5rem'>
+        승인이 완료되었습니다.
+      </AuthTitle>
+      <AuthModel modelUrl='/models/approve.webm' loop={false} marginTop='0' />
+      <Button
+        position='absolute'
+        bottom='1.5rem'
+        onClick={() => {
+          setIsLoading(true);
+        }}
+        isLoading={isLoading}
+      >
+        <CustomLink href='/'>확인</CustomLink>
+      </Button>
+    </>
+  );
+}
+
+const CustomLink = styled(Link)`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;