[CZ-536] detail qa (#111)

[CZ-536] detail qa (#111)

apps/web/components/detail/Comment.tsx

@@ -61,8 +61,10 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
         <CommentInfo>
           <div>{createdDate.slice(0, 10)}</div>
           <Comma />
-          <div onClick={mutateLike}>❤️ 좋아요 {likeCount}</div> <Comma />
-          <div onClick={mutateHate}>🖤 싫어요 {hateCount}</div> <Comma />
+          <InteractionButton onClick={mutateLike}>❤️ 좋아요 {likeCount}</InteractionButton>{" "}
+          <Comma />
+          <InteractionButton onClick={mutateHate}>🖤 싫어요 {hateCount}</InteractionButton>{" "}
+          <Comma />
           <div>답글쓰기</div>
         </CommentInfo>
       </ContentsBox>
@@ -76,9 +78,7 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
           }}
         />
       </div>
-      {toggleMenu && (
-        <ModifyDeleteButtonBox isDeleteButton onDelete={onToggleWarningModal} right="20px" />
-      )}
+      {toggleMenu && <ModifyDeleteButtonBox onDelete={onToggleWarningModal} right="20px" />}
       {toggleWarningModal && (
         <CommentDeleteModal onToggleModal={onToggleWarningModal} onSubmit={mutateDeleteComment} />
       )}
@@ -162,4 +162,10 @@ const Comma = styled.div`
   `}
 `;
 
+const InteractionButton = styled.div`
+  :active {
+    transform: scale(1.15);
+  }
+`;
+
 export default Comment;

apps/web/components/detail/VoteAnalyzeBar.tsx

@@ -1,6 +1,7 @@
+import Image from "next/image";
+import { DarkAString, DarkBString, LightBString } from "public/icons";
 import React from "react";
 import styled, { css } from "styled-components";
-import { AorB } from "types/vote";
 
 interface Props {
   percentageA: number;
@@ -22,10 +23,32 @@ function VoteAnalyzeBar({ percentageA, percentageB, totalCountA, totalCountB }:
       ) : (
         <AnalyzeBar>
           <Share selected={isSelectedA} share={percentageA}>
+            {isSelectedA && (
+              <Image
+                src={DarkAString}
+                alt="A"
+                style={{
+                  width: "12px",
+                  height: "15px",
+                  marginRight: "8px",
+                }}
+              />
+            )}
             {percentageA}% &nbsp;
             <div className="number">{totalCountA.toLocaleString()}명</div>
           </Share>
           <Share selected={!isSelectedA} share={percentageB}>
+            {!isSelectedA && (
+              <Image
+                src={LightBString}
+                alt="A"
+                style={{
+                  width: "12px",
+                  height: "15px",
+                  marginRight: "8px",
+                }}
+              />
+            )}
             {percentageB}% &nbsp;
             <div className="number">{totalCountB.toLocaleString()}명</div>
           </Share>

apps/web/components/detail/VoteContainer.tsx

@@ -11,6 +11,7 @@ import DetailAB from "./DetailAB";
 import FilterBar from "./FilterBar";
 import useFilterStatistics from "./hooks/useFilterStatistics";
 import VoteAnalyzeBar from "./VoteAnalyzeBar";
+import VoteWriterBox from "./VoteWriterBox";
 
 function VoteContainer({ postId }: { postId: number }) {
   const [isModifyModal, onToggleModifyModal] = useToggle(false);
@@ -57,6 +58,7 @@ function VoteContainer({ postId }: { postId: number }) {
 
   return (
     <>
+      <VoteWriterBox writer={writer} />
       <ChipContainer
         onToggleModifyModal={onToggleModifyModal}
         onToggleModifyDeleteButtonBox={onToggleModifyDeleteButtonBox}

apps/web/components/detail/VoteWriterBox.tsx

@@ -0,0 +1,92 @@
+import Image from "next/image";
+import { PurpleMonster } from "public/images";
+import React from "react";
+import styled, { css } from "styled-components";
+
+interface Props {
+  writer: {
+    userImage: string | null;
+    userGender: string;
+    userAge: number;
+    userMbti: string;
+    nickName: null;
+  };
+}
+
+function VoteWriterBox({ writer }: Props) {
+  const { nickName, userAge, userGender, userImage, userMbti } = writer;
+  return (
+    <Container>
+      <Image
+        src={userImage || PurpleMonster}
+        alt="댓글 프로필"
+        style={{
+          width: "40px",
+          height: "40px",
+          borderRadius: "8px",
+        }}
+      />
+      <ContentsBox>
+        <Flex>
+          <TagBox>
+            {userGender}
+            <DivideTag /> {userAge}
+            <DivideTag /> {userMbti}
+          </TagBox>
+        </Flex>
+        <NickName> {nickName}</NickName>
+      </ContentsBox>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+  position: relative;
+  padding-bottom: 14px;
+`;
+
+const NickName = styled.div`
+  font-weight: 700;
+  ${({ theme }) => css`
+    color: ${theme.palette.ink.darker};
+    ${theme.textStyle.Font_Regular}
+  `}
+`;
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const DivideTag = styled.div`
+  width: 1px;
+  height: 8px;
+  margin: 0 4px;
+  ${({ theme }) => css`
+    background-color: ${theme.palette.background.selected};
+  `}
+`;
+
+const TagBox = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 3px 4px;
+  width: auto;
+  ${({ theme }) => css`
+    background-color: ${theme.palette.background.soft};
+    color: ${theme.palette.ink.base};
+    ${theme.textStyle.Font_Minimum}
+  `}
+`;
+
+const ContentsBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+`;
+
+export default VoteWriterBox;

apps/web/public/icons/index.ts

@@ -21,3 +21,7 @@ export { default as AlertIcon } from "./AlertIcon.png";
 export { default as MoreIcon } from "./MoreIcon.png";
 export { default as MyPageIcon } from "./MyPageIcon.png";
 export { default as Back } from "./Back.png";
+export { default as LightAString } from "./Light-A.png";
+export { default as DarkAString } from "./Dark-A.png";
+export { default as LightBString } from "./Light-B.png";
+export { default as DarkBString } from "./Dark-B.png";