From 8bec5256113c5d686e6057a1e509eb485991c49e Mon Sep 17 00:00:00 2001
From: Son Daehyeon <sondaehyeon01@gmail.com>
Date: Thu, 12 Sep 2024 11:53:03 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20tailwind=20arbitrary=20values=20?=
 =?UTF-8?q?=EC=A7=80=EC=96=91=20(#32)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(hook): useWinkApi를 api/hook에서 /hook으로

* refactor(tailwind): Arbitrary values 지양
---
 src/api/hook/index.ts                         |  1 -
 src/api/index.ts                              |  1 -
 src/app/login/page.tsx                        | 19 +++++-----
 src/app/page.tsx                              | 12 +++----
 src/app/project/page.tsx                      | 16 ++++-----
 src/app/signup/page.tsx                       | 28 ++++++++-------
 src/app/study/page.tsx                        | 26 +++++++-------
 src/components/Button.tsx                     |  2 +-
 src/components/Carousel.tsx                   |  6 ++--
 src/components/Footer.tsx                     | 12 +++----
 src/components/Header.tsx                     | 16 ++++-----
 src/components/Loading.tsx                    |  2 +-
 src/components/ProjectCard.tsx                | 17 ++++-----
 src/components/StudyCard.tsx                  | 12 +++----
 src/components/WebInKookmin.tsx               | 36 +++++++++----------
 src/components/form/TextField.tsx             |  4 +--
 .../useWinkApi.ts => hook/useWinkApi.tsx}     |  2 +-
 tailwind.config.js                            | 29 +++++++++++++++
 18 files changed, 131 insertions(+), 110 deletions(-)
 delete mode 100644 src/api/hook/index.ts
 rename src/{api/hook/useWinkApi.ts => hook/useWinkApi.tsx} (83%)

diff --git a/src/api/hook/index.ts b/src/api/hook/index.ts
deleted file mode 100644
index 3cb4175..0000000
--- a/src/api/hook/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useWinkApi';
diff --git a/src/api/index.ts b/src/api/index.ts
index d29ff24..a1a08fa 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -2,5 +2,4 @@ export * from './WinkApi';
 export * from './WinkApiApplication';
 
 export * from './domain';
