From e6eb175798e01e5a60d1d1812fcd300cc0c96d3c Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Tue, 28 May 2024 19:30:03 +0900
Subject: [PATCH 01/20] =?UTF-8?q?fix:=20default-props=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?lint=EC=84=A4=EC=A0=95=20off?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.json b/.eslintrc.json
index 63612ed..68084a3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,6 +15,7 @@
   ],
   "ignorePatterns": ["next.config.mjs"],
   "rules": {
+    "react/require-default-props": "off",
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
     "react/jsx-props-no-spreading": "off",

From e112ab8175c3252350ef10d5b8e95728006c1d0c Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Tue, 28 May 2024 19:30:32 +0900
Subject: [PATCH 02/20] =?UTF-8?q?fix:=20eye-on=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=ED=8C=8C=EC=9D=BC=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?=
 =?UTF-8?q?=EC=9E=98=EB=AA=BB=EB=90=98=EC=96=B4=EC=9E=88=EB=8A=94=EA=B2=83?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constant.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 8592fd8..605376c 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -18,7 +18,7 @@ export const STAR_ICON = "/images/star-gray.svg";
 export const THUMBS_UP_ICON = "/images/thumbs-up-inactive.svg";
 export const THUMBS_UP_ACTIVE_ICON = "/images/thumbs-up-active.svg";
 export const EYE_OFF_ICON = "/images/visibility-off.svg";
-export const EYE_ON_ICON = "/images/visibility-on.svg";
+export const EYE_ON_ICON = "/images/visibility.svg";
 export const LOADING_SMALL_IMAGE = "/images/loading-small.svg";
 export const LOADING_LARGE_IMAGE = "/images/loading-large.svg";
 export const LOGO_IMAGE = "/images/main-logo.svg";

From 35d28dd45801798af2fc197048c5d9739ff56a25 Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Tue, 28 May 2024 19:31:47 +0900
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20Input=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/Input.module.scss | 48 ++++++++++++++++++
 src/components/Input/Input.tsx         | 70 ++++++++++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 src/components/Input/Input.module.scss
 create mode 100644 src/components/Input/Input.tsx

diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
new file mode 100644
index 0000000..7450e55
--- /dev/null
+++ b/src/components/Input/Input.module.scss
@@ -0,0 +1,48 @@
+@import "@/styles/_index.scss";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 40rem;
+}
+
+.label {
+  color: $white-100;
+}
+
+.input {
+  border: none;
+  width: 100%;
+  outline: 1px solid $gray-300;
+  background: $black-200;
+  color: $white-100;
+  padding: 1rem;
+
+  &:focus {
+    outline: 1px solid $blue-100;
+  }
+
+  @include rounded-md;
+}
+
+.inputBox {
+  position: relative;
+}
+
+.eyeIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.6rem;
+  transform: translateY(-50%);
+}
+
+.error {
+  outline: 1px solid $red-100;
+}
+
+.errorMessage {
+  color: $red-100;
+
+  @include text-xs;
+}
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..591bd00
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import cn from "@/utils/classNames";
+import { EYE_OFF_ICON, EYE_ON_ICON } from "@/utils/constant";
+import styles from "./Input.module.scss";
+
+type InputProps = {
+  name: string;
+  type?: "email" | "text" | "password";
+  label?: string;
+  placeholder?: string;
+  required?: string;
+  minLength?: { value: number; message: string };
+  maxLength?: { value: number; message: string };
+  pattern?: { value: RegExp; message: string };
+  validate?: { ["type"]: () => string };
+};
+
+export default function Input({
+  name,
+  label,
+  type,
+  placeholder = "",
+  required,
+  minLength,
+  maxLength,
+  pattern,
+  validate,
+}: InputProps) {
+  const {
+    register,
+    formState: { errors },
+  } = useForm({ mode: "onBlur" });
+
+  const [showPassword, setShowPassword] = useState(false);
+  const handleEyeIconClick = () => setShowPassword((prev: boolean) => !prev);
+
+  return (
+    <div className={styles.container}>
+      <label
+        className={styles.label}
+        htmlFor={name}
+      >
+        {label}
+      </label>
+      <div className={styles.inputBox}>
+        <input
+          className={cn(styles.input, errors[name] && styles.error)}
+          type={showPassword ? "text" : type}
+          placeholder={placeholder}
+          {...register(name, { required, minLength, maxLength, pattern, validate })}
+        />
+        {type === "password" && (
+          <Image
+            className={styles.eyeIcon}
+            src={showPassword ? EYE_ON_ICON : EYE_OFF_ICON}
+            alt='eye'
+            onClick={handleEyeIconClick}
+            width={18}
+            height={18}
+          />
+        )}
+      </div>
+      {errors[name] && <p className={styles.errorMessage}>{errors[name]?.message?.toString()}</p>}
+    </div>
+  );
+}

