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

[# 317] cta 버튼 인터페이스 추상화 수준 수정 및 적용 #318

Merged
merged 1 commit into from
Oct 8, 2024
Merged

[# 317] cta 버튼 인터페이스 추상화 수준 수정 및 적용 #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 0 additions & 1 deletion src/components/addPlant/NotificationToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ const NotificationToggle = ({
setIsOpen(false);
}}
text={'선택하기'}
className={'bg-BloomingGreen500 text-white'}
/>,
]}
isOpen={isOpen}
Expand Down
8 changes: 1 addition & 7 deletions src/components/addPlant/NotificationToggleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,7 @@ const NotificationToggleList = ({
<CenterBottomSheet
title={'주기를 입력하지 않으면 추천값이 사용되어요.'}
content={<></>}
actions={[
<CTAButton
className={'bg-BloomingGreen500'}
text={'확인'}
onClick={() => setBottomSheetOpen(false)}
/>,
]}
actions={[<CTAButton text={'확인'} onClick={() => setBottomSheetOpen(false)} />]}
isOpen={bottomSheetOpen}
onOpenChange={setBottomSheetOpen}
/>
Expand Down
9 changes: 2 additions & 7 deletions src/components/addPlant/PlantLocationBadgeList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ import IconPlusMono from '@/assets/icon/plus-dark-gray.svg?react';

import LocationBadge from '@/components/addPlant/LocationBadge.tsx';
import { PlantLocation } from '@/types/plantLocation';

import { cn } from '@/utils.ts';
import { isFalsy } from '@/utils/validation/isFalsy.ts';

interface PlantLocationBadgeListProps {
Expand Down Expand Up @@ -189,9 +187,6 @@ const PlantLocationBadgeList = ({
text={'등록하기'}
type={'button'}
onClick={addNewLocationHandler}
className={cn(
isFalsy(newLocationName) || isError ? 'bg-Gray300' : 'bg-BloomingGreen500',
)}
disabled={isFalsy(newLocationName) || isError}
/>,
]}
Expand All @@ -209,13 +204,13 @@ const PlantLocationBadgeList = ({
text={'취소'}
type={'button'}
onClick={closeDeleteModalHandler}
className={'bg-Gray100 text-Gray800'}
variant={'ghost'}
/>,
<CTAButton
text={'삭제'}
type={'button'}
onClick={() => deleteLocationHandler()}
className={'bg-Red500'}
variant={'warning'}
/>,
]}
isOpen={isOpenDeleteModal}
Expand Down
4 changes: 1 addition & 3 deletions src/components/addPlant/마지막으로물준날.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,7 @@ const 마지막으로물준날 = ({ onClick, value, type = 'simple' }: 마지막
/>
)
}
actions={[
<CTAButton text={'선택하기'} onClick={onComplete} className={'bg-BloomingGreen500'} />,
]}
actions={[<CTAButton text={'선택하기'} onClick={onComplete} />]}
isOpen={open}
onClose={onClose}
/>
Expand Down
8 changes: 1 addition & 7 deletions src/components/addPlant/마지막으로비료준날.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,7 @@ const 마지막으로비료준날 = ({ onClick, value, type = 'simple' }: 마지
/>
)
}
actions={[
<CTAButton
text={'선택하기'}
className={'bg-BloomingGreen500'}
onClick={() => onComplete()}
/>,
]}
actions={[<CTAButton text={'선택하기'} onClick={() => onComplete()} />]}
isOpen={openBottomSheet}
onClose={() => setOpenBottomSheet(false)}
/>
Expand Down
20 changes: 8 additions & 12 deletions src/components/addPlant/함께하기시작한날.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ const 함께하기시작한날 = ({ onClick, value }: 함께하기시작한날Pr
setOpen(false);
};

const handleButtonClick = () => {
onClick(
`${year}-${prefixWithZero(month)}-${prefixWithZero(day)}` as `${number}-${number}-${number}`,
);
onClose();
};

return (
<>
<TextField
Expand All @@ -51,18 +58,7 @@ const 함께하기시작한날 = ({ onClick, value }: 함께하기시작한날Pr
endDate={new Date()}
/>
}
actions={[
<CTAButton
onClick={() => {
onClick(
`${year}-${prefixWithZero(month)}-${prefixWithZero(day)}` as `${number}-${number}-${number}`,
);
onClose();
}}
text={'선택하기'}
className={'bg-BloomingGreen500'}
/>,
]}
actions={[<CTAButton onClick={handleButtonClick} text={'선택하기'} />]}
isOpen={open}
onClose={onClose}
/>
Expand Down
18 changes: 9 additions & 9 deletions src/components/common/CTAButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ import { Button, ButtonProps } from '@/components/ui/button.tsx';
import { cn } from '@/utils.ts';
import { ReactNode } from 'react';

interface CTAButtonProps extends ButtonProps {
color?: keyof typeof CTAButtonColor;
interface CTAButtonProps extends Omit<ButtonProps, 'variant'> {
text: string | ReactNode;
icon?: string | ReactNode;
variant?: 'primary' | 'warning' | 'ghost';
}

const CTAButtonColor = {
disabled: 'bg-gray-400',
normal: 'bg-gray-700',
active: 'bg-gray-800',
const CTAButtonColorVariants = {
primary: 'bg-BloomingGreen500 text-white disabled:bg-Gray300',
warning: 'bg-Red500 text-white disabled:bg-Gray300',
ghost: 'bg-Gray300 text-Gray800 disabled:bg-Gray100',
};

const CTAButton = ({ text, color = 'normal', className, icon, ...rest }: CTAButtonProps) => {
const CTAButton = ({ text, className, icon, variant = 'primary', ...rest }: CTAButtonProps) => {
return (
<Button
className={cn(
'text-regular-body py-[18px] px-[28px] text-white font-semibold rounded-[16px] w-full h-[54px]',
CTAButtonColor[color],
'text-regular-body py-[18px] px-[28px] font-semibold rounded-[16px] w-full h-[54px]',
CTAButtonColorVariants[variant],
className,
)}
{...rest}
Expand Down
3 changes: 0 additions & 3 deletions src/components/common/SegmentControl/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import CTAButton from '@/components/common/CTAButton';
import TextFieldV2 from '@/components/common/TextFieldV2';

import CenterBottomSheet from '@/components/common/CenterBottomSheet';

import { cn } from '@/utils.ts';
import { useAddNewLocation } from '@/queries/useAddNewLocation.ts';

interface Segment {
Expand Down Expand Up @@ -122,7 +120,6 @@ const SegmentControl: React.FC<SegmentControlProps> = ({ segments, onSegmentChan
text={'등록하기'}
type={'button'}
onClick={handleAddNewLocation}
className={cn(!newLocationName || isError ? 'bg-Gray300' : 'bg-BloomingGreen500')}
disabled={!newLocationName || isError}
/>,
]}
Expand Down
4 changes: 2 additions & 2 deletions src/components/myPlant/DeleteConfirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
content={<></>}
actionDirection={'row'}
actions={[
<CTAButton text={'취소'} onClick={onClose} className={'bg-Gray100 text-Gray800'} />,
<CTAButton text={'삭제'} onClick={handleDelete} className={'bg-Red500'} />,
<CTAButton text={'취소'} onClick={onClose} variant={'ghost'} />,
<CTAButton text={'삭제'} onClick={handleDelete} variant={'warning'} />,
]}
isOpen={isOpen}
onOpenChange={onOpenChange}
Expand Down
9 changes: 1 addition & 8 deletions src/components/myPlant/LocationInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,7 @@ const LocationInput: React.FC<LocationInputProps> = ({
errorMessage={'이름은 최대 네글자까지 입력이 가능해요.'}
/>
}
actions={[
<CTAButton
text={'변경'}
className={'bg-BloomingGreen500 disabled:bg-Gray300'}
onClick={handleLocationChange}
disabled={isError}
/>,
]}
actions={[<CTAButton text={'변경'} onClick={handleLocationChange} disabled={isError} />]}
isOpen={isOpen}
onOpenChange={onOpenChange}
/>
Expand Down
8 changes: 1 addition & 7 deletions src/components/profile/ModifyNickname.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,7 @@ const Nickname: React.FC<NicknameProps> = ({ initialNickname }) => {
</div>

<div className="px-[24px] pb-[10px]">
<CTAButton
type="button"
onClick={handleSubmit}
text="확인"
className={'w-full bg-BloomingGreen500 disabled:bg-Gray300'}
disabled={isError}
/>
<CTAButton type="button" onClick={handleSubmit} text="확인" disabled={isError} />
</div>
</div>
);
Expand Down
13 changes: 4 additions & 9 deletions src/components/profile/UseInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,13 +118,13 @@ const UseInformation: React.FC = () => {
text={'취소'}
type={'button'}
onClick={() => setIsOpenDeleteModal(false)}
className={'bg-Gray100 text-Gray800'}
variant={'ghost'}
/>,
<CTAButton
text={'탈퇴하기'}
type={'button'}
onClick={deleteUserHandler}
className={'bg-Red500'}
variant={'warning'}
/>,
]}
isOpen={isOpenDeleteModal}
Expand All @@ -141,14 +141,9 @@ const UseInformation: React.FC = () => {
text={'취소'}
type={'button'}
onClick={() => setIsOpenLogoutModal(false)}
className={'bg-Gray100 text-Gray800'}
/>,
<CTAButton
text={'로그아웃'}
type={'button'}
onClick={logoutHandler}
className={'bg-BloomingGreen500'}
variant={'ghost'}
/>,
<CTAButton text={'로그아웃'} type={'button'} onClick={logoutHandler} />,
]}
isOpen={isOpenLogoutModal}
onOpenChange={setIsOpenLogoutModal}
Expand Down
1 change: 0 additions & 1 deletion src/components/searchPlant/SearchedPlantList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ const SearchedPlantList = ({ query, onClose }: SearchedPlantListProps) => {
<CTAButton
text={'등록'}
type={'button'}
className={'bg-BloomingGreen500 disabled:bg-Gray500'}
disabled={customPlant === ''}
onClick={() => onClick(customPlant)}
/>,
Expand Down
6 changes: 1 addition & 5 deletions src/funnel/register/CompleteFunnel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,7 @@ const CompleteFunnel = ({ onSubmit }: CompleteFunnelProps) => {
<HeightBox height={'30px'} />
</main>

<CTAButton
text={'블루밍 시작하기'}
className={'bg-BloomingGreen500'}
onClick={() => onSubmit()}
/>
<CTAButton text={'블루밍 시작하기'} onClick={() => onSubmit()} />
<HeightBox height={'30px'} />
</Screen>
);
Expand Down
8 changes: 1 addition & 7 deletions src/funnel/register/LocationFunnel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import HeightBox from '@/components/common/HeightBox';
import RegisterFunnelTitle from '@/components/register/RegisterFunnelTitle.tsx';
import TextField from '@/components/common/TextField';
import CTAButton from '@/components/common/CTAButton';
import { cn } from '@/utils.ts';
import { ChangeEvent, Suspense, useState } from 'react';
import { regions } from '@/mocks/mockDatas/regions.ts';
import { RegionList } from '@/components/register/RegionList.tsx';
Expand Down Expand Up @@ -72,12 +71,7 @@ const LocationFunnel = ({ toNotificationTimeFunnel, goBack }: LocationFunnelProp
onSelectLocation={onSelectLocation}
/>
</Suspense>
<CTAButton
text={'다음'}
className={cn(selectedLocation === null ? 'bg-Gray300' : 'bg-BloomingGreen500')}
onClick={onClick}
disabled={!selectedLocation}
/>
<CTAButton text={'다음'} onClick={onClick} disabled={!selectedLocation} />
<HeightBox height={'30px'} />
</Screen>
);
Expand Down
7 changes: 1 addition & 6 deletions src/funnel/register/NicknameFunnel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,7 @@ const NicknameFunnel = ({ toLocationFunnel }: NicknameFunnelProps) => {
isError={isError}
/>
<HeightBox height={'100%'} />
<CTAButton
text={'다음'}
className={'bg-BloomingGreen500 disabled:bg-Gray300'}
onClick={onClick}
disabled={nickname === '' || isError}
/>
<CTAButton text={'다음'} onClick={onClick} disabled={nickname === '' || isError} />
<HeightBox height={'30px'} />
</Screen>
);
Expand Down
11 changes: 2 additions & 9 deletions src/funnel/register/NotificationTimeFunnel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import 왼쪽꺽쇠 from '@/assets/icon/left-arrow.svg?react';
import HeightBox from '@/components/common/HeightBox';
import RegisterFunnelTitle from '@/components/register/RegisterFunnelTitle.tsx';
import CTAButton from '@/components/common/CTAButton';
import { cn } from '@/utils.ts';
import { useState } from 'react';
import { NumericRange } from '@/types/NewmericRange.ts';
import BottomSheet from '@/components/common/BottomSheet';
Expand Down Expand Up @@ -50,11 +49,7 @@ const NotificationTimeFunnel = ({ toCompleteFunnel, goBack }: NotificationTimeFu
<HeightBox height={53.5} />
<RegisterFunnelTitle title={'거의 다 왔어요!\n알림 시간대를 설정해주세요'} />
<HeightBox height={'100%'} />
<CTAButton
text={'선택하기'}
className={cn('bg-BloomingGreen500')}
onClick={() => setOpenBottomSheet(true)}
/>
<CTAButton text={'선택하기'} onClick={() => setOpenBottomSheet(true)} />

<HeightBox height={'30px'} />
<BottomSheet
Expand All @@ -71,9 +66,7 @@ const NotificationTimeFunnel = ({ toCompleteFunnel, goBack }: NotificationTimeFu
/>
</div>
}
actions={[
<CTAButton text={'선택하기'} onClick={onConfirm} className={'bg-BloomingGreen500'} />,
]}
actions={[<CTAButton text={'선택하기'} onClick={onConfirm} />]}
isOpen={openBottomSheet}
onClose={() => setOpenBottomSheet(false)}
/>
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,13 @@ export const useNotification = () => {
content={''}
actionDirection={'row'}
actions={[
<CTAButton text={'취소'} onClick={() => {}} className="bg-Gray300" />,
<CTAButton text={'취소'} onClick={() => {}} variant={'ghost'} />,
<CTAButton
text={'허용'}
onClick={async () => {
setIsModalOpen(false);
await requestPermission();
}}
className="bg-BloomingGreen500"
/>,
]}
isOpen={isModalOpen}
Expand Down
3 changes: 1 addition & 2 deletions src/pages/AddPlantPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Screen from '@/layouts/Screen.tsx';
import IconXMono from '@/assets/icon/x-gray.svg?react';
import TextField from '@/components/common/TextField';
import { cn } from '@/utils.ts';
import CTAButton from '@/components/common/CTAButton';
import Header from '@/components/common/Header';
import useInternalRouter from '@/hooks/useInternalRouter.ts';
Expand Down Expand Up @@ -239,7 +238,7 @@ const AddPlantPage = () => {
</form>
<CTAButton
text={'등록하기'}
className={cn('mt-[19px]', isFormValid ? 'bg-BloomingGreen500' : 'bg-Gray300')}
className={'mt-[19px]'}
disabled={!isFormValid}
onClick={handleSubmit}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ErrorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const ErrorPage = ({ reset, error }: ErrorPageProps) => {
<div className="text-Gray500 text-[15px] pb-[10px]">{error.message}</div>
)}
<div>
<CTAButton onClick={reset} text="다시 시도" className="bg-BloomingGreen500 w-[120px]" />
<CTAButton onClick={reset} text="다시 시도" className="w-[120px]" />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MyPlantEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const MyPlantEdit = () => {
<Trash2 />
</button>
<HeightBox height={17.25} />
<CTAButton text={'저장'} onClick={onComplete} className={'bg-BloomingGreen500'} />
<CTAButton text={'저장'} onClick={onComplete} />
<HeightBox height={13.75} />
</Screen>
);
Expand Down
Loading
Loading