[#3] 메인페이지 구조 개발

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "import/no-anonymous-default-export": "off"
+  }
 }

package.json

@@ -9,25 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "eslint-config-airbnb": "^19.0.4",
-    "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",
+<<<<<<< HEAD
+    "next": "13.5.4"
+=======
     "recoil": "^0.7.7"
+>>>>>>> c3197982c3dccc027fc4a1d681c156bf7a62dbc9
   },
   "devDependencies": {
+    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
     "eslint": "^8",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-next": "13.5.4",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5"
+    "eslint-config-next": "13.5.4"
   }
 }

src/app/api/account/accountLogin.tsx

@@ -0,0 +1,9 @@
+import * as api from "@/app/(main)/api";
+
+export default {
+  validationId(loginId: string) {
+    return api.default.get({
+      url: `/api/v1/members/check-login-id?loginId=${loginId}`,
+    });
+  },
+};

src/app/api/appbase/CommonClient.tsx

@@ -0,0 +1,52 @@
+import { CommonRequestData, CommonResponseData, HttpMethods } from "./types";
+
+class CommonClient {
+  private send<T>(method: HttpMethods, option?: CommonRequestData): Promise<T> {
+    const { url, data, params, headers } = option || {};
+
+    const opt: RequestInit = {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+      },
+      body: data ? JSON.stringify(data) : undefined,
+    };
+    // http 유효성검사 추가 
+    return fetch(url ? url : "", opt)
+      .then(async (res) => {
+        if (res.status === 200) {
+          const jsonData: CommonResponseData<T> = await res.json();
+          return jsonData;
+        } else {
+          throw new Error(`Request failed with status ${res.status}`);
+        }
+      })
+      .then((jsonData) => jsonData.data)
+      .catch((error) => {
+        console.error("Request error:", error);
+        throw error;
+      });
+  }
+
+  get<T>(option?: CommonRequestData): Promise<T> {
+    return this.send<T>(HttpMethods.GET, option);
+  }
+
+  delete<T>(option?: CommonRequestData): Promise<T> {
+    return this.send<T>(HttpMethods.DELETE, option);
+  }
+
+  put<T>(option?: CommonRequestData): Promise<T> {
+    return this.send<T>(HttpMethods.PUT, option);
+  }
+
+  post<T>(option?: CommonRequestData): Promise<T> {
+    return this.send<T>(HttpMethods.POST, option);
+  }
+
+  patch<T>(option?: CommonRequestData): Promise<T> {
+    return this.send<T>(HttpMethods.PATCH, option);
+  }
+}
+export default CommonClient;

src/app/api/appbase/types.tsx

@@ -0,0 +1,28 @@
+export type CommonResponseData<T> = {
+  statusCode: number;
+  errorCode: string | number;
+  message: string;
+  data: T;
+};
+
+export type CommonRequestData = {
+  code?: string;
+  url: string;
+  data?: object;
+  params?: object;
+  headers?: object;
+  async?: boolean;
+};
+
+export type RequestData = {
+  data?: object;
+  params?: object;
+};
+
+export enum HttpMethods {
+  GET = "get",
+  PUT = "put",
+  POST = "post",
+  DELETE = "delete",
+  PATCH = "patch",
+}

src/app/api/index.tsx

@@ -0,0 +1,5 @@
+import CommonClient from "../api/appbase/CommonClient";
+
+const interruptClient = new CommonClient();
+
+export default interruptClient;

src/app/component/contents/SimpleSearch/FilteToggleBox.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { error } from "console";
+import React, { useState, useRef, useEffect } from "react";
+
+interface FilteToggleBoxProps {
+  title?: string;
+  optionBoxList?: any[]; // 옵션 리스트의 타입을 지정합니다.
+}
+
+const FilteToggleBox: React.FC<FilteToggleBoxProps> = ({
+  title = "",
+  optionBoxList = [],
+}) => {
+  // 토글 이벤트
+  const [isToggle, setIsToggle] = useState<boolean>(false);
+
+  const handleToggle = (event: any) => {
+    if (optionBoxList.length > 0) {
+      setIsToggle(!isToggle);
+    }
+  };
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function onOutSideClick(event: any) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsToggle(false);
+      }
+    }
+    document.addEventListener("click", onOutSideClick);
+
+    return () => {
+      document.removeEventListener("click", onOutSideClick);
+    };
+  }, []);
+
+  return (
+    <div className="filter-option">
+      <div className="filter-select" ref={containerRef}>
+        <label>{title}</label>
+        <div className="toggleButton" onClick={handleToggle}>
+          더보기
+        </div>
+        {isToggle && (
+          <div className="filter-modal">
+            {optionBoxList.map((item, index) => (
+              <div key={item.id}>
+                <input type="checkbox" value={item.value}></input>
+                {item.value}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FilteToggleBox;

src/app/component/contents/SimpleSearch/FilterRange.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as api from "@api";
+
+interface FilterRangeProps {
+  step?: number; // step 프로퍼티를 옵셔널로 만듭니다.
+  rangeLabel?: string;
+}
+
+const FilterRange: React.FC<FilterRangeProps> = ({ step = 5, rangeLabel }) => {
+  return (
+    <>
+      <label>{rangeLabel}</label>
+      {/* https://developer.mozilla.org/ko/docs/Web/API/Range */}
+      <input type="range" step={step} max="30" min="0"></input>
+    </>
+  );
+};
+
+export default FilterRange;

src/app/component/contents/SimpleSearch/SearchInputBox.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+
+interface SearchInputBoxProps {
+  placeholderText?: string;
+}
+
+const SearchInputBox: React.FC<SearchInputBoxProps> = ({
+  placeholderText = "검색어를 입력해주세요.",
+}) => {
+  return (
+    <div>
+      <input placeholder={placeholderText}></input>
+      <button
+        onClick={() => {
+          console.log("onSearchBy My documents ");
+        }}
+      >
+        검색
+      </button>
+    </div>
+  );
+};
+
+export default SearchInputBox;

src/app/globals.css

@@ -1,46 +0,0 @@
-.gnb {
-    width: 100%;
-    height: 15vh;
-    float: left;
-    display: flex;
-    border: solid black;
-}
-.gnb .logo {
-    width: 20vw;
-    border : solid red;
-    font-size: 50px;
-    display: flex;
-    text-align: center;
-    align-items: center;
-}
-.gnb .menu {
-    width: 60vw;
-    border : solid red;
-    display: flex;
-    align-items: center;
-}
-.gnb .sign {
-    width: 20vw;
-    border : solid red;
-    display: flex;
-    align-items: center;
-}
-.web {
-    width: 100%;
-    height: 80vh; 
-    border: solid black;
-}
-.footer {
-    width: 100%;
-    height: 15vh;
-    border: solid black;
-}
-.simple-search {
-    display: flex;
-    height: 30vh;
-    border: solid red;
-}
-.thumbnail {
-    height: 30vh;
-    border: solid red;
-}

tsconfig.json

@@ -19,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@api": ["./src/app/api/index.tsx"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],