darass-team · zereight · Jul 29, 2021 · Jul 29, 2021 · Jul 29, 2021 · Jul 29, 2021
diff --git a/frontend/reply-module/.storybook/preview.js b/frontend/reply-module/.storybook/preview.js
@@ -2,6 +2,10 @@ import { configure, addDecorator } from "@storybook/react";
 import GlobalStyles from "../src/styles/GlobalStyles";
 import "./preview.css";
 
+const modalRoot = document.createElement("div");
+modalRoot.setAttribute("id", "modal-root");
+document.querySelector("body").appendChild(modalRoot);
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   layout: "centered",

diff --git a/frontend/reply-module/public/index.html b/frontend/reply-module/public/index.html
@@ -10,5 +10,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
   </body>
 </html>
diff --git a/frontend/reply-module/src/components/atoms/Avatar/index.tsx b/frontend/reply-module/src/components/atoms/Avatar/index.tsx
@@ -13,7 +13,13 @@ export interface Props {
 
 const Avatar = ({ imageURL, size = "MD", onClick, alt }: Props) => {
   return (
-    <Container src={imageURL || defaultUserImage} size={size} onClick={onClick} alt={alt} data-testid="avatar-img" />
+    <Container
+      src={imageURL ? (imageURL === "guestProfileImageUrl" ? defaultUserImage : imageURL) : defaultUserImage}
+      size={size}
+      onClick={onClick}
+      alt={alt}
+      data-testid="avatar-img"
+    />
   );
 };
 

diff --git a/...Buttons/LikeButton/LikeButton.stories.tsx → .../LikingUsersButton/LikeButton.stories.tsx b/...Buttons/LikeButton/LikeButton.stories.tsx → .../LikingUsersButton/LikeButton.stories.tsx
@@ -1,13 +1,13 @@
 import { Story } from "@storybook/react";
-import LikeButton, { Props } from ".";
+import LikingUsersButton, { Props } from ".";
 
 export default {
-  title: "atoms/LikeButton",
-  component: LikeButton,
+  title: "atoms/LikingUsersButton",
+  component: LikingUsersButton,
   argTypes: { children: { control: "text" } }
 };
 
-const Template: Story<Props> = args => <LikeButton {...args} />;
+const Template: Story<Props> = args => <LikingUsersButton {...args} />;
 
 export const Default = Template.bind({});
 

diff --git a/...onents/atoms/Buttons/LikeButton/index.tsx → ...atoms/Buttons/LikingUsersButton/index.tsx b/...onents/atoms/Buttons/LikeButton/index.tsx → ...atoms/Buttons/LikingUsersButton/index.tsx
@@ -6,7 +6,7 @@ export interface Props {
   onClick: () => void;
 }
 
-const LikeButton = ({ className, numOfLikes, isLiked, onClick }: Props) => {
+const LikingUsersButton = ({ className, numOfLikes, isLiked, onClick }: Props) => {
   return (
     <Button className={className} onClick={onClick} isLiked={isLiked}>
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -21,4 +21,4 @@ const LikeButton = ({ className, numOfLikes, isLiked, onClick }: Props) => {
   );
 };
 
-export default LikeButton;
+export default LikingUsersButton;
diff --git a/...onents/atoms/Buttons/LikeButton/styles.ts → ...atoms/Buttons/LikingUsersButton/styles.ts b/...onents/atoms/Buttons/LikeButton/styles.ts → ...atoms/Buttons/LikingUsersButton/styles.ts
diff --git a/frontend/reply-module/src/components/atoms/Modal/Modal.stories.tsx b/frontend/reply-module/src/components/atoms/Modal/Modal.stories.tsx
@@ -0,0 +1,18 @@
+import { Story } from "@storybook/react";
+import Modal, { Props } from ".";
+
+export default {
+  title: "atoms/Modal",
+  component: Modal,
+  argTypes: { children: { control: "text" } }
+};
+
+const Template: Story<Props> = args => <Modal {...args}>모달입니다.</Modal>;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  onCloseModal: () => {
+    console.log("Dimmed click");
+  }
+};
diff --git a/frontend/reply-module/src/components/atoms/Modal/index.tsx b/frontend/reply-module/src/components/atoms/Modal/index.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import ReactDOM from "react-dom";
+import { Container, Dimmed } from "./styles";
+
+export interface Props {
+  children: ReactNode;
+  onCloseModal: () => void;
+}
+
+const $modalRoot = document.getElementById("modal-root");
+
+const Modal = ({ children, onCloseModal }: Props) => {
+  if (!$modalRoot) return null;
+
+  return ReactDOM.createPortal(
+    <>
+      <Dimmed onClick={onCloseModal}></Dimmed>
+      <Container>{children}</Container>
+    </>,
+    $modalRoot
+  );
+};
+
+export default Modal;
diff --git a/frontend/reply-module/src/components/atoms/Modal/styles.ts b/frontend/reply-module/src/components/atoms/Modal/styles.ts
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { PALETTE } from "../../../styles/palette";
+
+export const Dimmed = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+export const Container = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 3rem 2rem;
+  background-color: ${PALETTE.WHITE};
+  border-radius: 10px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px;
+`;
diff --git a/frontend/reply-module/src/components/molecules/Comment/index.tsx b/frontend/reply-module/src/components/molecules/Comment/index.tsx
@@ -8,8 +8,10 @@ import { postScrollHeightToParentWindow } from "../../../utils/iframePostMessage
 import { getTimeDifference } from "../../../utils/time";
 import Avatar from "../../atoms/Avatar";
 import CommentTextBox from "../../atoms/CommentTextBox";
+import LikingUsersModal from "../LikingUsersModal";
 import {
   Button,
+  LikeButton,
   CancelButton,
   CommentBottomWrapper,
   CommentOption,
@@ -18,7 +20,7 @@ import {
   Container,
   PasswordForm,
   PasswordInput,
-  LikeButton,
+  LikingUsersButton,
   Time
 } from "./styles";
 
@@ -35,13 +37,14 @@ type SubmitType = "Edit" | "Delete";
 
 const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, thisCommentIsMine }: Props) => {
   const [isEditing, setEditing] = useState(false);
+  const [isLikingUsersModalOpen, setLikingUsersModalOpen] = useState(false);
   const [isPasswordSubmitted, setPasswordSubmitted] = useState(false);
   const [shouldShowPasswordInput, setShouldShowPasswordInput] = useState(false);
   const [submitType, setSubmitType] = useState<SubmitType | null>();
   const { value: password, setValue: setPassword, onChange: onChangePassword } = useInput("");
   const { editComment } = useEditComment();
   const { deleteComment } = useDeleteComment();
-  const { likeComment, error } = useLikeComment();
+  const { likeComment } = useLikeComment();
   const { getPasswordConfirmResult } = useConfirmGuestPassword({
     guestUserId: comment.user.id,
     guestUserPassword: password
@@ -56,7 +59,7 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
     setPassword("");
   };
 
-  const canIControl = (iAmAdmin && thisCommentIsMine) || !iAmAdmin;
+  const canIEdit = (iAmAdmin && thisCommentIsMine) || !iAmAdmin;
 
   const confirmGuestPassword = async () => {
     try {
@@ -142,6 +145,14 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
     }
   };
 
+  const onLikingUsersModalOpen = () => {
+    setLikingUsersModalOpen(true);
+  };
+
+  const onLikingUsersModalClose = () => {
+    setLikingUsersModalOpen(false);
+  };
+
   useEffect(() => {
     postScrollHeightToParentWindow();
   }, [shouldShowPasswordInput]);
@@ -162,13 +173,22 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
           >
             {comment.content}
           </CommentTextBox>
-          <LikeButton numOfLikes={comment.likingUsers.length} isLiked={isLiked} onClick={onClickLikeButton} />
           <CommentBottomWrapper>
+            <LikeButton isLiked={isLiked} onClick={onClickLikeButton}>
+              좋아요
+            </LikeButton>
             <Time>{getTimeDifference(comment.createdDate)}</Time>
-            {shouldShowOption && !submitType && (
-              <CommentOption startEditing={canIControl ? startEditing : undefined} startDeleting={startDeleting} />
-            )}
           </CommentBottomWrapper>
+          {shouldShowOption && !submitType && (
+            <CommentOption startEditing={canIEdit ? startEditing : undefined} startDeleting={startDeleting} />
+          )}
+          {comment.likingUsers.length > 0 && (
+            <LikingUsersButton
+              numOfLikes={comment.likingUsers.length}
+              isLiked={isLiked}
+              onClick={onLikingUsersModalOpen}
+            />
+          )}
         </CommentTextBoxWrapper>
       </CommentWrapper>
       {shouldShowPasswordInput && shouldShowOption && (
@@ -193,6 +213,9 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
           <Button data-testid="comment-guest-password-submit-button">입력</Button>
         </PasswordForm>
       )}
+      {isLikingUsersModalOpen && (
+        <LikingUsersModal users={comment.likingUsers} onCloseModal={onLikingUsersModalClose} />
+      )}
     </Container>
   );
 };

diff --git a/frontend/reply-module/src/components/molecules/Comment/styles.ts b/frontend/reply-module/src/components/molecules/Comment/styles.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { InputCSS } from "../../../styles/css";
 import { PALETTE } from "../../../styles/palette";
-import LikeButtonComponent from "../../atoms/Buttons/LikeButton";
+import LikingUsersButtonComponent from "../../atoms/Buttons/LikingUsersButton";
 import CommentOptionComponent from "../../atoms/CommentOption";
 
 export const Container = styled.div<{ align: "left" | "right" }>`
@@ -21,7 +21,7 @@ export const CommentTextBoxWrapper = styled.div<{ align: "left" | "right" }>`
   margin: ${props => (props.align === "left" ? "0 0 0 0.6rem" : "0 0.6rem 0 0")};
 `;
 
-export const LikeButton = styled(LikeButtonComponent)`
+export const LikingUsersButton = styled(LikingUsersButtonComponent)`
   position: absolute;
   bottom: 0.5rem;
   right: -1.5rem;
@@ -33,11 +33,27 @@ export const LikeButton = styled(LikeButtonComponent)`
 
 export const CommentBottomWrapper = styled.div`
   display: flex;
-  margin-top: 0.3rem;
+  align-items: center;
+  margin: 0.3rem 1rem 0 1rem;
+
+  & > *:not(:first-child):before {
+    content: "·";
+    color: ${PALETTE.BLACK_700};
+    margin: 0 0.3rem;
+  }
+`;
+
+export const LikeButton = styled.button<{ isLiked: boolean }>`
+  background-color: transparent;
+  color: ${props => (props.isLiked ? PALETTE.BLUE_700 : PALETTE.BLACK_700)};
+
+  &:hover {
+    color: ${props => (props.isLiked ? PALETTE.BLACK_700 : PALETTE.BLUE_700)};
+  }
 `;
 
 export const Time = styled.span`
-  margin: 0 1rem;
+  font-size: 0.8rem;
 `;
 
 export const CommentOption = styled(CommentOptionComponent)`