Merge pull request #198 from rkdcodus/main

♻ refactor: 수정페이지 UI 변경 및 스타일 컴포넌트 컨벤션 적용
JECT-Study · Sep 15, 2024 · 33635a9 · 33635a9
2 parents 08c5628 + daad723
commit 33635a9
Show file tree

Hide file tree

Showing 60 changed files with 2,187 additions and 5,965 deletions.
diff --git a/grass-diary/src/assets/svg/close.svg b/grass-diary/src/assets/svg/close.svg
diff --git a/grass-diary/src/components/Button/BackButton.tsx b/grass-diary/src/components/Button/BackButton.tsx
@@ -1,8 +1,5 @@
-import styled from 'styled-components';
+import * as S from '@styles/component/Button/BackButton.style';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { ReactComponent as LeftArrow } from '@svg/chevron_left.svg';
-import { INTERACTION } from '@styles/interaction';
-import { semantic } from '@styles/semantic';
 
 interface IBackButtonProps {
   goBackTo?: string;
@@ -21,22 +18,10 @@ const BackButton = ({ goBackTo }: IBackButtonProps) => {
     navigate(-1);
   };
   return (
-    <ArrowButton onClick={goBack}>
-      <ArrowIcon width={24} height={24} />
-    </ArrowButton>
+    <S.ArrowButton onClick={goBack}>
+      <S.ArrowIcon width={24} height={24} />
+    </S.ArrowButton>
   );
 };
 
 export default BackButton;
