Posts Page (#29)

* chore: Hide incomplete pages

* feat: basic Posts page setting

* refactor: change folder structure like FSD

* refactor: use constant value in url

* refactor: use assets index for short import

* refactor: separate fetch code in api.ts

* chore: correct url typo

* refactor: alias setting the absolute path "src/" = "@/"

* feat: add sort posts button

* feat: add sort posts button

Author: inhachoi

apps/front/src/App.tsx

@@ -1,20 +1,20 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { Main, Posts, Study, Visitor } from "./pages";
+import { MainPage, PostsPage, StudyPage, VisitorPage } from "@/pages";
 import { NavigationBar } from "./widgets/NavigationBar";
 import styled from "@emotion/styled";
 import { colors } from "@toss/tds-colors";
-import { Footer } from "./widgets";
+import { Footer } from "@/widgets";
 
 function App() {
   return (
     <BrowserRouter>
       <NavigationBar />
       <Container>
         <Routes>
-          <Route path="/" element={<Main />} />
-          <Route path="/posts" element={<Posts />} />
-          <Route path="/Study" element={<Study />} />
-          <Route path="/Visitor" element={<Visitor />} />
+          <Route path="/" element={<MainPage />} />
+          <Route path="/posts" element={<PostsPage />} />
+          <Route path="/Study" element={<StudyPage />} />
+          <Route path="/Visitor" element={<VisitorPage />} />
         </Routes>
       </Container>
       <Footer />

apps/front/src/assets/index.ts

@@ -0,0 +1,23 @@
+import boolock from "./boolock.png";
+import choi from "./choi.jpg";
+import dongnaebangnae from "./dongnaebangnae.jpg";
+import github from "./github.png";
+import heart from "./heart.webp";
+import inhachoi from "./inhachoi.png";
+import logo from "./logo.png";
+import mdn from "./mdn.png";
+import react from "./react.png";
+import velog from "./velog.jpg";
+
+export {
+  boolock,
+  choi,
+  dongnaebangnae,
+  github,
+  heart,
+  inhachoi,
+  logo,
+  mdn,
+  react,
+  velog,
+};

apps/front/src/hooks/index.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { Contribution, Introduce, PopularPosts, Projects } from "../widgets";
+import { Contribution, Introduce, PopularPosts, Projects } from "@/widgets";
 
-export function Main() {
+export function MainPage() {
   return (
     <Container>
       <Introduce />

apps/front/src/pages/Main.tsx renamed to apps/front/src/pages/MainPage.tsx

@@ -0,0 +1,42 @@
+import styled from "@emotion/styled";
+import { AllPosts } from "@/widgets";
+
+export function PostsPage() {
+  return (
+    <Container>
+      <Header>All</Header>
+      <AllPosts />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 768px;
+  padding: 50px 15px;
+
+  @media (max-width: 768px) {
+    padding: 35px 15px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 20px 15px;
+  }
+`;
+
+const Header = styled.header`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  font-size: 2rem;
+
+  @media (max-width: 768px) {
+    font-size: 1.5rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 1rem;
+  }
+`;

apps/front/src/pages/Posts.tsx

@@ -1,4 +1,4 @@
-export function Study() {
+export function StudyPage() {
   return <div>Study 화면 개발 중...</div>;
 }
 

apps/front/src/pages/PostsPage.tsx

@@ -1,4 +1,3 @@
-export function Visitor() {
+export function VisitorPage() {
   return <div>Visitor 화면 개발 중...</div>;
 }
-

apps/front/src/pages/Study.tsx renamed to apps/front/src/pages/StudyPage.tsx

@@ -1,4 +1,4 @@
-export { Main } from "./Main";
-export { Posts } from "./Posts";
-export { Study } from "./Study";
-export { Visitor } from "./Visitor";
+export { MainPage } from "./MainPage";
+export { PostsPage } from "./PostsPage";
+export { StudyPage } from "./StudyPage";
+export { VisitorPage } from "./VisitorPage";

apps/front/src/pages/Visitor.tsx renamed to apps/front/src/pages/VisitorPage.tsx

@@ -0,0 +1,13 @@
+import type { PostType } from "@/shared/types";
+
+export const fetchPosts = async (): Promise<PostType[]> => {
+  const res = await fetch("/api/posts");
+
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status}`);
+  }
+
+  const data = await res.json();
+
+  return data.posts;
+};