feat: showCuration api 연결 #8

Mews-MIS · Mar 23, 2023 · 8fa5e1f · 8fa5e1f
1 parent 94cb7c5
commit 8fa5e1f
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 22 deletions.
diff --git a/src/api/CurationAPI.ts b/src/api/CurationAPI.ts
@@ -35,8 +35,8 @@ const CurationAPI = {
  },
  getCurationId: async (id: number) => {
  try {
- const path = "/curation/{id}";
- const response = await HttpClient.get(path, id);
+ const path = `/curation/${id}`;
+ const response = await HttpClient.get(path, {});
  console.log(response);
 
  return response;

diff --git a/src/components/CreateCuration/index.tsx b/src/components/CreateCuration/index.tsx
@@ -34,7 +34,7 @@ const CreateCuration = () => {
  name="title"
  value={title}
  placeholder="큐레이션 제목을 입력해주세요"
- className="w-2/5 p-4 text-md border-gray-500 focus:outline-none focus:ring-indigo-500"
+ className="w-1/2 p-4 text-md border-gray-500 focus:outline-none focus:ring-indigo-500"
  onChange={handleTitle}
  />
 

diff --git a/src/components/Curation/_fragment/ArticleList.tsx b/src/components/Curation/_fragment/ArticleList.tsx
@@ -50,10 +50,10 @@ const CurationArticleList = ({
  };
 
  return (
- <div className="flex h-4/5 justify-center mt-2">
+ <div className="flex w-full h-4/5 justify-center mt-2">
  <div className="w-full">
- <p className="font-bold">전체 글</p>
- <div className="h-4/5 w-4/5 overflow-auto border border-gray-500">
+ <p className="font-bold">글 목록</p>
+ <div className="h-4/5 overflow-auto border border-gray-500">
  <div className="flex-col flex-nowrap w-full">
  <div className="flex-col flex-nowrap w-full">
  {articles &&

diff --git a/src/components/UpdateCuration/index.tsx b/src/components/UpdateCuration/index.tsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import CurationAPI from "../../api/CurationAPI";
 import DeleteScheduleItem from "../../assets/Icon/DeleteScheduleItem.svg";
 import * as s from "./styles";
+import CurationArticleList from "../Curation/_fragment/ArticleList";
+import { CurationPostProps } from "../CreateCuration";
 
 export interface CurationData {
  id: number;
@@ -13,43 +15,89 @@ export interface CurationAllProps {
  checked: CurationData[];
 }
 
-export interface GetOneCurationProps {
- list: [];
- title: string;
- modifiedAt?: string;
-}
-
 const UpdateCuration = () => {
  const [curations, setCurations] = useState<CurationAllProps>();
- const [curation, setCuration] = useState<GetOneCurationProps | null>(null);
+ const [curation, setCuration] = useState<CurationPostProps>();
  const [curatinId, setCurationId] = useState<number>(0);
+ const [checkedArticles, setCheckedArticles] = useState<number[]>([]);
+ const [title, setTitle] = useState("");
 
  useEffect(() => {
  CurationAPI.getAllCuration(curations).then((data) => {
  setCurations(data);
  });
  }, []);
 
+ const showCuration = async (id: number) => {
+ try {
+ const res = await CurationAPI.getCurationId(id);
+ setCuration(res);
+ setTitle(res.title);
+ setCheckedArticles([res.list[0].article.id]);
+ console.log("--------", checkedArticles);
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
  return (
  <div className="w-full h-screen text-gray-900">
- <div className="w-full h-full pl-8 pt-8">
- <p className="text-md w-2/5 font-bold">생성된 큐레이션</p>
- <div className="flex justify-center mt-2">
- <div className="w-1/2">
+ <div className="w-full h-full pl-8 pt-8 flex">
+ <div className="w-1/2">
+  <p className="text-md font-bold">생성된 큐레이션</p>
+ <div className="flex flex-col justify-center mt-2">
  {curations?.allCuration &&
- curations.allCuration.map((data) => (
+ curations.allCuration.map((data, index) => (
  <div
- key={data.id}
+ key={index}
  className="flex flex-row items-center border-solid border-[1px] w-5/6 h-[45px] cursor-pointer"
- // onClick={() => data.id != null && showEditor(data.id)}
+ onClick={() => data.id != null && showCuration(data.id)}
  >
  {/* // onClick={() => data.id != null && deleteEditor(data.id)} */}
  <s.DeleteBtn src={DeleteScheduleItem} alt="삭제버튼" />
  <div className="text-lg ml-2 font-bold">{data.title}</div>
  </div>
  ))}
  </div>
- <div className="w-1/2 border-solid border-[1px]">기사들 보여할 곳</div>
+ </div>
+ <div className="w-1/2">
+ <p className="text-md font-bold">큐레이션 제목</p>
+ <div className=" w-5/6 flex flex-col justify-center mt-2">
+ <input
+ type="text"
+ id="title"
+ name="title"
+ value={title}
+ placeholder="큐레이션 제목을 입력해주세요"
+ className="p-4 w-full text-md border-gray-500 focus:outline-none focus:ring-indigo-500"
+ // onChange={handleTitle}
+ />
+ <div className="flex h-4/5 mt-2 w-full">
+ <CurationArticleList
+ setCheckedArticleList={setCheckedArticles}
+ checkedArticleList={checkedArticles}
+ />
+ </div>
+ <div className="flex lg:h-[40px] justify-end">
+ <button
+ className="bg-gray-300 p-6 flex items-center text-sm font-medium rounded-lg text-white hover:bg-gray-400 mr-6 md:text-base lg:text-base"
+ onClick={() => {
+ if (confirm("정말 입력한 정보를 초기화하시겠습니까?")) {
+ // resetData();
+ }
+ }}
+ >
+ 취소
+ </button>
+ <button
+ className="text-sm font-medium flex items-center p-6 rounded-lg text-white hover:bg-[#FFBD29] bg-[#FF9136] md:text-base lg:text-base"
+ type="submit"
+ // onClick={addCuration}
+ >
+ 수정
+ </button>
+ </div>
+ </div>
  </div>
  </div>
  </div>