Merge pull request #182 from rkdcodus/feat/detailStyled

✨ feat: INTERACTION 상수 생성
JECT-Study · Aug 29, 2024 · 0c614f8 · 0c614f8
2 parents 21523fa + 090a39f
commit 0c614f8
Show file tree

Hide file tree

Showing 23 changed files with 199 additions and 337 deletions.
diff --git a/grass-diary/src/components/Button/BackButton.tsx b/grass-diary/src/components/Button/BackButton.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { ReactComponent as LeftArrow } from '@svg/chevron_left.svg';
+import { INTERACTION } from '@styles/interaction';
 
 interface IBackButtonProps {
   goBackTo?: string;
@@ -18,11 +19,18 @@ const BackButton = ({ goBackTo }: IBackButtonProps) => {
     }
     navigate(-1);
   };
-  return <ArrowButton onClick={goBack} />;
+  return (
+    <ArrowButton onClick={goBack}>
+      <LeftArrow />
+    </ArrowButton>
+  );
 };
 
 export default BackButton;
 
-const ArrowButton = styled(LeftArrow)`
-  cursor: pointer;
+const ArrowButton = styled.button`
+  display: flex;
+  padding: var(--gap-4xs, 0.25rem);
+  border-radius: var(--radius-2xs, 0.25rem);
+  ${INTERACTION.default.normal()}
 `;
diff --git a/grass-diary/src/components/Button/Menu.tsx b/grass-diary/src/components/Button/Menu.tsx
@@ -1,62 +1,37 @@
 import styled from 'styled-components';
 import { semantic } from '@styles/semantic';
 import { TYPO } from '@styles/typo';
-
-import Interaction1 from '@components/Interactions/Interaction1';
-import ButtonWrapper from '@components/Button/ButtonWrapper';
-
-import { Link } from 'react-router-dom';
+import { INTERACTION } from '@styles/interaction';
 
 interface MenuProps {
   text: string;
   svg: string;
-  link?: string;
   onClick?: () => void;
   line?: number;
-  topRadius?: number;
-  bottomRadius?: number;
   color?: string;
 }
 
-const Menu = ({
-  link,
-  onClick,
-  text,
-  svg,
-  line,
-  topRadius,
-  bottomRadius,
-  color,
-}: MenuProps) => {
+const Menu = ({ onClick, text, svg, line, color }: MenuProps) => {
   return (
     <>
-      <Link to={link || ''}>
-        <ButtonWrapper>
-          <Interaction1
-            onClick={onClick}
-            topRadius={topRadius}
-            bottomRadius={bottomRadius}
-          />
-          <MenuContainer>
-            <MenuStr color={color}>{text}</MenuStr>
-            <MenuImg src={svg} alt={text} />
-          </MenuContainer>
-        </ButtonWrapper>
-      </Link>
+      <MenuContainer onClick={onClick}>
+        <MenuStr color={color}>{text}</MenuStr>
+        <MenuImg src={svg} alt={text} />
+      </MenuContainer>
       <Line height={line} />
     </>
   );
 };
 
 export default Menu;
 
-const MenuContainer = styled.div`
+const MenuContainer = styled.button`
   width: 10rem;
   display: flex;
   padding: var(--gap-md, 1rem) var(--gap-lg, 1.25rem);
   align-items: center;
   gap: var(--gap-md, 1rem);
-  align-self: stretch;
+  ${INTERACTION.default.normal()}
 `;
 
 const Line = styled.div<{ height: number | undefined }>`
@@ -69,6 +44,7 @@ const MenuStr = styled.p<{ color?: string }>`
   ${TYPO.label2};
   flex: 1 0 0;
   color: ${props => props.color || semantic.light.object.solid.normal};
+  text-align: left;
 `;
 
 const MenuImg = styled.img`

diff --git a/grass-diary/src/components/Button/Menus.tsx b/grass-diary/src/components/Button/Menus.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { semantic } from '@styles/semantic';
 import { ReactNode, useEffect, useRef, useState } from 'react';
+import { INTERACTION } from '@styles/interaction';
 
 interface MenusProps {
   children: ReactNode;
@@ -31,17 +32,31 @@ const Menus = ({ children, icon }: MenusProps) => {
   }, [open]);
 
   return (
-    <div onClick={dropDown} ref={iconRef}>
-      <Icon src={icon} />
-      <MenusContainer $toggle={open} ref={boxRef}>
-        {children}
-      </MenusContainer>
+    <div ref={iconRef}>
+      <BarBtn onClick={dropDown}>
+        <Icon src={icon} />
+        <MenusContainer $toggle={open} ref={boxRef}>
+          {children}
+        </MenusContainer>
+      </BarBtn>
     </div>
   );
 };
 
 export default Menus;
 