-export * from './hook';
 export * from './request';
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index fe5a85c..974ec60 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -54,17 +54,17 @@ export default function LoginPage() {
 
   return (
     <>
-      <div className="min-h-screen flex flex-col items-center justify-center gap-[50px]">
+      <div className="min-h-screen flex flex-col items-center justify-center gap-12">
         <div className="text-center gap-6">
           <WebInKookmin />
 
-          <p className="mt-[38px] text-xl font-normal">
+          <p className="mt-9 text-xl font-normal">
             국민대학교 소프트웨어융합대학 유일무이 Web 동아리
           </p>
         </div>
 
-        <div className="bg-white px-9 rounded-lg w-full max-w-md flex flex-col gap-[50px]">
-          <div className="flex flex-col gap-[15px]">
+        <div className="bg-white px-9 rounded-lg w-full max-w-md flex flex-col gap-12">
+          <div className="flex flex-col gap-4">
             <FormContainer
               values={values}
               errors={errors}
@@ -77,17 +77,20 @@ export default function LoginPage() {
             </FormContainer>
           </div>
 
-          <div className="flex flex-col items-center gap-[5px]">
+          <div className="flex flex-col items-center gap-1">
             <Button
               type="button"
               label="로그인"
               onClick={onLoginButtonClick}
-              className="w-full py-2 text-[14px]"
+              className="w-full py-2 text-base"
             />
 
-            <div className="text-center text-[11px]">
+            <div className="text-center text-xs">
               회원이 아니신가요?
-              <Link href="/signup" className="text-[#9DB8FF] hover:underline ml-1.5">
+              <Link
+                href="/signup"
+                className="text-wink-300 hover:underline hover:text-wink-500 ml-1.5"
+              >
                 회원가입
               </Link>
             </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3aa1d80..a167fe9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,24 +5,22 @@ import Link from 'next/link';
 export default function Home() {
   return (
     <>
-      <div className="relative flex flex-col justify-center items-center min-h-[calc(100vh-65px)] bg-[#c8d7ff] overflow-hidden gap-8">
+      <div className="relative flex flex-col justify-center items-center min-h-[calc(100vh-65px)] bg-wink-100 overflow-hidden gap-8">
         <div className="absolute bottom-[15vh] left-1/2 w-[300vw] h-[300vw] bg-white rounded-[45%] animate-rotate"></div>
         <div className="absolute bottom-[12vh] left-1/2 w-[300vw] h-[300vw] bg-white rounded-[47%] opacity-50 animate-rotate"></div>
 
-        <h1 className=" z-10 text-center font-bold text-3xl md:text-[53px] md:leading-[63.25px]">
-          <span className="font-medium text-2xl md:text-[47px] mb-8">
-            나만의 서비스. 기획. 개발
-          </span>
+        <h1 className="z-10 text-center font-bold text-3xl md:text-5xl md:leading-[64px]">
+          <span className="font-medium text-2xl md:text-5xl mb-8">나만의 서비스. 기획. 개발</span>
           <br />
           우리 안의 새로운 물결 WINK
         </h1>
 
-        <p className=" font-bold text-base md:text-xl text-[#3a70ff] z-10">
+        <p className="font-bold text-base md:text-xl text-wink-500 z-10">
           <Link href={'/apply'}>지원하기 {'>'}</Link>
         </p>
       </div>
 
-      <div className="bg-gradient-to-b from-[#c8d7ff] to-[#ffffff] h-[128px] md:h-[260px]" />
+      <div className="bg-gradient-to-b from-wink-100 to-white h-32 md:h-64" />
     </>
   );
 }
diff --git a/src/app/project/page.tsx b/src/app/project/page.tsx
index 0afc63a..3be14cf 100644
--- a/src/app/project/page.tsx
+++ b/src/app/project/page.tsx
@@ -40,19 +40,17 @@ export default function Project() {
   return (
     <>
       <div className="flex flex-col items-center">
-        <div className="flex flex-col items-center justify-center pt-[128px]">
-          <h1 className=" font-bold text-[40px] text-center mb-6">WINK, 우리들의 파도</h1>
-          <p className=" font-regular text-[20px] text-center text-[#4D4D4D]">
-            나날히 성장해 가는 우리
-          </p>
+        <div className="flex flex-col items-center justify-center pt-32">
+          <h1 className="font-bold text-4xl text-center mb-6">WINK, 우리들의 파도</h1>
+          <p className="font-regular text-xl text-center text-zinc-700">나날히 성장해 가는 우리</p>
         </div>
         {/* Carousel 영역 */}
-        <div className="w-full max-w-[895px] mt-[129px]">
+        <div className="w-full max-w-carousel mt-32">
           <Carousel cards={sampleSliderProjects} />
         </div>
         {/* 프로젝트 목록 */}
-        <div className="w-full max-w-[1150px] mx-auto mt-[199.6px] mb-[85.6px]">
-          <div className="grid grid-cols-3 gap-[34px]">
+        <div className="w-full max-w-project mx-auto mt-48 mb-20">
+          <div className="grid grid-cols-3 gap-8">
             {sampleProjects.slice(0, visibleProjects).map((project) => (
               <ProjectCard
                 key={project.id}
@@ -70,7 +68,7 @@ export default function Project() {
           <div className="flex justify-center mb-10">
             <button
               onClick={loadMore}
-              className="px-[15px] py-2 bg-white rounded-[15px] border border-[#DADADA] hover:bg-gray-100  text-lg font-semibold"
+              className="px-4 py-2 bg-white rounded-2xl border border-gray-400 hover:bg-gray-100 text-lg font-semibold"
             >
               목록 더 보기
             </button>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index cfd3b5d..92a0f27 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -81,7 +81,7 @@ export default function SignUp() {
       disabled: !!values.verifyToken,
       button: (
         <Button
-          className="w-28 py-2 text-[14px]"
+          className="w-28 py-2 text-sm"
           type="button"
           label="인증번호 요청"
           hidden={!!values.verifyToken}
@@ -97,7 +97,7 @@ export default function SignUp() {
       hidden: !isSendCode || !!values.verifyToken,
       button: (
         <Button
-          className="w-28 py-2 text-[14px]"
+          className="w-28 py-2 text-sm"
           type="button"
           label="인증번호 확인"
           disabled={!values.verifyCode || !!errors.verifyCode}
@@ -162,19 +162,18 @@ export default function SignUp() {
 
   return (
     <>
-      <div className="min-h-screen flex flex-col items-center justify-center gap-[50px] mt-[56px]">
+      <div className="min-h-screen flex flex-col items-center justify-center gap-12 mt-14">
         <WebInKookmin />
 
-        <div className="flex flex-col items-center justify-center gap-[10px]">
+        <div className="flex flex-col items-center justify-center gap-2.5">
           <p className="text-xl font-normal">국민대학교 소프트웨어융합대학 유일무이 Web 동아리</p>
-
-          <p className="text-lg text-[#757575] font-normal">
+          <p className="text-lg text-zinc-500 font-normal">
             부원 확인을 위하여 회원 가입 요청 후 승인 까지 수 일이 소요될 수 있습니다.
           </p>
         </div>
 
-        <div className="bg-white px-9 rounded-lg w-full max-w-md flex flex-col gap-[50px]">
-          <div className="flex flex-col gap-[15px]">
+        <div className="bg-white px-9 rounded-lg w-full max-w-md flex flex-col gap-12">
+          <div className="flex flex-col gap-4">
             <FormContainer
               values={values}
               errors={errors}
@@ -184,7 +183,7 @@ export default function SignUp() {
               {fields
                 .filter((options) => !options.hidden)
                 .map(({ id, button, ...rest }) => (
-                  <div key={id} className="flex items-center gap-[10px] ">
+                  <div key={id} className="flex items-center gap-2.5">
                     <TextField id={id} {...rest} />
 
                     {button && button}
@@ -193,17 +192,20 @@ export default function SignUp() {
             </FormContainer>
           </div>
 
-          <div className="flex flex-col items-center gap-[5px]">
+          <div className="flex flex-col items-center gap-1">
             <Button
               type="button"
               label="회원 가입 요청"
               onClick={onSignUpButtonClick}
-              className="w-full py-2 text-[14px]"
+              className="w-full py-2 text-sm"
             />
 
-            <div className="text-center text-[11px]">
+            <div className="text-center text-xs">
               이미 회원이신가요?
-              <Link href="/login" className="text-[#9DB8FF] hover:underline ml-1.5">
+              <Link
+                href="/login"
+                className="text-wink-300 hover:underline hover:text-wink-500 ml-1.5"
+              >
                 로그인
               </Link>
             </div>
diff --git a/src/app/study/page.tsx b/src/app/study/page.tsx
index b4505e2..e0b0bd1 100644
--- a/src/app/study/page.tsx
+++ b/src/app/study/page.tsx
@@ -156,17 +156,15 @@ export default function Study() {
   return (
     <>
       <div className="flex flex-col items-center">
-        <div className="flex flex-col items-center justify-center pt-[128px]">
-          <h1 className=" font-bold text-[40px] text-center mb-6">WINK, 우리들의 파도</h1>
-          <p className=" font-regular text-[20px] text-center text-[#4D4D4D]">
-            나날히 성장해 가는 우리
-          </p>
+        <div className="flex flex-col items-center justify-center pt-32">
+          <h1 className="font-bold text-4xl text-center mb-6">WINK, 우리들의 파도</h1>
+          <p className="font-regular text-xl text-center text-zinc-700]">나날히 성장해 가는 우리</p>
         </div>
 
         {/* 주목할 글 */}
-        <div className="w-full max-w-[880px] mx-auto mt-[75px] mb-[144px]">
-          <h2 className=" font-semibold text-3xl mb-4">🔥 주목할 글</h2>
-          <div className="flex flex-col items-center w-full gap-[28px]">
+        <div className="w-full max-w-study mx-auto mt-20 mb-36">
+          <h2 className="font-semibold text-3xl mb-4">🔥 주목할 글</h2>
+          <div className="flex flex-col items-center w-full gap-7">
             {featuredStudies.map(({ id, image, link, title, description, category }) => (
               <StudyCard
                 key={id}
@@ -182,13 +180,13 @@ export default function Study() {
         </div>
 
         {/* 최신글 */}
-        <div className="w-full max-w-[880px] mx-auto mt-[50px] mb-[107.43px]">
-          <div className="flex w-full justify-between gap-[28px] mb-16">
-            <h2 className=" font-semibold text-xl">🌱 최신글</h2>
+        <div className="w-full max-w-study mx-auto mt-12 mb-28">
+          <div className="flex w-full justify-between gap-7 mb-16">
+            <h2 className="font-semibold text-xl">🌱 최신글</h2>
             <select
               value={selectedCategory}
               onChange={handleCategoryChange}
-              className="px-3 py-1 border border-[#DADADA] rounded-md"
+              className="px-3 py-1 border border-gray-400 rounded-md"
             >
               {categories.map((category) => (
                 <option key={category} value={category}>
@@ -197,7 +195,7 @@ export default function Study() {
               ))}
             </select>
           </div>
-          <div className="flex flex-col items-center gap-[28px]">
+          <div className="flex flex-col items-center gap-7">
             {filteredStudies
               .slice(0, visibleStudyCards)
               .map(({ id, image, link, title, description, category }) => (
@@ -219,7 +217,7 @@ export default function Study() {
           <div className="flex justify-center mb-72">
             <button
               onClick={loadMore}
-              className="px-[15px] py-2 bg-white rounded-[15px] border border-[#DADADA] hover:bg-gray-100  text-lg font-semibold"
+              className="px-4 py-2 bg-white rounded-2xl border border-gray-400 hover:bg-gray-100  text-lg font-semibold"
             >
               더 보기
             </button>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 5312228..cf68b4c 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -7,7 +7,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button: React.FC<ButtonProps> = ({ className, label, ...rest }) => {
   return (
     <button
-      className={`text-white bg-[#9DB8FF] hover:bg-[#8aa7ff] rounded focus:outline-none focus:ring-2 focus:ring-[#9DB8FF] ${className}`}
+      className={`text-white bg-wink-200 hover:bg-wink-500 rounded focus:outline-none focus:ring-2 focus:ring-wink-500 ${className}`}
       {...rest}
     >
       {label}
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
index 01fcedf..899897d 100644
--- a/src/components/Carousel.tsx
+++ b/src/components/Carousel.tsx
@@ -79,8 +79,8 @@ export const Carousel: React.FC<CarouselProps> = ({ cards }: CarouselProps) => {
       {/* 클릭한 카드의 정보 표시 */}
       {cards.length > 0 && currentIndex !== null && (
         <div className="flex flex-col items-center pt-32 pb-12">
-          <h2 className=" font-bold text-3xl mb-2">{cards[currentIndex].title}</h2>
-          <p className=" font-medium text-[#737373] text-xl">{cards[currentIndex].content}</p>
+          <h2 className="font-bold text-3xl mb-2">{cards[currentIndex].title}</h2>
+          <p className="font-medium text-slate-500 text-xl">{cards[currentIndex].content}</p>
         </div>
       )}
 
@@ -90,7 +90,7 @@ export const Carousel: React.FC<CarouselProps> = ({ cards }: CarouselProps) => {
           <li
             key={index}
             className={`w-3 h-3 rounded-full ${
-              currentIndex === index ? 'bg-[#4D4D4D]' : 'bg-[#D9D9D9]'
+              currentIndex === index ? 'bg-gray-700' : 'bg-gray-300'
             } cursor-pointer`}
             onClick={() => rotateCarousel(index)}
           ></li>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9133158..4b85319 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -35,22 +35,22 @@ const LINKS: Link[] = [
 export const Footer: React.FC = () => {
   return (
     <div className="flex flex-col py-20 items-center">
-      <div className="flex gap-1 mb-[30px]">
-        <Image src={logo} alt={'WINK small logo'} width={36} />
-        <p className=" text-lg text-[#8D9DB0]">WINK</p>
+      <div className="flex gap-1 mb-7">
+        <Image src={logo} alt={'logo'} width={36} />
+        <p className="text-lg text-slate-400">WINK</p>
       </div>
 
       <ul className="flex list-none gap-5 mb-7">
         {LINKS.map((link) => (
           <Link key={link.id} href={link.href}>
-            <Image className="h-[55px]" src={link.icon} alt={link.id} />
+            <Image className="h-14" src={link.icon} alt={link.id} />
           </Link>
         ))}
       </ul>
 
       <div className="flex flex-col gap-7">
-        <h3 className=" text-xl text-[#8D9DB0]">서울 성북구 정릉로 77 미래관 605-1</h3>
-        <p className=" text-xl text-[#6B7684]">@ WINK 2024 All rights reserved.</p>
+        <h3 className="text-xl text-slate-400">서울 성북구 정릉로 77 미래관 605-1</h3>
+        <p className="text-xl text-gray-500">© WINK 2024 All rights reserved.</p>
       </div>
     </div>
   );
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d816d5f..1caae1d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -111,12 +111,12 @@ export const Header: React.FC = () => {
     <header
       className={`fixed top-0 z-50 bg-white w-full h-14 flex items-center justify-center border-b`}
     >
-      <div className="w-full max-w-[1440px] flex justify-between p-4 lg:p-6">
+      <div className="w-full max-w-page flex justify-between p-4 lg:p-6">
         <Link href={'/'} replace>
           <Image
             className="object-contain h-6"
             src={logo}
-            alt="Logo of WINK"
+            alt="logo"
             placeholder="blur"
             height={24}
             priority
@@ -127,8 +127,8 @@ export const Header: React.FC = () => {
             {navigations.map((link) => (
               <li
                 key={link.title}
-                className={` font-bold text-sm relative ${
-                  getActiveNav() === link.title ? 'text-[#3a70ff]' : 'text-black'
+                className={`font-bold text-sm relative ${
+                  getActiveNav() === link.title ? 'text-wink-500' : 'text-black'
                 } ${link.mobileHide && 'hidden sm:block'}`}
               >
                 {link.title === 'logout' ? (
@@ -143,13 +143,13 @@ export const Header: React.FC = () => {
                   </a>
                 )}
                 {link.title === 'program' && isProgramDropdownOpen && (
-                  <ul className="flex flex-col items-center absolute mt-[18px] left-[-13px] w-20 bg-white shadow-lg border">
+                  <ul className="flex flex-col items-center absolute mt-4.5 -left-3 w-20 bg-white shadow-lg border">
                     {programDropdownItems.map((item) => (
                       <li
                         key={item.title}
                         className={`py-2 ${
                           getActiveDropdownItem(programDropdownItems) === item.title
-                            ? 'text-[#3a70ff]'
+                            ? 'text-wink-500'
                             : 'text-black'
                         }`}
                       >
@@ -159,13 +159,13 @@ export const Header: React.FC = () => {
                   </ul>
                 )}
                 {link.title === 'about us' && isAboutUsDropdownOpen && (
-                  <ul className="flex flex-col items-center absolute mt-[18px] left-[-18px] w-24 bg-white shadow-lg border">
+                  <ul className="flex flex-col items-center absolute mt-4.5 -left-4.5 w-24 bg-white shadow-lg border">
                     {aboutUsDropdownItems.map((item) => (
                       <li
                         key={item.title}
                         className={`py-2 ${
                           getActiveDropdownItem(aboutUsDropdownItems) === item.title
-                            ? 'text-[#3a70ff]'
+                            ? 'text-wink-500'
                             : 'text-black'
                         }`}
                       >
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 3401459..69ca86b 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 export const Loading: React.FC = () => {
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="w-16 h-16 border-t-4 border-blue-500 border-solid rounded-full animate-spin"></div>
+      <div className="w-16 h-16 border-t-4 border-wink-500 border-solid rounded-full animate-spin"></div>
     </div>
   );
 };
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 5fff30f..b11a8e9 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -24,7 +24,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
       href={link}
       target="_blank"
       rel="noopener noreferrer"
-      className="border border-[#DADADA] rounded-[45px] overflow-hidden shadow-lg cursor-pointer block"
+      className="border border-border rounded-project-card overflow-hidden shadow-lg cursor-pointer block"
     >
       {imageUrl ? (
         <Image
@@ -39,20 +39,17 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
           <Image src={logo} alt={'이미지 없음'} width={100} height={100} />
         </div>
       )}
-      <div className="p-[13.5px_27px_27px_27px]">
+      <div className="p-7 pt-3.5">
         <div className="flex flex-col">
-          <div className="flex justify-between items-center mb-[23.4px]">
-            <h2
-              className=" font-bold text-lg flex-1 overflow-hidden whitespace-nowrap text-ellipsis"
-              style={{ maxWidth: 'calc(100% - 100px)' }}
-            >
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="max-w-[calc(100% - 100px)] font-bold text-lg flex-1 overflow-hidden whitespace-nowrap text-ellipsis">
               {title}
             </h2>
-            <div className="flex justify-center items-center bg-[#E8E8E8] text-center rounded-[12.6px] px-[12.6px] py-[4.5px]">
-              <h2 className=" text-[16px] font-medium text-center">{year}년</h2>
+            <div className="flex justify-center items-center bg-zinc-200 text-center rounded-xl px-3 py-1">
+              <h2 className="text-base font-medium text-center">{year}년</h2>
             </div>
           </div>
-          <div className="text-[#696969]  text-[12.6px] font-bold">
+          <div className="text-zinc-500 text-3 font-bold">
             {tags.map((tag, index) => (
               <span key={index} className="mr-1">
                 #{tag}
diff --git a/src/components/StudyCard.tsx b/src/components/StudyCard.tsx
index f92b279..359f936 100644
--- a/src/components/StudyCard.tsx
+++ b/src/components/StudyCard.tsx
@@ -26,19 +26,19 @@ export const StudyCard: React.FC<StudyCardProps> = ({
       href={link}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex w-full justify-between items-center border border-[#ADADAD] px-5 py-2.5 rounded-[10px] hover:bg-gray-100"
+      className="flex w-full justify-between items-center border border-gray-400 px-5 py-2.5 rounded-lg hover:bg-gray-50"
     >
       {/* 스터디 제목 및 설명 */}
-      <div className="flex flex-col gap-[9px] my-[16.22px]">
-        <h2 className=" font-bold text-xl max-w-screen-sm truncate">{title}</h2>
-        <p className=" font-medium text-base text-[#868686] max-w-screen-sm truncate">
+      <div className="flex flex-col gap-2.5 my-4">
+        <h2 className="font-bold text-xl max-w-screen-sm truncate">{title}</h2>
+        <p className="font-medium text-base text-slate-500 max-w-screen-sm truncate">
           {description}
         </p>
-        <p className=" font-medium text-base max-w-screen-sm truncate">{link}</p>
+        <p className="font-medium text-base max-w-screen-sm truncate">{link}</p>
       </div>
 
       {/* 이미지 영역 */}
-      <div className="flex items-center flex-shrink-0 w-[139px] h-[112px]">
+      <div className="flex items-center flex-shrink-0 w-36 h-28">
         <Image src={image || logo} alt={title} width={139} height={112} />
       </div>
     </a>
diff --git a/src/components/WebInKookmin.tsx b/src/components/WebInKookmin.tsx
index 3d69f93..3ea3717 100644
--- a/src/components/WebInKookmin.tsx
+++ b/src/components/WebInKookmin.tsx
@@ -1,30 +1,28 @@
 import React from 'react';
 
 export const WebInKookmin: React.FC = () => {
-  const colors = ['#B6CDFF', '#E7EDFE'];
-
   const text = [
-    { text: 'W', color: colors[0] },
-    { text: 'E', color: colors[1] },
-    { text: 'B', color: colors[1] },
-    { text: ' ', color: colors[0] },
-    { text: 'I', color: colors[0] },
-    { text: 'N', color: colors[0] },
-    { text: ' ', color: colors[0] },
-    { text: 'K', color: colors[0] },
-    { text: 'O', color: colors[1] },
-    { text: 'O', color: colors[1] },
-    { text: 'K', color: colors[1] },
-    { text: 'M', color: colors[1] },
-    { text: 'I', color: colors[1] },
-    { text: 'N', color: colors[1] },
+    { text: 'W', color: 'wink-200' },
+    { text: 'E', color: 'wink-50' },
+    { text: 'B', color: 'wink-50' },
+    { text: ' ', color: 'white' },
+    { text: 'I', color: 'wink-200' },
+    { text: 'N', color: 'wink-200' },
+    { text: ' ', color: 'white' },
+    { text: 'K', color: 'wink-200' },
+    { text: 'O', color: 'wink-50' },
+    { text: 'O', color: 'wink-50' },
+    { text: 'K', color: 'wink-50' },
+    { text: 'M', color: 'wink-50' },
+    { text: 'I', color: 'wink-50' },
+    { text: 'N', color: 'wink-50' },
   ];
 
   return (
     <div className="text-7xl font-bold tracking-wide select-none">
-      {text.map((t, i) => (
-        <span key={i} style={{ color: t.color }}>
-          {t.text}
+      {text.map(({ text, color }, i) => (
+        <span key={i} className={`text-${color}`}>
+          {text}
         </span>
       ))}
     </div>
diff --git a/src/components/form/TextField.tsx b/src/components/form/TextField.tsx
index 5097799..9ed4c3f 100644
--- a/src/components/form/TextField.tsx
+++ b/src/components/form/TextField.tsx
@@ -14,7 +14,7 @@ export const TextField: React.FC<TextFieldProps> = ({ id, ...rest }) => {
   return (
     <div className="flex flex-col gap-1 w-full" key={id}>
       <input
-        className="px-3 py-4 border border-[#C4C4C4] rounded focus:outline-none focus:ring-1 focus:ring-[#9DB8FF] placeholder-gray-600"
+        className="px-3 py-4 border border-border rounded focus:outline-none focus:ring-1 focus:ring-wink-300 placeholder-gray-600"
         id={id}
         value={values[id]}
         onChange={onChange}
@@ -25,7 +25,7 @@ export const TextField: React.FC<TextFieldProps> = ({ id, ...rest }) => {
         }}
         {...rest}
       />
-      {errors[id] && <p className="text-[11px] text-[#FF0000]">{errors[id]}</p>}
+      {errors[id] && <p className="text-xs text-red-500">{errors[id]}</p>}
     </div>
   );
 };
diff --git a/src/api/hook/useWinkApi.ts b/src/hook/useWinkApi.tsx
similarity index 83%
rename from src/api/hook/useWinkApi.ts
rename to src/hook/useWinkApi.tsx
index 08dceed..5f2ad98 100644
--- a/src/api/hook/useWinkApi.ts
+++ b/src/hook/useWinkApi.tsx
@@ -5,7 +5,7 @@ interface WinkApiHookResponse<T> {
   content: T;
 }
 
-export const useWinkApi = <T>(result: Promise<T>): WinkApiHookResponse<T> => {
+export const useWinkApi = <T,>(result: Promise<T>): WinkApiHookResponse<T> => {
   const [fetching, setFetching] = useState<boolean>(true);
   const [content, setContent] = useState<T>({} as T);
 
diff --git a/tailwind.config.js b/tailwind.config.js
index e17d8a6..bb41cd2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,35 @@ module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      colors: {
+        wink: {
+          50: '#e3ecff',
+          100: '#c8d9ff',
+          200: '#a6c1ff',
+          300: '#83a9ff',
+          400: '#5f8fff',
+          500: '#3a70ff', // Base color
+          600: '#2f5ce6',
+          700: '#2649b3',
+          800: '#1d3680',
+          900: '#14234d',
+        },
+      },
+      width: {
+        page: '1440px',
+        carousel: '895px',
+        project: '1150px',
+        study: '880px',
+      },
+      margin: {
+        4.5: '18px',
+      },
+      spacing: {
+        4.5: '18px',
+      },
+      borderRadius: {
+        'project-card': '45px',
+      },
       keyframes: {
         rotate: {
           '0%': { transform: 'translate(-50%, 0) rotateZ(0deg)' },