Merge pull request #6 from Team-INSERT/feat/#1

Feat/#1

.eslintrc.js

@@ -31,6 +31,10 @@ module.exports = {
     "react/jsx-props-no-spreading": 0,
     "no-empty-interface": 0,
     "import/prefer-default-export": "off",
+    "react/function-component-definition": [
+      2,
+      { namedComponents: ["arrow-function", "function-declaration"] },
+    ],
     "jsx-a11y/label-has-associated-control": [
       2,
       {

.github/workflows/lint.yaml

@@ -2,7 +2,7 @@ name: lint
 
 on:
   pull_request:
-    branches: [master]
+    branches: [main]
 
 jobs:
   build:

.husky/prepare-commit-msg

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 echo "🚦 PREPARE-COMMIT-MSG | Start cz with cz-customizable..."
-exec < /dev/tty && yarn cz --hook || true
+exec < /dev/tty && yarn lint && yarn cz --hook || true 

package.json

@@ -9,17 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@playwright/test": "^1.34.3",
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
+    "@playwright/test": "^1.29.1",
+    "@types/node": "18.11.7",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
     "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
     "axios": "^1.4.0",
-    "eslint": "8.41.0",
-    "eslint-config-next": "13.4.4",
-    "jest": "^29.5.0",
+    "eslint": "^8.26.0",
+    "eslint-config-next": "13.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.3.1",
     "next": "13.4.4",
     "playwright": "^1.34.3",
+    "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-query": "^3.39.3",
@@ -37,11 +40,23 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
+    "@tanstack/react-query-devtools": "^4.22.0",
+    "@types/jest": "^29.2.4",
+    "@types/react-beautiful-dnd": "^13.1.3",
+    "@typescript-eslint/parser": "^5.43.0",
+    "autoprefixer": "^10.4.13",
     "commitizen": "^4.2.5",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^7.0.0",
-    "husky": "^8.0.2"
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.2",
+    "jest-environment-jsdom": "^29.3.1"
   },
   "config": {
     "commitizen": {

src/apis/httpClient/index.ts

@@ -95,7 +95,6 @@ export class HttpClient {
     this.api.interceptors.response.use(
       (response) => response,
       (error) => {
-        console.log(error);
         // const { status, code } = error.response.data
         // if (status === 403 && code === exception.code.TOKEN_403_3) Storage.delItem('refresh_token')
         Storage.delItem("access_token");
@@ -124,7 +123,7 @@ export class HttpClient {
   }
 }
 
-const axiosConfig: HttpClientConfig = {
+export const axiosConfig: HttpClientConfig = {
   baseURL: "https://buma.wiki/",
   timeout: 10000,
 };

src/apis/interceptor/index.ts

@@ -1,6 +1,6 @@
 import Storage from "@/apis/storage";
 import { AxiosRequestConfig, AxiosResponse } from "axios";
-import refreshToken from "../token/refreshToken";
+import refreshToken from "@/apis/token/refreshToken";
 import exception from "@/utils/constants/exception.constants";
 
 export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {

src/apis/token/refreshToken.ts

@@ -10,7 +10,6 @@ const refreshToken = async () => {
     ).data;
     Storage.setItem("access_token", res.accessToken);
   } catch (err) {
-    console.log(err);
     Storage.delItem("refresh_token");
   }
 };

src/components/Flex/Column.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import FlexPropsType from "./type";
+
+const Column = ({
+  children,
+  gap,
+  justifyContent = "none",
+  alignItems = "none",
+  width,
+  height,
+}: FlexPropsType) => {
+  return (
+    <StyledColumn style={{ gap, justifyContent, alignItems, width, height }}>
+      {children}
+    </StyledColumn>
+  );
+};
+
+export default Column;
+
+const StyledColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+`;

src/components/Flex/Row.tsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import FlexPropsType from "./type";
+
+const Row = ({
+  children,
+  gap,
+  justifyContent = "none",
+  alignItems = "none",
+  width,
+}: FlexPropsType) => {
+  return (
+    <StyledRow style={{ gap, justifyContent, alignItems, width }}>
+      {children}
+    </StyledRow>
+  );
+};
+
+export default Row;
+
+const StyledRow = styled.div`
+  display: flex;
+`;

src/components/Flex/type.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+interface FlexPropsType {
+  children: ReactNode;
+  gap: string;
+  justifyContent?:
+    | "none"
+    | "center"
+    | "flex-end"
+    | "flex-start"
+    | "space-between";
+  alignItems?: "none" | "center" | "flex-end" | "flex-start" | "space-between";
+  width?: string;
+  height?: string;
+}
+
+export default FlexPropsType;

src/components/Header/Navigation.tsx

@@ -28,6 +28,7 @@ const NavigationWrap = styled.ul`
 const NavigationItem = styled.li`
   font-size: 18px;
   color: black;
+  cursor: pointer;
 `;
 
 export default Navigation;

src/pages/home/index.tsx

@@ -1,7 +1,15 @@
+import color from "@/styles/color";
 import React from "react";
+import styled from "styled-components";
 
 const HomePage = () => {
-  return <div></div>;
+  return <Container />;
 };
 
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background-color: ${color.container};
+`;
+
 export default HomePage;

src/styles/color.ts

@@ -1,3 +1,16 @@
-const color = {};
+const color = {
+  black: "#000000",
+  white: "#FFFFFF",
+  orange: "#FF763B",
+  red: "#F44336",
+
+  primary_red: "#E54F5A",
+  primary_blue: "#73AEE3",
+  primary_yellow: "#FEBC56",
+  primary_mint: "#27C3BC",
+
+  tertiary: "#303441",
+  container: "#F9FAFF",
+};
 
 export default color;

src/styles/font.ts

@@ -4,7 +4,7 @@ const fontGenerator = (
   lineHeight: number,
   letterSpacing: number,
 ) => `
-    font-family: 'Pretendard Variable';
+    font-family: 'Pretendard';
     font-weight: ${weight};
     font-size: ${size}rem;
     line-height: ${lineHeight}%;

src/styles/globals.css

@@ -1,3 +1,5 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
+
 * {
   margin: 0;
   padding: 0;

src/utils/helpers/provider.helper.tsx

@@ -32,7 +32,7 @@ const Provider = ({ children }: PropsWithChildren) => {
           position={toast.POSITION.TOP_RIGHT}
         />
         <Header />
-        <React.Fragment>{children}</React.Fragment>
+        {children}
       </RecoilRoot>
     </QueryClientProvider>
   );