Merge pull request #44 from Goorm-Lucky7/develop/apis

[PR] 디테일 및 글 작성 페이지 API 만들기

package.json

@@ -21,6 +21,7 @@
     "@tanstack/react-query-devtools": "^5.32.0",
     "axios": "^1.6.8",
     "framer-motion": "^11.1.7",
+    "monaco-editor": "^0.48.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",

src/apis/authAxios.ts

@@ -11,9 +11,11 @@ export const getAuthAxios = (accessToken?: string) => {
       };
 
   const authAxios = axios.create({
-    baseURL: 'http://211.206.94.24:9999',
-    headers: headersOption,
-    withCredentials: true,
+    baseURL: 'http://13.124.54.157:8080',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${accessToken}`,
+    },
   });
 
   authAxios.interceptors.response.use(async (response) => {

src/apis/post.ts

@@ -0,0 +1,24 @@
+import { PostForm } from '@/types/post';
+import { getAuthAxios } from './authAxios';
+
+export const postProblem = async (formData: PostForm) => {
+  const access = localStorage.getItem('access');
+  if (!access) {
+    console.error('Access token is missing or invalid');
+    throw new Error('Access token is missing or invalid');
+  }
+  const authAxios = getAuthAxios(access);
+  const response = await authAxios.post('/api/post', formData);
+  return response.data;
+};
+
+export const getProblem = async (postId: string) => {
+  const access = localStorage.getItem('access');
+  if (!access) {
+    console.error('Access token is missing or invalid');
+    throw new Error('Access token is missing or invalid');
+  }
+  const authAxios = getAuthAxios(access);
+  const response = await authAxios.get(`/api/posts/${postId}`);
+  return response.data as PostForm;
+};

src/components/detail/commentList/index.tsx

@@ -0,0 +1,28 @@
+import { Comment } from '@/types/comment';
+import { CommentItem } from '..';
+
+import * as S from './styles';
+
+const defaultComment = {
+  commentId: 1,
+  createdAt: new Date('2024-05-02'),
+  content:
+    'asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf',
+  user: {
+    nickname: '아브라카타브라마이마이마이',
+    profileImage: null,
+  },
+} as Comment;
+
+const CommentList = () => {
+  const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+  return (
+    <S.Container>
+      {mock.map(() => (
+        <CommentItem {...defaultComment} />
+      ))}
+    </S.Container>
+  );
+};
+
+export default CommentList;

src/components/detail/commentList/styles.ts

@@ -0,0 +1,10 @@
+import { layoutMap } from '@/styles/layout';
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  padding: 10px;
+  ${layoutMap.scrollbarsNone}
+`;

src/components/detail/index.ts

@@ -1,2 +1,3 @@
 // comment
 export { default as CommentItem } from './commentItem';
+export { default as CommentList } from './commentList';

src/components/loader/circleLoader/index.tsx

@@ -0,0 +1,16 @@
+import { animationMap } from '@/styles/framerMotion';
+import { motion } from 'framer-motion';
+
+import * as S from './styles';
+
+const CircleLoader = () => {
+  return (
+    <motion.span
+      css={S.circleStyle}
+      animate={{ rotate: 360 }}
+      transition={animationMap.spinTransition}
+    />
+  );
+};
+
+export default CircleLoader;

src/components/loader/circleLoader/styles.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+
+export const circleStyle = css`
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  border: 0.5rem solid #e9e9e9;
+  border-top: 0.5rem solid #3498db;
+  border-radius: 50%;
+  position: absolute;
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+`;

src/components/loginForm/index.tsx

@@ -23,7 +23,7 @@ export default function LoginForm() {
       const accessToken = response.accessToken;
       localStorage.setItem('access', accessToken);
       console.log('로그인 성공:', response);
-      navigate('/mypage');
+      navigate(-1);
     } catch (error) {
       const axiosError = error as AxiosError<{ message: string }>;
       console.error('로그인 에러:', error);

src/components/post/codeBox/index.tsx

@@ -1,12 +1,12 @@
 import { CodeEditor, Select, Text } from '@/components/shared';
-import { LANGUAGE } from '@/consts/language';
+import { LANGUAGE, LanguageValues } from '@/consts/language';
 
 import * as S from './styles';
 import useSetFormData from '@/hooks/post/useSetFormData';
 
 const CodeBox = () => {
   const { postForm, updatePostForm } = useSetFormData();
-  const handleChangeSelect = (value: string) => {
+  const handleChangeSelect = (value: LanguageValues) => {
     updatePostForm({ language: value });
   };
   return (

src/components/post/posttestCaseBox/index.tsx

@@ -9,10 +9,10 @@ const defalutValue = [{ example: '', result: '' }];
 
 const PostTestCaseBox = () => {
   const updatePostForm = postFormStore((state) => state.updatePostForm);
-  const [testCase, setTestCases] = useState<TestCase[]>(defalutValue);
+  const [testCases, setTestCases] = useState<TestCase[]>(defalutValue);
   useEffect(() => {
-    updatePostForm({ testCase });
-  }, [testCase, updatePostForm]);
+    updatePostForm({ testCases });
+  }, [testCases, updatePostForm]);
   const handleChange = ({
     index,
     event,
@@ -21,14 +21,14 @@ const PostTestCaseBox = () => {
     event: ChangeEvent<HTMLTextAreaElement>;
   }) => {
     const { value, name } = event.target;
-    const updateTestCase = testCase.map((testCase, i) => {
+    const updateTestCase = testCases.map((testCases, i) => {
       if (index === i) {
-        return { ...testCase, [name]: value };
+        return { ...testCases, [name]: value };
       }
-      return testCase;
+      return testCases;
     });
     setTestCases(updateTestCase);
-    updatePostForm({ testCase: updateTestCase });
+    updatePostForm({ testCases: updateTestCase });
   };
   return (
     <S.TestCaseContainer>
@@ -42,7 +42,7 @@ const PostTestCaseBox = () => {
       <S.ContentBox>
         <Text>Example</Text>
         <S.TestBlock>
-          {testCase.map((testCase, index) => (
+          {testCases.map((testCase, index) => (
             <textarea
               key={`example-${index}`}
               name="example"
@@ -53,7 +53,7 @@ const PostTestCaseBox = () => {
         </S.TestBlock>
         <Text>Return</Text>
         <S.TestBlock>
-          {testCase.map((testCase, index) => (
+          {testCases.map((testCase, index) => (
             <textarea
               key={`result-${index}`}
               name="result"