-
-const ArrowButton = styled.button`
-  display: flex;
-  padding: var(--gap-4xs, 0.25rem);
-  border-radius: var(--radius-2xs, 0.25rem);
-  ${INTERACTION.default.normal()}
-`;
-
-const ArrowIcon = styled(LeftArrow)`
-  fill: ${semantic.light.object.transparent.neutral};
-  cursor: pointer;
-`;
diff --git a/grass-diary/src/components/Button/Menu.tsx b/grass-diary/src/components/Button/Menu.tsx
@@ -1,7 +1,4 @@
-import styled from 'styled-components';
-import { semantic } from '@styles/semantic';
-import { TYPO } from '@styles/typo';
-import { INTERACTION } from '@styles/interaction';
+import * as S from '@styles/component/Button/Menu.style';
 
 interface MenuProps {
   text: string;
@@ -14,43 +11,13 @@ interface MenuProps {
 const Menu = ({ onClick, text, svg, line, color }: MenuProps) => {
   return (
     <>
-      <MenuContainer onClick={onClick}>
-        <MenuStr color={color}>{text}</MenuStr>
-        <MenuImg src={svg} alt={text} />
-      </MenuContainer>
-      <Line height={line} />
+      <S.MenuBox onClick={onClick}>
+        <S.MenuText color={color}>{text}</S.MenuText>
+        <S.MenuIcon src={svg} alt={text} />
+      </S.MenuBox>
+      <S.LineBox height={line} />
     </>
   );
 };
 
 export default Menu;
-
-const MenuContainer = styled.div`
-  width: 10rem;
-  display: flex;
-  padding: var(--gap-md, 1rem) var(--gap-lg, 1.25rem);
-  align-items: center;
-  gap: var(--gap-md, 1rem);
-  ${INTERACTION.default.normal()}
-`;
-
-const Line = styled.div<{ height: number | undefined }>`
-  height: ${props => props.height || 0.0625}rem;
-  align-self: stretch;
-  background: ${semantic.light.border.transparent.assistive};
-`;
-
-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`
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  width: 1.125rem;
-  height: 1.125rem;
-`;
diff --git a/grass-diary/src/components/Button/Menus.tsx b/grass-diary/src/components/Button/Menus.tsx
@@ -1,7 +1,5 @@
-import styled from 'styled-components';
-import { semantic } from '@styles/semantic';
+import * as S from '@styles/component/Button/Menus.style';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import { INTERACTION } from '@styles/interaction';
 
 interface MenusProps {
   children: ReactNode;
@@ -12,12 +10,11 @@ const Menus = ({ children, icon }: MenusProps) => {
   const [open, setOpen] = useState(false);
   const iconRef = useRef<HTMLImageElement>(null);
 
-  const handleClickSetting = (event: React.MouseEvent) => {
+  const dropDown = (event: React.MouseEvent) => {
     event.stopPropagation();
+    setOpen(current => !current);
   };
 
-  const dropDown = () => setOpen(current => !current);
-
   useEffect(() => {
     const closeMenus = (event: MouseEvent) => {
       if (open && iconRef.current) {
@@ -33,55 +30,13 @@ const Menus = ({ children, icon }: MenusProps) => {
   }, [open]);
 
   return (
-    <Temp onClick={handleClickSetting}>
-      <BarBtn onClick={dropDown}>
-        <Icon src={icon} ref={iconRef} />
-      </BarBtn>
-      <MenusContainer $toggle={open}>{children}</MenusContainer>
-    </Temp>
+    <S.MenusWrapper>
+      <S.MenuButton onClick={dropDown}>
+        <S.Icon src={icon} ref={iconRef} />
+      </S.MenuButton>
+      <S.MenusNav $toggle={open}>{children}</S.MenusNav>
+    </S.MenusWrapper>
   );
 };
 
 export default Menus;
-
-const Temp = styled.div`
-  position: relative;
-`;
-
-const BarBtn = styled.button`
-  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;
-  height: ${props => (props.$toggle ? 'auto' : '0rem')};
-  flex-direction: column;
-  align-items: flex-start;
-
-  border-radius: var(--radius-md, 1rem);
-  background: ${semantic.light.bg.solid.normal};
-
-  box-shadow:
-    0px 0px 2px 0px rgba(0, 0, 0, 0.06),
-    0px 2px 4px 0px rgba(0, 0, 0, 0.06),
-    0px 4px 8px 0px rgba(0, 0, 0, 0.13);
-
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translateY(2.6rem);
-  overflow: hidden;
-  z-index: 998;
-`;
-
-const Icon = styled.img`
-  cursor: pointer;
-`;
diff --git a/grass-diary/src/components/Comment/CommentDisplay.tsx b/grass-diary/src/components/Comment/CommentDisplay.tsx
@@ -1,6 +1,4 @@
-import styled from 'styled-components';
-import { semantic } from '@styles/semantic';
-import { TYPO } from '@styles/typo';
+import * as S from '@styles/component/Comment/CommentDisplay.style';
 import { useEffect, useRef, useState } from 'react';
 import { useWriterProfile } from '@hooks/api/useWriterProfile';
 import { useCommentActions } from '@state/comment/CommentStore';
@@ -38,110 +36,41 @@ const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => {
   }, [date, comment.createdDate]);
 
   return comment.deleted ? (
-    <CommentWrap $isMe={memberId === comment.memberId}>
-      <WriterWrap>
+    <S.CommentItem $isMe={memberId === comment.memberId}>
+      <S.WriterBox>
         {comment.depth ? <ReplyIcon /> : null}
-        <DeletedContent>{COMMENT.deleted}</DeletedContent>
-      </WriterWrap>
-    </CommentWrap>
+        <S.DeletedText>{COMMENT.deleted}</S.DeletedText>
+      </S.WriterBox>
+    </S.CommentItem>
   ) : (
-    <CommentWrap onClick={reply} $isMe={memberId === comment.memberId}>
-      <CommentTop>
-        <WriterWrap>
+    <S.CommentItem onClick={reply} $isMe={memberId === comment.memberId}>
+      <S.TopBox>
+        <S.WriterBox>
           {comment.depth ? <ReplyIcon /> : null}
-          <WriterProfile src={writer?.profileImageURL} />
-          <WriterName $isMe={memberId === comment.memberId}>
+          <S.ProfileImage src={writer?.profileImageURL} />
+          <S.NameText $isMe={memberId === comment.memberId}>
             {writer?.nickname}
-          </WriterName>
-          <CreateTime>
+          </S.NameText>
+          <S.TimeText>
             {isToday
               ? comment.createdAt
               : comment.createdDate
               ? `20${comment.createdDate}`
               : ''}
-          </CreateTime>
-        </WriterWrap>
+          </S.TimeText>
+        </S.WriterBox>
         <div ref={setting}>
           <CommentSetting
             commentId={comment.commentId}
             writerId={comment.memberId}
           />
         </div>
-      </CommentTop>
-      <CommentContent $isReply={comment.depth ? true : false}>
+      </S.TopBox>
+      <S.ContentBox $isReply={comment.depth ? true : false}>
         {comment.content}
-      </CommentContent>
-    </CommentWrap>
+      </S.ContentBox>
+    </S.CommentItem>
   );
 };
 
 export default CommentDisplay;
-
-const CommentWrap = styled.div<{ $isMe: boolean }>`
-  display: flex;
-  padding: var(--gap-sm, 0.75rem) var(--gap-md, 1rem);
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--gap-sm, 0.75rem);
-  align-self: stretch;
-
-  border-radius: var(--radius-sm, 0.75rem);
-  border: ${props =>
-    props.$isMe
-      ? 'none'
-      : `var(--stroke-thin, 1px) solid
-    ${semantic.light.border.transparent.assistive}`};
-
-  background: ${props =>
-    props.$isMe ? semantic.light.fill.transparent.assistive : 'none'};
-`;
-
-const CommentTop = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--gap-md, 1rem);
-  align-self: stretch;
-`;
-
-const WriterWrap = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--gap-2xs, 0.5rem);
-  flex: 1 0 0;
-`;
-
-const WriterProfile = styled.img`
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  border-radius: var(--radius-empty, 1.5rem);
-  object-fit: cover;
-  background: ${semantic.light.fill.transparent.alternative};
-`;
-
-const WriterName = styled.p<{ $isMe: boolean }>`
-  ${TYPO.label2}
-  color: ${props =>
-    props.$isMe
-      ? semantic.light.accent.solid.hero
-      : semantic.light.object.solid.normal};
-`;
-
-const CreateTime = styled.p`
-  ${TYPO.caption1}
-  color: ${semantic.light.object.transparent.assistive};
-`;
-
-const CommentContent = styled.div<{
-  $isReply?: boolean;
-}>`
-  ${TYPO.body1}
-  ${props => props.$isReply && `padding-left: var(--gap-2xl, 2rem);`}
-  color: ${semantic.light.object.solid.normal};
-  white-space: pre;
-`;
-
-const DeletedContent = styled.p`
-  ${TYPO.body1}
-  color: ${semantic.light.object.transparent.alternative};
-`;
diff --git a/grass-diary/src/components/Comment/CommentSetting.tsx b/grass-diary/src/components/Comment/CommentSetting.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import * as S from '@styles/component/Comment/CommentSetting.style';
 import { semantic } from '@styles/semantic';
 import moreVert from '@svg/more_vert.svg';
 import editIcon from '@svg/mode_edit.svg';
@@ -21,7 +21,7 @@ const CommentSetting = ({ commentId, writerId }: CommentSettingProps) => {
   const editHandler = () => setEditId(commentId);
 
   return (
-    <SettingWrap>
+    <S.SettingBox>
       {memberId === detail?.memberId ? (
         <Menus icon={moreVert}>
           {memberId === writerId && (
@@ -47,12 +47,8 @@ const CommentSetting = ({ commentId, writerId }: CommentSettingProps) => {
           </Menus>
         )
       )}
-    </SettingWrap>
+    </S.SettingBox>
   );
 };
 
 export default CommentSetting;
-
-const SettingWrap = styled.div`
-  padding: var(--gap-4xs, 0.25rem);
-`;
diff --git a/grass-diary/src/components/Comment/Comments.tsx b/grass-diary/src/components/Comment/Comments.tsx
@@ -1,6 +1,4 @@
-import styled from 'styled-components';
-import { semantic } from '@styles/semantic';
-import { TYPO } from '@styles/typo';
+import * as S from '@styles/component/Comment/Comments.style';
 import { useParamsId } from '@hooks/useParamsId';
 import { useGetComment } from '@hooks/api/comment/useGetComment';
 import { PostInput } from './Input';
@@ -11,21 +9,13 @@ const Comments = () => {
   const { data: comments } = useGetComment(diaryId);
 
   return (
-    <CommentContainer>
+    <S.CommentList>
       {comments?.map((comment: CommentResponse) => (
         <Comment key={comment.commentId} comment={comment} />
       ))}
       <PostInput parentId={null} />
-    </CommentContainer>
+    </S.CommentList>
   );
 };
 
 export default Comments;
-
-const CommentContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--gap-xs, 0.625rem);
-  align-self: stretch;
-`;