[#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 추가

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

@@ -151,7 +151,7 @@ const BookShelfLoginBox = ({
   const { userNickname } = data;
 
   return (
-    <div className="mt-[3.8rem] flex flex-col gap-[2rem] rounded-[4px] border border-[#CFCFCF] px-[1.7rem] py-[4rem]">
+    <div className="mt-[3.8rem] flex flex-col gap-[2rem] rounded-[4px] border border-shadow px-[1.7rem] py-[4rem]">
       <p className="text-center font-body1-bold">
         지금 로그인하면
         <br />

src/v1/base/BottomNavigation.tsx

@@ -41,7 +41,7 @@ const iconColor = {
 
 const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
   return (
-    <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">
+    <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">
       {icons.map(({ icon, label, href }) => (
         <Link key={label} type="button" href={href}>
           <button

src/v1/base/Button.tsx

@@ -67,7 +67,7 @@ const getSchemeClasses = (
         : 'border-black-400 text-black-500';
     }
     case 'kakao': {
-      return 'border-kakao bg-kakao text-kakaotext';
+      return 'border-kakao bg-kakao text-kakao-dark';
     }
   }
 };

src/v1/base/Switch.tsx

@@ -20,7 +20,7 @@ const Switch = (
         ref={ref}
         {...props}
       />
-      <div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-cancel peer-checked:bg-main-900" />
+      <div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-shadow peer-checked:bg-main-900" />
       <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]" />
       <span className="sr-only">{`Enable ${name}`}</span>
     </label>

src/v1/bookGroup/BookInfoCard.tsx

@@ -67,7 +67,7 @@ const BookInfoContent = ({
   const { data: bookInfo } = useBookInfoQuery(bookId);
 
   return (
-    <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]">
+    <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]">
       <BookCover size="xsmall" src={bookInfo.imageUrl} title={bookInfo.title} />
       <div className="flex min-w-0 flex-grow flex-col">
         <span className="truncate font-body2-bold">{bookInfo.title}</span>
@@ -93,7 +93,7 @@ const BookInfoContent = ({
 // const EmptyBookInfoCard = ({ onBookSelect }: { onBookSelect?: () => void }) => {
 //   return (
 //     <div
-//       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"
+//       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"
 //       onClick={onBookSelect}
 //     >
 //       <IconBookPlus className="h-[2rem] w-[2rem] fill-placeholder" />
@@ -106,7 +106,7 @@ const BookInfoContent = ({
 
 const BookInfoCardSkeleton = () => {
   return (
-    <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]">
+    <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]">
       <div className="h-[9.1rem] w-[6.5rem] rounded-[0.5rem] bg-placeholder"></div>
       <div className="mt-[0.3rem] flex flex-col gap-[0.5rem] self-start">
         <div className="h-[1.4rem] w-[10rem] bg-placeholder"></div>

src/v1/bookGroup/SimpleBookGroupCard.tsx

@@ -17,7 +17,7 @@ const SimpleBookGroupCard = ({
   return (
     <Link href={`/group/${bookGroupId}`}>
       <article className="flex w-[10rem] flex-col gap-[1rem]">
-        <div className="bg-orange-100 px-[1.8rem] py-[1.6rem]">
+        <div className="bg-main-300 px-[1.8rem] py-[1.6rem]">
           <BookCover size="xsmall" src={imageSource} />
         </div>
         <p className="break-keep text-center !leading-tight font-caption1-regular">

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

@@ -27,7 +27,7 @@ const JoinTypeRadioCard = (
         {...props}
       />
       <label
-        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`}
+        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`}
         htmlFor={inputId}
       >
         <p>{label}</p>

src/v1/bookSearch/BestSellers.tsx

@@ -51,18 +51,18 @@ const BestSellers = () => {
     <section className="flex flex-col gap-[1.5rem]">
       <h2 className="font-body1-regular">인기 도서</h2>
       <ul className="flex w-[calc(100%+2rem)] gap-[0.8rem] overflow-x-scroll whitespace-nowrap">
-        <li className="rounded-[1.5rem] bg-[#5C5C5C] px-[1.5rem] py-[0.3rem]">
+        <li className="rounded-[1.5rem] bg-black-600 px-[1.5rem] py-[0.3rem]">
           <p className="font-normal text-white font-body2-regular">종합</p>
         </li>
       </ul>
 
-      <ul className="flex w-full flex-row items-center divide-x divide-black-900 font-body2-regular">
+      <ul className="flex w-full flex-row items-center divide-x divide-black-600 font-body2-regular">
         {searchRanges.map(keys => (
           <li
             className={`flex h-[1.1rem] cursor-pointer items-center px-[0.9rem] ${
               SEARCH_RANGES[keys] === bestSellerSearchRange
-                ? 'text-black-700'
-                : 'text-[#5c5c5c]'
+                ? 'text-black-800'
+                : 'text-black-500'
             }`}
             key={keys}
             onClick={() => setBestSellerSearchRange(SEARCH_RANGES[keys])}
@@ -143,8 +143,8 @@ const BestSeller = ({
       <div className="flex flex-row gap-[1rem]">
         <p className="text-black-900 font-heading-bold">{bestRank}</p>
         <div className="flex min-w-0 flex-col gap-[0.3rem] font-body2-regular">
-          <p className="line-clamp-2 !leading-tight text-black-900 ">{title}</p>
-          <p className="line-clamp-1 text-[#5c5c5c] ">{author}</p>
+          <p className="line-clamp-2 !leading-tight text-black-800">{title}</p>
+          <p className="line-clamp-1 text-black-600 ">{author}</p>
         </div>
       </div>
     </div>

src/v1/bookShelf/BookShelf.tsx

@@ -17,8 +17,8 @@ const BookShelf = ({ children }: { children: ReactNode }) => {
 const Background = () => {
   return (
     <div className="absolute bottom-0 w-full rounded-b-[inherit]">
-      <div className="h-[3rem] bg-[#F2ECDF] shadow-[0px_-3px_8px_0px_#F1F1F1_inset]" />
-      <div className="h-[1rem] rounded-b-[inherit] bg-[#F6F3EC] shadow-[0px_-1px_8px_-4.5px_#494949]" />
+      <div className="h-[3rem] bg-bookshelf-dark shadow-[0px_-3px_8px_0px_#F1F1F1_inset]" />
+      <div className="h-[1rem] rounded-b-[inherit] bg-bookshelf-light shadow-[0px_-1px_8px_-4.5px_#494949]" />
     </div>
   );
 };

tailwind.config.js

@@ -38,6 +38,7 @@ module.exports = {
           700: '#FFC073',
           800: '#F6AD55',
           900: '#FFA436',
+          brighter: '#FF8B00',
         },
         success: {
           500: '#F2FDF5',
@@ -51,8 +52,10 @@ module.exports = {
           800: '#F56565',
           900: '#FF0000',
         },
-        kakao: '#FEE102',
-        kakaotext: '#191600',
+        kakao: {
+          DEFAULT: '#FEE102',
+          dark: '#191600',
+        },
         black: {
           100: '#F4F4F4',
           200: '#E9E9E9',
@@ -63,16 +66,17 @@ module.exports = {
           700: '#2D2D2D', // MainText Color
           800: '#191600',
           900: '#000000',
-        },
-        orange: {
-          100: '#F5F4EE',
+          DEFAULT: '#000000',
         },
         white: '#FFFFFF',
         background: '#FCFCFC',
-        cancel: '#CFCFCF',
-        shadow: '#CECECE',
+        shadow: '#CFCFCF',
         placeholder: '#AFAFAF', // ( = description)
         overlay: '#494949', // use with opacity 60%
+        bookshelf: {
+          light: '#F6F3EC',
+          dark: '#F2ECDF',
+        },
       },
       fontFamily: {
         lineseed: ['var(--font-lineseed)'],
@@ -81,8 +85,7 @@ module.exports = {
         bookcover:
           '0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.1)',
         bookcard: '0px 0px 7px 0px rgba(207, 207, 207, 0.5)',
-        searchResultItem: '0px 0px 6px 1px rgba(114, 114, 114, 0.10);',
-        bottomNav: 'rgba(0, 0, 0, 0.05) 0px 0px 10px 1px',
+        'bottom-navigation': 'rgba(0, 0, 0, 0.05) 0px 0px 10px 1px',
         'floating-button':
           '0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.1)',
         'bookgroup-card': '0 0 6px rgba(180,180,180,0.25)',