From ad943f1332c1d68edd0af593e5a1ba7bfefd3d9b Mon Sep 17 00:00:00 2001
From: leejiho9898 <84016039+leejiho9898@users.noreply.github.com>
Date: Sat, 29 Jul 2023 00:42:29 +0900
Subject: [PATCH] [CZ-536] detail qa (#111)

[CZ-536] detail qa (#111)
---
 apps/web/components/detail/Comment.tsx        |  16 ++-
 apps/web/components/detail/VoteAnalyzeBar.tsx |  25 ++++-
 apps/web/components/detail/VoteContainer.tsx  |   2 +
 apps/web/components/detail/VoteWriterBox.tsx  |  92 ++++++++++++++++++
 apps/web/public/icons/Dark-A.png              | Bin 0 -> 272 bytes
 apps/web/public/icons/Dark-B.png              | Bin 0 -> 302 bytes
 apps/web/public/icons/Light-A.png             | Bin 0 -> 255 bytes
 apps/web/public/icons/Light-B.png             | Bin 0 -> 287 bytes
 apps/web/public/icons/index.ts                |   4 +
 9 files changed, 133 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/components/detail/VoteWriterBox.tsx
 create mode 100644 apps/web/public/icons/Dark-A.png
 create mode 100644 apps/web/public/icons/Dark-B.png
 create mode 100644 apps/web/public/icons/Light-A.png
 create mode 100644 apps/web/public/icons/Light-B.png

diff --git a/apps/web/components/detail/Comment.tsx b/apps/web/components/detail/Comment.tsx
index 92e5f59d..be1066b5 100644
--- a/apps/web/components/detail/Comment.tsx
+++ b/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;
diff --git a/apps/web/components/detail/VoteAnalyzeBar.tsx b/apps/web/components/detail/VoteAnalyzeBar.tsx
index 4fe94b76..96671e80 100644
--- a/apps/web/components/detail/VoteAnalyzeBar.tsx
+++ b/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>
diff --git a/apps/web/components/detail/VoteContainer.tsx b/apps/web/components/detail/VoteContainer.tsx
index cf2bcd9d..f6c43ce6 100644
--- a/apps/web/components/detail/VoteContainer.tsx
+++ b/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}
diff --git a/apps/web/components/detail/VoteWriterBox.tsx b/apps/web/components/detail/VoteWriterBox.tsx
new file mode 100644
index 00000000..39fb85ee
--- /dev/null
+++ b/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;
diff --git a/apps/web/public/icons/Dark-A.png b/apps/web/public/icons/Dark-A.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ea822ed40b3138a25b025757d848ad923459ae4
GIT binary patch
literal 272
zcmeAS@N?(olHy`uVBq!ia0vp^20(1X!3HE14p{yHQk(@Ik;M!QI^H16xYTyqN}wQP
zage(c!@6@aFM%AEbVpxD28NCO+<y{Tf&8VOE{-7;jBjsj<aJUMaZ6mcaYKoBlzRb7
zv{qO#i??&L#Ub4@6Zd?+8Zf8j5r3di)%)v)$JYKixBA+z6EPN3&q_KNH>5F~Wthdd
zC1dSfWASTYo^#Ki$XnY{@v9|+?E=pNkb-Ts2P}&#a{Il@tW(#>hHR>FGGT^FT3-{J
rRlM*2%lH?k)m>ml!DT@LxxX9uzbsUG6c(-y@+pI-tDnm{r-UW|{BB_1

literal 0
HcmV?d00001

diff --git a/apps/web/public/icons/Dark-B.png b/apps/web/public/icons/Dark-B.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f0d028c75e9d070c9be7352f801bc74ae819072
GIT binary patch
literal 302
zcmeAS@N?(olHy`uVBq!ia0vp^20(1f!3HE>&v_LIq&N#aB8wRqbi6^BajEUJl|Vtp
z;vjb?hIQv;UIIBR>5jgR3=A9lx&I`x0{MqMT^vIy7~fvo$lGin;(BpDM__tOkC>Lr
zbU_J4-H@JXf<elO$F=tys&cy%{QsHPwl8_7H=VgSp-?9M=|4Gj_XcUkJeD1T58N7}
z#g$4|ueg$XOt?t-Kre$i(;be2-S@<_qMyq0PGs(KH)*j4s)8z4^Y7gE-ahc+zW0}|
zO=50K{Nd`Fs^j(j4<lF`SbwG0n%BR&y80g9m{M)2@cd6t*RsrCTF6Sa>n+`KwDT|H
Y|5J)ypT0l62lNhur>mdKI;Vst0EL-!761SM

literal 0
HcmV?d00001

diff --git a/apps/web/public/icons/Light-A.png b/apps/web/public/icons/Light-A.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dfce58119848f340066319fc94c3fbbfc265a1b
GIT binary patch
literal 255
zcmeAS@N?(olHy`uVBq!ia0vp^20(1X!3HE14p{yHQk(@Ik;M!QI^H16xYTyqN}wQP
zage(c!@6@aFM%AEbVpxD28NCO+<y{Tf&3|+E{-7;jBjsj<ZVz8a0omX5n;7T*`i6=
zs%fe0rb9C)=zrYb#@01Irclw#X>Dol@vvVzl^&h2nQ`g?&jLvY<AyYbvkXyN{-*ic
zc6i)9U$HTJZlAzehFOdz%o%JK+W2R9pPO`dZdGv$kO$H5ZFlU8e>e6|P;P-}hAM@b
dmiwcD-A+j?H239~XF&Hcc)I$ztaD0e0s!%VSzrJF

literal 0
HcmV?d00001

diff --git a/apps/web/public/icons/Light-B.png b/apps/web/public/icons/Light-B.png
new file mode 100644
index 0000000000000000000000000000000000000000..7dff061ae7397ecf20fe0709a72ade4eccbdbd4e
GIT binary patch
literal 287
zcmeAS@N?(olHy`uVBq!ia0vp^20(1f!3HE>&v_LIq&N#aB8wRqbi6^BajEUJl|Vtp
z;vjb?hIQv;UIIBR>5jgR3=A9lx&I`x0{L4!T^vIy7~kFq<Yh7xVZ9jM#GtaqL`5M{
zRe>?n<ACGJ*4s;F3O%dYKi_lP$+O$;{f?B*Ts!yV-=%eP7)_Wn*e>uakaXA`rg2wm
zWy$QHoEJe{<AyYbxBs_YxS`d5%R|QCPL}dM##u1cXMH-;*NWz@ohctZKPsc==!<*i
zU=3#(W-)G=`QPb#)a$7-=X-W87L$s8J@?LUHmDuO4cCrsv&>R{IpqhFTae_Jy{&hv
QfbM7TboFyt=akR{00*mUU;qFB

literal 0
HcmV?d00001

diff --git a/apps/web/public/icons/index.ts b/apps/web/public/icons/index.ts
index f70e2d6d..6ed5131a 100644
--- a/apps/web/public/icons/index.ts
+++ b/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";