게시판 퍼블리싱, pages 디렉터리명 변경

.vscode/settings.json

@@ -3,8 +3,6 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
-  "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "git.ignoreLimitWarning": true
 }

package.json

@@ -18,6 +18,7 @@
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "axios": "^1.4.0",
     "babel-plugin-styled-components": "^2.1.4",
+    "dotenv": "^16.3.1",
     "eslint": "^8.26.0",
     "eslint-config-next": "13.0.0",
     "eslint-plugin-prettier": "^4.2.1",

src/apis/httpClient/index.ts

@@ -124,6 +124,6 @@ export class HttpClient {
 }
 
 export const axiosConfig: HttpClientConfig = {
-  baseURL: "http://localhost:3000/api",
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
   timeout: 10000,
 };

src/apis/interceptor/index.ts

@@ -1,7 +1,7 @@
 import Storage from "@/apis/storage";
 import { AxiosRequestConfig, AxiosResponse } from "axios";
 import refreshToken from "@/apis/token/refreshToken";
-import exception from "@/utils/constants/exception.constants";
+import exception from "@/utils/constants/exception.constant";
 
 export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
   if (!Storage.getItem("access_token") && Storage.getItem("refresh_token"))

src/app/forum/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import ForumPage from "@/page/forum";
+import React from "react";
+
+const Forum = () => {
+  return <ForumPage />;
+};
+
+export default Forum;

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import HomePage from "@/pages/home";
+import HomePage from "@/page/home";
 import React from "react";
 
 const Home = () => {

src/components/Aside/JoinCheckBox.tsx

@@ -8,8 +8,8 @@ const JoinCheckBox = () => {
   return (
     <Container>
       <HGroup>
-        <Date>2023년 7월 1주차</Date>
-        <Row gap="2px">
+        <Date>7월 1주차</Date>
+        <Row gap="4px">
           <RoomNumber>334</RoomNumber>
           <UserName>박우빈</UserName>
         </Row>
@@ -35,6 +35,8 @@ const HGroup = styled.hgroup`
   display: flex;
   flex-direction: column;
   gap: 4px;
+  margin-right: auto;
+  padding-left: 18px;
 `;
 
 const Date = styled.span`

src/components/Aside/MeisterBox.tsx

@@ -2,7 +2,7 @@ import color from "@/styles/color";
 import { font } from "@/styles/font";
 import React from "react";
 import styled from "styled-components";
-import service from "@/utils/constants/service.constants";
+import service from "@/utils/constants/service.constant";
 import Row from "../Flex/Row";
 
 const scores = [

src/components/Aside/index.tsx

@@ -18,7 +18,7 @@ const Aside = () => {
 };
 
 const Container = styled.aside`
-  width: 28vw;
+  width: 24vw;
   display: flex;
   gap: 6px;
   margin-left: auto;

src/page/forum/adaptors/index.tsx

@@ -0,0 +1,5 @@
+import { HttpClient, axiosConfig } from "@/apis/httpClient";
+
+export default {
+  forum: new HttpClient("/forum", axiosConfig),
+};

src/page/forum/index.tsx

@@ -0,0 +1,30 @@
+import Aside from "@/components/Aside";
+import React from "react";
+import styled from "styled-components";
+import Forum from "./layouts/Forum";
+
+const ForumPage = () => {
+  return (
+    <Layout>
+      <Container>
+        <Forum />
+        <Aside />
+      </Container>
+    </Layout>
+  );
+};
+
+const Layout = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const Container = styled.div`
+  width: 76%;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+`;
+
+export default ForumPage;

src/page/forum/layouts/Categories.tsx

@@ -0,0 +1,82 @@
+import Row from "@/components/Flex/Row";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import forum from "@/utils/constants/forum.constant";
+import React from "react";
+import styled, { css } from "styled-components";
+
+const categories = [
+  {
+    name: forum.category.all.name,
+    type: forum.category.all.type,
+  },
+  {
+    name: forum.category.complain.name,
+    type: forum.category.complain.type,
+  },
+  {
+    name: forum.category.humor.name,
+    type: forum.category.humor.type,
+  },
+  {
+    name: forum.category.infomation.name,
+    type: forum.category.infomation.type,
+  },
+];
+
+const Categories = () => {
+  const [checked, setChecked] = React.useState(forum.category.all.type);
+
+  const onCheckCategory = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.id);
+  };
+
+  return (
+    <Row gap="6px">
+      {categories.map((category) => (
+        <Row key={category.type}>
+          <Category
+            type="radio"
+            id={category.type}
+            name="category"
+            onChange={onCheckCategory}
+          />
+          <CategoryLabel
+            htmlFor={category.type}
+            checked={category.type === checked}
+          >
+            {category.name}
+          </CategoryLabel>
+        </Row>
+      ))}
+    </Row>
+  );
+};
+
+const Category = styled.input`
+  display: none;
+`;
+
+const CategoryLabel = styled.label<{ checked: boolean }>`
+  border: none;
+  width: 64px;
+  height: 26px;
+  border-radius: 999px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 10px 0 rgba(144, 144, 144, 0.1);
+  ${font.btn3};
+  ${({ checked }) =>
+    checked
+      ? css`
+          background-color: ${color.primary_blue};
+          color: ${color.white};
+        `
+      : css`
+          background-color: ${color.white};
+          color: ${color.gray};
+        `}
+`;
+
+export default Categories;

src/page/forum/layouts/Forum.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+import ForumFilter from "./ForumFilter";
+import Categories from "./Categories";
+import PostList from "./PostList";
+
+const Forum = () => {
+  return (
+    <Container>
+      <ForumFilter />
+      <Categories />
+      <PostList />
+    </Container>
+  );
+};
+
+const Container = styled.main`
+  width: 76%;
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+`;
+
+export default Forum;

src/page/forum/layouts/ForumFilter.tsx

@@ -0,0 +1,65 @@
+import Row from "@/components/Flex/Row";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import forum from "@/utils/constants/forum.constant";
+import React from "react";
+import styled, { css } from "styled-components";
+
+const filters = [
+  {
+    type: forum.student.type,
+    name: forum.student.name,
+  },
+  {
+    type: forum.free.type,
+    name: forum.free.name,
+  },
+];
+
+const ForumFilter = () => {
+  const [checked, setChecked] = React.useState(forum.student.type);
+
+  const onCheckFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.id);
+  };
+
+  return (
+    <Row gap="14px" alignItems="center">
+      {filters.map((filter) => (
+        <Row key={filter.type}>
+          <ForumLabel checked={filter.type === checked} htmlFor={filter.type}>
+            {filter.name}
+          </ForumLabel>
+          <ForumRadio
+            onChange={onCheckFilter}
+            type={forum.type}
+            id={filter.type}
+            name={forum.name}
+          />
+        </Row>
+      ))}
+    </Row>
+  );
+};
+
+const ForumRadio = styled.input`
+  display: none;
+`;
+
+const ForumLabel = styled.label<{ checked: boolean }>`
+  ${({ checked }) =>
+    checked
+      ? css`
+          ${font.H2};
+        `
+      : css`
+          ${font.H3};
+          color: ${color.gray};
+        `}
+
+  &:after {
+    content: "게시판";
+  }
+`;
+
+export default ForumFilter;

