Merge pull request #9 from 1Seok2/master

Merge
khu-dev · Apr 28, 2021 · 58526e4 · 58526e4
2 parents dbb35b6 + 3de6c92
commit 58526e4
Show file tree

Hide file tree

Showing 17 changed files with 161 additions and 80 deletions.
diff --git a/.babelrc b/.babelrc
@@ -2,11 +2,11 @@
   "presets": ["next/babel"],
   "plugins": [
     [
-      "babel-plugin-styled-components",
+      "styled-components",
       {
-        "fileName": true,
+        "ssr": true,
         "displayName": true,
-        "pure": true
+        "preprocess": false
       }
     ]
   ]

diff --git a/README.md b/README.md
@@ -2,6 +2,12 @@
 
 `Next.js`를 사용하여 쿠뮤 어플리케이션의 웹뷰를 `Server Side Rendering`(이하 SSR)을 통해 띄운다.
 
+### Deployed
+
+- with [Netlify for Test](https://khumu-frontend.netlify.app/)
+
+- with Cloud Front for Production
+
 ## Main Page
 
 <img src="https://user-images.githubusercontent.com/49581472/115951307-04503f00-a51b-11eb-979d-efb324dc485c.gif" width="300px" alt="main-page-gif" >

diff --git a/package.json b/package.json
@@ -5,7 +5,10 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "type-check": "tsc"
+    "type-check": "tsc",
+    "export": "next export",
+    "netlify-deploy": "next build",
+    "prod": "next build && next export"
   },
   "dependencies": {
     "axios": "^0.21.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,25 +1,27 @@
+import { Container } from 'next/app';
 import Head from 'next/head';
-import { OuterContainer } from '@components/utils/styles/container.styled';
-import Header from '@components/header';
+import React from 'react';
+
 import { AppType } from '@interfaces/app';
 
 import '@assets/css/app.css';
 import '@assets/css/scroll.css';
 
-const App = ({ Component, pageProps, router: { pathname } }: AppType) => {
+import Layout from '@components/layout';
+
+const App = ({ Component, pageProps }: AppType) => {
   return (
-    <>
+    <Container>
       <Head>
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
         />
       </Head>
-      <OuterContainer>
-        <Header pathname={pathname} />
+      <Layout>
         <Component {...pageProps} />
-      </OuterContainer>
-    </>
+      </Layout>
+    </Container>
   );
 };
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -6,9 +6,9 @@ import Helmet from 'react-helmet'; // head태그에 넣을 정보를 jsx로 작
 import { ServerStyleSheet } from 'styled-components';
 
 class MyDocument extends Document {
-  static getInitialProps(context) {
+  static async getInitialProps(context) {
     const sheet = new ServerStyleSheet(); // 서버사이드 렌더링 할 수 있게함.
-    const page = context.renderPage((App) => (props) =>
+    const page = await context.renderPage((App) => (props) =>
       sheet.collectStyles(<App {...props} />),
     );
     const styleTags = sheet.getStyleElement();

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,20 +1,31 @@
-import { apiBase } from '@api/api-base';
+// import { apiBase } from '@api/api-base';
 import Main from '@components/main';
 import { GetServerSideProps } from 'next';
 
 const MainPage = (props: any) => {
+  console.log('main! ', props);
+
   return <Main />;
 };
 
 export default MainPage;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const id = context.params;
-  const data = (await apiBase())?.data || null;
+  console.log(context);
+
+  // const data = (await apiBase())?.data || null;
+  console.log('loading ...');
+  function sleep(ms: number) {
+    const wakeUpTime = Date.now() + ms;
+    while (Date.now() < wakeUpTime) {}
+  }
+  sleep(1000);
+  console.log('done!');
 
   return {
     props: {
-      data,
+      // data,
+      null: null,
     },
   };
 };
diff --git a/src/components/header/header.styled.tsx b/src/components/header/header.styled.tsx
@@ -1,3 +1,4 @@
+//@ts-nocheck
 import { theme } from '@components/utils/styles/theme';
 import { StyleType } from '@interfaces/style';
 import styled from 'styled-components';
@@ -10,8 +11,6 @@ export const HeaderContainer = styled.div`
   justify-content: flex-end;
   align-items: center;
   padding: ${theme.padding.base};
-  background-color: ${(props: StyleType) =>
-    props.isMain ? theme.color.main : theme.color.white};
-  color: ${(props: StyleType) =>
-    props.isMain ? theme.color.white : theme.color.black};
+  background-color: ${theme.color.main};
+  color: ${theme.color.white};
 `;
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -1,14 +1,17 @@
+/**
+ * @description 어플리케이션의 헤더
+ *              path에 따라 커스텀된 헤더 반환
+ */
+
 import React from 'react';
 import { AiOutlineBell, AiOutlineQrcode } from 'react-icons/ai';
-import { HeaderType } from '@interfaces/app';
-import { HeaderContainer } from './header.styled';
+// import { HeaderType } from '@interfaces/app';
+// import { HeaderContainer } from './header.styled';
 import { theme } from '@components/utils/styles/theme';
 
-const Header = ({ pathname }: HeaderType) => {
-  const isMain = pathname === '/';
-
+const Header = () => {
   return (
-    <HeaderContainer isMain={isMain}>
+    <div style={styles.container}>
       <AiOutlineQrcode
         size={theme.icon.fontSize}
         style={{ color: theme.color.white, marginRight: '12px' }}
@@ -17,8 +20,22 @@ const Header = ({ pathname }: HeaderType) => {
         size={theme.icon.fontSize}
         style={{ color: theme.color.white }}
       />
-    </HeaderContainer>
+    </div>
   );
 };
 
 export default Header;
+
+const styles = {
+  container: {
+    width: theme.padding.width,
+    height: '5vh',
+    display: 'flex',
+    'flex-direction': 'row',
+    'justify-content': 'flex-end',
+    'align-items': 'center',
+    padding: theme.padding.base,
+    'background-color': theme.color.main,
+    color: theme.color.white,
+  },
+};
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Header from '@components/header';
+import { OuterContainer } from '@components/utils/styles/container.styled';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => (
+  <>
+    <Header />
+    <OuterContainer>{children}</OuterContainer>
+  </>
+);
+
+export default Layout;
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
@@ -0,0 +1 @@
+export { default } from './Layout';
diff --git a/src/components/main/Main.presenter.tsx b/src/components/main/Main.presenter.tsx
@@ -9,41 +9,57 @@ import { ScrollAnimationItem } from '@components/main/items/ScrollAnimationItem'
 import { LTitle, TitleContainer } from '@components/utils/styles/title.styled';
 import { theme } from '@components/utils/styles/theme';
 
+interface MarginType {
+  [idx: string]: {
+    [key: string]: string;
+  };
+}
+
+interface ItemType {
+  title: string;
+  flexDirection?: string;
+  numOfContents: number;
+  height: string;
+  margin?: MarginType;
+}
+
 const MainPresenter = ({ itemList }: any) => (
-  <ms.ContentContainer>
-    <Feed />
-    {itemList.map((item, idx) => (
-      <ScrollAnimationItem
-        key={item.title}
-        init={{
-          isInit: idx < 3,
-          idx,
-        }}
-        height={item.height}
-        isAdvertise={item.title === '광고'}
-      >
-        {item.title !== '광고' && (
-          <TitleContainer>
-            <LTitle color={theme.color.main}>{item.title}</LTitle>
-          </TitleContainer>
-        )}
-        <ms.Content flexDirection={item.flexDirection}>
-          {Array(item.numOfContents)
-            .fill(0)
-            .map((content, i) => (
-              <ms.ContentItem
-                key={item.title + i}
-                style={{
-                  borderRadius:
-                    item.title === '광고' ? '0px' : theme.borderRadius,
-                  ...(item.margin && { ...item.margin[i] }),
-                }}
-              ></ms.ContentItem>
-            ))}
-        </ms.Content>
-      </ScrollAnimationItem>
-    ))}
-  </ms.ContentContainer>
+  <>
+    <ms.ContentContainer>
+      <Feed />
+      {itemList.map((item: ItemType, idx: number) => (
+        <ScrollAnimationItem
+          key={item.title}
+          init={{
+            isInit: idx < 3,
+            idx,
+          }}
+          height={item.height}
+          isAdvertise={item.title === '광고'}
+        >
+          {item.title !== '광고' && (
+            <TitleContainer>
+              <LTitle color={theme.color.main}>{item.title}</LTitle>
+            </TitleContainer>
+          )}
+          <ms.Content flexDirection={item.flexDirection}>
+            {Array(item.numOfContents)
+              .fill(0)
+              .map((content, i) => (
+                <ms.ContentItem
+                  key={item.title + i + content}
+                  style={{
+                    borderRadius:
+                      item.title === '광고' ? '0px' : theme.borderRadius,
+                    ...(item.margin && { ...item.margin[i] }),
+                  }}
+                ></ms.ContentItem>
+              ))}
+          </ms.Content>
+        </ScrollAnimationItem>
+      ))}
+    </ms.ContentContainer>
+  </>
 );
 
 export default MainPresenter;
diff --git a/src/components/main/items/Feed.container.tsx b/src/components/main/items/Feed.container.tsx
@@ -13,8 +13,9 @@ const FeedContainer = () => {
   const tabList = ['lecture', 'calender'];
 
   const onTabClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (!tabList.includes(e.target.id)) return;
-    setSelected(e.target.id);
+    const target = e.target as HTMLElement;
+    if (!tabList.includes(target.id)) return;
+    setSelected(target.id);
   };
 
   return <FeedPresenter {...{ isMain, selected, onTabClick }} />;

diff --git a/src/components/main/items/Lecture.tsx b/src/components/main/items/Lecture.tsx
@@ -38,7 +38,7 @@ export const Lecture = () => (
   </s.FeedContents>
 );
 
-const styles = {
+const styles: any = {
   time: { marginLeft: '25px', width: '140px' },
   left: {
     marginLeft: '25px',

diff --git a/src/components/main/items/ScrollAnimationItem.tsx b/src/components/main/items/ScrollAnimationItem.tsx
@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * @description scroll hooks 사용하여 새 컴포넌트 반환
  *              메인에 사용됨

diff --git a/src/components/utils/convert.date.ts b/src/components/utils/convert.date.ts
@@ -1,4 +1,8 @@
-export const convertDate = {
+interface ConvertDateType {
+  [key: string]: string;
+}
+
+export const convertDate: ConvertDateType = {
   Mon: '월요일',
   Tue: '화요일',
   Wed: '수요일',

diff --git a/src/interfaces/app.ts b/src/interfaces/app.ts
@@ -1,9 +1,5 @@
 import { AppProps } from 'next/dist/next-server/lib/router/router';
 
-interface RouterType {
-  pathname: string;
-}
-
 export interface HeaderType {
   pathname: string;
 }

diff --git a/src/interfaces/style.ts b/src/interfaces/style.ts
@@ -1,25 +1,32 @@
 import { InitProps } from './components';
 
-type ItemStyleType = {
+interface ItemStyleType {
   height?: string;
   backgroundColor?: string;
   selected?: string;
   show?: boolean;
   init?: InitProps;
   isAdvertise?: boolean;
-};
+  minHeight?: string;
+}
 
-type HeaderStyleType = {
+interface HeaderStyleType {
   isMain?: boolean;
-};
+}
 
-type TitleStyleType = {
+interface TitleStyleType {
   color?: string;
   isLoading?: boolean;
-};
+}
 
-type ContentStyleType = {
+interface ContentStyleType {
   flexDirection?: string;
-};
+}
 
-export type StyleType = ItemStyleType | HeaderStyleType | TitleStyleType;
+export interface StyleType
+  extends ItemStyleType,
+    HeaderStyleType,
+    TitleStyleType,
+    ContentStyleType {}
+
+// export type StyleType = ItemStyleType | HeaderStyleType | TitleStyleType;