서술형 커뮤니티화

packages/service/src/Component/Button/TextButton/style.css.ts

@@ -65,6 +65,16 @@ export const textButtonSizeStyle = styleVariants({
       borderRadius: '8px',
     },
   ],
+  xsmall: [
+    {
+      width: '3.5rem',
+      height: '1.5rem',
+      fontWeight: '500',
+      fontSize: '0.75rem',
+      lineHeight: '1rem',
+      borderRadius: '4px',
+    },
+  ],
 });
 
 export const unactivatedStyle = style({

packages/service/src/Organism/ProblemTitle/index.tsx

@@ -23,6 +23,7 @@ interface IProblemDetail {
   score: string;
   correctSubmission: string;
   correctUserCnt: string;
+  answerCount: string;
 }
 
 interface IProblemDetailDescription {
@@ -61,6 +62,8 @@ const problemDetailMap: Record<
     isStringNotEmpty(num) ? { label: '정답', value: num, unit: '' } : null,
   correctUserCnt: (num: string | undefined) =>
     isStringNotEmpty(num) ? { label: '맞힌 사람 수', value: num, unit: '명' } : null,
+  answerCount: (num: string | undefined) =>
+    isStringNotEmpty(num) ? { label: '답변 수', value: num, unit: '' } : null,
 };
 
 function ProblemTitle(props: IProblemTitle) {

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/Box/index.tsx

@@ -0,0 +1,12 @@
+import { boxStyle } from './style.css';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Box = ({ children, className }: Props) => {
+  return <div className={`${boxStyle} ${className}`}>{children}</div>;
+};
+
+export default Box;

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/Box/style.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+import { themeColors } from '../../../../../styles/theme.css';
+
+export const boxStyle = style({
+  padding: '24px',
+  border: `1px solid ${themeColors.line.d}`,
+  borderRadius: '8px',
+});

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/CommentInput/index.tsx

@@ -0,0 +1,39 @@
+import { QueryObserverResult, useMutation } from 'react-query';
+import { communityApiWrapper } from '../../../../../api/wrapper/community/communityApiWrapper';
+import { TextButton } from '../../../../../Component/Button';
+import { LongProblemPost } from '../../../../../types/api/community';
+import { textareaStyle, textareaWrapStyle, wrapStyle } from './style.css';
+
+type Props = {
+  postId: number;
+  refetchCommunityPost: () => Promise<QueryObserverResult<LongProblemPost[], unknown>>;
+};
+
+const CommentInput = ({ postId, refetchCommunityPost }: Props) => {
+  const { mutate: addComment } = useMutation(communityApiWrapper.addComment, {
+    onSuccess: () => refetchCommunityPost(),
+  });
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formElement = e.target as HTMLFormElement;
+        const data = new FormData(formElement);
+        const content = data.get('comment-input')?.toString();
+        if (!content) return;
+        addComment({ postId: postId, content });
+        formElement.reset();
+      }}
+    >
+      <div className={wrapStyle}>
+        <div className={textareaWrapStyle}>
+          <textarea className={textareaStyle} id='comment-input' name='comment-input' />
+        </div>
+        <TextButton theme='primary' size='xsmall' type='submit'>
+          제출하기
+        </TextButton>
+      </div>
+    </form>
+  );
+};
+export default CommentInput;

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/CommentInput/style.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+import { themeColors } from '../../../../../styles/theme.css';
+
+export const wrapStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '1rem',
+  marginTop: '1rem',
+});
+
+export const textareaWrapStyle = style({
+  flex: 1,
+  padding: '0.5rem',
+  border: `1px solid ${themeColors.line.d}`,
+  borderRadius: '4px',
+});
+
+export const textareaStyle = style({
+  width: '100%',
+  fontSize: '1rem',
+  fontWeight: 400,
+  lineHeight: '1.25rem',
+});

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/DescriptionBox/index.tsx

