week2

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
+name: Deploy static content to Pages
+
+on:
+  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
+  push:
+    branches: ['week2']
+
+  # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
+  workflow_dispatch:
+
+# GITHUB_TOKEN의 권한을 설정하여 GitHub Pages에 배포할 수 있도록 함
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 동시에 하나의 배포만 허용하도록 구성
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # 단순히 배포만 수행하기에 하나의 잡으로만 구성
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # dist 디렉터리 업로드
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@emotion/styled": "^11.11.0",
+    "@tanstack/react-query": "^5.40.0",
+    "@tanstack/react-query-devtools": "^5.40.0",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -6,21 +6,28 @@ import Post from './pages/Post';
 import Resume from './pages/Resume';
 import Write from './pages/Write';
 import Header from './components/Header';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 function App() {
+  const queryClient = new QueryClient();
+
   return (
-    <Router>
-      <Routes>
-        <Route element={<Header />}>
-          <Route element={<Layout />}>
-            <Route path="/" element={<Home />} />
-            <Route path="/resume" element={<Resume />} />
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools />
+      <Router basename={'/CNU_Blog/'}>
+        <Routes>
+          <Route element={<Header />}>
+            <Route element={<Layout />}>
+              <Route path="/" element={<Home />} />
+              <Route path="/resume" element={<Resume />} />
+            </Route>
+            <Route path="/post/:postId" element={<Post />} />
           </Route>
-          {/*todo (3-3) Post 추가*/}
-        </Route>
-        {/*todo (5-1) Write 추가*/}
-      </Routes>
-    </Router>
+          <Route path="/write" element={<Write />} />
+        </Routes>
+      </Router>
+    </QueryClientProvider>
   );
 }
 

src/api/index.ts

@@ -1,31 +1,38 @@
-import axios from 'axios';
-import { IResponsePostList } from './types';
+// eslint-disable-next-line import/named
+import axios, { AxiosResponse } from 'axios';
+import { IPost, IResponsePostList } from './types';
 
 const instance = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
-  baseURL: '',
+  baseURL: 'http://34.64.142.12:8080/',
 });
 
