-
-
-
+
+ open({
+ title: '게시글 작성을 그만두시겠습니까?',
+ onButtonClick: () => {},
+ hasCancelButton: true,
+ buttonLabel: '뒤로가기',
+ type: 'comment',
+ })
+ }
+ />
open({
title: '정답 코드',
@@ -64,6 +64,7 @@ const DetailRight = () => {
language,
})
}
+ size={32}
/>
Submit
diff --git a/src/pages/detail/right/styles.ts b/src/pages/detail/right/styles.ts
index 7b02977..3c13aab 100644
--- a/src/pages/detail/right/styles.ts
+++ b/src/pages/detail/right/styles.ts
@@ -1,5 +1,4 @@
import { colors } from '@/styles/colorPalette';
-import { layoutMap } from '@/styles/layout';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
@@ -29,17 +28,11 @@ export const testButton = css`
export const ButtonBox = styled.div`
display: flex;
margin-top: 60px;
+ align-items: center;
+ flex-direction: row;
justify-content: end;
gap: 20px;
> div:first-of-type {
margin-right: auto;
}
`;
-
-export const questionCss = css`
- ${layoutMap.shadowBox}
- border-radius: 100%;
- padding: 10px;
- width: 48px;
- height: 48px;
-`;
diff --git a/src/pages/post/left/index.tsx b/src/pages/post/left/index.tsx
index 5098912..c08e588 100644
--- a/src/pages/post/left/index.tsx
+++ b/src/pages/post/left/index.tsx
@@ -1,23 +1,29 @@
import { PostTestCaseBox } from '@/components/post';
import * as S from './styles';
-import { DescriptionBox } from '@/components/shared';
+import { DescriptionBox, Select } from '@/components/shared';
import useSetFormData from '@/hooks/post/useSetFormData';
+import { CATEGORY } from '@/consts/category';
const PostLeft = () => {
- const { postForm, handleChange, updatePostForm } = useSetFormData();
- const handleCategurySelect = (value: string) => {
+ const {
+ postForm: { postNumber, title, content, condition },
+ onChange,
+ updatePostForm,
+ } = useSetFormData();
+ const onChangeSelect = (value: string) => {
updatePostForm({ category: value });
};
return (
+
diff --git a/src/pages/post/left/styles.ts b/src/pages/post/left/styles.ts
index 8b6e8fa..0aafb97 100644
--- a/src/pages/post/left/styles.ts
+++ b/src/pages/post/left/styles.ts
@@ -1,11 +1,15 @@
import styled from '@emotion/styled';
-import { colors } from '../../../styles/colorPalette';
+import { colors } from '@/styles/colorPalette';
export const Container = styled.div`
+ position: relative;
display: flex;
flex-direction: column;
min-width: 800px;
- position: relative;
height: 100vh;
border-right: 1px solid ${colors.gray50};
+
+ > :first-of-type {
+ padding: 20px;
+ }
`;
diff --git a/src/pages/post/right/index.tsx b/src/pages/post/right/index.tsx
index d17f2b5..d079182 100644
--- a/src/pages/post/right/index.tsx
+++ b/src/pages/post/right/index.tsx
@@ -5,6 +5,7 @@ import { postFormStore } from '@/stores/post';
import { Icon, StyledButton } from '@/components/shared';
import * as S from './styles';
+import { postArticle } from '@/apis/article';
const PostRight = () => {
const navigate = useNavigate();
@@ -30,7 +31,7 @@ const PostRight = () => {
onClick={() =>
open({
title: '게시글을 올리겠습니까?',
- onButtonClick: () => postProblem(postForm).then(() => navigate('/')),
+ onButtonClick: () => postArticle(postForm).then(() => navigate('/')),
hasCancelButton: true,
buttonLabel: '확인',
})
diff --git a/src/stores/post.ts b/src/stores/post.ts
index 8852678..4fc6cc5 100644
--- a/src/stores/post.ts
+++ b/src/stores/post.ts
@@ -2,7 +2,7 @@ import { ArticleDetail } from '@/types';
import { create } from 'zustand';
interface PostFormState {
- postForm: ArticleDetail;
+ postForm: Omit;
updatePostForm: (value: Partial) => void;
}
const defaultPostForm = {
@@ -13,7 +13,6 @@ const defaultPostForm = {
testCases: [],
language: 'java',
answer: '',
- postNumber: 0,
};
export const postFormStore = create((set) => ({
postForm: defaultPostForm,
diff --git a/src/styles/button.ts b/src/styles/button.ts
index c365f6b..f2c7991 100644
--- a/src/styles/button.ts
+++ b/src/styles/button.ts
@@ -17,6 +17,21 @@ export const buttonColorMap = {
`,
};
+export const buttonActiveMap = {
+ primary: css`
+ background-color: ${colors.yellowHover};
+ color: ${colors.white};
+ `,
+ reverse: css`
+ background-color: ${colors.white};
+ color: ${colors.yellow};
+ `,
+ second: css`
+ background-color: ${colors.gray50};
+ color: ${colors.white};
+ `,
+};
+
export const buttonSizeMap = {
small: css`
font-size: 16px;
diff --git a/src/styles/framerMotion.ts b/src/styles/framerMotion.ts
index fdc9a74..bbc863f 100644
--- a/src/styles/framerMotion.ts
+++ b/src/styles/framerMotion.ts
@@ -1,26 +1,35 @@
export const animationMap = {
- subMenuAnimate: {
- enter: {
+ fadeInOut: {
+ open: {
opacity: 1,
transition: {
- duration: 0.1,
+ duration: 0.25,
},
- display: 'block',
},
- exit: {
+ close: {
opacity: 0,
transition: {
- duration: 0.1,
- },
- transitionEnd: {
- display: 'none',
+ duration: 0.25,
},
},
},
spinTransition: {
- loop: Infinity,
+ repeat: Infinity,
ease: 'linear',
duration: 1,
Infinity: true,
},
+ testContainerAnimation: {
+ close: { height: 80, transition: { duration: 0.5 } },
+ open: { height: 300, transition: { when: 'beforeChildren', duration: 0.5 } },
+ },
+ testContneBoxAnimation: {
+ close: { opacity: 0 },
+ open: { opacity: 1, transition: { delay: 0.25, duration: 0.25 } },
+ exit: { opacity: 0 },
+ },
+ commetnContainerAnimation: {
+ open: { x: 0, transition: { duration: 0.5 } },
+ close: { x: 855, transition: { duration: 0.5 } },
+ },
};
diff --git a/src/styles/layout.ts b/src/styles/layout.ts
index d40fb36..0a62a8f 100644
--- a/src/styles/layout.ts
+++ b/src/styles/layout.ts
@@ -25,4 +25,11 @@ export const layoutMap = {
/* 파이어폭스용 */
scrollbar-width: none;
`,
+ borderCircleIcon: css`
+ display: flex;
+ background-color: white;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 100%;
+ padding: 5px;
+ `,
};
diff --git a/src/types/article.ts b/src/types/article.ts
index 94f1344..f8eab4f 100644
--- a/src/types/article.ts
+++ b/src/types/article.ts
@@ -37,9 +37,17 @@ export interface ArticleDetail {
testCases: TestCase[];
language: LanguageValues;
answer: string;
+ commentCount: number;
+ likeCount: number;
+ answerCount: number;
+ likeType: boolean;
}
export interface TestCase {
example: string;
result: string;
}
+export interface ArticleList {
+ posts: ArticleType[];
+ pageInfo: Page;
+}