Merge pull request #46 from themoment-team/develop

Develop

next.config.js

@@ -4,6 +4,8 @@ const nextConfig = {
   env: {
     mapApiKey: process.env.NEXT_PUBLIC_MAP_API_KEY,
     baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
+    gssIdKey: process.env.NEXT_PUBLIC_GSS_ID_KEY,
+    gssApiKey: process.env.NEXT_PUBLIC_GSS_API_KEY,
   },
   images: {
     domains: ['github.com', 'avatars.githubusercontent.com'],

src/components/CompanyForm/CompanyForm.tsx

@@ -26,6 +26,10 @@ interface CompanyFormProps {
 export const CompanyFormComponent: React.FC<CompanyFormProps> = ({
   setCompanyFormModalVisible,
 }) => {
+  const uriRegex =
+    // eslint-disable-next-line no-useless-escape
+    /(http(s)?:\/\/|www.)([a-z0-9\w]+\.*)+[a-z0-9]{2,4}([\/a-z0-9-%#?&=\w])+(\.[a-z0-9]{2,4}(\?[\/a-z0-9-%#?&=\w]+)*)*/gi;
+
   const { register, handleSubmit, setValue } = useForm<InputListType>();
   const { mutate } = useSWRConfig();
 
@@ -41,6 +45,11 @@ export const CompanyFormComponent: React.FC<CompanyFormProps> = ({
   }, [address]);
 
   const onSubmit: SubmitHandler<InputListType> = data => {
+    if (!uriRegex.test(data.companyImgUri)) {
+      toast.error('지원하지 않는 이미지 주소 형식이에요');
+      return;
+    }
+
     // TODO: post 로직 고도화
     const reqData: CompanyReqData = {
       name: data.companyName,
@@ -82,6 +91,7 @@ export const CompanyFormComponent: React.FC<CompanyFormProps> = ({
           <S.Input
             {...register('companyImgUri')}
             required
+            placeholder="회사 이미지 url"
             type="url"
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
               setPreviewCompanyImgUri(e.target.value);

src/hooks/api/google-spread-sheets/use-site-state.ts

@@ -0,0 +1,30 @@
+import useSWR from 'swr';
+
+import axios from 'axios';
+
+type SiteStateToken = 'INSPECTION' | 'NORMAL';
+
+interface SiteStateData {
+  range: string;
+  majorDimension: string;
+  values: [[string], [SiteStateToken], [string]];
+}
+
+interface UseSiteState {
+  data: SiteStateData;
+}
+
+const useSiteState = () => {
+  const url = `https://sheets.googleapis.com/v4/spreadsheets/${process.env.gssIdKey}/values/sheet1?key=${process.env.gssApiKey}`;
+  const { data, error } = useSWR<UseSiteState>(url, axios.get);
+
+  const siteData = data?.data?.values[1][0];
+
+  return {
+    data: siteData,
+    isLoading: !error && !data,
+    isError: error,
+  };
+};
+
+export default useSiteState;

src/pages/_app.tsx

@@ -1,10 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { AppProps } from 'next/app';
 import Script from 'next/script';
+import { useRouter } from 'next/router';
 
 import { GlobalStyle } from 'shared/GlobalStyle';
+import useSiteState from 'hooks/api/google-spread-sheets/use-site-state';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const { data: siteState } = useSiteState();
+
+  useEffect(() => {
+    switch (siteState) {
+      case 'INSPECTION':
+        router.replace('/site-state/inspection');
+        break;
+      case 'NORMAL':
+        router.replace('/');
+        break;
+      default:
+        router.replace('/');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [siteState]);
+
   return (
     <>
       <Script

src/pages/_middleware.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function middleware(req: NextRequest) {
+  const fetchUrl = `https://sheets.googleapis.com/v4/spreadsheets/${process.env.gssIdKey}/values/sheet1?key=${process.env.gssApiKey}`;
+  const res = await fetch(fetchUrl);
+  const data = await res.json();
+  const siteState = data?.values[1][0];
+
+  const { pathname, origin } = req.nextUrl;
+
+  if (siteState === 'INSPECTION' && pathname !== '/site-state/inspection') {
+    return NextResponse.redirect(`${origin}/site-state/inspection`);
+  } else {
+    return NextResponse.next();
+  }
+}

src/pages/site-state/inspection.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import { NextPage } from 'next';
+
+import { Logo } from 'assets/icons/Logo';
+
+const InspectionWrapper = styled.main`
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  section {
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  h1 {
+    font-size: 1rem;
+    font-weight: 500;
+  }
+`;
+
+const InspectionPage: NextPage = () => {
+  return (
+    <InspectionWrapper>
+      <section>
+        <Logo logoColor="black" />
+        <h1>&nbsp;&nbsp;| 서비스가 점검중이에요</h1>
+      </section>
+    </InspectionWrapper>
+  );
+};
+
+export default InspectionPage;