Skip to content

Commit 595f476

Browse files
gxxrxngxxrxn
committed
[#629] tailwind config color 정리 (#630)
* refactor: tailwind config에서 불필요하거나 중복된 속성 제거, 네이밍 수정 - orange-100 -> main-300 - kakaotext -> kakao-text - shadow-bottomNav -> shadow-bottom-navigation - color shadow 제거 - shadow searchResultItem * refactor: color cancel -> shadow로 수정 * feat: color main-brighter 추가 * style: 도서 검색 bestseller 컴포넌트 text color 수정 * feat: tailwind config에 bookshelf color 추가
1 parent 9796dab commit 595f476

File tree

10 files changed

+29
-26
lines changed

10 files changed

+29
-26
lines changed

‎src/app/bookshelf/[bookshelfId]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ const BookShelfLoginBox = ({
151151
const { userNickname } = data;
152152

153153
return (
154-
<div className="mt-[3.8rem] flex flex-col gap-[2rem] rounded-[4px] border border-[#CFCFCF] px-[1.7rem] py-[4rem]">
154+
<div className="mt-[3.8rem] flex flex-col gap-[2rem] rounded-[4px] border border-shadow px-[1.7rem] py-[4rem]">
155155
<p className="text-center font-body1-bold">
156156
지금 로그인하면
157157
<br />

‎src/v1/base/BottomNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const iconColor = {
4141

4242
const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
4343
return (
44-
<nav className="fixed bottom-0 left-[50%] flex w-full max-w-[43rem] -translate-x-1/2 justify-between rounded-t-[2rem] border-t-[0.05rem] border-black-200 bg-white px-[3.2rem] pb-[calc(env(safe-area-inset-bottom)+1.4rem)] pt-[1.4rem] shadow-bottomNav">
44+
<nav className="fixed bottom-0 left-[50%] flex w-full max-w-[43rem] -translate-x-1/2 justify-between rounded-t-[2rem] border-t-[0.05rem] border-black-200 bg-white px-[3.2rem] pb-[calc(env(safe-area-inset-bottom)+1.4rem)] pt-[1.4rem] shadow-bottom-navigation">
4545
{icons.map(({ icon, label, href }) => (
4646
<Link key={label} type="button" href={href}>
4747
<button

‎src/v1/base/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const getSchemeClasses = (
6767
: 'border-black-400 text-black-500';
6868
}
6969
case 'kakao': {
70-
return 'border-kakao bg-kakao text-kakaotext';
70+
return 'border-kakao bg-kakao text-kakao-dark';
7171
}
7272
}
7373
};

‎src/v1/base/Switch.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Switch = (
2020
ref={ref}
2121
{...props}
2222
/>
23-
<div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-cancel peer-checked:bg-main-900" />
23+
<div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-shadow peer-checked:bg-main-900" />
2424
<span className="absolute left-0 h-[2.4rem] w-[2.4rem] translate-x-[0.2rem] transform rounded-full bg-white transition peer-checked:translate-x-[2.3rem]" />
2525
<span className="sr-only">{`Enable ${name}`}</span>
2626
</label>

‎src/v1/bookGroup/BookInfoCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const BookInfoContent = ({
6767
const { data: bookInfo } = useBookInfoQuery(bookId);
6868

6969
return (
70-
<div className="flex min-h-[12.8rem] w-full gap-[2.4rem] rounded-[0.5rem] border-[0.05rem] border-cancel px-[2.2rem] py-[1.8rem]">
70+
<div className="flex min-h-[12.8rem] w-full gap-[2.4rem] rounded-[0.5rem] border-[0.05rem] border-shadow px-[2.2rem] py-[1.8rem]">
7171
<BookCover size="xsmall" src={bookInfo.imageUrl} title={bookInfo.title} />
7272
<div className="flex min-w-0 flex-grow flex-col">
7373
<span className="truncate font-body2-bold">{bookInfo.title}</span>
@@ -93,7 +93,7 @@ const BookInfoContent = ({
9393
// const EmptyBookInfoCard = ({ onBookSelect }: { onBookSelect?: () => void }) => {
9494
// return (
9595
// <div
96-
// className="flex min-h-[12.8rem] w-full cursor-pointer flex-col items-center justify-center gap-[1rem] rounded-[0.5rem] border-[0.05rem] border-cancel shadow-bookcard"
96+
// className="flex min-h-[12.8rem] w-full cursor-pointer flex-col items-center justify-center gap-[1rem] rounded-[0.5rem] border-[0.05rem] border-shadow shadow-bookcard"
9797
// onClick={onBookSelect}
9898
// >
9999
// <IconBookPlus className="h-[2rem] w-[2rem] fill-placeholder" />
@@ -106,7 +106,7 @@ const BookInfoContent = ({
106106

107107
const BookInfoCardSkeleton = () => {
108108
return (
109-
<div className="flex min-h-[12.8rem] w-full animate-pulse cursor-pointer items-center gap-[2.4rem] rounded-[0.5rem] border-[0.05rem] border-cancel px-[2.2rem] py-[1.8rem]">
109+
<div className="flex min-h-[12.8rem] w-full animate-pulse cursor-pointer items-center gap-[2.4rem] rounded-[0.5rem] border-[0.05rem] border-shadow px-[2.2rem] py-[1.8rem]">
110110
<div className="h-[9.1rem] w-[6.5rem] rounded-[0.5rem] bg-placeholder"></div>
111111
<div className="mt-[0.3rem] flex flex-col gap-[0.5rem] self-start">
112112
<div className="h-[1.4rem] w-[10rem] bg-placeholder"></div>

‎src/v1/bookGroup/SimpleBookGroupCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const SimpleBookGroupCard = ({
1717
return (
1818
<Link href={`/group/${bookGroupId}`}>
1919
<article className="flex w-[10rem] flex-col gap-[1rem]">
20-
<div className="bg-orange-100 px-[1.8rem] py-[1.6rem]">
20+
<div className="bg-main-300 px-[1.8rem] py-[1.6rem]">
2121
<BookCover size="xsmall" src={imageSource} />
2222
</div>
2323
<p className="break-keep text-center !leading-tight font-caption1-regular">

‎src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinTypeRadioCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const JoinTypeRadioCard = (
2727
{...props}
2828
/>
2929
<label
30-
className={`${BASE_CLASSES} after:h-[2.4rem] peer-checked:border-main-900 peer-checked:bg-main-900/[0.05] peer-checked:text-[#FF8B00] peer-checked:after:content-check`}
30+
className={`${BASE_CLASSES} after:h-[2.4rem] peer-checked:border-main-900 peer-checked:bg-main-900/[0.05] peer-checked:text-main-brighter peer-checked:after:content-check`}
3131
htmlFor={inputId}
3232
>
3333
<p>{label}</p>

‎src/v1/bookSearch/BestSellers.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,18 @@ const BestSellers = () => {
5151
<section className="flex flex-col gap-[1.5rem]">
5252
<h2 className="font-body1-regular">인기 도서</h2>
5353
<ul className="flex w-[calc(100%+2rem)] gap-[0.8rem] overflow-x-scroll whitespace-nowrap">
54-
<li className="rounded-[1.5rem] bg-[#5C5C5C] px-[1.5rem] py-[0.3rem]">
54+
<li className="rounded-[1.5rem] bg-black-600 px-[1.5rem] py-[0.3rem]">
5555
<p className="font-normal text-white font-body2-regular">종합</p>
5656
</li>
5757
</ul>
5858

59-
<ul className="flex w-full flex-row items-center divide-x divide-black-900 font-body2-regular">
59+
<ul className="flex w-full flex-row items-center divide-x divide-black-600 font-body2-regular">
6060
{searchRanges.map(keys => (
6161
<li
6262
className={`flex h-[1.1rem] cursor-pointer items-center px-[0.9rem] ${
6363
SEARCH_RANGES[keys] === bestSellerSearchRange
64-
? 'text-black-700'
65-
: 'text-[#5c5c5c]'
64+
? 'text-black-800'
65+
: 'text-black-500'
6666
}`}
6767
key={keys}
6868
onClick={() => setBestSellerSearchRange(SEARCH_RANGES[keys])}
@@ -143,8 +143,8 @@ const BestSeller = ({
143143
<div className="flex flex-row gap-[1rem]">
144144
<p className="text-black-900 font-heading-bold">{bestRank}</p>
145145
<div className="flex min-w-0 flex-col gap-[0.3rem] font-body2-regular">
146-
<p className="line-clamp-2 !leading-tight text-black-900 ">{title}</p>
147-
<p className="line-clamp-1 text-[#5c5c5c] ">{author}</p>
146+
<p className="line-clamp-2 !leading-tight text-black-800">{title}</p>
147+
<p className="line-clamp-1 text-black-600 ">{author}</p>
148148
</div>
149149
</div>
150150
</div>

‎src/v1/bookShelf/BookShelf.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const BookShelf = ({ children }: { children: ReactNode }) => {
1717
const Background = () => {
1818
return (
1919
<div className="absolute bottom-0 w-full rounded-b-[inherit]">
20-
<div className="h-[3rem] bg-[#F2ECDF] shadow-[0px_-3px_8px_0px_#F1F1F1_inset]" />
21-
<div className="h-[1rem] rounded-b-[inherit] bg-[#F6F3EC] shadow-[0px_-1px_8px_-4.5px_#494949]" />
20+
<div className="h-[3rem] bg-bookshelf-dark shadow-[0px_-3px_8px_0px_#F1F1F1_inset]" />
21+
<div className="h-[1rem] rounded-b-[inherit] bg-bookshelf-light shadow-[0px_-1px_8px_-4.5px_#494949]" />
2222
</div>
2323
);
2424
};

‎tailwind.config.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ module.exports = {
3838
700: '#FFC073',
3939
800: '#F6AD55',
4040
900: '#FFA436',
41+
brighter: '#FF8B00',
4142
},
4243
success: {
4344
500: '#F2FDF5',
@@ -51,8 +52,10 @@ module.exports = {
5152
800: '#F56565',
5253
900: '#FF0000',
5354
},
54-
kakao: '#FEE102',
55-
kakaotext: '#191600',
55+
kakao: {
56+
DEFAULT: '#FEE102',
57+
dark: '#191600',
58+
},
5659
black: {
5760
100: '#F4F4F4',
5861
200: '#E9E9E9',
@@ -63,16 +66,17 @@ module.exports = {
6366
700: '#2D2D2D', // MainText Color
6467
800: '#191600',
6568
900: '#000000',
66-
},
67-
orange: {
68-
100: '#F5F4EE',
69+
DEFAULT: '#000000',
6970
},
7071
white: '#FFFFFF',
7172
background: '#FCFCFC',
72-
cancel: '#CFCFCF',
73-
shadow: '#CECECE',
73+
shadow: '#CFCFCF',
7474
placeholder: '#AFAFAF', // ( = description)
7575
overlay: '#494949', // use with opacity 60%
76+
bookshelf: {
77+
light: '#F6F3EC',
78+
dark: '#F2ECDF',
79+
},
7680
},
7781
fontFamily: {
7882
lineseed: ['var(--font-lineseed)'],
@@ -81,8 +85,7 @@ module.exports = {
8185
bookcover:
8286
'0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.1)',
8387
bookcard: '0px 0px 7px 0px rgba(207, 207, 207, 0.5)',
84-
searchResultItem: '0px 0px 6px 1px rgba(114, 114, 114, 0.10);',
85-
bottomNav: 'rgba(0, 0, 0, 0.05) 0px 0px 10px 1px',
88+
'bottom-navigation': 'rgba(0, 0, 0, 0.05) 0px 0px 10px 1px',
8689
'floating-button':
8790
'0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.1)',
8891
'bookgroup-card': '0 0 6px rgba(180,180,180,0.25)',

0 commit comments

Comments
 (0)