From 7dcefa7192359d3289f73b3b105bca1c6b0b1f9b Mon Sep 17 00:00:00 2001
From: ParkSohyunee <sohyunee016@gmail.com>
Date: Wed, 7 Feb 2024 18:05:57 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=EB=88=8C=EB=A0=80?=
 =?UTF-8?q?=EC=9D=84=EB=95=8C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/blue_line.svg                       |  3 +++
 src/app/user/[userId]/_components/Content.css.ts | 11 +++++++----
 src/app/user/[userId]/_components/Content.tsx    |  6 ++++--
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 public/icons/blue_line.svg

diff --git a/public/icons/blue_line.svg b/public/icons/blue_line.svg
new file mode 100644
index 00000000..ed56b53f
--- /dev/null
+++ b/public/icons/blue_line.svg
@@ -0,0 +1,3 @@
+<svg width="77" height="6" viewBox="0 0 77 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 3L74 3.00001" stroke="#0047FF" stroke-width="5" stroke-linecap="round"/>
+</svg>
diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts
index 05574937..307d64b9 100644
--- a/src/app/user/[userId]/_components/Content.css.ts
+++ b/src/app/user/[userId]/_components/Content.css.ts
@@ -19,6 +19,7 @@ export const options = style({
 });
 
 export const link = style({
+  // position: 'relative',
   flexGrow: '1',
   textDecoration: 'none',
 });
@@ -51,10 +52,12 @@ export const rightButton = style([
   },
 ]);
 
-export const variant = style({
-  borderBottom: '1px solid #0047FF',
-});
-
 export const cards = style({
   padding: '2.1rem',
 });
+
+export const leftButtonLine = style({
+  position: 'relative',
+  bottom: '6px',
+  left: '47%',
+});
diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx
index bf1bf5f2..dee32d55 100644
--- a/src/app/user/[userId]/_components/Content.tsx
+++ b/src/app/user/[userId]/_components/Content.tsx
@@ -12,6 +12,7 @@ import { useQuery } from '@tanstack/react-query';
 import { MasonryGrid } from '@egjs/react-grid';
 
 import * as styles from './Content.css';
+import BlueLineIcon from '/public/icons/blue_line.svg';
 
 import Card from './Card';
 import Categories from './Categories';
@@ -62,10 +63,11 @@ export default function Content({ userId, type }: ContentProps) {
     <div className={styles.container}>
       <div className={styles.options}>
         <Link href={`/user/${userData?.id}/mylist`} className={styles.link}>
-          <button className={`${styles.leftButton} ${type === 'my' ? styles.variant : ''}`}>마이 리스트</button>
+          <button className={styles.leftButton}>마이 리스트</button>
+          {type === 'my' && <BlueLineIcon className={styles.leftButtonLine} />}
         </Link>
         <Link href={`/user/${userData?.id}/collabolist`} className={styles.link}>
-          <button className={`${styles.rightButton} ${type === 'collabo' ? styles.variant : ''}`}>콜라보 리스트</button>
+          <button className={styles.rightButton}>콜라보 리스트</button>
         </Link>
       </div>
       <Categories handleFetchListsOnCategory={handleFetchListsOnCategory} />