Feat/post page

.eslintrc.json

@@ -32,6 +32,7 @@
       { "namedComponents": "arrow-function" }
     ],
     // no-extraneous-dependencies 오류가 발생해 임시로 해제
-    "import/no-extraneous-dependencies": 0
+    "import/no-extraneous-dependencies": 0,
+    "@typescript-eslint/ban-ts-comment": 0
   }
 }

Components/Common/DropDown.tsx

@@ -40,7 +40,6 @@ const DropDown = ({ type }: DropDownProps) => {
   const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectValue(e.target.value);
   };
-
   return (
     <Select onChange={onChangeHandler} defaultValue={options[0]}>
       {options.map((option) => (

Components/MyPage/SkillList.tsx → Components/Common/Skill/SkillList.tsx

@@ -3,11 +3,12 @@ import styled from "styled-components";
 import Skill, { commonStyle } from "./Skill";
 
 interface SkillPickerProps {
+  text: string;
   editSkills: string[];
   setEditSkills: Dispatch<React.SetStateAction<string[]>>;
 }
 
-const SkillList = ({ editSkills, setEditSkills }: SkillPickerProps) => {
+const SkillList = ({ text, editSkills, setEditSkills }: SkillPickerProps) => {
   const addSkill = () => {
     if (editSkills[editSkills.length - 1] !== "")
       setEditSkills([...editSkills, ""]);
@@ -29,7 +30,7 @@ const SkillList = ({ editSkills, setEditSkills }: SkillPickerProps) => {
           onDelete={onDelete}
         />
       ))}
-      <SkillButton onClick={addSkill}>+ 스킬 입력</SkillButton>
+      <SkillButton onClick={addSkill}>+ {text}</SkillButton>
     </SkillListContainer>
   );
 };

Components/MyPage/EditProfileContainer.tsx

@@ -7,11 +7,11 @@ import { Dispatch, useState } from "react";
 import styled from "styled-components";
 import DefaultButton from "../Common/DefaultButton";
 import DropDown from "../Common/DropDown";
+import SkillList from "../Common/Skill/SkillList";
 import Toggle from "../Common/Toggle";
 import PositionTag from "./PositionTag";
 import ProfileContainer from "./ProfileContainer";
 import { ContentContainer, ContentWrapper } from "./ShowProfileContainer";
-import SkillList from "./SkillList";
 import SwitchButton from "./SwitchButton";
 
 const fieldList = [
@@ -108,6 +108,7 @@ const EditProfileContainer = ({
               <ContentWrapper>
                 <p>스킬</p>
                 <SkillList
+                  text="스킬 입력"
                   editSkills={editSkills}
                   setEditSkills={setEditSkills}
                 />

Components/edit-post/FieldDropDown.tsx → Components/Post/FieldDropDown.tsx

@@ -1,4 +1,6 @@
+import { postLargeCategory, postSubCategory } from "@/lib/recoil";
 import { useReducer } from "react";
+import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
 /**
@@ -51,16 +53,27 @@ const reducer = (_state: string[], action: { type: Field }): string[] => {
 
 const FieldDropDown = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
+
+  const setLargeCategory = useSetRecoilState(postLargeCategory);
+  const setSubCategory = useSetRecoilState(postSubCategory);
+
   const handleLargeCategory = (item: Field) => {
     dispatch({ type: item });
   };
 
+  const handleClickSubCategory = (item: string) => {
+    setSubCategory(item);
+  };
+
   return (
     <FieldDropDownContainer>
       <ul>
         {field.map((item) => (
           <FiledItemContainer
-            onMouseOver={() => handleLargeCategory(item)}
+            onMouseOver={() => {
+              handleLargeCategory(item);
+              setLargeCategory(item);
+            }}
             key={item.toString()}
           >
             {item}
@@ -70,7 +83,11 @@ const FieldDropDown = () => {
       <Divider />
       <ul>
         {state.map((item) => (
-          <FiledItemContainer key={item.toString()} cursor>
+          <FiledItemContainer
+            key={item.toString()}
+            onClick={() => handleClickSubCategory(item)}
+            dataCursor
+          >
             {item}
           </FiledItemContainer>
         ))}
@@ -79,28 +96,32 @@ const FieldDropDown = () => {
   );
 };
 
+const FieldDropDownContainer = styled.div`
+  width: 21.5rem;
+  box-shadow: 0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
+  border: 1px solid #cccccc;
+  display: flex;
+  border-radius: 0.2rem;
+  gap: 0;
+  position: absolute;
+  background-color: #fff;
+  z-index: 21;
+`;
+
 const FiledItemContainer = styled.li<{
   key?: string;
   onMouseOver?: () => void;
-  cursor?: boolean;
+  onClick?: () => void;
+  dataCursor?: boolean;
 }>`
   padding: 0.75rem;
   width: 8.75rem;
-  ${(props) => props.cursor && "cursor: pointer;"};
+  ${(props) => props.dataCursor && "cursor: pointer;"};
   :hover {
     background: #e6e6e6;
   }
 `;
 
-const FieldDropDownContainer = styled.div`
-  width: 21.5rem;
-  box-shadow: 0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
-  border: 1px solid #cccccc;
-  display: flex;
-  border-radius: 0.2rem;
-  gap: 0;
-`;
-
 const Divider = styled.hr`
   padding: 0;
   margin: 0;

Components/Post/Post.tsx

@@ -0,0 +1,124 @@
+import { NextPage } from "next";
+import styled from "styled-components";
+import DefaultButton from "@/Components/Common/DefaultButton";
+import PostTitle from "@/Components/Post/PostTitle";
+import ProjectInfo from "@/Components/Post/ProjectInfo";
+import { useRecoilValue } from "recoil";
+import {
+  postContent,
+  postLargeCategory as recoilPostLargeCategory,
+  postMembers,
+  postProjectDuration,
+  postPublic,
+  postSkills,
+  postSubCategory as recoilPostSubCategory,
+  postSubTitle,
+  postTags,
+  postTitle,
+  postTitleBackgroundColor,
+} from "@/lib/recoil";
+import supabase from "@/lib/supabase";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+/**
+ * @TODO 코드블럭
+ * @TODO 게시 전 입력창 추가(인원, 기간 등 - 피그마 참고)
+ * @TODO file(img) input 에서 color picker로 변경
+ * @TODO date picker z-index 해결
+ * @TODO Date recoil을 활용한 custom hook으로 리팩토링하기
+ * @TODO 개발스택 UI my-page 참고
+ * @TODO 카테고리 중복 선택 , 보여주는 UI
+ * @TODO 서버통신 연결
+ */
+const Post: NextPage = () => {
+  const title = useRecoilValue(postTitle);
+  const subTitle = useRecoilValue(postSubTitle);
+  const titleBackgroundColor = useRecoilValue(postTitleBackgroundColor);
+  const [startDate, endDate] = useRecoilValue(postProjectDuration);
+  const skills = useRecoilValue(postSkills);
+  const tag = useRecoilValue(postTags);
+  const isPublic = useRecoilValue(postPublic);
+  const members = useRecoilValue(postMembers);
+  const content = useRecoilValue(postContent);
+  const postLargeCategory = useRecoilValue(recoilPostLargeCategory);
+  const postSubCategory = useRecoilValue(recoilPostSubCategory);
+
+  const router = useRouter();
+
+  const newPostRow = {
+    title,
+    sub_title: subTitle,
+    title_background_color: titleBackgroundColor,
+    large_category: postLargeCategory,
+    sub_category: postSubCategory,
+    skills,
+    progress_date: [startDate, endDate],
+    members,
+    tag,
+    is_public: isPublic,
+    content,
+  };
+
+  const [isSaved, setIsSaved] = useState(false);
+
+  const onSave = () => {
+    // 저장 버튼
+    setIsSaved(true);
+    setTimeout(() => {
+      setIsSaved(false);
+    }, 2000);
+  };
+  const onPost = async () => {
+    // 게시 버튼
+    const { data, error } = await supabase
+      .from("post")
+      .insert(newPostRow)
+      .select()
+      .single();
+    if (!error) {
+      router.push({
+        pathname: "/",
+        query: { id: data.id },
+      });
+    }
+  };
+
+  return (
+    <MainWrapper>
+      <PostHeader>
+        <SaveAlert isSaved={isSaved}>글이 저장 되었습니다.</SaveAlert>
+        <DefaultButton text="저장" type="outline" size="s" onClick={onSave} />
+        <DefaultButton text="게시" type="full" size="s" onClick={onPost} />
+      </PostHeader>
+      <section>
+        <PostTitle />
+        <ProjectInfo />
+      </section>
+    </MainWrapper>
+  );
+};
+
+const MainWrapper = styled.main`
+  max-width: 98.75rem;
+  margin: 0 auto;
+`;
+
+const PostHeader = styled.section`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 2.8125rem 0;
+  gap: 1.25rem;
+`;
+
+interface SaveAlertProps {
+  isSaved: boolean;
+}
+
+const SaveAlert = styled.span<SaveAlertProps>`
+  opacity: ${({ isSaved }) => (isSaved ? 1 : 0)};
+  transition: all 0.5s ease-in-out;
+`;
+
+export default Post;

Components/Post/PostEditor.tsx

@@ -0,0 +1,117 @@
+import "@toast-ui/editor/dist/toastui-editor.css";
+import "@toast-ui/editor/dist/theme/toastui-editor-dark.css";
+import "tui-color-picker/dist/tui-color-picker.css";
+import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
+import "@toast-ui/editor/dist/i18n/ko-kr";
+
+import { Editor } from "@toast-ui/react-editor";
+import colorSyntax from "@toast-ui/editor-plugin-color-syntax";
+import { RefObject, useEffect } from "react";
+import supabase from "@/lib/supabase";
+import imageCompression from "browser-image-compression";
+import { useRecoilState } from "recoil";
+import { postContent as recoilPostContent } from "@/lib/recoil";
+
+/**
+ * @TODO storage 삭제 구현 필요
+ * @TODO uuid flag 꽃아야 함 >> 게시와 임시저장의 용도로 분류
+ */
+
+interface PostEditorProps {
+  editorRef: RefObject<Editor>;
+}
+
+const PostEditor = ({ editorRef }: PostEditorProps) => {
+  const [postContent, setPostContent] = useRecoilState(recoilPostContent);
+  const toolbarItems = [
+    ["heading", "bold", "italic", "strike"],
+    ["hr"],
+    ["ul", "ol", "task"],
+    ["table", "link"],
+    ["image"], // <-- 이미지 추가 툴바
+    ["code"],
+    ["scrollSync"],
+  ];
+
+  useEffect(() => {
+    if (editorRef.current) {
+      const editorIns = editorRef.current.getInstance();
+      editorIns.removeHook("addImageBlobHook");
+      editorIns.addHook("addImageBlobHook", addImage);
+    }
+  }, []);
+
+  // ------------- image Function ------------- // 에디터에 이미지 추가
+
+  type HookCallback = (url: string, text?: string) => void;
+
+  const addImage = async (blob: File, dropImage: HookCallback) => {
+    const img = await compressImg(blob); // 이미지 압축
+    if (!img) return;
+    const url = await uploadImage(img); // 업로드된 이미지 서버 url
+    if (!url) return;
+    dropImage(url, `${blob.name}`); // 에디터에 이미지 추가
+  };
+
+  // 이미지 업로드
+
+  const uploadImage = async (blob: File) => {
+    try {
+      const imgPath = crypto.randomUUID();
+      await supabase.storage.from("post-image").upload(imgPath, blob);
+
+      // 이미지 올리기
+      const urlResult = await supabase.storage
+        .from("post-image")
+        .getPublicUrl(imgPath);
+      return urlResult.data.publicUrl;
+    } catch (error) {
+      console.log(error);
+      return false;
+    }
+  };
+
+  // //이미지 압축
+  const compressImg = async (blob: File): Promise<File | void> => {
+    const options = {
+      maxSize: 1,
+      initialQuality: 0.55, // initial 0.7
+    };
+    const result = await imageCompression(blob, options)
+      .then((res) => res)
+      .catch((e) => console.log(e, "압축 에러"));
+    return result;
+  };
+
+  const handleOnEditorChange = () => {
+    // 유효성 검사
+    const editorText = editorRef.current?.getInstance().getMarkdown();
+    if (editorText === " " || editorText === "" || editorText === undefined) {
+      return;
+    }
+    // HTML 대신에 Markdown으로 저장합니다.
+    setPostContent(editorText);
+  };
+
+  return (
+    <Editor
+      ref={editorRef}
+      initialValue={postContent ?? null}
+      previewStyle="vertical"
+      // previewHighlight={false}
+      height="600px"
+      initialEditType="markdown"
+      useCommandShortcut
+      toolbarItems={toolbarItems}
+      language="ko-KR"
+      plugins={[colorSyntax]}
+      hooks={{
+        // @ts-ignore
+        addImageBlobHook: addImage,
+      }}
+      onChange={() => handleOnEditorChange()}
+    />
+  );
+};
+
+export default PostEditor;