feat: 공통 컴포넌트 개발 및 톡픽 수정, 삭제, 신고, 요약, 댓글 api 연결

src/api/comments.ts

@@ -16,7 +16,7 @@ export const putComment = async (
 ) => {
   const { data } = await axiosInstance.put<ServerResponse>(
     END_POINT.EDIT_COMMENT(talkPickId, commentId),
-    { ...comment },
+    { content: comment },
   );
   return data;
 };

src/api/like.ts

@@ -2,16 +2,16 @@ import { END_POINT } from '@/constants/api';
 import { Id, ServerResponse } from '@/types/api';
 import { axiosInstance } from './interceptor';
 
-export const postLikeComment = async (commentId: Id) => {
+export const postLikeComment = async (talkPickId: Id, commentId: Id) => {
   const { data } = await axiosInstance.post<ServerResponse>(
-    END_POINT.LIKE_COMMENT(commentId),
+    END_POINT.LIKE_COMMENT(talkPickId, commentId),
   );
   return data;
 };
 
-export const deleteLikeComment = async (commentId: Id) => {
+export const deleteLikeComment = async (talkPickId: Id, commentId: Id) => {
   const { data } = await axiosInstance.delete<ServerResponse>(
-    END_POINT.DELETE_LIKE_COMMENT(commentId),
+    END_POINT.DELETE_LIKE_COMMENT(talkPickId, commentId),
   );
   return data;
 };

src/api/report.ts

@@ -0,0 +1,18 @@
+import { END_POINT } from '@/constants/api';
+import { Id } from '@/types/api';
+import { axiosInstance } from './interceptor';
+
+export const postCommentReport = async (
+  talkPickId: Id,
+  commentId: Id,
+  reportReason: string,
+) => {
+  const response = await axiosInstance.post(
+    END_POINT.REPORT_COMMENT(talkPickId, commentId),
+    {
+      reportType: 'COMMENT',
+      reason: reportReason,
+    },
+  );
+  return response;
+};

src/api/talk-pick.ts

@@ -2,7 +2,6 @@ import { END_POINT } from '@/constants/api';
 import { Id } from '@/types/api';
 import {
   TalkPickDetail,
-  TalkPick,
   NewTalkPick,
   TempTalkPick,
   TalkPickListItem,
@@ -19,7 +18,10 @@ export const getTalkPickDetail = async (talkPickId: Id) => {
   return data;
 };
 
-export const putTalkPick = async (talkPickId: Id, talkPickData: TalkPick) => {
+export const putTalkPick = async (
+  talkPickId: Id,
+  talkPickData: NewTalkPick,
+) => {
   const response = await axiosInstance.put(
     END_POINT.TALKPICK(talkPickId),
     talkPickData,
@@ -78,3 +80,10 @@ export const getTalkPickList = async (pageable: Pageable) => {
   );
   return data;
 };
+
+export const postTalkPickSummary = async (talkPickId: Id) => {
+  const response = await axiosInstance.post(
+    END_POINT.TALKPICK_SUMMARY(talkPickId),
+  );
+  return response;
+};

src/assets/index.ts

@@ -64,6 +64,10 @@ export { default as EelProfile } from './images/eel-profile.png';
 export { default as TurtleProfile } from './images/turtle-profile.png';
 export { default as OctopusProfile } from './images/octopus-profile.png';
 export { default as JellyfishProfile } from './images/jellyfish-profile.png';
+export { default as ChoicePlus } from './svg/choice-plus.svg';
+export { default as ChoiceMinus } from './svg/choice-minus.svg';
+export { default as RecommendFirst } from './images/recommend-first.png';
+export { default as RecommendSecond } from './images/recommend-second.png';
 
 // TODO: 이전 SVG
 export { default as Email } from './svg/email.svg';

src/components/atoms/ChoiceInputButton/ChoiceInputButton.style.ts

@@ -0,0 +1,48 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const choiceInputContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '578px',
+  backgroundColor: color.GY[3],
+  borderRadius: '20px',
+  border: `1px solid ${color.GY[2]}`,
+});
+
+export const choiceInputWithText = (withText: boolean, option: 'A' | 'B') => {
+  if (!withText) {
+    return css({});
+  }
+
+  const style = {
+    A: css({
+      border: `1px solid ${color.RED}`,
+      backgroundColor: color.WT,
+    }),
+    B: css({
+      border: `1px solid ${color.BLUE}`,
+      backgroundColor: color.WT,
+    }),
+  };
+
+  return style[option];
+};
+
+export const choiceInputWrapper = css({
+  display: 'flex',
+  justifyContents: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: '20px',
+  gap: '17px',
+});
+
+export const choiceInputStyling = css(typo.Main.Medium, {
+  width: '100%',
+  height: '34px',
+  paddingLeft: '10px',
+  color: color.BK,
+});

src/components/atoms/ChoiceInputButton/ChoiceInputButton.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { ComponentPropsWithoutRef, useEffect, useState } from 'react';
+import { ChoiceMinus, ChoicePlus } from '@/assets';
+import Divider from '../Divider/Divider';
+import * as S from './ChoiceInputButton.style';
+
+export interface ChoiceInputBoxProps {
+  option: 'A' | 'B';
+  choiceInputProps?: ComponentPropsWithoutRef<'input'>;
+  infoInputProps?: ComponentPropsWithoutRef<'input'>;
+}
+
+const ChoiceInputButton = ({
+  option = 'A',
+  choiceInputProps,
+  infoInputProps,
+}: ChoiceInputBoxProps) => {
+  const [infoInputClicked, setInfoButtonClicked] = useState<boolean>(false);
+  const [withText, setWithText] = useState<boolean>(false);
+
+  const [choiceInputValue, setChoiceInputValue] = useState<string>('');
+  const [infoInputValue, setInfoInputValue] = useState<string>('');
+
+  useEffect(() => {
+    if (choiceInputValue.trim() || infoInputValue.trim()) {
+      setWithText(true);
+    } else {
+      setWithText(false);
+    }
+  }, [choiceInputValue, infoInputValue]);
+
+  return (
+    <div
+      css={[
+        S.choiceInputContainer,
+        withText && S.choiceInputWithText(withText, option),
+      ]}
+    >
+      <div css={S.choiceInputWrapper}>
+        <input
+          type="text"
+          placeholder={`${option} 선택지를 입력하세요.`}
+          maxLength={30}
+          css={S.choiceInputStyling}
+          onChange={(e) => setChoiceInputValue(e.target.value)}
+          {...choiceInputProps}
+        />
+        {!infoInputClicked && (
+          <button type="button" onClick={() => setInfoButtonClicked(true)}>
+            <ChoicePlus />
+          </button>
+        )}
+      </div>
+      {infoInputClicked && (
+        <>
+          <Divider orientation="width" length={534} />
+          <div css={S.choiceInputWrapper}>
+            <input
+              type="text"
+              placeholder="해당 선택지에 대해 추가로 설명을 입력할 수 있어요!"
+              maxLength={50}
+              css={S.choiceInputStyling}
+              onChange={(e) => setInfoInputValue(e.target.value)}
+              {...infoInputProps}
+            />
+            <button
+              type="button"
+              onClick={() => {
+                setInfoButtonClicked(false);
+                setInfoInputValue('');
+              }}
+            >
+              <ChoiceMinus />
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ChoiceInputButton;

src/components/atoms/CitationBox/CitationBox.tsx

@@ -1,13 +1,13 @@
 import React, { forwardRef } from 'react';
-import type { ForwardedRef } from 'react';
+import type { ComponentPropsWithRef, ForwardedRef } from 'react';
 import * as S from './CitationBox.style';
 
-interface CitationBoxProps {
+interface CitationBoxProps extends ComponentPropsWithRef<'input'> {
   setSourceUrl: (url: string) => void;
 }
 
 const CitationBox = (
-  { setSourceUrl }: CitationBoxProps,
+  { setSourceUrl, ...props }: CitationBoxProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) => {
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -22,6 +22,7 @@ const CitationBox = (
         type="text"
         ref={ref}
         onChange={handleInputChange}
+        {...props}
       />
     </div>
   );

src/components/atoms/CommentProfile/CommentProfile.style.ts

@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
 import color from '@/styles/color';
 
-export const containerStyle = (stance: 'pros' | 'cons') => css`
+export const containerStyle = (stance: 'A' | 'B') => css`
   display: inline-flex;
   padding: 5px;
   align-items: center;
   gap: 10px;
   border-radius: 50px 50px 0 50px;
-  background: ${stance === 'pros' ? color.RED : color.BLUE};
+  background: ${stance === 'A' ? color.RED : color.BLUE};
 `;
 
 export const profileWrapper = css({

src/components/atoms/CommentProfile/CommentProfile.tsx

@@ -6,12 +6,12 @@ import {
 } from './CommentProfile.style';
 
 export interface CommentProfileProps {
-  stance: 'pros' | 'cons';
+  option: 'A' | 'B';
   imgUrl?: string;
 }
 
-const CommentProfile = ({ stance, imgUrl }: CommentProfileProps) => (
-  <div css={[containerStyle(stance)]}>
+const CommentProfile = ({ option, imgUrl }: CommentProfileProps) => (
+  <div css={[containerStyle(option)]}>
     <div css={profileWrapper}>
       <img css={profileImage} src={imgUrl} alt="profile" />
     </div>

src/components/atoms/GameRecommendButton/GameRecommendButton.style.ts

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const gameRecommendStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '230px',
+  gap: '10px',
+  cursor: 'pointer',
+});
+
+export const gameImgContainer = css({
+  display: 'flex',
+  width: '100%',
+  height: '116px',
+  borderRadius: '5px',
+  overflow: 'hidden',
+});
+
+export const gameImgWrapper = css({
+  flex: '1',
+});
+
+export const gameImgStyling = css({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});
+
+export const gameTitleStyling = css(typo.Comment.Regular, {
+  width: '100%',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  color: color.BK,
+});

src/components/atoms/GameRecommendButton/GameRecommendButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import * as S from './GameRecommendButton.style';
+
+export type GameRecommend = {
+  title: string;
+  optionAImg: string;
+  optionBImg: string;
+};
+
+export interface GameRecommendButtonProps {
+  game: GameRecommend;
+}
+
+const GameRecommendButton = ({ game }: GameRecommendButtonProps) => (
+  <div css={S.gameRecommendStyling}>
+    <div css={S.gameImgContainer}>
+      <div css={S.gameImgWrapper}>
+        <img src={game.optionAImg} alt="A Img" css={S.gameImgStyling} />
+      </div>
+      <div css={S.gameImgWrapper}>
+        <img src={game.optionBImg} alt="B Img" css={S.gameImgStyling} />
+      </div>
+    </div>
+    <div css={S.gameTitleStyling}>{game.title}</div>
+  </div>
+);
+
+export default GameRecommendButton;

src/components/atoms/GameStageBar/GameStageBar.style.ts

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+
+export const stageBarContainer = css({
+  display: 'flex',
+  gap: '8px',
+});
+
+export const stageBarStyling = css({
+  width: '34px',
+  height: '7px',
+  borderRadius: '20px',
+});
+
+export const getStageBarColor = (currentStage: boolean) => {
+  if (currentStage) {
+    return css({
+      backgroundColor: color.MAIN,
+    });
+  }
+  return css({
+    backgroundColor: color.GY[3],
+  });
+};