[6주차] Momu 미션 제출합니다.

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "fileName": true,
+        "displayName": true,
+        "pure": true
+      }
+    ]
+  ]
+}

.eslintrc.json

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

.gitignore

@@ -0,0 +1,34 @@
+# 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*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

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

README.md

@@ -1,50 +1,63 @@
-# 6주차 미션: React-Blog 📄
 
-# 서론
+# 과제 제출
 
-안녕하세요 🙌🏻 15기 프론트 파트장 **김주현**입니다.
+---
+모무 프론트 <br> 전시원 김채림
 
-이번주에는 새 프로젝트인 **블로그** 만들기를 진행합니다. 이번 과제에서는 Next.js를 사용해 보며 SSR을 이해하고, 각 팀별로 미리 호흡을 맞춰 보는 좋은 기회가 될 것 같습니다.
+### 목차
 
-# 미션
+> 1. 어떻게 구현했는가 
+> 2. css 서버사이드 렌더링 적용
+> 3. pull request 내용
 
-## 미션 목표
+# 1. 어떻게 구현했는가
 
-- Next.js 사용법을 공부해 봅니다.
-- 성능 최적화를 위한 방법을 적용해 봅니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
+### Landing 
 
-## 기한
 
-- 2022년 5월 20일 금요일 **(기한 엄수!)**
+- 주소창 '/' <br>랜딩페이지, 들어오게 되면 게시물을 나열 <br> 제목과 게시한 날짜(월,일)을 표시함 <br>
 
-## 필수 요건
 
-- 기본적인 CRUD를 구현합니다.
-- 메인 페이지, 포스트 상세 페이지, 에디터 페이지로 구성합니다.
-- 메인 페이지에서는 각 포스트들의 제목과 작성 날짜를 리스트 형태로 보여줍니다.
-- 포스트 상세 페이지에서는 제목, 작성일, 본문의 내용을 표시합니다.
-- 포스트를 수정할 때에는 기존에 작성된 내용을 에디터 페이지로 불러옵니다.
-- 포스트 삭제 기능을 구현합니다.
-- 성능 최적화를 위한 방법을 적용해 봅니다.
+### POST (CREATE)
 
-## 선택 사항
+- 주소창 '/post' <br>
+게시글을 작성하게 되면 제목과 본문내용을 담아서 recoil 이 보관<br>
+게시글 id 도 recoil 에서 전역관리하여 새로운 게시글이 만들어질 때마다
++1 시켜서 관리
 
-- 웹 폰트를 사용합니다.
-- 카테고리 기능을 구현합니다.
-- 그 외에 자유롭게 기능을 추가해 주세요!
 
-## Key Question
+### GET (READ)
 
-- Next.js를 사용하는 이유
-- SEO란?
-- 성능 최적화를 위해 사용한 방법
-- 전반적인 협업 과정
+- 주소창 '/get/[id]' <br>
+랜딩페이지에서 게시글을 누르면 게시글의 id 값을 주소창에 담아서 넘김<br>
+동적라우팅을 통해 주소창 설계 <br>
+해당 id 값을 /get/[id] 페이지에서 받은 다음 recoil 에 저장된 데이터를 가져옴<br>
+posts 객체를 가져오면 그대로 게시글에 대한 데이터를 렌더링
+
+### EDIT (UPDATE)
 
-# 링크 및 참고자료
+- 주소창 '/edit/[id]' <br>
+랜딩페이지에서 게시글을 누르고 나면 게시글을 상세히 볼 수 있음.<br>
+그곳에서 수정하기 버튼을 눌러 접근<br>
+get 과 동일한 논리로 게시글 가져온 다음 렌더링<br>
+차이점은 input 창의 value 로 이미 작성되어 있는 내용을 넣어 줘야 함.
+
+### 페이지 없음 (DELETE)
+- 주소창 없음 <br>
+지우기 버튼을 누르면 해당 아이디에 맞는 게시물을 posts 배열에서 삭제
+
+### 데이터 구조
+
+```json
+{
+  "posts": [
+    {
+      "id": "number",
+      "title": "string",
+      "contents": "string",
+      "date": "string"
+    }
+  ]
+}
+```
 
-- [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)

components/Alist.tsx

@@ -0,0 +1,59 @@
+import { postList } from '../store/recoil';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import Link from 'next/link';
+import React from 'react';
+
+const Alist = () => {
+  const posts = useRecoilValue(postList);
+  return (
+    <>
+      {posts?.map((post) => {
+        return (
+          <Wrapper key={post.id}>
+            <Link
+              href={{
+                pathname: `/get/${post.id}`,
+                query: {
+                  currentPost: JSON.stringify(post),
+                },
+              }}
+              as={`/get/${post.id}`}
+            >
+              <LinkToPost>{post.title}</LinkToPost>
+            </Link>
+            <DateDiv>{post.date}</DateDiv>
+          </Wrapper>
+        );
+      })}
+    </>
+  );
+};
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: 8fr 2fr;
+  width: 90%;
+  padding: 0 1rem;
+  border: 1px solid black;
+  border-radius: 0.5rem;
+  margin: 10px auto 10px auto;
+  box-sizing: border-box;
+  word-break: break-all;
+`;
+const DateDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #afaaaa;
+`;
+
+const LinkToPost = styled.a`
+  padding: 0.5rem;
+  display: flex;
+  text-decoration: none;
+  color: black;
+  font-size: 1.2rem;
+  font-weight: lighter;
+`;
+export default Alist;

components/AppLayout.tsx

@@ -0,0 +1,92 @@
+import { FC } from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { AiOutlineHome } from 'react-icons/ai';
+import { HiOutlinePencil } from 'react-icons/hi';
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const AppLayout: FC<Props> = ({ children }) => {
+  const router = useRouter();
+  const pathname = router.pathname;
+
+  return (
+    <>
+      <Container>
+        <Navbar>
+          {pathname === '/' ? (
+            <>
+              <Link href="/">
+                <a>
+                  <HomeBtn>
+                    <AiOutlineHome size={16} />
+                    Home
+                  </HomeBtn>
+                </a>
+              </Link>
+              <Link href="/post">
+                <PostBtn>
+                  <HiOutlinePencil size={16} />
+                  Post
+                </PostBtn>
+              </Link>
+            </>
+          ) : (
+            <>
+              <Link href="/">
+                <a>
+                  <HomeBtn>
+                    <AiOutlineHome size={16} />
+                    Home
+                  </HomeBtn>
+                </a>
+              </Link>
+              <Link href="/post">
+                <PostBtn post>
+                  {' '}
+                  <HiOutlinePencil size={16} />
+                  Post
+                </PostBtn>
+              </Link>
+            </>
+          )}
+        </Navbar>
+        {children}
+      </Container>
+    </>
+  );
+};
+
+const Container = styled.div`
+  padding: 1rem;
+  overflow: scroll;
+  width: 500px;
+  height: 500px;
+  border-radius: 10px;
+  -webkit-box-shadow: 5px 5px 15px 0px #000000;
+  box-shadow: 5px 5px 15px 0px #000000;
+`;
+const Navbar = styled.div`
+  display: flex;
+  width: 90%;
+  margin: auto;
+`;
+const HomeBtn = styled.button`
+  padding-right: 1rem;
+  font-size: 20px;
+  border: none;
+  background: none;
+`;
+
+const PostBtn = styled.button<{ post?: boolean }>`
+  font-size: 20px;
+  border: none;
+  background: none;
+  color: ${(props) => (props.post ? 'grey' : 'black')};
+`;
+
+export default React.memo(AppLayout);