design: 테일윈드 설정에 맞게 색상코드 설정

src/app/main/_components/asset-info.tsx

@@ -122,7 +122,7 @@ export default function AssetInfo() {
         <div className="mt-110">
           <Link
             href="/login"
-            className="block w-full rounded-8 bg-[#11E977] py-16 text-center text-16-700 text-white"
+            className="block w-full rounded-8 bg-lime-300 py-16 text-center text-16-700 text-white"
           >
             로그인 하기
           </Link>
@@ -160,7 +160,7 @@ export default function AssetInfo() {
       <div className="absolute top-4 ml-100">
         <Image src={coinsIcon} alt="자산 아이콘" width={210} height={210} />
       </div>
-      <div className="mt-30 flex h-105 w-264 flex-col items-center justify-center rounded-8 bg-[#11E977] p-16">
+      <div className="mt-30 flex h-105 w-264 flex-col items-center justify-center rounded-8 bg-lime-300 p-16">
         <p className="text-14-500 text-gray-600">
           {memberNickName}님의 총 자산
         </p>

src/app/main/_components/flucctuate-table.tsx

@@ -40,7 +40,7 @@ const columns: CommonTableColumn<Fluctuation>[] = [
     header: "",
     width: "40px",
     render: (value, row) => (
-      <span className="text-16-700 text-[#1DA65A]">{row.rank}</span>
+      <span className="text-16-700 text-green-500">{row.rank}</span>
     ),
   },
   {

src/app/main/_components/ranking-stock.tsx

@@ -40,7 +40,7 @@ const columns: CommonTableColumn<TradingVolume>[] = [
     header: "",
     width: "40px",
     render: (value, row) => (
-      <span className="text-16-700 text-[#1DA65A]">{row.rank}</span>
+      <span className="text-16-700 text-green-500">{row.rank}</span>
     ),
   },
   {

src/app/main/_components/search-stock.tsx

@@ -20,7 +20,7 @@ export default function SearchStock() {
     <div className="mx-auto mb-30 flex items-center justify-center">
       <div className="w-full max-w-lg bg-white">
         <Input
-          className="!border-1 !h-32 !w-437 !rounded-80 !border-[#11E977] px-17 py-23 pl-20 hover:border-[#11E977] focus:border-[#11E977]"
+          className="!border-1 !h-32 !w-437 !rounded-80 !border-lime-300 px-17 py-23 pl-20 hover:border-lime-300 focus:border-lime-300"
           placeholder="종목명 또는 종목코드를 입력해주세요"
           onKeyDown={handleKeyDown}
         />

src/app/main/_components/skeleton.tsx

@@ -20,7 +20,7 @@ export function AssetInfoSkeleton() {
 
 export function MyStockInfoSkeleton() {
   return (
-    <div className="relative h-308 w-300 rounded-10 bg-[#F5F5F5] p-21">
+    <div className="relative h-308 w-300 rounded-10 bg-blue-200 p-21">
       <div className="mb-10">
         <div className="h-7 w-20 animate-pulse rounded bg-gray-200" />
         <div className="mt-12 space-y-2">

src/app/main/_components/stock-card.tsx

@@ -26,8 +26,8 @@ function MarketIndexCard({ endpoint, data }: MarketIndexCardProps) {
       className={clsx(
         "relative h-116 w-308 shrink-0 flex-col items-start gap-12 rounded-10 p-20",
         {
-          "bg-[#EFF6FB]": isNegative,
-          "bg-[#FDEDED]": !isNegative,
+          "bg-blue-400": isNegative,
+          "bg-red-200": !isNegative,
         },
       )}
       aria-label={`${endpoint} market index`}
@@ -40,12 +40,12 @@ function MarketIndexCard({ endpoint, data }: MarketIndexCardProps) {
           </span>
           <div
             className={clsx("flex items-center", {
-              "text-[#1A00DF]": isNegative,
-              "text-[#F12E35]": !isNegative,
+              "text-blue-500": isNegative,
+              "text-red-500": !isNegative,
             })}
           >
             {isNegative ? (
-              <ArrowDownIcon className="fill-[#1A00DF]" />
+              <ArrowDownIcon className="fill-blue-900" />
             ) : (
               <ArrowUpIcon />
             )}

src/app/main/_components/stock-info.tsx

@@ -96,7 +96,7 @@ export default function MyStockInfo() {
 
   if (!isAuthenticated || stockCount === "0") {
     return (
-      <div className="relative h-308 w-300 rounded-10 bg-[#F5F5F5] p-21">
+      <div className="relative h-308 w-300 rounded-10 bg-red-300 p-21">
         <div className="mb-10">
           <h2 className="text-20-700">내 투자</h2>
           <p className="mt-12 text-14-600">
@@ -119,7 +119,7 @@ export default function MyStockInfo() {
   }
 
   return (
-    <div className="relative h-auto min-h-308 w-300 rounded-10 bg-[#F5F5F5] p-21">
+    <div className="relative h-auto min-h-308 w-300 rounded-10 bg-red-300 p-21">
       <div className="mb-10">
         <h2 className="text-20-700">내 투자</h2>
         <p className="mt-12 text-14-600">

src/app/my-account/layout.tsx

@@ -10,5 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="lg:max-w-2000 h-full bg-[#F5F6F8]">{children}</div>;
+  return <div className="lg:max-w-2000 h-full bg-blue-200">{children}</div>;
 }

src/app/portfolio/layout.tsx

@@ -10,5 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="lg:max-w-2000 h-full bg-[#F5F6F8]">{children}</div>;
+  return <div className="lg:max-w-2000 h-full bg-blue-200">{children}</div>;
 }

src/app/search/[id]/_components/order-stock/buy-and-sell/price-type-dropdown.tsx

@@ -15,7 +15,7 @@ export default function PriceTypeDropdown({
   return (
     <div className="flex gap-8">
       {orderType === TradeType.Edit ? (
-        <span className="mb-4 grow rounded-2 border border-solid border-[#B6B6B6] p-13 text-left">
+        <span className="mb-4 grow rounded-2 border border-solid border-gray-100 p-13 text-left">
           지정가
         </span>
       ) : (
@@ -31,7 +31,7 @@ export default function PriceTypeDropdown({
           </Dropdown.Wrapper>
         </Dropdown>
       )}
-      <span className="mb-4 w-100 rounded-2 border border-solid border-[#B6B6B6] p-13">
+      <span className="mb-4 w-100 rounded-2 border border-solid border-gray-100 p-13">
         시장가
       </span>
     </div>

src/app/search/[id]/_components/tutorial/tutorial-modal.tsx

@@ -56,7 +56,7 @@ export default function TutorialModal({ isOpen, onClose }: TutorialModalProps) {
               <button
                 type="button"
                 onClick={handlePrev}
-                className="flex items-center gap-4 rounded-md border border-gray-300 px-8 py-4 text-16-600 text-gray-700 hover:bg-gray-50"
+                className="flex items-center gap-4 rounded-md border border-gray-300 px-8 py-4 text-16-600 text-gray-800 hover:bg-gray-50"
               >
                 <ChevronLeft className="size-16" />
                 이전

src/app/search/[id]/layout.tsx

@@ -10,5 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="lg:max-w-2000 bg-[#F5F6F8]">{children}</div>;
+  return <div className="lg:max-w-2000 bg-blue-200">{children}</div>;
 }

src/app/search/_components/stock-table.tsx

@@ -34,7 +34,7 @@ export default function StockTable({ initialData }: Props) {
       width: "60px",
       align: "center",
       render: (value) => (
-        <span className="text-15-400 font-medium text-[#757575]">{value}</span>
+        <span className="text-15-400 font-medium text-gray-400">{value}</span>
       ),
     },
     {
@@ -48,7 +48,7 @@ export default function StockTable({ initialData }: Props) {
               <span className="text-15-600 mr-2 hover:text-blue-600">
                 {row.stockName}
               </span>
-              <div className="inline-flex items-center rounded bg-[#E8F5E9] px-2 py-0.5">
+              <div className="inline-flex items-center rounded bg-green-200 px-2 py-0.5">
                 <span className="whitespace-nowrap text-14-600 text-black">
                   주식
                 </span>
@@ -95,7 +95,7 @@ export default function StockTable({ initialData }: Props) {
         <TableHeader
           columns={columns}
           className="h-12"
-          cellClassName="px-6 text-15-500 text-[#757575] font-normal"
+          cellClassName="px-6 text-15-500 text-gray-800 font-normal"
         />
         <TableBody
           columns={columns}

src/components/auth-input/index.tsx

@@ -24,7 +24,7 @@ export const EmailInput = memo(({ control, error }: FormInputProps) => {
         <Input
           {...field}
           id="memberEmail"
-          className="h-66 w-full rounded-10 bg-[#F3F4F6]"
+          className="h-66 w-full rounded-10 bg-blue-400"
           placeholder="이메일"
           type="email"
           error={error}
@@ -51,7 +51,7 @@ export const PasswordInput = memo(({ control, error }: FormInputProps) => {
         <Input
           {...field}
           id="memberPassword"
-          className="mt-15 h-66 w-full rounded-10 bg-[#F3F4F6]"
+          className="mt-15 h-66 w-full rounded-10 bg-blue-400"
           placeholder="비밀번호"
           type="password"
           error={error}
@@ -78,7 +78,7 @@ export const NameInput = memo(({ control, error }: FormInputProps) => {
         <Input
           {...field}
           id="memberName"
-          className="mt-15 h-66 w-full rounded-10 bg-[#F3F4F6]"
+          className="mt-15 h-66 w-full rounded-10 bg-blue-400"
           placeholder="이름"
           type="text"
           error={error}
@@ -105,7 +105,7 @@ export const NicknameInput = memo(({ control, error }: FormInputProps) => {
         <Input
           {...field}
           id="memberNickName"
-          className="mt-15 h-66 w-full rounded-10 bg-[#F3F4F6]"
+          className="mt-15 h-66 w-full rounded-10 bg-blue-400"
           placeholder="닉네임"
           type="text"
           error={error}
@@ -143,7 +143,7 @@ export const ConfirmPasswordInput = memo(
           <Input
             {...field}
             id="confirmPassword"
-            className="mt-15 h-66 w-full rounded-10 bg-[#F3F4F6]"
+            className="mt-15 h-66 w-full rounded-10 bg-blue-400"
             placeholder="비밀번호 확인"
             type="password"
             error={passwordMatchError || error}
@@ -188,7 +188,7 @@ export const AnnualIncomeInput = memo(({ control, error }: FormInputProps) => {
                 onChange(wonValue);
               }}
               id="annualIncome"
-              className="h-66 w-full rounded-lg bg-[#F3F4F6] pr-24"
+              className="h-66 w-full rounded-lg bg-blue-400 pr-24"
               placeholder="연간 소득"
               type="text"
               error={error}

src/components/common/auth/refresh-modal.tsx

@@ -57,7 +57,7 @@ const ModalContent = memo(
             onClick={handleLogout}
             className={clsx(
               "rounded-lg border border-gray-300 px-8 py-6",
-              "text-16-600 text-gray-700",
+              "text-16-600 text-gray-800",
               "transition",
               "hover:bg-gray-50",
               "active:bg-gray-100",

src/components/common/button/index.tsx

@@ -23,13 +23,13 @@ export default function Button({
       className={cn(
         "inline-flex items-center justify-center rounded-md px-8 transition-colors focus:outline-none",
         {
-          "bg-[#0FED60] text-black hover:bg-[#0FED88]":
+          "bg-green-400 text-black hover:bg-green-600":
             variant === "primary" && !isDisabled,
           "bg-gray-200 text-gray-800 hover:bg-gray-300":
             variant === "secondary" && !isDisabled,
           "bg-white text-blue-600 border border-blue-600 hover:bg-blue-50":
             variant === "outline" && !isDisabled,
-          "bg-white text-black border border-[#B6B6B6] hover:bg-[#B6B6B6]/10 !rounded-4 px-24 py-9":
+          "bg-white text-black border border-gray-100 hover:bg-gray-100/10 !rounded-4 px-24 py-9":
             variant === "outline-gray" && !isDisabled,
           "text-white !rounded-4 px-24 py-9":
             variant === "custom" && !isDisabled,

src/components/common/carousel/index.tsx

@@ -200,11 +200,11 @@ function Carousel({
           <button
             type="button"
             onClick={nextSlide}
-            className="rounded-full p-1 hover:bg-gray-100 disabled:opacity-50"
+            className="rounded-full p-1 disabled:opacity-50"
             aria-label="Next slide"
             disabled={isTransitioning}
           >
-            <Arrowright className="stroke-[#B6B6B6]" />
+            <Arrowright className="stroke-gray-100" />
           </button>
         </div>
       </div>

src/components/common/dropdown/index.tsx

@@ -97,7 +97,7 @@ function Toggle({
       className={cn(
         "mb-4 flex w-full items-center justify-between rounded-2 text-left",
         {
-          "border border-solid border-[#B6B6B6] p-13": border === true,
+          "border border-solid border-gray-100 p-13": border === true,
         },
         className,
       )}

src/components/common/input/index.tsx

@@ -48,8 +48,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           <input
             className={cn(
               isForm
-                ? "pb-2 flex-1 border-b border-solid border-[#505050] placeholder:text-right focus:outline-none text-right pr-18"
-                : "w-full rounded-lg py-2 pl-13 pr-10 leading-tight text-gray-700 border border-gray-300 bg-white focus:border-green-500 focus:outline-none",
+                ? "pb-2 flex-1 border-b border-solid border-gray-600 placeholder:text-right focus:outline-none text-right pr-18"
+                : "w-full rounded-lg py-2 pl-13 pr-10 leading-tight text-gray-800 border border-gray-300 bg-white focus:border-green-500 focus:outline-none",
               error
                 ? "border-red-500 focus:border-red-500"
                 : "focus:shadow-outline",

src/components/common/tabs/index.tsx

@@ -100,7 +100,7 @@ function TabsTrigger({
       type="button"
       className={cn(
         "px-13 py-8 rounded-2",
-        isActive ? backgroundColors[buttonColor] : "text-[#B6B6B6]",
+        isActive ? backgroundColors[buttonColor] : "text-gray-100",
         rounded === "md" && "rounded-4",
         padding === "md" && "px-16 py-4",
         className,

src/components/common/tutorial/_components/tutorial-contents.tsx

@@ -16,7 +16,7 @@ export default function TutorialContent({ step }: TutorialContentProps) {
       <div className="space-y-20">
         {step.content.map((item, idx) => (
           <div key={`${step.title}-content-${idx}`}>
-            <h4 className="text-16-600 text-gray-700 mb-10">{item.subtitle}</h4>
+            <h4 className="text-16-600 text-gray-800 mb-10">{item.subtitle}</h4>
             <p className="text-14-500 text-gray-600">{item.description}</p>
           </div>
         ))}

src/components/common/tutorial/_components/tutorial-modal.tsx

@@ -78,7 +78,7 @@ export default function TutorialModal({ isOpen, onClose }: TutorialModalProps) {
               <button
                 type="button"
                 onClick={handlePrev}
-                className="flex items-center gap-4 rounded-md border border-gray-300 px-8 py-4 text-16-600 text-gray-700 hover:bg-gray-50"
+                className="flex items-center gap-4 rounded-md border border-gray-300 px-8 py-4 text-16-600 text-gray-800 hover:bg-gray-50"
               >
                 <ChevronLeft className="size-16" />
                 이전

src/components/nav-bar/_components/nav-icon-button.tsx

@@ -20,7 +20,7 @@ function IconButtonComponent({
       type="button"
       className={clsx(
         "flex flex-col items-center justify-center p-2",
-        isActive ? "text-[#24d075]" : "text-gray-500 hover:text-zinc-900",
+        isActive ? "text-lime-100" : "text-gray-500 hover:text-zinc-900",
         className,
       )}
       {...props}

src/components/nav-bar/_components/nav-menu.tsx

@@ -83,7 +83,7 @@ const NavItem = memo(
     isActive: boolean;
   }) => (
     <li className="relative flex w-82 justify-center">
-      {isActive && <div className="absolute left-4 h-full w-3 bg-[#26db7a]" />}
+      {isActive && <div className="absolute left-4 h-full w-3 bg-lime-200" />}
       <NavLink
         href={href}
         icon={icon}