src/page/forum/layouts/PostList.tsx

@@ -0,0 +1,15 @@
+import Column from "@/components/Flex/Column";
+import React from "react";
+import PostListItem from "./PostListItem";
+
+const PostList = () => {
+  return (
+    <Column gap="8px">
+      {[1, 2, 3, 4, 5, 6, 7, 8].map((key) => (
+        <PostListItem key={key} />
+      ))}
+    </Column>
+  );
+};
+
+export default PostList;

src/page/forum/layouts/PostListItem.tsx

@@ -0,0 +1,67 @@
+import Column from "@/components/Flex/Column";
+import Row from "@/components/Flex/Row";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+import Like from "@/page/forum/assets/like.svg";
+import Image from "next/image";
+
+const PostListItem = () => {
+  return (
+    <Container>
+      <PostNumber>01</PostNumber>
+      <Column>
+        <PostName>게시판 타이틀입니다</PostName>
+        <Row gap="8px">
+          <PostView>83</PostView>
+          <Row alignItems="center" gap="3px">
+            <Image src={Like} alt="like" />
+            <PostLike>30</PostLike>
+          </Row>
+        </Row>
+      </Column>
+    </Container>
+  );
+};
+
+const Container = styled.article`
+  width: 100%;
+  height: 80px;
+  background-color: ${color.white};
+  display: flex;
+  align-items: center;
+  padding: 0px 32px;
+  box-shadow: 0 0 10px 0 rgba(144, 144, 144, 0.1);
+  border-radius: 4px;
+  gap: 24px;
+`;
+
+const PostNumber = styled.span`
+  ${font.H3};
+  font-weight: 800;
+`;
+
+const PostName = styled.h1`
+  ${font.H4};
+`;
+
+const PostView = styled.span`
+  ${font.p3};
+  color: ${color.gray};
+
+  &:before {
+    content: "조회수 ";
+  }
+
+  &:after {
+    content: "회";
+  }
+`;
+
+const PostLike = styled.span`
+  ${font.p3};
+  color: ${color.gray};
+`;
+
+export default PostListItem;

src/pages/home/index.tsx → src/page/home/index.tsx

@@ -1,5 +1,4 @@
 import Aside from "@/components/Aside";
-import color from "@/styles/color";
 import React from "react";
 import styled from "styled-components";