Skip to content

Commit

Permalink
💄design: 공통 컴포넌트 스타일 컴포넌트 컨벤션 적용
Browse files Browse the repository at this point in the history
  • Loading branch information
@rkdcodus
rkdcodus committed Sep 14, 2024
1 parent 9a24dd6 commit 90bdf0f
Show file tree
Hide file tree
Showing 37 changed files with 1,132 additions and 1,111 deletions.
23 changes: 4 additions & 19 deletions grass-diary/src/components/Button/BackButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
`;
45 changes: 6 additions & 39 deletions grass-diary/src/components/Button/Menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
`;
56 changes: 7 additions & 49 deletions grass-diary/src/components/Button/Menus.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -29,53 +27,13 @@ const Menus = ({ children, icon }: MenusProps) => {
}, [open]);

return (
<Temp>
<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;
`;
109 changes: 19 additions & 90 deletions grass-diary/src/components/Comment/CommentDisplay.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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};
`;
10 changes: 3 additions & 7 deletions grass-diary/src/components/Comment/CommentSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 && (
Expand All @@ -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);
`;
16 changes: 3 additions & 13 deletions grass-diary/src/components/Comment/Comments.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
`;
Loading

0 comments on commit 90bdf0f

Please sign in to comment.