Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] 버튼 컴포넌트 에러 / 로직 수정 & 새 버튼 구현 #58

Merged
merged 16 commits into from
Jul 8, 2024
Merged

[FIX] 버튼 컴포넌트 에러 / 로직 수정 & 새 버튼 구현 #58

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d37f8c6
fix: 폴더명 수정
jeeminyi Jul 8, 2024
b906972
fix: 활성화 로직 처리
jeeminyi Jul 8, 2024
56668b6
fix: text button theme 파일 분리
jeeminyi Jul 8, 2024
c75ccae
fix: theme 에러수정
jeeminyi Jul 8, 2024
323fe3f
feat: 진행중 버튼 구현
jeeminyi Jul 8, 2024
0595267
feat: hover bar 버튼 구현
jeeminyi Jul 8, 2024
775614d
chore: 주석 제거
jeeminyi Jul 8, 2024
933143d
fix: hover & pressed 분기처리
jeeminyi Jul 8, 2024
b1d4f7f
chore: 불필요한 부분 삭제
jeeminyi Jul 8, 2024
e973467
chore: 불필요한 부분 삭제
jeeminyi Jul 8, 2024
4560969
feat: 추가된 컴포넌트 구현
jeeminyi Jul 8, 2024
b19d517
chore: 불필요한 코드 삭제
jeeminyi Jul 8, 2024
a7c72b4
fix: rem 값 수정
jeeminyi Jul 8, 2024
f94de9e
chore: 눈코딩
jeeminyi Jul 8, 2024
cb382a2
fix: 폴더 구조 변경
jeeminyi Jul 8, 2024
26e6a8b
fix: pressed 시 텍스트 컬러 수정
jeeminyi Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@emotion/styled": "^11.11.5",
"@svgr/cli": "^8.1.0",
"react": "^18.3.1",
"react-datepicker": "^7.2.0",
"react-dom": "^18.3.1",
"react-router-dom": "^6.24.1",
"vite-plugin-svgr": "^4.2.0"
Expand Down
3 changes: 3 additions & 0 deletions src/assets/svg/SettingCheck1Icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/svg/SettingCheck4Icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions src/assets/svg/icn_nav_calendar.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 7 additions & 3 deletions src/assets/svg/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react';
import SettingCheck1 from '@/assets/svg/SettingCheck1.svg?react';
import SettingCheck2 from '@/assets/svg/SettingCheck2Icon.svg?react';
import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react';
import SettingCheck4 from '@/assets/svg/SettingCheck4Icon.svg?react';
import SettingProgress from '@/assets/svg/SettingProgressIcon.svg?react';
import SettingX from '@/assets/svg/SettingXIcon.svg?react';
import IcnXCricle from '@/assets/svg/x-circle.svg?react';
Expand Down Expand Up @@ -52,9 +53,12 @@ const Icons = {
UnselectedBox,
PlusArrow,
DeleteIcon,
SettingCheck1,
SettingCheck2,
SettingCheck3,
SettingIcons: {
SettingCheck1,
SettingCheck2,
SettingCheck3,
SettingCheck4,
},
SettingX,
SettingProgress,
DoneIcon,
Expand Down
33 changes: 33 additions & 0 deletions src/components/common/button/CancelWhiteBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';

import Icons from '@/assets/svg/index';

function DeleteBtn() {
return (
<DeleteBtnLayout>
<StlyedDeleteIcon />
</DeleteBtnLayout>
);
}

export default DeleteBtn;

const DeleteBtnCss = css`
display: flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;

border-radius: 10px;
`;

const DeleteBtnLayout = styled.button`
${DeleteBtnCss}
`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DeleteBtnLayout은 ${DeleteBtnCss} 를 받는 역할만 하고 있어서 css 분리할 필요 없이 DeleteBtnLayout 안에 스타일 코드 넣어줘도 괜찮을 것 같습니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드리뷰 반영해두었습니다!! 매번 꼼꼼한 리뷰 달아주셔서 감사합니다 ㅎㅎ


const StlyedDeleteIcon = styled(Icons.DeleteIcon)`
width: 1.8rem;
height: 1.8rem;
`;
51 changes: 30 additions & 21 deletions src/components/common/button/Check1Btn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
import styled from '@emotion/styled';
import { css } from '@emotion/react';
import styled from '@emotion/styled';

import Icons from '@/assets/svg/index';

interface Check1 {
interface Check1Props {
type: 'setting' | 'done';
isHover: boolean;
isPressed: boolean;
}

const Check1Btn = ({ type }: Check1) => {
function Check1Btn({ type, isHover, isPressed }: Check1Props) {
return (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hover나 active의 상황도 props로 받는 과정으로 수정하셨군요! 혹시 해당 내용을 props로 받아서 관리해야 하는지 궁금합니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네! 호버가 되지 않는 경우도 있어서 다 따로 분리하였습니다!
스타일 적용이 되어야 할 때는 ishover/isPressed로 두시고, 적용이 되면 안될 때는 isHover={false} isPressed={false}로 두시면 됩니다!!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 이게 그 같은 버튼이라도 호버가 될 때가 있고 아닐때도 있다는 부분이었군요..! 까다로운 처리였을텐데 너무나 대단하십니당

<>
<div>
{type === 'setting' ? (
<SettingCheck1Layout>
<SettingCheck1Layout isHover={isHover} isPressed={isPressed}>
<StlyedSettingCheck1Ic />
</SettingCheck1Layout>
) : (
<DoneLayout>
<StlyedDoneIc />
</DoneLayout>
)}
</>
</div>
);
};
}

export default Check1Btn;

Expand All @@ -30,28 +32,35 @@ const alignCenterStyle = css`
align-items: center;
justify-content: center;
`;
const SettingCheck1Layout = styled.button`
const SettingCheck1Layout = styled.button<{ isHover: boolean; isPressed: boolean }>`
${alignCenterStyle}
width: 2.4rem;
height: 2.4rem;

background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
background-color: ${({ theme }) => theme.palette.Blue.Blue1};
border-radius: 8px;

&:hover {
background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
}

&:active {
background-color: ${({ theme }) => theme.palette.BLUE_PASSED};
${({ isHover, theme }) =>
isHover &&
css`
&:hover {
background-color: ${theme.palette.Blue.Blue3};
}
`}
${({ isPressed, theme }) =>
isPressed &&
css`
&:active {
background-color: ${theme.palette.Primary};

path {
stroke: ${({ theme }) => theme.palette.WITHE};
}
}
path {
stroke: ${theme.palette.Grey.White};
}
}
`}
`;

const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)`
const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)`
width: 1.3911rem;
height: 1.3911rem;
`;
Expand All @@ -61,7 +70,7 @@ const DoneLayout = styled.button`
width: 3.2rem;
height: 3.2rem;

background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
background-color: ${({ theme }) => theme.palette.Blue.Blue1};
border-radius: 10px;
`;

Expand Down
8 changes: 4 additions & 4 deletions src/components/common/button/DeleteBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import styled from '@emotion/styled';

import Icons from '@/assets/svg/index';

const DeleteBtn = () => {
function DeleteBtn() {
return (
<DeleteBtnLayout>
<StlyedDeleteIcon />
</DeleteBtnLayout>
);
};
}

export default DeleteBtn;

Expand All @@ -19,11 +19,11 @@ const DeleteBtnLayout = styled.button`
width: 3.2rem;
height: 3.2rem;

background-color: ${({ theme }) => theme.palette.GREY_01};
background-color: ${({ theme }) => theme.palette.Grey.Grey1};
border-radius: 10px;

&:active {
background-color: ${({ theme }) => theme.palette.GREY_03};
background-color: ${({ theme }) => theme.palette.Grey.Grey3};
}
`;

Expand Down
20 changes: 10 additions & 10 deletions src/components/common/button/DeleteCancelBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ interface DeleteCancelBtnProps {
status: 'delete' | 'cancel';
}

const DeleteCancelBtn = ({ status }: DeleteCancelBtnProps) => {
return <>{status === 'delete' ? <DeleteBtn>삭제</DeleteBtn> : <CancelBtn>취소</CancelBtn>}</>;
};
function DeleteCancelBtn({ status }: DeleteCancelBtnProps) {
return <div>{status === 'delete' ? <DeleteBtn>삭제</DeleteBtn> : <CancelBtn>취소</CancelBtn>}</div>;
}

export default DeleteCancelBtn;

Expand All @@ -25,26 +25,26 @@ const DeleteCancelBtnCss = css`

const DeleteBtn = styled.button`
${DeleteCancelBtnCss}
color: ${({ theme }) => theme.palette.WITHE};
color: ${({ theme }) => theme.palette.Grey.White};

background-color: ${({ theme }) => theme.palette.SECONDARY};
background-color: ${({ theme }) => theme.palette.Secondary};
${({ theme }) => theme.fontTheme.BODY_02};

&:hover {
background-color: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */
background-color: ${({ theme }) => theme.palette.Orange.Orange7};
}
`;

const CancelBtn = styled.button`
${DeleteCancelBtnCss}
color: ${({ theme }) => theme.palette.GREY_05};
color: ${({ theme }) => theme.palette.Grey.Grey5};

background-color: ${({ theme }) => theme.palette.WITHE};
background-color: ${({ theme }) => theme.palette.Grey.White};
${({ theme }) => theme.fontTheme.BODY_02};

&:hover {
color: ${({ theme }) => theme.palette.GREY_06};
color: ${({ theme }) => theme.palette.Grey.Grey6};

background-color: ${({ theme }) => theme.palette.GREY_03};
background-color: ${({ theme }) => theme.palette.Grey.Grey3};
}
`;
17 changes: 8 additions & 9 deletions src/components/common/button/EnterBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ interface EnterBtnProps {
isDisabled: boolean;
}

const EnterBtn = ({ isDisabled }: EnterBtnProps) => {
function EnterBtn({ isDisabled }: EnterBtnProps) {
return (
<EnterBtnLayout isDisabled={isDisabled} disabled={isDisabled}>
<StyledIcon />
</EnterBtnLayout>
);
};
}

export default EnterBtn;

Expand All @@ -29,23 +29,22 @@ const EnterBtnCss = css`

const EnterBtnLayout = styled.button<{ isDisabled: boolean }>`
${EnterBtnCss}
color: ${({ theme }) => theme.palette.WITHE};
color: ${({ theme }) => theme.palette.Grey.White};

background-color: ${({ theme, isDisabled }) =>
isDisabled ? theme.palette.BLUE_DISABLED : theme.palette.PRIMARY}; /* 색 수정 필요 */
background-color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Blue.Blue3 : theme.palette.Primary)};
${({ theme, isDisabled }) =>
!isDisabled &&
`
&:hover {
background-color: ${theme.palette.BLUE_PASSED}; /* 수정 필요 */
background-color: ${theme.palette.Blue.Blue8};
path {
stroke: ${theme.palette.BLUE_DEFAULT}; /* 수정 필요 */
stroke: ${theme.palette.Blue.Blue2};
}
}
&:active {
background-color: ${theme.palette.BLUE_DISABLED};
background-color: ${theme.palette.Blue.Blue9};
path {
stroke: ${theme.palette.BLACK}; /* 수정 필요 */
stroke: ${theme.palette.Blue.Blue4};
}
}
`}
Expand Down
15 changes: 7 additions & 8 deletions src/components/common/button/OkayCancelBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ interface OkayCancelBtnProps {
type: 'okay' | 'cancel';
}

const OkayCancelBtn = ({ type }: OkayCancelBtnProps) => {
return <>{type === 'okay' ? <OkayBtn>확인</OkayBtn> : <CancelBtn>취소</CancelBtn>}</>;
};
function OkayCancelBtn({ type }: OkayCancelBtnProps) {
return <div>{type === 'okay' ? <OkayBtn>확인</OkayBtn> : <CancelBtn>취소</CancelBtn>}</div>;
}

export default OkayCancelBtn;

Expand All @@ -23,17 +23,16 @@ const OkayCancelBtnCss = css`

const OkayBtn = styled.button`
${OkayCancelBtnCss};
color: ${({ theme }) => theme.palette.WITHE};
color: ${({ theme }) => theme.palette.Grey.White};

background-color: ${({ theme }) => theme.palette.BLACK};
background-color: ${({ theme }) => theme.palette.Grey.Black};
${({ theme }) => theme.fontTheme.BODY_02};
box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%);
`;

const CancelBtn = styled.button`
${OkayCancelBtnCss};
color: ${({ theme }) => theme.palette.GREY_05};
color: ${({ theme }) => theme.palette.Grey.Grey5};

background-color: ${({ theme }) => theme.palette.WITHE};
background-color: ${({ theme }) => theme.palette.Grey.White};
${({ theme }) => theme.fontTheme.BODY_02};
`;
19 changes: 10 additions & 9 deletions src/components/common/button/ProgressBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ interface Progress {
type: 'setting' | 'defaultProgress';
}

const ProgressBtn = ({ type }: Progress) => {
function ProgressBtn({ type }: Progress) {
return (
<>
<div>
{type === 'setting' ? (
<SettingProgressLayout>
<StyledSettingProgress />
Expand All @@ -18,9 +18,9 @@ const ProgressBtn = ({ type }: Progress) => {
<StyledProgressIcon />
</DefaultProgressLayout>
)}
</>
</div>
);
};
}

export default ProgressBtn;

Expand All @@ -31,17 +31,18 @@ const SettingProgressLayout = styled.button`
width: 2.4rem;
height: 2.4rem;

background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
background-color: ${({ theme }) => theme.palette.Blue.Blue1};
border-radius: 8px;

&:hover {
background-color: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */
background-color: ${({ theme }) => theme.palette.Blue.Blue3};
}

&:active {
background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */
background-color: ${({ theme }) => theme.palette.Primary};

path {
stroke: ${({ theme }) => theme.palette.WITHE};
stroke: ${({ theme }) => theme.palette.Grey.White};
}
}
`;
Expand All @@ -57,7 +58,7 @@ const DefaultProgressLayout = styled.button`
width: 3.2rem;
height: 3.2rem;

background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
background-color: ${({ theme }) => theme.palette.Blue.Blue1};
border-radius: 10px;
`;

Expand Down
Loading
Loading