From d92963aa5dc596fc7ed7d37bb4e60bbe70583d90 Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Wed, 29 May 2024 11:19:01 +0900
Subject: [PATCH 04/20] =?UTF-8?q?[#28]=20feat:=20comparePage=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/compare/compare.module.scss |  5 +++++
 src/app/compare/page.tsx            | 12 ++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 src/app/compare/compare.module.scss
 create mode 100644 src/app/compare/page.tsx

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
new file mode 100644
index 0000000..5630d42
--- /dev/null
+++ b/src/app/compare/compare.module.scss
@@ -0,0 +1,5 @@
+@import "@/styles/_index";
+
+.background {
+  background-color: $bg-black-100;
+}
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
new file mode 100644
index 0000000..e8bdca1
--- /dev/null
+++ b/src/app/compare/page.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./compare.module.scss";
+
+function ComparePage() {
+  return (
+    <div className={styles.background}>
+      <div>hi</div>
+    </div>
+  );
+}
+
+export default ComparePage;

From d12fe242e992ce83d6b7db0e7afcfc23f5085f3d Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Wed, 29 May 2024 13:55:38 +0900
Subject: [PATCH 05/20] =?UTF-8?q?[#28]=20feat:=20comparePage=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/compare/compare.module.scss           | 74 +++++++++++++++++++
 src/app/compare/page.tsx                      | 23 +++++-
 .../CategoryFilter.module.scss                |  1 +
 .../Chip/Category/Category.module.scss        |  3 +-
 .../Chip/Compare/Compare.module.scss          |  2 +
 .../Chip/Ranking/Ranking.module.scss          |  3 +-
 6 files changed, 103 insertions(+), 3 deletions(-)

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
index 5630d42..82365ba 100644
--- a/src/app/compare/compare.module.scss
+++ b/src/app/compare/compare.module.scss
@@ -1,5 +1,79 @@
 @import "@/styles/_index";
+@import "@/styles/_media";
 
 .background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
   background-color: $bg-black-100;
 }
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  gap: 20px;
+  margin-top: 60px;
+  @include respond-to(tablet) {
+    margin-top: 40px;
+  }
+  @include respond-to(mobile) {
+    margin-top: 30px;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+  }
+}
+.input {
+  width: 350px;
+  height: 70px;
+  padding: 23px 20px;
+  gap: 10px;
+  border-radius: 8px;
+  border: 1px solid $gray-300;
+  background: $black-200;
+  &:focus {
+    border: 1px solid $blue-100;
+    outline: none;
+  }
+  @include respond-to(tablet) {
+    width: 240px;
+    height: 55px;
+  }
+  @include respond-to(mobile) {
+    width: 335px;
+    height: 55px;
+    padding: 23px 20px;
+    border-radius: 8px;
+  }
+}
+.text {
+  color: $white-100;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 10px;
+}
+.button {
+  width: 200px;
+  height: 70px;
+  gap: 10px;
+  border-radius: 8px;
+  background: linear-gradient(91.17deg, #5097fa 0%, #5363ff 100%);
+  border: none;
+  font-size: 18px;
+  font-weight: 600;
+  color: $white-100;
+  font-family: Pretendard;
+  @include respond-to(tablet) {
+    width: 164px;
+    height: 55px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  @include respond-to(mobile) {
+    width: 335px;
+    height: 50px;
+    gap: 10px;
+    border-radius: 8px;
+  }
+}
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index e8bdca1..61914f7 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -4,7 +4,28 @@ import styles from "./compare.module.scss";
 function ComparePage() {
   return (
     <div className={styles.background}>
-      <div>hi</div>
+      <div className={styles.content}>
+        <div>
+          <div className={styles.text}>상품 1</div>
+          <input
+            type='text'
+            className={styles.input}
+          />
+        </div>
+        <div>
+          <div className={styles.text}>상품 2</div>
+          <input
+            type='text'
+            className={styles.input}
+          />
+        </div>
+        <button
+          type='button'
+          className={styles.button}
+        >
+          비교하기
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Chip/Category-filter/CategoryFilter.module.scss b/src/components/Chip/Category-filter/CategoryFilter.module.scss
index 70c1207..6b7a003 100644
--- a/src/components/Chip/Category-filter/CategoryFilter.module.scss
+++ b/src/components/Chip/Category-filter/CategoryFilter.module.scss
@@ -1,4 +1,5 @@
 @import "@/styles/_index";
+@import "@/styles/_media";
 
 .container {
   display: flex;
diff --git a/src/components/Chip/Category/Category.module.scss b/src/components/Chip/Category/Category.module.scss
index 19e526d..46c6e60 100644
--- a/src/components/Chip/Category/Category.module.scss
+++ b/src/components/Chip/Category/Category.module.scss
@@ -1,4 +1,5 @@
 @import "@/styles/_index";
+@import "@/styles/_media";
 
 .container {
   display: flex;
@@ -10,7 +11,7 @@
   border-radius: 8px;
   font-size: 18px;
   font-weight: 500;
-  @include respond-to(mibile) {
+  @include respond-to(mobile) {
     padding: 4px 8px;
     font-size: 12px;
   }
diff --git a/src/components/Chip/Compare/Compare.module.scss b/src/components/Chip/Compare/Compare.module.scss
index 4d2e859..246cc7f 100644
--- a/src/components/Chip/Compare/Compare.module.scss
+++ b/src/components/Chip/Compare/Compare.module.scss
@@ -1,4 +1,6 @@
 @import "@/styles/_index";
+@import "@/styles/_media";
+
 .back {
   background-color: black;
 }
diff --git a/src/components/Chip/Ranking/Ranking.module.scss b/src/components/Chip/Ranking/Ranking.module.scss
index 57440fb..da2d906 100644
--- a/src/components/Chip/Ranking/Ranking.module.scss
+++ b/src/components/Chip/Ranking/Ranking.module.scss
@@ -1,4 +1,5 @@
 @import "@/styles/_index";
+@import "@/styles/_media";
 
 .container {
   display: flex;
@@ -8,7 +9,7 @@
   width: 3.2rem;
   height: 1.8rem;
   font-size: 1.2rem;
-  @include respond-to(mibile) {
+  @include respond-to(mobile) {
     width: 2.6rem;
     height: 1.6rem;
     font-size: 1rem;

From 53d9badbb5179fcb282bce73d52949766a40196b Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Sat, 1 Jun 2024 11:29:40 +0900
Subject: [PATCH 06/20] chore: stylelint

---
 src/app/compare/compare.module.scss           | 90 +++++++++++++++----
 src/app/compare/page.tsx                      | 67 +++++++++++++-
 .../CategoryFilter.module.scss                | 10 +--
 .../Chip/Category/Category.module.scss        | 36 +++++---
 .../Chip/Compare/Compare.module.scss          | 19 ++--
 .../Chip/Ranking/Ranking.module.scss          | 14 +--
 src/components/Chip/Thumbs/Thumbs.module.scss | 14 +--
 7 files changed, 195 insertions(+), 55 deletions(-)

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
index 82365ba..067c5b7 100644
--- a/src/app/compare/compare.module.scss
+++ b/src/app/compare/compare.module.scss
@@ -7,38 +7,49 @@
   height: 100%;
   background-color: $bg-black-100;
 }
+
 .content {
   display: flex;
-  justify-content: center;
-  align-items: end;
   gap: 20px;
-  margin-top: 60px;
+  align-items: end;
+  justify-content: center;
+
+  // margin-top: 60px;
   @include respond-to(tablet) {
     margin-top: 40px;
   }
+
   @include respond-to(mobile) {
-    margin-top: 30px;
     flex-direction: column;
-    align-items: center;
     gap: 30px;
+    align-items: center;
+    margin-top: 30px;
   }
 }
+
 .input {
+  gap: 10px;
   width: 350px;
   height: 70px;
   padding: 23px 20px;
-  gap: 10px;
-  border-radius: 8px;
-  border: 1px solid $gray-300;
+  font-family: Pretendard;
+  font-size: 16px;
+  color: $white-100;
   background: $black-200;
+  border: 1px solid $gray-300;
+  border-radius: 8px;
+
   &:focus {
     border: 1px solid $blue-100;
     outline: none;
   }
+
   @include respond-to(tablet) {
     width: 240px;
     height: 55px;
+    font-size: 14px;
   }
+
   @include respond-to(mobile) {
     width: 335px;
     height: 55px;
@@ -46,34 +57,81 @@
     border-radius: 8px;
   }
 }
+
 .text {
-  color: $white-100;
+  margin-bottom: 10px;
   font-family: Pretendard;
   font-size: 16px;
   font-weight: 400;
-  margin-bottom: 10px;
+  color: $white-100;
 }
+
 .button {
+  gap: 10px;
   width: 200px;
   height: 70px;
-  gap: 10px;
-  border-radius: 8px;
-  background: linear-gradient(91.17deg, #5097fa 0%, #5363ff 100%);
-  border: none;
+  font-family: Pretendard;
   font-size: 18px;
   font-weight: 600;
   color: $white-100;
-  font-family: Pretendard;
+  background: linear-gradient(91.17deg, #5097fa 0%, #5363ff 100%);
+  border: none;
+  border-radius: 8px;
+
   @include respond-to(tablet) {
     width: 164px;
     height: 55px;
     font-size: 16px;
     font-weight: 600;
   }
+
   @include respond-to(mobile) {
+    gap: 10px;
     width: 335px;
     height: 50px;
-    gap: 10px;
     border-radius: 8px;
   }
 }
+
+.compare {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: $white-100;
+}
+
+.table {
+  width: 940px;
+  margin: 20px 0;
+  font-size: 1em;
+  text-align: left;
+  background-color: $black-200;
+  border-radius: 12px;
+}
+
+.trHead {
+  color: $gray-100;
+  border-bottom: 1px solid $gray-300;
+}
+
+.name {
+  color: $gray-100;
+}
+
+.th {
+  padding: 20px;
+  text-align: center;
+}
+
+.td {
+  padding: 30px;
+  text-align: center;
+}
+
+.winner {
+  color: $green-100;
+}
+
+.loser {
+  color: $pink-100;
+}
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 61914f7..d5cd79b 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,31 +1,92 @@
-import React from "react";
+"use client";
+
+import React, { useState } from "react";
 import styles from "./compare.module.scss";
 
 function ComparePage() {
+  const [compare, setCompare] = useState(false);
+
   return (
     <div className={styles.background}>
       <div className={styles.content}>
         <div>
           <div className={styles.text}>상품 1</div>
           <input
-            type='text'
+            type='search'
             className={styles.input}
           />
         </div>
         <div>
           <div className={styles.text}>상품 2</div>
           <input
-            type='text'
+            type='search'
             className={styles.input}
           />
         </div>
         <button
           type='button'
           className={styles.button}
+          onClick={() => setCompare(!compare)}
         >
           비교하기
         </button>
       </div>
+      {compare && (
+        <div className={styles.compare}>
+          <div>
+            <div>Air Pods Max 상품이 승리하였습니다!</div>
+            <div>6가지 항목 중 3가지 항목에서 우세합니다.</div>
+          </div>
+          <table className={styles.table}>
+            <thead>
+              <tr className={styles.trHead}>
+                <th className={styles.th}>기준</th>
+                <th className={styles.th}>상품 1</th>
+                <th className={styles.th}>상품 2</th>
+                <th className={styles.th}>결과</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className={styles.tr}>
+                <td className={`${styles.td} ${styles.name}`}>절대 별점</td>
+                <td className={styles.td}>4.8</td>
+                <td className={styles.td}>4.9</td>
+                <td className={`${styles.loser} ${styles.td}`}>상품 2 승리</td>
+              </tr>
+              <tr className={styles.tr}>
+                <td className={`${styles.td} ${styles.name}`}>상대 별점</td>
+                <td className={styles.td}>+1.5</td>
+                <td className={styles.td}>+2.5</td>
+                <td className={`${styles.loser} ${styles.td}`}>상품 2 승리</td>
+              </tr>
+              <tr className={styles.tr}>
+                <td className={`${styles.td} ${styles.name}`}>절대 찜 개수</td>
+                <td className={styles.td}>13,580</td>
+                <td className={styles.td}>1,560</td>
+                <td className={`${styles.winner} ${styles.td}`}>상품 1 승리</td>
+              </tr>
+              <tr className={styles.tr}>
+                <td className={`${styles.td} ${styles.name}`}>상대 찜 개수</td>
+                <td className={styles.td}>-150</td>
+                <td className={styles.td}>+185</td>
+                <td className={`${styles.loser} ${styles.td}`}>상품 2 승리</td>
+              </tr>
+              <tr className={styles.tr}>
+                <td className={`${styles.td} ${styles.name}`}>절대 조회수</td>
+                <td className={styles.td}>13,580</td>
+                <td className={styles.td}>1,560</td>
+                <td className={`${styles.winner} ${styles.td}`}>상품 1 승리</td>
+              </tr>
+              <tr className={styles.tr}>
+                <td className={`${styles.td} ${styles.name}`}>상대 조회수</td>
+                <td className={styles.td}>+113</td>
+                <td className={styles.td}>+113</td>
+                <td className={`${styles.draw} ${styles.td}`}>무승부</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Chip/Category-filter/CategoryFilter.module.scss b/src/components/Chip/Category-filter/CategoryFilter.module.scss
index 6b7a003..66f7eb8 100644
--- a/src/components/Chip/Category-filter/CategoryFilter.module.scss
+++ b/src/components/Chip/Category-filter/CategoryFilter.module.scss
@@ -3,14 +3,14 @@
 
 .container {
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 5px;
-  color: $gray-200;
-  border-radius: 100px;
+  align-items: center;
+  justify-content: center;
   width: 96px;
   height: 30px;
+  font-size: 14px;
+  color: $gray-200;
   background-color: $black-200;
   border: 0.1rem solid $gray-300;
-  font-size: 14px;
+  border-radius: 100px;
 }
diff --git a/src/components/Chip/Category/Category.module.scss b/src/components/Chip/Category/Category.module.scss
index 46c6e60..84469dd 100644
--- a/src/components/Chip/Category/Category.module.scss
+++ b/src/components/Chip/Category/Category.module.scss
@@ -3,59 +3,71 @@
 
 .container {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: fit-content;
   height: 29px;
   padding: 4px 10px;
-  border-radius: 8px;
   font-size: 18px;
   font-weight: 500;
+  border-radius: 8px;
+
   @include respond-to(mobile) {
     padding: 4px 8px;
     font-size: 12px;
   }
 }
+
 .yellow {
-  background-color: rgba(197, 209, 124, 0.1);
   color: #c5d17c;
+  background-color: rgb(197 209 124 / 10%);
 }
+
 .red {
-  background-color: rgba(247, 86, 50, 0.1);
   color: #f75532;
+  background-color: rgb(247 86 50 / 10%);
 }
+
 .purple {
-  background-color: rgba(169, 83, 255, 0.1);
   color: #a953ff;
+  background-color: rgb(169 83 255 / 10%);
 }
+
 .green {
-  background-color: rgba(73, 175, 26, 0.1);
   color: #49af1a;
+  background-color: rgb(73 175 26 / 10%);
 }
+
 .pink {
-  background-color: rgba(214, 118, 193, 0.1);
   color: #d676c1;
+  background-color: rgb(214 118 193 / 10%);
 }
+
 .orange {
-  background-color: rgba(255, 126, 70, 0.1);
   color: #ff7e46;
+  background-color: rgb(255 126 70 / 10%);
 }
+
 .mint {
-  background-color: rgba(35, 181, 129, 0.1);
   color: #23b581;
+  background-color: rgb(35 181 129 / 10%);
 }
+
 .hotpink {
-  background-color: rgba(253, 82, 154, 0.1);
   color: #fd529a;
+  background-color: rgb(253 82 154 / 10%);
 }
+
 .navy {
-  background-color: rgba(117, 122, 255, 0.1);
   color: #757aff;
+  background-color: rgb(117 122 255 / 10%);
 }
+
 .blue {
-  background-color: rgba(48, 152, 227, 0.1);
   color: #3098e3;
+  background-color: rgb(48 152 227 / 10%);
 }
+
 .default {
   display: none;
 }
diff --git a/src/components/Chip/Compare/Compare.module.scss b/src/components/Chip/Compare/Compare.module.scss
index 246cc7f..13d1ed9 100644
--- a/src/components/Chip/Compare/Compare.module.scss
+++ b/src/components/Chip/Compare/Compare.module.scss
@@ -6,25 +6,28 @@
 }
 
 .container {
-  width: fit-content;
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 10px;
-  border-radius: 6px;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
   padding: 8px 10px;
   font-size: 16px;
+  border-radius: 6px;
 }
+
 .closeIcon {
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 6px;
   padding: 2px;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: 6px;
 }
+
 .compare1 {
-  background-color: rgba(5, 213, 140, 0.3);
   color: $green-100;
+  background-color: rgb(5 213 140 / 30%);
 }
+
 .compare2 {
-  background-color: rgba(255, 47, 159, 0.3);
   color: $pink-100;
+  background-color: rgb(255 47 159 / 30%);
 }
diff --git a/src/components/Chip/Ranking/Ranking.module.scss b/src/components/Chip/Ranking/Ranking.module.scss
index da2d906..78635fc 100644
--- a/src/components/Chip/Ranking/Ranking.module.scss
+++ b/src/components/Chip/Ranking/Ranking.module.scss
@@ -3,12 +3,13 @@
 
 .container {
   display: flex;
-  justify-content: center;
   align-items: center;
-  border-radius: 5rem;
+  justify-content: center;
   width: 3.2rem;
   height: 1.8rem;
   font-size: 1.2rem;
+  border-radius: 5rem;
+
   @include respond-to(mobile) {
     width: 2.6rem;
     height: 1.6rem;
@@ -18,16 +19,19 @@
 
 .first {
   color: $pink-100;
-  background-color: rgba(255, 47, 158, 0.1);
+  background-color: rgb(255 47 158 / 10%);
 }
+
 .second {
   color: $green-100;
-  background-color: rgba(5, 213, 139, 0.1);
+  background-color: rgb(5 213 139 / 10%);
 }
+
 .third {
   color: $gray-100;
-  background-color: rgba(255, 200, 60, 0.1);
+  background-color: rgb(255 200 60 / 10%);
 }
+
 .default {
   display: none;
 }
diff --git a/src/components/Chip/Thumbs/Thumbs.module.scss b/src/components/Chip/Thumbs/Thumbs.module.scss
index 6f2cc27..3d372fc 100644
--- a/src/components/Chip/Thumbs/Thumbs.module.scss
+++ b/src/components/Chip/Thumbs/Thumbs.module.scss
@@ -2,22 +2,24 @@
 
 .container {
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 5px;
+  align-items: center;
+  justify-content: center;
   width: fit-content;
   padding: 6px 12px;
-  border-radius: 100px;
-  border: 1px solid $gray-300;
-  background-color: $black-200;
-  color: $gray-100;
   font-size: 14px;
+  color: $gray-100;
   cursor: pointer;
+  background-color: $black-200;
+  border: 1px solid $gray-300;
+  border-radius: 100px;
+
   @include respond-to(mibile) {
     padding: 6px 10px;
     font-size: 12px;
   }
 }
+
 .active {
   color: #5363ff;
 }

From 06029b44bd72b23c3668bd6947ae70b27df1827b Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Sat, 1 Jun 2024 19:21:54 +0900
Subject: [PATCH 07/20] =?UTF-8?q?[#28]=20feat:=20media=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/compare/compare.module.scss | 55 ++++++++++++++++++++++++++---
 src/app/compare/page.tsx            | 11 ++++--
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
index 067c5b7..0856ce7 100644
--- a/src/app/compare/compare.module.scss
+++ b/src/app/compare/compare.module.scss
@@ -2,9 +2,10 @@
 @import "@/styles/_media";
 
 .background {
-  position: fixed;
+  position: relative;
   width: 100%;
   height: 100%;
+  padding-bottom: 100px;
   background-color: $bg-black-100;
 }
 
@@ -13,17 +14,18 @@
   gap: 20px;
   align-items: end;
   justify-content: center;
+  padding-top: 60px;
 
   // margin-top: 60px;
   @include respond-to(tablet) {
-    margin-top: 40px;
+    padding-top: 40px;
   }
 
   @include respond-to(mobile) {
     flex-direction: column;
     gap: 30px;
     align-items: center;
-    margin-top: 30px;
+    padding-top: 30px;
   }
 }
 
@@ -100,13 +102,50 @@
   color: $white-100;
 }
 
+.resultBox {
+  margin-top: 80px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.result {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: 600;
+
+  @include respond-to(tablet) {
+    flex-direction: column;
+  }
+}
+
+.colorText {
+  color: $pink-100;
+}
+
+.reason {
+  font-size: 16px;
+  font-weight: 400;
+  color: $gray-100;
+}
+
 .table {
   width: 940px;
   margin: 20px 0;
-  font-size: 1em;
+  font-size: 14px;
   text-align: left;
   background-color: $black-200;
   border-radius: 12px;
+
+  @include respond-to(tablet) {
+    width: 684px;
+  }
+
+  @include respond-to(mobile) {
+    width: 335px;
+    font-size: 12px;
+  }
 }
 
 .trHead {
@@ -121,11 +160,19 @@
 .th {
   padding: 20px;
   text-align: center;
+
+  @include respond-to(mobile) {
+    padding: 15px;
+  }
 }
 
 .td {
   padding: 30px;
   text-align: center;
+
+  @include respond-to(mobile) {
+    padding: 15px;
+  }
 }
 
 .winner {
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index d5cd79b..21072bd 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -33,9 +33,14 @@ function ComparePage() {
       </div>
       {compare && (
         <div className={styles.compare}>
-          <div>
-            <div>Air Pods Max 상품이 승리하였습니다!</div>
-            <div>6가지 항목 중 3가지 항목에서 우세합니다.</div>
+          <div className={styles.resultBox}>
+            <div className={styles.result}>
+              <div>
+                <span className={styles.colorText}>Air Pods Max</span> 상품이
+              </div>
+              <div>승리하였습니다!</div>
+            </div>
+            <div className={styles.reason}>6가지 항목 중 3가지 항목에서 우세합니다.</div>
           </div>
           <table className={styles.table}>
             <thead>

From 766a29c3bc4d723da3f93a95593674189934c06e Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Sun, 2 Jun 2024 15:32:02 +0900
Subject: [PATCH 08/20] =?UTF-8?q?chore:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/compare/compare.module.scss | 24 ++++++++++++++++++++++--
 src/app/compare/page.tsx            | 15 ++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
index 0856ce7..70608e9 100644
--- a/src/app/compare/compare.module.scss
+++ b/src/app/compare/compare.module.scss
@@ -4,9 +4,17 @@
 .background {
   position: relative;
   width: 100%;
-  height: 100%;
-  padding-bottom: 100px;
+  min-height: calc(100vh - 85px);
+  overflow: auto;
   background-color: $bg-black-100;
+  color: $white-100;
+  padding-bottom: 50px;
+  @include respond-to(tablet) {
+    min-height: calc(100vh - 78px);
+  }
+  @include respond-to(mobile) {
+    min-height: calc(100vh - 68px);
+  }
 }
 
 .content {
@@ -182,3 +190,15 @@
 .loser {
   color: $pink-100;
 }
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 255px);
+  @include respond-to(tablet) {
+    min-height: calc(100vh - 248px);
+  }
+  @include respond-to(mobile) {
+    min-height: calc(100vh - 380px);
+  }
+}
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 21072bd..e2e5445 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import Image from "next/image";
 import React, { useState } from "react";
+import { LOADING_LARGE_IMAGE } from "@/utils/constant";
 import styles from "./compare.module.scss";
 
 function ComparePage() {
@@ -14,6 +16,7 @@ function ComparePage() {
           <input
             type='search'
             className={styles.input}
+            placeholder='상품명을 입력하세요.'
           />
         </div>
         <div>
@@ -21,6 +24,7 @@ function ComparePage() {
           <input
             type='search'
             className={styles.input}
+            placeholder='상품명을 입력하세요.'
           />
         </div>
         <button
@@ -31,7 +35,7 @@ function ComparePage() {
           비교하기
         </button>
       </div>
-      {compare && (
+      {compare ? (
         <div className={styles.compare}>
           <div className={styles.resultBox}>
             <div className={styles.result}>
@@ -91,6 +95,15 @@ function ComparePage() {
             </tbody>
           </table>
         </div>
+      ) : (
+        <div className={styles.loading}>
+          <Image
+            src={LOADING_LARGE_IMAGE}
+            alt='loading'
+            width={87}
+            height={84}
+          />
+        </div>
       )}
     </div>
   );

From eb382ff475985f1079295fe642e2354950ee59d9 Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Sun, 2 Jun 2024 17:17:04 +0900
Subject: [PATCH 09/20] =?UTF-8?q?[#28]=20feat:=20compareChip=20component?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95/comparePage=20chip=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/compare/compare.module.scss           | 12 +++
 src/app/compare/page.tsx                      | 93 ++++++++++++++++---
 .../Chip/Compare/Compare.module.scss          |  5 +-
 src/components/Chip/Compare/Compare.tsx       | 28 ++----
 4 files changed, 102 insertions(+), 36 deletions(-)

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
index 70608e9..bd91834 100644
--- a/src/app/compare/compare.module.scss
+++ b/src/app/compare/compare.module.scss
@@ -36,6 +36,18 @@
     padding-top: 30px;
   }
 }
+.inputBox {
+  position: relative;
+}
+.compareChip {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  @include respond-to(tablet) {
+    top: 11px;
+    left: 13px;
+  }
+}
 
 .input {
   gap: 10px;
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index e2e5445..7c4f0a8 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,31 +1,102 @@
 "use client";
 
 import Image from "next/image";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { Compare } from "@/components/Chip/Compare/Compare";
 import { LOADING_LARGE_IMAGE } from "@/utils/constant";
 import styles from "./compare.module.scss";
 
 function ComparePage() {
   const [compare, setCompare] = useState(false);
+  const [chips, setChips] = useState<{ product1: string; product2: string }>({ product1: "", product2: "" });
+  const [inputValue1, setInputValue1] = useState("");
+  const [inputValue2, setInputValue2] = useState("");
+  const [isFocused1, setIsFocused1] = useState(false);
+  const [isFocused2, setIsFocused2] = useState(false);
+  const inputRef1 = useRef<HTMLInputElement>(null);
+  const inputRef2 = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    localStorage.setItem("chips", JSON.stringify(chips));
+  }, [chips]);
+
+  const handleKeyDown = (product: "product1" | "product2") => (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const value = (e.target as HTMLInputElement).value.trim();
+      if (value !== "") {
+        setChips((prevChips) => ({ ...prevChips, [product]: value }));
+        if (product === "product1") {
+          setInputValue1("");
+          if (inputRef1.current) {
+            inputRef1.current.blur();
+          }
+        } else {
+          setInputValue2("");
+          if (inputRef2.current) {
+            inputRef2.current.blur();
+          }
+        }
+      }
+    }
+  };
+  const removeChip = (product: "product1" | "product2") => () => {
+    setChips((prevChips) => {
+      const newChips = { ...prevChips, [product]: undefined };
+      window.localStorage.setItem("chips", JSON.stringify(newChips));
+      return newChips;
+    });
+  };
 
   return (
     <div className={styles.background}>
       <div className={styles.content}>
         <div>
           <div className={styles.text}>상품 1</div>
-          <input
-            type='search'
-            className={styles.input}
-            placeholder='상품명을 입력하세요.'
-          />
+          <div className={styles.inputBox}>
+            <div className={styles.compareChip}>
+              {!isFocused1 && chips.product1 && (
+                <Compare
+                  value={chips.product1}
+                  onRemove={removeChip("product1")}
+                  color
+                />
+              )}
+            </div>
+            <input
+              ref={inputRef1}
+              type='search'
+              className={styles.input}
+              value={inputValue1}
+              onKeyDown={handleKeyDown("product1")}
+              onChange={(e) => setInputValue1(e.target.value)}
+              onFocus={() => setIsFocused1(true)}
+              onBlur={() => setIsFocused1(false)}
+            />
+          </div>
         </div>
         <div>
           <div className={styles.text}>상품 2</div>
-          <input
-            type='search'
-            className={styles.input}
-            placeholder='상품명을 입력하세요.'
-          />
+          <div className={styles.inputBox}>
+            <div className={styles.compareChip}>
+              {!isFocused2 && chips.product2 && (
+                <Compare
+                  value={chips.product2}
+                  onRemove={removeChip("product2")}
+                />
+              )}
+            </div>
+            <input
+              ref={inputRef2}
+              type='search'
+              className={styles.input}
+              value={inputValue2}
+              onKeyDown={handleKeyDown("product2")}
+              onChange={(e) => setInputValue2(e.target.value)}
+              onFocus={() => setIsFocused2(true)}
+              onBlur={() => setIsFocused2(false)}
+            />
+          </div>
         </div>
         <button
           type='button'
diff --git a/src/components/Chip/Compare/Compare.module.scss b/src/components/Chip/Compare/Compare.module.scss
index 13d1ed9..475e511 100644
--- a/src/components/Chip/Compare/Compare.module.scss
+++ b/src/components/Chip/Compare/Compare.module.scss
@@ -1,10 +1,6 @@
 @import "@/styles/_index";
 @import "@/styles/_media";
 
-.back {
-  background-color: black;
-}
-
 .container {
   display: flex;
   gap: 10px;
@@ -20,6 +16,7 @@
   padding: 2px;
   background-color: rgb(0 0 0 / 50%);
   border-radius: 6px;
+  cursor: pointer;
 }
 
 .compare1 {
diff --git a/src/components/Chip/Compare/Compare.tsx b/src/components/Chip/Compare/Compare.tsx
index 2973678..3186cf2 100644
--- a/src/components/Chip/Compare/Compare.tsx
+++ b/src/components/Chip/Compare/Compare.tsx
@@ -4,37 +4,23 @@ import { CLOSE_ICON } from "@/utils/constant";
 import styles from "./Compare.module.scss";
 
 type CompareProps = {
-  children: React.ReactNode;
+  value: string;
+  onRemove?: () => void;
+  color?: boolean;
 };
 
-export function Compare1({ children }: CompareProps) {
+export function Compare({ value, onRemove, color }: CompareProps) {
   return (
     <div className={styles.back}>
-      <div className={`${styles.container} ${styles.compare1}`}>
-        {children}
-        <Image
-          src={CLOSE_ICON}
-          alt='close'
-          width={17}
-          height={17}
-          className={styles.closeIcon}
-        />
-      </div>
-    </div>
-  );
-}
-
-export function Compare2({ children }: CompareProps) {
-  return (
-    <div className={styles.back}>
-      <div className={`${styles.container} ${styles.compare2}`}>
-        {children}
+      <div className={`${styles.container} ${color ? styles.compare1 : styles.compare2}`}>
+        {value}
         <Image
           src={CLOSE_ICON}
           alt='close'
           width={17}
           height={17}
           className={styles.closeIcon}
+          onClick={onRemove}
         />
       </div>
     </div>

From aa95d129b40a64c3b149f4a738f7e600844f4f5a Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Mon, 3 Jun 2024 11:01:01 +0900
Subject: [PATCH 10/20] =?UTF-8?q?[#28]=20chore:=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Chip/Ranking/Ranking.module.scss | 13 -------------
 src/components/Chip/Thumbs/Thumbs.module.scss   |  2 +-
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/components/Chip/Ranking/Ranking.module.scss b/src/components/Chip/Ranking/Ranking.module.scss
index 2ccdf5d..bef5da9 100644
--- a/src/components/Chip/Ranking/Ranking.module.scss
+++ b/src/components/Chip/Ranking/Ranking.module.scss
@@ -4,18 +4,6 @@
 .container {
   display: flex;
   align-items: center;
-<<<<<<< HEAD
-  justify-content: center;
-  width: 3.2rem;
-  height: 1.8rem;
-  font-size: 1.2rem;
-  border-radius: 5rem;
-
-  @include respond-to(mobile) {
-    width: 2.6rem;
-    height: 1.6rem;
-    font-size: 1rem;
-=======
   border-radius: 3.2rem;
   width: 2.2rem;
   height: 1.2rem;
@@ -26,7 +14,6 @@
     width: 1.7rem;
     height: 1rem;
     @include text-xxs;
->>>>>>> origin
   }
 }
 
diff --git a/src/components/Chip/Thumbs/Thumbs.module.scss b/src/components/Chip/Thumbs/Thumbs.module.scss
index 3d372fc..f8d9bd1 100644
--- a/src/components/Chip/Thumbs/Thumbs.module.scss
+++ b/src/components/Chip/Thumbs/Thumbs.module.scss
@@ -14,7 +14,7 @@
   border: 1px solid $gray-300;
   border-radius: 100px;
 
-  @include respond-to(mibile) {
+  @include respond-to(mobile) {
     padding: 6px 10px;
     font-size: 12px;
   }

From ce2d7d54d4e63f03074448ff1e928e3b4d29ff8f Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Mon, 3 Jun 2024 11:02:36 +0900
Subject: [PATCH 11/20] stylelint

---
 src/app/compare/compare.module.scss           | 14 ++++++++---
 src/components/Button/Button.module.scss      | 18 +++++++-------
 .../Card/Activity/Activity.module.scss        | 21 ++++++++--------
 .../Card/Statistics/Statistics.module.scss    | 24 +++++++++++--------
 .../Chip/Compare/Compare.module.scss          |  2 +-
 .../Chip/Ranking/Ranking.module.scss          |  4 +++-
 6 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/app/compare/compare.module.scss b/src/app/compare/compare.module.scss
index bd91834..0f0f225 100644
--- a/src/app/compare/compare.module.scss
+++ b/src/app/compare/compare.module.scss
@@ -5,13 +5,15 @@
   position: relative;
   width: 100%;
   min-height: calc(100vh - 85px);
+  padding-bottom: 50px;
   overflow: auto;
-  background-color: $bg-black-100;
   color: $white-100;
-  padding-bottom: 50px;
+  background-color: $bg-black-100;
+
   @include respond-to(tablet) {
     min-height: calc(100vh - 78px);
   }
+
   @include respond-to(mobile) {
     min-height: calc(100vh - 68px);
   }
@@ -36,13 +38,16 @@
     padding-top: 30px;
   }
 }
+
 .inputBox {
   position: relative;
 }
+
 .compareChip {
   position: absolute;
   top: 20px;
   left: 20px;
+
   @include respond-to(tablet) {
     top: 11px;
     left: 13px;
@@ -202,14 +207,17 @@
 .loser {
   color: $pink-100;
 }
+
 .loading {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   min-height: calc(100vh - 255px);
+
   @include respond-to(tablet) {
     min-height: calc(100vh - 248px);
   }
+
   @include respond-to(mobile) {
     min-height: calc(100vh - 380px);
   }
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 68f1abf..c5b264a 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -6,9 +6,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
   padding: 18px 25px;
   font-weight: 600;
+  border-radius: 8px;
 
   @include respond-to(mobile) {
     width: 100%;
@@ -20,40 +20,40 @@
 }
 
 .primary {
-  background: $blue-gradient;
   color: $white-100;
+  background: $blue-gradient;
 
   &:disabled {
+    color: $gray-200;
     pointer-events: none;
     background: $gray-300;
-    color: $gray-200;
   }
 }
 
 .secondary {
-  border: 1px solid var(--main-main_gradation, $blue-100);
   background: var(--main-main_gradation, linear-gradient(91deg, $blue-100 0%, $blue-200 100%));
   background-clip: text;
-  -webkit-background-clip: text;
+  background-clip: text;
+  border: 1px solid var(--main-main_gradation, $blue-100);
   -webkit-text-fill-color: transparent;
 
   &:disabled {
     pointer-events: none;
-    border: 1px solid $gray-300;
     background: $gray-200;
     background-clip: text;
-    -webkit-background-clip: text;
+    background-clip: text;
+    border: 1px solid $gray-300;
     -webkit-text-fill-color: transparent;
   }
 }
 
 .tertiary {
-  border: 1px solid $gray-100;
   color: $gray-100;
+  border: 1px solid $gray-100;
 
   &:disabled {
+    color: $gray-200;
     pointer-events: none;
     border: 1px solid $gray-300;
-    color: $gray-200;
   }
 }
diff --git a/src/components/Card/Activity/Activity.module.scss b/src/components/Card/Activity/Activity.module.scss
index ca06aaa..055e945 100644
--- a/src/components/Card/Activity/Activity.module.scss
+++ b/src/components/Card/Activity/Activity.module.scss
@@ -3,39 +3,39 @@
 
 .container {
   display: inline-flex;
-  padding: 30px 105px;
   flex-direction: column;
+  gap: 20px;
   align-items: center;
   justify-content: center;
-
   max-width: 300px;
-
-  gap: 20px;
-
-  @include rounded-lg;
+  padding: 30px 105px;
   background: $black-200;
   border: 1px solid $gray-300;
 
+  @include rounded-lg;
+
   @include respond-to(tablet) {
-    padding: 20px 21px;
     gap: 15px;
+    padding: 20px 21px;
   }
 }
 
 .title {
+  gap: 5px;
   width: 91px;
-  text-align: center;
   color: $gray-100;
-  gap: 5px;
+  text-align: center;
+
   @include text-normal;
 
   @include respond-to(tablet) {
     @include text-sm;
   }
+
   @include respond-to(mobile) {
     display: flex;
-    width: 58px;
     flex-direction: column;
+    width: 58px;
   }
 }
 
@@ -46,6 +46,7 @@
 
   span {
     @include text-xl;
+
     color: $white-100;
 
     @include respond-to(tablet) {
diff --git a/src/components/Card/Statistics/Statistics.module.scss b/src/components/Card/Statistics/Statistics.module.scss
index 175ada1..3782fdf 100644
--- a/src/components/Card/Statistics/Statistics.module.scss
+++ b/src/components/Card/Statistics/Statistics.module.scss
@@ -3,14 +3,14 @@
 
 .container {
   display: inline-flex;
-  padding: 30px 74px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  
-  @include rounded-lg;
+  padding: 30px 74px;
   background: $black-200;
   border: 1px solid $gray-300;
+  
+  @include rounded-lg;
 
   @include respond-to(tablet) {
     padding: 30px 43px;
@@ -18,13 +18,14 @@
 
   @include respond-to(mobile) {
     display: flex;
-    width: 335px;
-    padding: 20px;
     flex-direction: column;
-    align-items: flex-start;
     gap: 6px;
+    align-items: flex-start;
+    width: 335px;
+    padding: 20px;
   }
 }
+
 .mobileBox {
   display: flex;
   flex-direction: column;
@@ -34,14 +35,14 @@
   @include respond-to(mobile) {
     display: flex;
     flex-direction: row;
-    align-items: center;
     gap: 10px;
+    align-items: center;
   }
 }
 
 .title {
-  color: $white-100;
   font-size: 18px;
+  color: $white-100;
 
   @include respond-to(tablet) {
     @include text-normal;
@@ -60,6 +61,7 @@
 
   span {
     @include text-xl;
+
     color: $gray-100;
 
     @include respond-to(tablet) {
@@ -95,10 +97,11 @@
 
 .description {
   width: 150px;
-  text-align: center;
+  line-height: 20px;
   color: $gray-200;
+  text-align: center;
+
   @include text-sm;
-  line-height: 20px;
 
   strong {
     color: $white-100;
@@ -107,6 +110,7 @@
 
   @include respond-to(mobile) {
     width: auto;
+
     @include text-xs;
   }
 }
diff --git a/src/components/Chip/Compare/Compare.module.scss b/src/components/Chip/Compare/Compare.module.scss
index 475e511..5ea26f8 100644
--- a/src/components/Chip/Compare/Compare.module.scss
+++ b/src/components/Chip/Compare/Compare.module.scss
@@ -14,9 +14,9 @@
 
 .closeIcon {
   padding: 2px;
+  cursor: pointer;
   background-color: rgb(0 0 0 / 50%);
   border-radius: 6px;
-  cursor: pointer;
 }
 
 .compare1 {
diff --git a/src/components/Chip/Ranking/Ranking.module.scss b/src/components/Chip/Ranking/Ranking.module.scss
index bef5da9..e7b3bc4 100644
--- a/src/components/Chip/Ranking/Ranking.module.scss
+++ b/src/components/Chip/Ranking/Ranking.module.scss
@@ -4,15 +4,17 @@
 .container {
   display: flex;
   align-items: center;
-  border-radius: 3.2rem;
   width: 2.2rem;
   height: 1.2rem;
+  border-radius: 3.2rem;
+
   @include text-xs;
   @include font-normal;
 
   @include respond-to(tablet) {
     width: 1.7rem;
     height: 1rem;
+
     @include text-xxs;
   }
 }

From 60ed530b77dd51e2ca9f69fa7973e6e57fb4dc1a Mon Sep 17 00:00:00 2001
From: aoooec <foottable@gmail.com>
Date: Mon, 3 Jun 2024 15:30:55 +0900
Subject: [PATCH 12/20] =?UTF-8?q?feat:=20AuthProvider=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx       | 11 +++++++----
 src/lib/AuthProvider.tsx | 12 ++++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/AuthProvider.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8f888f6..ebb9309 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { Gnb } from "@/components/Gnb";
+import AuthProvider from "@/lib/AuthProvider";
 import Providers from "@/lib/Providers";
 import "@/styles/_reset.scss";
 import "@/styles/_common.scss";
@@ -28,10 +29,12 @@ export default function RootLayout({
     >
       <body className={styles.container}>
         <div id='modal' />
-        <Providers>
-          <Gnb />
-          <main className={styles.main}>{children}</main>
-        </Providers>
+        <AuthProvider>
+          <Providers>
+            <Gnb />
+            <main className={styles.main}>{children}</main>
+          </Providers>
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/src/lib/AuthProvider.tsx b/src/lib/AuthProvider.tsx
new file mode 100644
index 0000000..1e0dcf5
--- /dev/null
+++ b/src/lib/AuthProvider.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
+
+type AuthProviderProps = {
+  children: ReactNode;
+};
+
+export default function AuthProvider({ children }: AuthProviderProps) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

From 61ee93193e08c54415125ca39a1916fb8e52ce3c Mon Sep 17 00:00:00 2001
From: aoooec <foottable@gmail.com>
Date: Mon, 3 Jun 2024 15:32:35 +0900
Subject: [PATCH 13/20] =?UTF-8?q?feat:=20next-auth=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20route=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1(#41?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/auth/[...nextauth]/route.ts | 62 +++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/app/api/auth/[...nextauth]/route.ts

diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 0000000..d415791
--- /dev/null
+++ b/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,62 @@
+import { NextAuthOptions, User } from "next-auth";
+import NextAuth from "next-auth/next";
+import Credentials from "next-auth/providers/credentials";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    Credentials({
+      name: "SignIn",
+      credentials: {
+        email: { label: "email", type: "email", placeholder: "user@email.com" },
+        password: { label: "password", type: "password", placeholder: "password" },
+      },
+      async authorize(credentials) {
+        const result = await fetch(`${process.env.BASE_URL}/auth/signIn`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ email: credentials?.email, password: credentials?.password }),
+        });
+        const data = await result.json();
+        const user = data?.user;
+
+        if (!user) {
+          throw new Error("로그인 실패: 계정 정보를 다시 확인해주세요.");
+        }
+
+        return {
+          ...user,
+          accessToken: data.accessToken,
+        };
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }) {
+      console.log(user);
+      if (user) {
+        // eslint-disable-next-line no-param-reassign
+        token.accessToken = user?.accessToken;
+        // eslint-disable-next-line no-param-reassign
+        token.user = user;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      // eslint-disable-next-line no-param-reassign
+      session.accessToken = token.accessToken as string;
+      // eslint-disable-next-line no-param-reassign
+      session.user = token.user as User;
+      return session;
+    },
+  },
+  pages: {
+    signIn: "/signin",
+  },
+  secret: process.env.SECRET,
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

From 6c3570edc14804e2e133833bb4eec662c104dbbd Mon Sep 17 00:00:00 2001
From: aoooec <foottable@gmail.com>
Date: Mon, 3 Jun 2024 15:35:51 +0900
Subject: [PATCH 14/20] =?UTF-8?q?chore:=20next-auth=20type=EC=97=90=20acce?=
 =?UTF-8?q?ssToken=20=EC=B6=94=EA=B0=80=20=EC=A0=95=EC=9D=98(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auth.d.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/types/auth.d.ts

diff --git a/src/types/auth.d.ts b/src/types/auth.d.ts
new file mode 100644
index 0000000..46998d8
--- /dev/null
+++ b/src/types/auth.d.ts
@@ -0,0 +1,13 @@
+export declare module "next-auth" {
+  interface User {
+    accessToken: string;
+  }
+  interface Session {
+    accessToken: string;
+  }
+}
+export declare module "@auth/core/jwt" {
+  interface JWT {
+    accessToken: string;
+  }
+}

From aebf839ac3f63815d1d6e5769a31dfffa7d33b91 Mon Sep 17 00:00:00 2001
From: aoooec <foottable@gmail.com>
Date: Mon, 3 Jun 2024 15:39:32 +0900
Subject: [PATCH 15/20] =?UTF-8?q?feat:=20=EC=9E=84=EC=8B=9C=20signin=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(auth)/signin/SignInPage.module.scss | 20 +++++
 src/app/(auth)/signin/page.tsx               | 81 ++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 src/app/(auth)/signin/SignInPage.module.scss
 create mode 100644 src/app/(auth)/signin/page.tsx

diff --git a/src/app/(auth)/signin/SignInPage.module.scss b/src/app/(auth)/signin/SignInPage.module.scss
new file mode 100644
index 0000000..0405100
--- /dev/null
+++ b/src/app/(auth)/signin/SignInPage.module.scss
@@ -0,0 +1,20 @@
+@import "@/styles/_index";
+@import "@/styles/_media";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 20px;
+
+  label {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 5px;
+  }
+
+  .button {
+    width: auto;
+  }
+}
diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
new file mode 100644
index 0000000..25754ad
--- /dev/null
+++ b/src/app/(auth)/signin/page.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import Button from "@/components/Button/Button";
+import styles from "./SignInPage.module.scss";
+
+type FormData = {
+  email: string;
+  password: string;
+};
+
+export default function SignInPage() {
+  const [isDisabled, setDisabled] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>();
+  const router = useRouter();
+
+  const onSubmit = async (data: FormData) => {
+    const result = await signIn("credentials", {
+      redirect: false,
+      email: data.email,
+      password: data.password,
+    });
+
+    if (result?.ok) {
+      router.push("/");
+    } else {
+      console.log("로그인 실패");
+    }
+  };
+
+  useEffect(() => {
+    if (errors.email || errors.password) {
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, [errors.email, errors.password]);
+
+  return (
+    <div>
+      <form
+        className={styles.container}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <label htmlFor='email'>
+          email
+          <input
+            id='email'
+            type='email'
+            {...register("email", { required: "이메일을 입력해주세요." })}
+          />
+          {errors.email && <p>{errors.email.message}</p>}
+        </label>
+        <label htmlFor='password'>
+          password
+          <input
+            id='password'
+            type='password'
+            {...register("password", { required: "비밀번호를 입력해주세요." })}
+          />
+          {errors.password && <p>{errors.password.message}</p>}
+        </label>
+        <Button
+          styleType='primary'
+          disabled={isDisabled}
+          className={styles.button}
+          type='submit'
+        >
+          SignIn
+        </Button>
+      </form>
+    </div>
+  );
+}

From 8af37e128c7f39808b894b51c63cbb20f1a753b7 Mon Sep 17 00:00:00 2001
From: aoooec <foottable@gmail.com>
Date: Mon, 3 Jun 2024 15:55:59 +0900
Subject: [PATCH 16/20] style: stylelint

---
 src/app/(auth)/AuthLayout.module.scss         |  4 +--
 src/app/(auth)/signin/SignInPage.module.scss  |  4 +--
 .../_home/components/Main/Main.module.scss    |  2 +-
 src/components/Button/Button.module.scss      | 18 +++++-----
 .../Card/Activity/Activity.module.scss        | 21 +++++------
 .../Card/Statistics/Statistics.module.scss    | 24 +++++++------
 .../CategoryFilter.module.scss                | 10 +++---
 .../Chip/Category/Category.module.scss        | 36 ++++++++++++-------
 .../Chip/Compare/Compare.module.scss          | 20 ++++++-----
 .../Chip/Ranking/Ranking.module.scss          | 15 +++++---
 src/components/Chip/Thumbs/Thumbs.module.scss | 14 ++++----
 11 files changed, 98 insertions(+), 70 deletions(-)

diff --git a/src/app/(auth)/AuthLayout.module.scss b/src/app/(auth)/AuthLayout.module.scss
index cac806e..1c00f44 100644
--- a/src/app/(auth)/AuthLayout.module.scss
+++ b/src/app/(auth)/AuthLayout.module.scss
@@ -4,11 +4,11 @@
 .container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   gap: 60px;
+  justify-content: center;
   width: 640px;
-  padding: 100px 0;
   min-height: calc(100vh - 88.5px);
+  padding: 100px 0;
 
   @include respond-to(tablet) {
     max-width: minmax(440px, calc(100% - 304px));
diff --git a/src/app/(auth)/signin/SignInPage.module.scss b/src/app/(auth)/signin/SignInPage.module.scss
index 0405100..44488a5 100644
--- a/src/app/(auth)/signin/SignInPage.module.scss
+++ b/src/app/(auth)/signin/SignInPage.module.scss
@@ -4,14 +4,14 @@
 .container {
   display: flex;
   flex-direction: column;
-  width: 100%;
   gap: 20px;
+  width: 100%;
 
   label {
     display: flex;
     flex-direction: column;
-    width: 100%;
     gap: 5px;
+    width: 100%;
   }
 
   .button {
diff --git a/src/app/_home/components/Main/Main.module.scss b/src/app/_home/components/Main/Main.module.scss
index 1d10556..6ea410e 100644
--- a/src/app/_home/components/Main/Main.module.scss
+++ b/src/app/_home/components/Main/Main.module.scss
@@ -27,8 +27,8 @@
   @include respond-to(mobile) {
     display: inline-block;
     width: fit-content;
+    padding-left: 20px;
     background-color: transparent;
     border: none;
-    padding-left: 20px;
   }
 }
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 68f1abf..c5b264a 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -6,9 +6,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
   padding: 18px 25px;
   font-weight: 600;
+  border-radius: 8px;
 
   @include respond-to(mobile) {
     width: 100%;
@@ -20,40 +20,40 @@
 }
 
 .primary {
-  background: $blue-gradient;
   color: $white-100;
+  background: $blue-gradient;
 
   &:disabled {
+    color: $gray-200;
     pointer-events: none;
     background: $gray-300;
-    color: $gray-200;
   }
 }
 
 .secondary {
-  border: 1px solid var(--main-main_gradation, $blue-100);
   background: var(--main-main_gradation, linear-gradient(91deg, $blue-100 0%, $blue-200 100%));
   background-clip: text;
-  -webkit-background-clip: text;
+  background-clip: text;
+  border: 1px solid var(--main-main_gradation, $blue-100);
   -webkit-text-fill-color: transparent;
 
   &:disabled {
     pointer-events: none;
-    border: 1px solid $gray-300;
     background: $gray-200;
     background-clip: text;
-    -webkit-background-clip: text;
+    background-clip: text;
+    border: 1px solid $gray-300;
     -webkit-text-fill-color: transparent;
   }
 }
 
 .tertiary {
-  border: 1px solid $gray-100;
   color: $gray-100;
+  border: 1px solid $gray-100;
 
   &:disabled {
+    color: $gray-200;
     pointer-events: none;
     border: 1px solid $gray-300;
-    color: $gray-200;
   }
 }
diff --git a/src/components/Card/Activity/Activity.module.scss b/src/components/Card/Activity/Activity.module.scss
index ca06aaa..055e945 100644
--- a/src/components/Card/Activity/Activity.module.scss
+++ b/src/components/Card/Activity/Activity.module.scss
@@ -3,39 +3,39 @@
 
 .container {
   display: inline-flex;
-  padding: 30px 105px;
   flex-direction: column;
+  gap: 20px;
   align-items: center;
   justify-content: center;
-
   max-width: 300px;
-
-  gap: 20px;
-
-  @include rounded-lg;
+  padding: 30px 105px;
   background: $black-200;
   border: 1px solid $gray-300;
 
+  @include rounded-lg;
+
   @include respond-to(tablet) {
-    padding: 20px 21px;
     gap: 15px;
+    padding: 20px 21px;
   }
 }
 
 .title {
+  gap: 5px;
   width: 91px;
-  text-align: center;
   color: $gray-100;
-  gap: 5px;
+  text-align: center;
+
   @include text-normal;
 
   @include respond-to(tablet) {
     @include text-sm;
   }
+
   @include respond-to(mobile) {
     display: flex;
-    width: 58px;
     flex-direction: column;
+    width: 58px;
   }
 }
 
@@ -46,6 +46,7 @@
 
   span {
     @include text-xl;
+
     color: $white-100;
 
     @include respond-to(tablet) {
diff --git a/src/components/Card/Statistics/Statistics.module.scss b/src/components/Card/Statistics/Statistics.module.scss
index 175ada1..3782fdf 100644
--- a/src/components/Card/Statistics/Statistics.module.scss
+++ b/src/components/Card/Statistics/Statistics.module.scss
@@ -3,14 +3,14 @@
 
 .container {
   display: inline-flex;
-  padding: 30px 74px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  
-  @include rounded-lg;
+  padding: 30px 74px;
   background: $black-200;
   border: 1px solid $gray-300;
+  
+  @include rounded-lg;
 
   @include respond-to(tablet) {
     padding: 30px 43px;
@@ -18,13 +18,14 @@
 
   @include respond-to(mobile) {
     display: flex;
-    width: 335px;
-    padding: 20px;
     flex-direction: column;
-    align-items: flex-start;
     gap: 6px;
+    align-items: flex-start;
+    width: 335px;
+    padding: 20px;
   }
 }
+
 .mobileBox {
   display: flex;
   flex-direction: column;
@@ -34,14 +35,14 @@
   @include respond-to(mobile) {
     display: flex;
     flex-direction: row;
-    align-items: center;
     gap: 10px;
+    align-items: center;
   }
 }
 
 .title {
-  color: $white-100;
   font-size: 18px;
+  color: $white-100;
 
   @include respond-to(tablet) {
     @include text-normal;
@@ -60,6 +61,7 @@
 
   span {
     @include text-xl;
+
     color: $gray-100;
 
     @include respond-to(tablet) {
@@ -95,10 +97,11 @@
 
 .description {
   width: 150px;
-  text-align: center;
+  line-height: 20px;
   color: $gray-200;
+  text-align: center;
+
   @include text-sm;
-  line-height: 20px;
 
   strong {
     color: $white-100;
@@ -107,6 +110,7 @@
 
   @include respond-to(mobile) {
     width: auto;
+
     @include text-xs;
   }
 }
diff --git a/src/components/Chip/Category-filter/CategoryFilter.module.scss b/src/components/Chip/Category-filter/CategoryFilter.module.scss
index 70c1207..a18ff52 100644
--- a/src/components/Chip/Category-filter/CategoryFilter.module.scss
+++ b/src/components/Chip/Category-filter/CategoryFilter.module.scss
@@ -2,14 +2,14 @@
 
 .container {
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 5px;
-  color: $gray-200;
-  border-radius: 100px;
+  align-items: center;
+  justify-content: center;
   width: 96px;
   height: 30px;
+  font-size: 14px;
+  color: $gray-200;
   background-color: $black-200;
   border: 0.1rem solid $gray-300;
-  font-size: 14px;
+  border-radius: 100px;
 }
diff --git a/src/components/Chip/Category/Category.module.scss b/src/components/Chip/Category/Category.module.scss
index 46c6e60..84469dd 100644
--- a/src/components/Chip/Category/Category.module.scss
+++ b/src/components/Chip/Category/Category.module.scss
@@ -3,59 +3,71 @@
 
 .container {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: fit-content;
   height: 29px;
   padding: 4px 10px;
-  border-radius: 8px;
   font-size: 18px;
   font-weight: 500;
+  border-radius: 8px;
+
   @include respond-to(mobile) {
     padding: 4px 8px;
     font-size: 12px;
   }
 }
+
 .yellow {
-  background-color: rgba(197, 209, 124, 0.1);
   color: #c5d17c;
+  background-color: rgb(197 209 124 / 10%);
 }
+
 .red {
-  background-color: rgba(247, 86, 50, 0.1);
   color: #f75532;
+  background-color: rgb(247 86 50 / 10%);
 }
+
 .purple {
-  background-color: rgba(169, 83, 255, 0.1);
   color: #a953ff;
+  background-color: rgb(169 83 255 / 10%);
 }
+
 .green {
-  background-color: rgba(73, 175, 26, 0.1);
   color: #49af1a;
+  background-color: rgb(73 175 26 / 10%);
 }
+
 .pink {
-  background-color: rgba(214, 118, 193, 0.1);
   color: #d676c1;
+  background-color: rgb(214 118 193 / 10%);
 }
+
 .orange {
-  background-color: rgba(255, 126, 70, 0.1);
   color: #ff7e46;
+  background-color: rgb(255 126 70 / 10%);
 }
+
 .mint {
-  background-color: rgba(35, 181, 129, 0.1);
   color: #23b581;
+  background-color: rgb(35 181 129 / 10%);
 }
+
 .hotpink {
-  background-color: rgba(253, 82, 154, 0.1);
   color: #fd529a;
+  background-color: rgb(253 82 154 / 10%);
 }
+
 .navy {
-  background-color: rgba(117, 122, 255, 0.1);
   color: #757aff;
+  background-color: rgb(117 122 255 / 10%);
 }
+
 .blue {
-  background-color: rgba(48, 152, 227, 0.1);
   color: #3098e3;
+  background-color: rgb(48 152 227 / 10%);
 }
+
 .default {
   display: none;
 }
diff --git a/src/components/Chip/Compare/Compare.module.scss b/src/components/Chip/Compare/Compare.module.scss
index 4d2e859..a4beb26 100644
--- a/src/components/Chip/Compare/Compare.module.scss
+++ b/src/components/Chip/Compare/Compare.module.scss
@@ -1,28 +1,32 @@
 @import "@/styles/_index";
+
 .back {
   background-color: black;
 }
 
 .container {
-  width: fit-content;
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 10px;
-  border-radius: 6px;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
   padding: 8px 10px;
   font-size: 16px;
+  border-radius: 6px;
 }
+
 .closeIcon {
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 6px;
   padding: 2px;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: 6px;
 }
+
 .compare1 {
-  background-color: rgba(5, 213, 140, 0.3);
   color: $green-100;
+  background-color: rgb(5 213 140 / 30%);
 }
+
 .compare2 {
-  background-color: rgba(255, 47, 159, 0.3);
   color: $pink-100;
+  background-color: rgb(255 47 159 / 30%);
 }
diff --git a/src/components/Chip/Ranking/Ranking.module.scss b/src/components/Chip/Ranking/Ranking.module.scss
index fae823d..a44ef65 100644
--- a/src/components/Chip/Ranking/Ranking.module.scss
+++ b/src/components/Chip/Ranking/Ranking.module.scss
@@ -3,33 +3,38 @@
 
 .container {
   display: flex;
-  justify-content: center;
   align-items: center;
-  border-radius: 3.2rem;
+  justify-content: center;
   width: 2.2rem;
   height: 1.2rem;
+  border-radius: 3.2rem;
+
   @include text-xs;
   @include font-normal;
 
   @include respond-to(tablet) {
     width: 1.7rem;
     height: 1rem;
+
     @include text-xxs;
   }
 }
 
 .first {
   color: $pink-100;
-  background-color: rgba(255, 47, 158, 0.1);
+  background-color: rgb(255 47 158 / 10%);
 }
+
 .second {
   color: $green-100;
-  background-color: rgba(5, 213, 139, 0.1);
+  background-color: rgb(5 213 139 / 10%);
 }
+
 .third {
   color: $gray-100;
-  background-color: rgba(255, 200, 60, 0.1);
+  background-color: rgb(255 200 60 / 10%);
 }
+
 .default {
   display: none;
 }
diff --git a/src/components/Chip/Thumbs/Thumbs.module.scss b/src/components/Chip/Thumbs/Thumbs.module.scss
index 6f2cc27..3d372fc 100644
--- a/src/components/Chip/Thumbs/Thumbs.module.scss
+++ b/src/components/Chip/Thumbs/Thumbs.module.scss
@@ -2,22 +2,24 @@
 
 .container {
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 5px;
+  align-items: center;
+  justify-content: center;
   width: fit-content;
   padding: 6px 12px;
-  border-radius: 100px;
-  border: 1px solid $gray-300;
-  background-color: $black-200;
-  color: $gray-100;
   font-size: 14px;
+  color: $gray-100;
   cursor: pointer;
+  background-color: $black-200;
+  border: 1px solid $gray-300;
+  border-radius: 100px;
+
   @include respond-to(mibile) {
     padding: 6px 10px;
     font-size: 12px;
   }
 }
+
 .active {
   color: #5363ff;
 }

From 08acded978e7b7e5bb06eae379da52c0825fc3d1 Mon Sep 17 00:00:00 2001
From: aoooec <foottable@gmail.com>
Date: Mon, 3 Jun 2024 15:56:16 +0900
Subject: [PATCH 17/20] =?UTF-8?q?chore:=20stylelint=20=EB=AA=85=EB=A0=B9?=
 =?UTF-8?q?=EC=96=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9778684..6885406 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "prepare": "husky",
-    "stylelint": "stylelint '**/*.scss' --fix"
+    "stylelint": "stylelint **/*.scss --fix"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.37.1",

From c0f9b59c02507ddab1d46e2b1b91171128e7ab3b Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Mon, 3 Jun 2024 21:13:15 +0900
Subject: [PATCH 18/20] =?UTF-8?q?fix:=20useFormContext=EB=A5=BC=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=97=AC=20regitser=EB=A5=BC=20?=
 =?UTF-8?q?=EC=99=B8=EB=B6=80=EC=97=90=EC=84=9C=20=EC=A0=84=EB=8B=AC?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/Input.module.scss | 1 +
 src/components/Input/Input.tsx         | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
index 7450e55..10f25af 100644
--- a/src/components/Input/Input.module.scss
+++ b/src/components/Input/Input.module.scss
@@ -32,6 +32,7 @@
 
 .eyeIcon {
   position: absolute;
+  cursor: pointer;
   top: 50%;
   right: 0.6rem;
   transform: translateY(-50%);
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 591bd00..10ad4d7 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import cn from "@/utils/classNames";
 import { EYE_OFF_ICON, EYE_ON_ICON } from "@/utils/constant";
 import styles from "./Input.module.scss";
@@ -23,7 +23,7 @@ export default function Input({
   name,
   label,
   type,
-  placeholder = "",
+  placeholder,
   required,
   minLength,
   maxLength,
@@ -33,7 +33,7 @@ export default function Input({
   const {
     register,
     formState: { errors },
-  } = useForm({ mode: "onBlur" });
+  } = useFormContext();
 
   const [showPassword, setShowPassword] = useState(false);
   const handleEyeIconClick = () => setShowPassword((prev: boolean) => !prev);

From 5e1134a7aee53d9b0c75e8a8eff7b211b0c0723d Mon Sep 17 00:00:00 2001
From: yubin <yb3143@gmail.com>
Date: Tue, 4 Jun 2024 10:42:08 +0900
Subject: [PATCH 19/20] [#28] feat: category -> category-chip

---
 src/components/Card/Activity/Activity.tsx                   | 4 ++--
 .../CategoryChip.module.scss}                               | 0
 .../Category.tsx => Category-chip/CategoryChip.tsx}         | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/Chip/{Category/Category.module.scss => Category-chip/CategoryChip.module.scss} (100%)
 rename src/components/Chip/{Category/Category.tsx => Category-chip/CategoryChip.tsx} (88%)

diff --git a/src/components/Card/Activity/Activity.tsx b/src/components/Card/Activity/Activity.tsx
index b4c1597..d04063e 100644
--- a/src/components/Card/Activity/Activity.tsx
+++ b/src/components/Card/Activity/Activity.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/require-default-props */ // type에 ? 연산자 추가하기 위한 주석
 import Image from "next/image";
 import React from "react";
-import Category from "@/components/Chip/Category/Category";
+import CategoryChip from "@/components/Chip/Category-chip/CategoryChip";
 import { STAR_ACTIVE_ICON, BUBBLE_ICON } from "@/utils/constant";
 import styles from "./Activity.module.scss";
 
@@ -50,7 +50,7 @@ export default function Activity({ title, averageRating, reviewCount, chipCatego
         <span>{namuji}</span>
       </div>
       {title === "관심 카테고리" ? (
-        <Category>{chipCategoty?.name}</Category>
+        <CategoryChip>{chipCategoty?.name}</CategoryChip>
       ) : (
         <div className={styles.contentBox}>
           <figure className={styles.imageBox}>
diff --git a/src/components/Chip/Category/Category.module.scss b/src/components/Chip/Category-chip/CategoryChip.module.scss
similarity index 100%
rename from src/components/Chip/Category/Category.module.scss
rename to src/components/Chip/Category-chip/CategoryChip.module.scss
diff --git a/src/components/Chip/Category/Category.tsx b/src/components/Chip/Category-chip/CategoryChip.tsx
similarity index 88%
rename from src/components/Chip/Category/Category.tsx
rename to src/components/Chip/Category-chip/CategoryChip.tsx
index 36c9eff..e20f180 100644
--- a/src/components/Chip/Category/Category.tsx
+++ b/src/components/Chip/Category-chip/CategoryChip.tsx
@@ -23,7 +23,7 @@ const CATEGORY_TYPE: CategoryType<string> = {
   default: { style: "default" },
 };
 
-function Category({ children, ...rest }: CategoryProps) {
+function CategoryChip({ children, ...rest }: CategoryProps) {
   const typeCheck = children ?? "default";
 
   return (
@@ -36,8 +36,8 @@ function Category({ children, ...rest }: CategoryProps) {
   );
 }
 
-Category.defaultProps = {
+CategoryChip.defaultProps = {
   children: "default",
 };
 
-export default Category;
+export default CategoryChip;

From ea3a70342ef9cc866d7ba601db9b7f8d9c25e5a6 Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Tue, 4 Jun 2024 17:32:59 +0900
Subject: [PATCH 20/20] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Gnb/Gnb.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Gnb/Gnb.tsx b/src/components/Gnb/Gnb.tsx
index 9480d8b..1108962 100644
--- a/src/components/Gnb/Gnb.tsx
+++ b/src/components/Gnb/Gnb.tsx
@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { useSession } from "next-auth/react";
 import { useState } from "react";
 import cn from "@/utils/classNames";
 import { LOGO_IMAGE, MENU_TOGGLE_ICON, CLOSE_ICON } from "@/utils/constant";
@@ -12,6 +13,8 @@ export default function Gnb() {
   const [isInputOpen, setInputOpen] = useState(false);
   const [isMenuOpen, setMenuOpen] = useState(false);
 
+  const { status } = useSession();
+
   const handleSearchClick = () => {
     setInputOpen(!isInputOpen);
   };
@@ -20,9 +23,6 @@ export default function Gnb() {
     setMenuOpen(!isMenuOpen);
   };
 
-  // TODO: 로그인 상태 가져오기
-  const isLogin = true;
-
   return (
     <div className={styles.container}>
       <Image
@@ -62,7 +62,7 @@ export default function Gnb() {
             onClick={handleMenuClick}
           />
           <div className={cn(styles.userAction, isMenuOpen && styles.open)}>
-            {isLogin ? (
+            {status === "authenticated" ? (
               <>
                 <Link href='/compare'>비교하기</Link>
                 <Link href='/mypage'>내 프로필</Link>