refactor: tailwind arbitrary values 지양 (#32)

* refactor(hook): useWinkApi를 api/hook에서 /hook으로 * refactor(tailwind): Arbitrary values 지양
KMU-WINK · Sep 12, 2024 · 8bec525 · 8bec525
1 parent 6f4ec00
commit 8bec525
Show file tree

Hide file tree

Showing 18 changed files with 131 additions and 110 deletions.
diff --git a/src/api/hook/index.ts b/src/api/hook/index.ts
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };