Merge remote-tracking branch 'Soongcharo-FE/dev'

.eslintrc.json

@@ -23,6 +23,7 @@
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx"]
     },
+    "import/order": 0,
     "import/resolver": {
       "typescript": {
         "alwaysTryTypes": true,
@@ -55,6 +56,7 @@
     "react/react-in-jsx-scope": 0,
     "react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
     "react/prefer-stateless-function": 0,
+    "react/prefer-default-export": "off",
     "react/jsx-filename-extension": 0,
     "react/jsx-one-expression-per-line": 0,
     "no-nested-ternary": 0,

apis/client.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: 'http://13.124.148.165:8080/',
+});
+
+export default client;

apis/postFile.ts

@@ -0,0 +1,22 @@
+import client from './client';
+
+const postFile = async (blob: Blob) => {
+  const formData = new FormData();
+
+  formData.append('file', blob, blob.name);
+  formData.append('type', blob.type);
+
+  // for (const item of formData.values()) {
+  //   console.log(item);
+  // }
+
+  const response = await client.post('/test/file', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response.data.filePath;
+};
+
+export default postFile;

apis/postQuestionWrite.ts

@@ -0,0 +1,30 @@
+import { PostQuestionWriteResponse, QuestionWriteRequest } from '@/types/questionWrite.type';
+import client from './client';
+
+const postQuestionWrite = async ({
+  title,
+  content,
+  fileIds,
+  field,
+  tag,
+}: QuestionWriteRequest): Promise<PostQuestionWriteResponse> => {
+  const response = await client.post(
+    '/user/question',
+    {
+      title,
+      content,
+      fileIds,
+      field,
+      tag,
+    },
+    {
+      headers: {
+        Authorization:
+          'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJha211QGdtYWlsLmNvbSIsInJvbGVzIjpbIlJPTEVfVVNFUiJdLCJpYXQiOjE2OTU2MjY5NzAsImV4cCI6MTY5NTcxMzM3MH0.Qp-tus5vuO7r1wTsIQJAp_T80zQePo96y_LLH7w89OU',
+      },
+    },
+  );
+  return response.data;
+};
+
+export default postQuestionWrite;

components/reusable/Buttons/SquareBtn.tsx

@@ -10,7 +10,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const SquareBtn = ({ onClick, able = true, children, ...props }: ButtonProps) => {
   return (
-    <ButtonWrapper onClick={onClick} able={able} {...props}>
+    <ButtonWrapper disabled={!able} onClick={onClick} able={able} {...props}>
       {children}
     </ButtonWrapper>
   );

components/reusable/Inputs/SearchInput.tsx

@@ -26,7 +26,7 @@ const SearchInput = forwardRef(
           placeholder={placeholder}
           width={width}
           height={height}
-          border={border}
+          border={border.toString()}
           {...props}
         />
         <SearchImg />
@@ -37,12 +37,12 @@ const SearchInput = forwardRef(
 
 export default SearchInput;
 
-const InputBox = styled.input<{ width: string; height: string; border: boolean }>`
+const InputBox = styled.input<{ width: string; height: string; border: string }>`
   width: ${({ width }) => width};
   height: ${({ height }) => height};
   padding-left: 24px;
   border-radius: 16px;
-  border: ${({ border }) => (border ? `1px solid ${theme.colors.gray2}` : 'none')};
+  border: ${({ border }) => (border === 'true' ? `1px solid ${theme.colors.gray2}` : 'none')};
   font-weight: ${theme.fontStyles.Text_M.fontWeight};
   font-size: ${theme.fontStyles.Text_M.fontSize}px;
 

components/reusable/MarkDown/MarkdownEditor.tsx

@@ -1,26 +1,43 @@
+import postFile from '@/apis/postFile';
 import '@toast-ui/editor/dist/toastui-editor.css';
+import { HookCallback } from '@toast-ui/editor/types/editor';
 import { Editor } from '@toast-ui/react-editor';
-import { useRef } from 'react';
+import { RefObject, useRef } from 'react';
 
-const MarkdownEditor = () => {
+interface MarkdownEditorProps {
+  onChange: (editorRef: RefObject<Editor>) => void;
+}
+
+const MarkdownEditor = ({ onChange }: MarkdownEditorProps) => {
   const editorRef = useRef<Editor>(null);
 
+  const onUploadImage = async (blob: Blob, callback: HookCallback) => {
+    const url = await postFile(blob);
+    callback(url, blob.name);
+    return false;
+  };
+
   return (
     <Editor
       ref={editorRef}
+      onChange={() => onChange(editorRef)}
       // initialValue="hello react editor world!"
       previewStyle="tab"
       height="600px"
       initialEditType="markdown"
+      language="ko-KR"
       toolbarItems={[
         ['heading', 'bold', 'italic', 'strike'],
         ['hr', 'quote'],
         ['ul', 'ol', 'task', 'indent', 'outdent'],
-        ['table', 'link'],
+        ['table', 'image', 'link'],
         ['code', 'codeblock'],
         ['scrollSync'],
       ]}
       useCommandShortcut
+      hooks={{
+        addImageBlobHook: onUploadImage,
+      }}
     />
   );
 };

components/reusable/MarkDown/MarkdownViewer.tsx

@@ -0,0 +1,8 @@
+import '@toast-ui/editor/dist/toastui-editor.css';
+import { Viewer } from '@toast-ui/react-editor';
+
+const MarkdownViewer = () => {
+  return <Viewer initialValue="#hello react editor world!" el="dkdkd" />;
+};
+
+export default MarkdownViewer;

const/dummy.ts

@@ -14,7 +14,7 @@ const StackDummy: StackDummyType = {
     'ReactNative',
     'Unity',
   ],
-  FE: [
+  FRONTEND: [
     'React',
     'Recoil',
     'React-Query',
@@ -25,7 +25,7 @@ const StackDummy: StackDummyType = {
     'Vue',
     'Svelte',
   ],
-  BE: [
+  BACKEND: [
     'Java',
     'Spring',
     'Nodejs',
@@ -38,7 +38,7 @@ const StackDummy: StackDummyType = {
     'Firebase',
   ],
   DESIGN: ['Figma', 'AdobeXD'],
-  PM: ['Figma', 'AdobeXD', 'Zeplin'],
+  PRODUCT_MANAGER: ['Figma', 'AdobeXD', 'Zeplin'],
   SCHOOL: [],
 };
 

hooks/usePostQuestionWrite.ts

@@ -0,0 +1,20 @@
+import postQuestionWrite from '@/apis/postQuestionWrite';
+import { AxiosError } from 'axios';
+import { useRouter } from 'next/router';
+import { useMutation } from 'react-query';
+
+const usePostQuestionWrite = () => {
+  const router = useRouter();
+  return useMutation(postQuestionWrite, {
+    onSuccess: () => {
+      router.push('/');
+    },
+    onError: (error) => {
+      const Error = error as AxiosError;
+
+      console.log(Error);
+    },
+  });
+};
+
+export default usePostQuestionWrite;

hooks/useQuestionWrite.ts

@@ -0,0 +1,40 @@
+import { FieldType, QuestionWriteRequest } from '@/types/questionWrite.type';
+import { RefObject, useState } from 'react';
+import { Editor } from '@toast-ui/react-editor';
+
+const useQuestionWrite = () => {
+  const [writeForm, setWriteForm] = useState<QuestionWriteRequest>({
+    title: '',
+    content: '',
+    field: [],
+    fileIds: [],
+    tag: [],
+  });
+
+  const handleTitle = (value: string) => {
+    setWriteForm({ ...writeForm, title: value });
+  };
+
+  const handleContent = (editorRef: RefObject<Editor>) => {
+    const data = editorRef?.current?.getInstance().getMarkdown();
+    setWriteForm({ ...writeForm, content: data as string });
+  };
+
+  const handleField = (value: FieldType[]) => {
+    setWriteForm({ ...writeForm, field: [...value] });
+  };
+
+  const handleTag = (value: string[]) => {
+    setWriteForm({ ...writeForm, tag: value });
+  };
+
+  return {
+    writeForm,
+    handleTitle,
+    handleContent,
+    handleField,
+    handleTag,
+  };
+};
+
+export default useQuestionWrite;

package.json

@@ -33,6 +33,7 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^6.2.0",
+    "axios": "^1.5.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^8.8.0",

pages/questionRead/atoms/Question.tsx

@@ -1,8 +1,14 @@
 import Spacing from '@/components/reusable/Spacing';
 import Tag from '@/components/reusable/Tag';
 import theme from '@/styles/theme';
+import dynamic from 'next/dynamic';
+
 import styled from 'styled-components';
 
+const Viewer = dynamic(() => import('../../../components/reusable/MarkDown/MarkdownViewer'), {
+  ssr: false,
+});
+
 const Question = () => {
   return (
     <StyledQuestion>
@@ -28,11 +34,12 @@ const Question = () => {
           </TitleWrap>
           <Spacing direction="vertical" size={32} />
           <QuestionContent>
-            경영학을 심도깊게 기초부터 배우고 싶은데요!
+            <Viewer />
+            {/* 경영학을 심도깊게 기초부터 배우고 싶은데요!
             <br />
             강의, 퀄리티, 내용, 교수진이 괜찮은 인강 사이트 & 공부 방법이 궁금합니다!
             <br />
-            공부하기 좋은 서적도 추천해주시면 감사하겠습니다
+            공부하기 좋은 서적도 추천해주시면 감사하겠습니다 */}
           </QuestionContent>
           <Spacing direction="vertical" size={32} />
           <InfoContainer>