-// todo (6) api 작성
-
-export const getPostList = () => {
-  return null;
+export const getPostList = (): Promise<AxiosResponse<IResponsePostList>> => {
+  return instance.get('/posts');
 };
 
-export const createPost = () => {
-  return null;
+export const createPost = (title: string, contents: string, tag: string) => {
+  return instance.post('/posts', {
+    title,
+    contents,
+    tag,
+  });
 };
 
-export const getPostById = () => {
-  return null;
+export const getPostById = (id: string): Promise<AxiosResponse<IPost>> => {
+  return instance.get(`/posts/${id}`);
 };
 
-export const updatePostById = () => {
-  return null;
+export const updatePostById = (id: string, title: string, contents: string, tag: string) => {
+  return instance.put(`/posts/${id}`, {
+    title,
+    contents,
+    tag,
+  });
 };
 
-export const deletePostById = () => {
-  return null;
+export const deletePostById = (id: string) => {
+  return instance.delete(`/posts/${id}`);
 };

src/components/Header.tsx

@@ -28,7 +28,7 @@ const Header = () => {
     <div>
       <Wrapper>
         <Link to="/">
-          <h2>kimsudal.log</h2>
+          <h2>abcd.abc</h2>
         </Link>
         <Link to="/write">
           <Button className="write-button">글쓰기</Button>

src/components/PostListItem.tsx

@@ -23,7 +23,15 @@ const Contents = styled.p`
 `;
 
 const PostListItem = (props: IPost) => {
-  return <div>{/*todo (3-2) 게시글 목록 아이템 작성*/}</div>;
+  const { id, title, contents, tag } = props;
+  return (
+    <ItemLink to={`/posts/${id}`}>
+      <h2>{title}</h2>
+      <Contents>{contents}</Contents>
+      <Tag>#{tag}</Tag>
+    </ItemLink>
+  );
 };
 
+
 export default PostListItem;

src/pages/Home.tsx

@@ -1,38 +1,25 @@
-import { useEffect, useState } from 'react';
-import { getPostList } from '../api';
 import PostListItem from '../components/PostListItem';
-import { IResponsePostList, TAG } from '../api/types';
 import NoPostList from '../components/NoPostList';
-
-const list = [
-  {
-    post: {
-      id: 1,
-      title: '1번 게시글',
-      contents: '내용',
-      tag: TAG.REACT,
-    },
-  },
-  {
-    post: {
-      id: 2,
-      title: '2번 게시글',
-      contents: '내용',
-      tag: TAG.REACT,
-    },
-  },
-  {
-    post: {
-      id: 3,
-      title: '3번 게시글',
-      contents: '내용',
-      tag: TAG.REACT,
-    },
-  },
-];
+import useGetPostList from '../queries/useGetPostList.ts';
 
 const Home = () => {
-  return <div>{/*todo (3-1) post 목록 작성*/}</div>;
+  const { data: postList = [], isError, isLoading } = useGetPostList();
+
+  if (isLoading) {
+    return <div>...불러오는중...</div>;
+  }
+
+  if (postList.length === 0 || isError) {
+    return <NoPostList />;
+  }
+
+  return (
+    <div>
+      {postList.map(item => (
+        <PostListItem key={item.id} id={`${item.id}`} title={item.title} contents={item.contents} tag={item.tag} />
+      ))}
+    </div>
+  );
 };
 
 export default Home;

src/pages/Layout.tsx

@@ -60,14 +60,17 @@ const Layout = () => {
       <Profile>
         {/*todo (1) 프로필 꾸미기*/}
         <div>
-          <ProfilePicture src="" alt="프로필 사진" />
+          <ProfilePicture src="https://image.newsis.com/2023/07/12/NISI20230712_0001313626_web.jpg?rnd=20230712163021" alt="프로필 사진" />
         </div>
         <div>
-          <Name>이름</Name>
-          <Description>설명</Description>
+          <Name>현우</Name>
+          <Description>2024 실전코딩</Description>
         </div>
       </Profile>
-      <Nav>{/*todo (2) 메뉴 작성*/}</Nav>
+      <Nav>
+        <NavLink to="/">포스트</NavLink>
+        <NavLink to="/resume">소개</NavLink>
+      </Nav>
       <Outlet />
     </div>
   );

src/pages/Post.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'react';
-import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { deletePostById, getPostById } from '../api';
-import { IPost } from '../api/types';
 import NotFound from '../components/NotFound';
 import Tag from '../components/Tag';
+import useGetPostById from '../queries/useGetPostById.ts';
+import useDeletePostById from '../queries/useDeletePostById.ts';
 
 const Title = styled.h1`
   font-size: 3rem;
@@ -60,8 +59,55 @@ const Text = styled.p`
 `;
 
 const Post = () => {
+  const params = useParams();
+  const { postId = '' } = params;
+  const { data: post, isError, isLoading } = useGetPostById(postId);
+  const { mutate: deletePost } = useDeletePostById();
+  const clickDeleteButton = () => {
+    const result = window.confirm('정말로 삭제하시겠습니까?');
+    if (result) {
+      deletePost({ postId });
+    }
+  };
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!post || isError) {
+    return <NotFound />;
+  }
+
   // todo (4) post 컴포넌트 작성
-  return <div style={{ margin: '5.5rem auto', width: '700px' }}></div>;
+  return (
+    <div style={{ margin: '5.5rem auto', width: '700px' }}>
+      <div>
+        <Title>{post.title}</Title>
+        <Toolbar>
+          <Info>
+            <div>n분전</div>
+          </Info>
+          <div>
+            {/*todo 수정/삭제 버튼 작성*/}
+            <Link to="/write" state={{ postId }}>
+              <TextButton style={{ marginRight: 10 }}>수정</TextButton>
+            </Link>
+            <TextButton onClick={clickDeleteButton}>삭제</TextButton>
+          </div>
+        </Toolbar>
+        {post?.tag && (
+          <TagWrapper>
+            <Tag>#{post.tag}</Tag>
+          </TagWrapper>
+        )}
+      </div>
+      <ContentsArea>
+        {post.contents.split('\n').map((text, index) => (
+          <Text key={index}>{text}</Text>
+        ))}
+      </ContentsArea>
+    </div>
+  );
 };
 
 export default Post;

src/pages/Resume.tsx

@@ -1,5 +1,17 @@
 const Resume = () => {
-  return <div>나는 프로젝트 내역</div>;
+  return (
+    <div>
+      <h2>실전코딩 수강</h2>
+      <p>24.03 ~ 24.06</p>
+      <p>React, SpringBoot등 다양한 실무 관련 지식 수강</p>
+      <h2>데이터베이스 수강</h2>
+      <p>24.03 ~ 24.06</p>
+      <p>DB 관련 수업을 받음</p>
+      <h2>운영체제및실습 수강</h2>
+      <p>24.03 ~ 24.06</p>
+      <p>운영체제에 관한 수업을 받음</p>
+    </div>
+  );
 };
 
 export default Resume;