[6주차] 포켓돈 미션 제출합니다.

.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [
+        [
+            "babel-plugin-styled-components",
+            {
+                "ssr": true,
+                "displayName": true,
+                "preprocess": false
+            }
+        ]
+    ]
+}

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -1,50 +1,14 @@
-# 6주차 미션: React-Blog 📄
-
-# 서론
-
-안녕하세요 🙌🏻 15기 프론트 파트장 **김주현**입니다.
-
-이번주에는 새 프로젝트인 **블로그** 만들기를 진행합니다. 이번 과제에서는 Next.js를 사용해 보며 SSR을 이해하고, 각 팀별로 미리 호흡을 맞춰 보는 좋은 기회가 될 것 같습니다.
-
-# 미션
-
-## 미션 목표
-
-- Next.js 사용법을 공부해 봅니다.
-- 성능 최적화를 위한 방법을 적용해 봅니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
-
-## 기한
-
-- 2022년 5월 20일 금요일 **(기한 엄수!)**
-
-## 필수 요건
-
-- 기본적인 CRUD를 구현합니다.
-- 메인 페이지, 포스트 상세 페이지, 에디터 페이지로 구성합니다.
-- 메인 페이지에서는 각 포스트들의 제목과 작성 날짜를 리스트 형태로 보여줍니다.
-- 포스트 상세 페이지에서는 제목, 작성일, 본문의 내용을 표시합니다.
-- 포스트를 수정할 때에는 기존에 작성된 내용을 에디터 페이지로 불러옵니다.
-- 포스트 삭제 기능을 구현합니다.
-- 성능 최적화를 위한 방법을 적용해 봅니다.
-
-## 선택 사항
-
-- 웹 폰트를 사용합니다.
-- 카테고리 기능을 구현합니다.
-- 그 외에 자유롭게 기능을 추가해 주세요!
-
-## Key Question
-
-- Next.js를 사용하는 이유
-- SEO란?
-- 성능 최적화를 위해 사용한 방법
-- 전반적인 협업 과정
-
-# 링크 및 참고자료
-
-- [Next.js Docs](https://nextjs.org/docs/getting-started)
-- [React 개발이 이렇게 쉬웠나? (Feat. Next.js)](https://geonlee.tistory.com/229)
-- [useCallback과 React.Memo를 이용한 렌더링 최적화](https://velog.io/@yejinh/useCallback%EA%B3%BC-React.Memo%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94)
-- [성능 최적화](https://ui.toast.com/fe-guide/ko_PERFORMANCE)
-- [Git 협업 가이드](https://velog.io/@jinuku/Git-%ED%98%91%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C)
+### Deployment
+[https://react-blog-15th-dhra2rce1-9yujin.vercel.app/](https://react-blog-15th-dhra2rce1-9yujin.vercel.app/)
+
+### TODO
+
+- [x] 기본적인 CRUD를 구현합니다.
+- [x] 메인 페이지, 포스트 상세 페이지, 에디터 페이지로 구성합니다.
+- [x] 메인 페이지에서는 각 포스트들의 제목과 작성 날짜를 리스트 형태로 보여줍니다.
+- [x] 포스트 상세 페이지에서는 제목, 작성일, 본문의 내용을 표시합니다.
+- [x] 포스트를 수정할 때에는 기존에 작성된 내용을 에디터 페이지로 불러옵니다.
+- [x] 포스트 삭제 기능을 구현합니다.
+- [x] 성능 최적화를 위한 방법을 적용해 봅니다.
+- [x] [선택] 웹 폰트를 사용합니다.
+- [ ] [선택] 카테고리 기능을 구현합니다.

assets/json/posts.json

@@ -0,0 +1,28 @@
+{
+  "posts": [
+    {
+      "postId": "1",
+      "title": "포켓돈짱",
+      "content": "삽질하느라 죽는줄 알았슴다...ㅠㅠㅠ흐극긓흑흑 \n이렇게 줄바꿈도 할 수 있어요.",
+      "date": "2022-05-18T22:11:18+09:00"
+    },
+    {
+      "postId": "2",
+      "title": "example2",
+      "content": "블로그 내용이야 블로그 내용이야 블로그 내용이야 ",
+      "date": "2022-05-18T22:11:18+09:00"
+    },
+    {
+      "postId": "3",
+      "title": "example3",
+      "content": "블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 ",
+      "date": "2022-05-18T22:11:18+09:00"
+    },
+    {
+      "postId": "4",
+      "title": "example4",
+      "content": "블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 블로그 내용이야 ",
+      "date": "2022-05-18T22:11:18+09:00"
+    }
+  ]
+}

components/AppLayout.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import React from 'react';
+import { media } from 'styles/theme';
+function AppLayout({ children }) {
+    return (
+        <Wrapper>
+            <Margin>
+                <div>{children}</div>
+            </Margin>
+        </Wrapper>
+    );
+}
+
+export default AppLayout;
+
+const Wrapper = styled.div`
+    width: 768px;
+    margin: 0 auto;
+    //background-color: #f3f3f3;
+    ${media.custom(768)} {
+        width: 100%;
+        min-width: 300px;
+    }
+
+    h1 {
+        color: ${({ theme }) => theme.color.blue};
+        font-size: 2rem;
+        font-weight: 700;
+        padding: 50px 0;
+    }
+`;
+
+const Margin = styled.div`
+    margin: 0 20px;
+`;

components/PostItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+import dayjs from 'dayjs';
+function PostItem({ data }: any) {
+  const date = dayjs(data.date).format('YYYY.MM.DD');
+
+  return (
+    <Wrapper>
+      <Title>{data.title}</Title>
+      <Date>{date}</Date>
+      <Content>{data.content}</Content>
+    </Wrapper>
+  );
+}
+
+export default PostItem;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+  // background-color: #e0e0e0;
+  border-top: 4px solid black;
+  &:hover {
+    h2 {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const Title = styled.h2`
+  font-size: 1.5rem;
+  font-weight: 500;
+  padding: 20px 0;
+  color: black;
+`;
+
+const Date = styled.div`
+  color: #d3d3d3;
+  margin: 10px 0;
+`;
+
+const Content = styled.div`
+  font-size: 1rem;
+  color: ${({ theme }) => theme.color.darkGray};
+  line-height: 1.2;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* 라인수 */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+`;

custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

hooks/useAppDispatch.tsx

@@ -0,0 +1,4 @@
+import { useDispatch } from 'react-redux';
+import type { AppDispatch } from '../store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();

hooks/useAppSelector.tsx

@@ -0,0 +1,4 @@
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+import type { RootState } from '../store';
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,38 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+    enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withBundleAnalyzer({
+    target: 'serverless',
+    env: {
+        BASE_URL: process.env.BASE_URL,
+    },
+
+    webpack(conf) {
+        conf.module.rules.push({
+            test: /\.svg$/,
+            use: [
+                {
+                    loader: '@svgr/webpack',
+                    options: {
+                        svgoConfig: {
+                            plugins: [
+                                {
+                                    // Enable figma's wrong mask-type attribute work
+                                    removeRasterImages: false,
+                                    removeStyleElement: false,
+                                    removeUnknownsAndDefaults: false,
+                                    // Enable svgr's svg to fill the size
+                                    removeViewBox: false,
+                                },
+                            ],
+                        },
+                    },
+                },
+            ],
+        });
+        // 절대경로
+        conf.resolve.modules.push(__dirname);
+        return conf;
+    },
+});