Main

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
+name: Deploy static content to Pages
+
+on:
+  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
+  push:
+    branches: ['main']
+
+  # 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,37 @@
-import axios from 'axios';
-import { IResponsePostList } from './types';
+import axios, { AxiosResponse } from 'axios';
+import { IPost, IResponsePostList, TAG } from './types';
 
 const instance = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
-  baseURL: '',
+  baseURL: 'http://34.64.250.51: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: TAG) => {
+  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: TAG) => {
+  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>aaaaaa</h2>
         </Link>
         <Link to="/write">
           <Button className="write-button">글쓰기</Button>

src/components/PostListItem.tsx

@@ -23,7 +23,14 @@ 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,32 @@
 import { useEffect, useState } from 'react';
 import { getPostList } from '../api';
 import PostListItem from '../components/PostListItem';
-import { IResponsePostList, TAG } from '../api/types';
+import { IResponsePostList } 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,
-    },
-  },
-];
-
 const Home = () => {
-  return <div>{/*todo (3-1) post 목록 작성*/}</div>;
+  const [postList, setPostList] = useState<IResponsePostList>([]);
+
+  const fetchPostList = async () => {
+    const { data } = await getPostList();
+    setPostList(data);
+  };
+
+  useEffect(() => {
+    fetchPostList();
+  }, []);
+
+  if (postList.length === 0) {
+    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

@@ -58,16 +58,21 @@ const Layout = () => {
   return (
     <div>
       <Profile>
-        {/*todo (1) 프로필 꾸미기*/}
         <div>
-          <ProfilePicture src="" alt="프로필 사진" />
+          <ProfilePicture
+            src="https://mblogthumb-phinf.pstatic.net/MjAyMTAyMDRfNjIg/MDAxNjEyNDA4OTk5NDQ4.6UGs399-0EXjIUwwWsYg7o66lDb-MPOVQ-zNDy1Wnnkg.m-WZz0IKKnc5OO2mjY5dOD-0VsfpXg7WVGgds6fKwnIg.JPEG.sunny_side_up12/1612312679152%EF%BC%8D2.jpg?type=w800"
+            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>
   );