+const BarBtn = styled.button`
+  position: relative;
+  display: flex;
+  padding: var(--gap-4xs, 0.25rem);
+  justify-content: center;
+  align-items: center;
+  gap: var(--gap-md, 1rem);
+
+  border-radius: var(--radius-2xs, 0.25rem);
+  ${INTERACTION.default.normal()}
+`;
+
 const MenusContainer = styled.div<{ $toggle: boolean }>`
   display: flex;
   width: 10rem;
@@ -56,7 +71,9 @@ const MenusContainer = styled.div<{ $toggle: boolean }>`
     0px 2px 4px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
 
   position: absolute;
-  transform: translate(-8.25rem, 1rem);
+  top: 0;
+  right: 0;
+  transform: translateY(2.6rem);
   overflow: hidden;
   z-index: 998;
 `;

diff --git a/grass-diary/src/components/Comment/CommentSetting.tsx b/grass-diary/src/components/Comment/CommentSetting.tsx
@@ -4,13 +4,12 @@ import moreVert from '@svg/more_vert.svg';
 import editIcon from '@svg/mode_edit.svg';
 import deleteIcon from '@svg/delete_forever.svg';
 
-import Menu from '@components/Button/Menu';
-import Menus from '@components/Button/Menus';
 import { useParamsId } from '@hooks/useParamsId';
 import { useDeleteComment } from '@hooks/api/comment/useDeleteComment';
 import { useCommentActions } from '@state/comment/CommentStore';
 import { useUser } from '@state/user/useUser';
 import { useDiaryDetail } from '@hooks/api/useDiaryDetail';
+import { Menus, Menu } from '@components/index';
 
 const CommentSetting = ({ commentId, writerId }: CommentSettingProps) => {
   const diaryId = useParamsId();
@@ -26,36 +25,24 @@ const CommentSetting = ({ commentId, writerId }: CommentSettingProps) => {
       {memberId === detail?.memberId ? (
         <Menus icon={moreVert}>
           {memberId === writerId && (
-            <Menu
-              onClick={editHandler}
-              text={'댓글 수정'}
-              svg={editIcon}
-              topRadius={1}
-            />
+            <Menu onClick={editHandler} text={'댓글 수정'} svg={editIcon} />
           )}
           <Menu
             onClick={() => deleteComment(commentId)}
             text={'댓글 삭제'}
             svg={deleteIcon}
             color={semantic.light.feedback.solid.negative}
-            bottomRadius={1}
           />
         </Menus>
       ) : (
         memberId === writerId && (
           <Menus icon={moreVert}>
-            <Menu
-              onClick={editHandler}
-              text={'댓글 수정'}
-              svg={editIcon}
-              topRadius={1}
-            />
+            <Menu onClick={editHandler} text={'댓글 수정'} svg={editIcon} />
             <Menu
               onClick={() => deleteComment(commentId)}
               text={'댓글 삭제'}
               svg={deleteIcon}
               color={semantic.light.feedback.solid.negative}
-              bottomRadius={1}
             />
           </Menus>
         )

diff --git a/grass-diary/src/components/Comment/Comments.tsx b/grass-diary/src/components/Comment/Comments.tsx
@@ -11,26 +11,17 @@ const Comments = () => {
   const { data: comments } = useGetComment(diaryId);
 
   return (
-    <>
-      <CommentLable>{`댓글 ${comments?.length}`}</CommentLable>
-      <CommentContainer>
-        {comments?.map((comment: CommentResponse) => (
-          <Comment key={comment.commentId} comment={comment} />
-        ))}
-        <PostInput parentId={null} />
-      </CommentContainer>
-    </>
+    <CommentContainer>
+      {comments?.map((comment: CommentResponse) => (
+        <Comment key={comment.commentId} comment={comment} />
+      ))}
+      <PostInput parentId={null} />
+    </CommentContainer>
   );
 };
 
 export default Comments;
 
-const CommentLable = styled.div`
-  ${TYPO.label3}
-  align-self: stretch;
-  color: ${semantic.light.object.transparent.neutral};
-`;
-
 const CommentContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/grass-diary/src/components/Comment/Input.tsx b/grass-diary/src/components/Comment/Input.tsx
@@ -189,10 +189,6 @@ const InputComment = styled.div<{ $focus: boolean; $isReply: boolean }>`
   ${props =>
     props.$isReply &&
     `box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 3px 6px 0px rgba(0, 0, 0, 0.11);`}
-
-  &:hover {
-    background: rgba(59, 59, 59, 0.05);
-  }
 `;
 
 const InputWrap = styled.div`

diff --git a/grass-diary/src/components/Interactions/Interaction1.tsx b/grass-diary/src/components/Interactions/Interaction1.tsx
diff --git a/grass-diary/src/components/Interactions/Interaction2.tsx b/grass-diary/src/components/Interactions/Interaction2.tsx
diff --git a/grass-diary/src/components/Interactions/Interaction3.tsx b/grass-diary/src/components/Interactions/Interaction3.tsx