@@ -0,0 +1,94 @@
+import Box from '../Box';
+import IconButton from '../IconButton';
+import { ReactComponent as StarIcon } from '../../../../../assets/icons/star.svg';
+import { ReactComponent as ThumbUpIcon } from '../../../../../assets/icons/thumb_up.svg';
+import { COLOR } from '../../../../../constants/color';
+import { buttonWrap, descriptionWrap, topWrap, wrap } from './style.css';
+import { QueryObserverResult, useMutation } from 'react-query';
+import { problemApiWrapper } from '../../../../../api/wrapper/problem/problemApiWrapper';
+import { ILongProblemDetailResponseData } from '../../../../../types/api/problem';
+import { communityApiWrapper } from '../../../../../api/wrapper/community/communityApiWrapper';
+import PostInput from '../PostInput';
+import { LongProblemPost } from '../../../../../types/api/community';
+import { getUserInfo } from 'auth/utils/userInfo';
+
+type Props = {
+  id: string;
+  description: string;
+  isLiked: boolean;
+  likeCount: number;
+  isBookmarked: boolean;
+  bookmarkCount: number;
+  refetchProblemDetail: () => Promise<QueryObserverResult<ILongProblemDetailResponseData, unknown>>;
+  refetchCommunityPost: () => Promise<QueryObserverResult<LongProblemPost[], unknown>>;
+};
+
+const DescriptionBox = ({
+  id,
+  description,
+  isLiked,
+  likeCount,
+  isBookmarked,
+  bookmarkCount,
+  refetchProblemDetail,
+  refetchCommunityPost,
+}: Props) => {
+  const isLogin = !!getUserInfo()?.id;
+  const { mutate: likeProblem } = useMutation(
+    ['likeProblem', id],
+    () => problemApiWrapper.likeProblem({ problemId: id }),
+    { onSuccess: () => refetchProblemDetail() },
+  );
+  const { mutate: bookmarkProblem } = useMutation(
+    ['bookmarkProblem', id],
+    () => problemApiWrapper.bookmarkProblem({ problemId: id }),
+    { onSuccess: () => refetchProblemDetail() },
+  );
+  const { mutate: addPost } = useMutation(communityApiWrapper.addPost, {
+    onSuccess: () => refetchCommunityPost(),
+  });
+
+  return (
+    <Box className={wrap}>
+      <div className={topWrap}>
+        <div>문제 설명</div>
+        <div className={buttonWrap}>
+          <IconButton
+            text={bookmarkCount.toString()}
+            onClick={() => {
+              bookmarkProblem();
+            }}
+          >
+            <StarIcon fill={isBookmarked ? COLOR.PRIMARY : COLOR.GRAY} width='2rem' height='2rem' />
+          </IconButton>
+          <IconButton
+            text={likeCount.toString()}
+            onClick={() => {
+              likeProblem();
+            }}
+          >
+            <ThumbUpIcon fill={isLiked ? COLOR.PRIMARY : COLOR.GRAY} width='2rem' height='2rem' />
+          </IconButton>
+        </div>
+      </div>
+      <div className={descriptionWrap}>{description}</div>
+      {isLogin && (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const formElement = e.target as HTMLFormElement;
+            const data = new FormData(formElement);
+            const content = data.get('post-input')?.toString();
+            if (!content) return;
+            addPost({ problemId: parseInt(id), content });
+            formElement.reset();
+          }}
+        >
+          <PostInput />
+        </form>
+      )}
+    </Box>
+  );
+};
+
+export default DescriptionBox;

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/DescriptionBox/style.css.ts

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrap = style({
+  marginTop: '24px',
+});
+
+export const topWrap = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  fontSize: '1.75rem',
+  fontWeight: 700,
+  lineHeight: '2rem',
+});
+
+export const buttonWrap = style({
+  display: 'flex',
+  gap: '8px',
+});
+
+export const descriptionWrap = style({
+  marginTop: '12px',
+  fontSize: '1.25rem',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  lineHeight: '1.5rem',
+  whiteSpace: 'pre-wrap',
+});

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/IconButton/index.tsx

@@ -0,0 +1,31 @@
+import { getUserInfo } from 'auth/utils/userInfo';
+import { MouseEvent } from 'react';
+import { toast } from 'react-toastify';
+import { iconButtonStyle } from './style.css';
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+  onClick: (e: MouseEvent) => void;
+};
+
+const IconButton = ({ children, text, onClick }: Props) => {
+  const onClickWithLoginStatus = (e: MouseEvent) => {
+    const isLogin = !!getUserInfo()?.id;
+    console.log(isLogin);
+    if (isLogin) {
+      onClick(e);
+      return;
+    }
+    toast('로그인 후 이용해주세요');
+  };
+
+  return (
+    <button type='button' onClick={onClickWithLoginStatus} className={iconButtonStyle}>
+      {children}
+      <div>{text}</div>
+    </button>
+  );
+};
+
+export default IconButton;

packages/service/src/Page/QuestionDetailPage/CommunityLong/components/IconButton/style.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+import { themeColors } from '../../../../../styles/theme.css';
+
+export const iconButtonStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: '0 4px 4px',
+  color: themeColors.text[2],
+  fontSize: '1rem',
+  fontWeight: 700,
+  lineHeight: '1.2rem',
+});