From cda34f542d9a17c6eed3fb5c22de231527981cc5 Mon Sep 17 00:00:00 2001
From: "yeondu._" <dustn2366@naver.com>
Date: Wed, 28 Aug 2024 18:38:13 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Style=20:=20=ED=8C=8C=EC=9D=B4=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8/=20=ED=8F=AC=ED=8F=B4=20=EC=82=AD=EC=A0=9C=20css=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Button/DeleteButton.tsx       |  31 +++--
 src/Component/Button/DeleteButtonStyle.css  | 142 ++++++++++----------
 src/Component/Chart/PieChart.tsx            |  14 +-
 src/Component/Portfolio/PortfolioDetail.tsx |   6 +-
 src/Component/SearchBar/SearchBar.tsx       |   4 +-
 5 files changed, 97 insertions(+), 100 deletions(-)

diff --git a/src/Component/Button/DeleteButton.tsx b/src/Component/Button/DeleteButton.tsx
index be2715e..8b3d9ab 100644
--- a/src/Component/Button/DeleteButton.tsx
+++ b/src/Component/Button/DeleteButton.tsx
@@ -2,25 +2,24 @@ import React from "react";
 import "./DeleteButtonStyle.css";
 
 interface AnimatedButtonProps {
-    onClick: () => void;
+  onClick: () => void;
 }
 
 const DeleteButton: React.FC<AnimatedButtonProps> = ({ onClick }) => {
-    return (
-        <button
-            className="delete"
-            onClick={onClick}
-            style={{
-                position: "absolute",
-                left: "410px",
-                cursor: "pointer",
-                top: "-2px",
-            }}
-        >
-            <div className="top"></div>
-            <div className="bottom"></div>
-        </button>
-    );
+  return (
+    <button
+      className="delete"
+      onClick={onClick}
+      style={{
+        left: "410px",
+        cursor: "pointer",
+        top: "-2px",
+      }}
+    >
+      <div className="top"></div>
+      <div className="bottom"></div>
+    </button>
+  );
 };
 
 export default DeleteButton;
diff --git a/src/Component/Button/DeleteButtonStyle.css b/src/Component/Button/DeleteButtonStyle.css
index a7ccf14..5397cb6 100644
--- a/src/Component/Button/DeleteButtonStyle.css
+++ b/src/Component/Button/DeleteButtonStyle.css
@@ -1,101 +1,101 @@
 /* Variables converted to standard CSS */
 
 .deleteContainer > button {
-    position: relative;
-    display: block;
-    width: 25%;
-    height: 100%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    z-index: 99;
-    outline: none;
-    backface-visibility: hidden;
-    -webkit-touch-callout: none;
+  position: relative;
+  display: block;
+  width: 25%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  z-index: 99;
+  outline: none;
+  backface-visibility: hidden;
+  -webkit-touch-callout: none;
 }
 
 .deleteContainer > button > div {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
+  position: absolute;
+  top: 10px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
 }
 
 /* Delete Button Styles */
 .delete:hover .top {
-    animation: delete 0.8s ease-out;
-    background: #615efc;
+  animation: delete 0.8s ease-out;
+  background: #615efc;
 }
 
 .delete:hover .top::before {
-    background: #615efc;
+  background: #615efc;
 }
 
 .delete:hover .bottom {
-    background: #615efc;
+  background: #615efc;
 }
 
 .delete .top {
-    position: absolute;
-    top: 2px;
-    width: 24px;
-    height: 4px;
-    background: rgb(88, 88, 88);
-    z-index: 1;
+  position: absolute;
+  top: 2px;
+  width: 24px;
+  height: 4px;
+  background: rgb(88, 88, 88);
+  z-index: 1;
 }
 
 .delete .top::before {
-    content: "";
-    position: absolute;
-    top: -2px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    width: 14px;
-    height: 6px;
-    background: rgb(88, 88, 88);
-    border-radius: 8px;
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 14px;
+  height: 6px;
+  background: rgb(88, 88, 88);
+  border-radius: 8px;
 }
 
 .delete .bottom {
-    position: absolute;
-    top: 8px;
-    width: 24px;
-    height: 26px;
-    background: rgb(88, 88, 88);
-    border-radius: 0 0 6px 6px;
+  position: absolute;
+  top: 8px;
+  width: 24px;
+  height: 26px;
+  background: rgb(88, 88, 88);
+  border-radius: 0 0 6px 6px;
 }
 
 /* Keyframes for Delete */
 @keyframes delete {
-    0% {
-        transform: rotate(0) translateY(0);
-    }
-    20% {
-        transform: rotate(0) translateY(-4px);
-    }
-    30% {
-        transform: rotate(20deg) translateY(-4px);
-    }
-    40% {
-        transform: rotate(-20deg) translateY(-4px);
-    }
-    50% {
-        transform: rotate(20deg) translateY(-4px);
-    }
-    60% {
-        transform: rotate(-10deg) translateY(-4px);
-    }
-    70% {
-        transform: rotate(10deg) translateY(-4px);
-    }
-    80% {
-        transform: rotate(0) translateY(-4px);
-    }
-    100% {
-        transform: rotate(0) translateY(0);
-    }
+  0% {
+    transform: rotate(0) translateY(0);
+  }
+  20% {
+    transform: rotate(0) translateY(-4px);
+  }
+  30% {
+    transform: rotate(20deg) translateY(-4px);
+  }
+  40% {
+    transform: rotate(-20deg) translateY(-4px);
+  }
+  50% {
+    transform: rotate(20deg) translateY(-4px);
+  }
+  60% {
+    transform: rotate(-10deg) translateY(-4px);
+  }
+  70% {
+    transform: rotate(10deg) translateY(-4px);
+  }
+  80% {
+    transform: rotate(0) translateY(-4px);
+  }
+  100% {
+    transform: rotate(0) translateY(0);
+  }
 }
diff --git a/src/Component/Chart/PieChart.tsx b/src/Component/Chart/PieChart.tsx
index 847d9fb..b3d8dd4 100644
--- a/src/Component/Chart/PieChart.tsx
+++ b/src/Component/Chart/PieChart.tsx
@@ -3,28 +3,28 @@ import ReactApexChart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
 import { StockProps } from "../../constants/interface";
 
-interface PieChartProps{
-    stockData: StockProps[];
+interface PieChartProps {
+  stockData: StockProps[];
 }
 
-const PieChart:React.FC<PieChartProps> = ({stockData}) => {
+const PieChart: React.FC<PieChartProps> = ({ stockData }) => {
   const series = stockData.map((item) => item.quantity);
   const labels = stockData.map((item) => item.name);
 
   const options: ApexOptions = {
     chart: {
-      type: "donut"
+      type: "donut",
     },
     labels: labels,
     legend: {
-        position: "bottom",
+      position: "bottom",
     },
     responsive: [
       {
         breakpoint: 480,
         options: {
           chart: {
-           width: 200
+            width: 200,
           },
         },
       },
@@ -32,7 +32,7 @@ const PieChart:React.FC<PieChartProps> = ({stockData}) => {
   };
 
   return (
-    <div id="chart" style={{width: "450px", marginTop: "6rem", marginBottom: "10rem"}}>
+    <div id="chart" style={{ marginTop: "6rem", marginBottom: "10rem" }}>
       <ReactApexChart options={options} series={series} type="donut" />
     </div>
   );
diff --git a/src/Component/Portfolio/PortfolioDetail.tsx b/src/Component/Portfolio/PortfolioDetail.tsx
index e8d6a27..4d12cca 100644
--- a/src/Component/Portfolio/PortfolioDetail.tsx
+++ b/src/Component/Portfolio/PortfolioDetail.tsx
@@ -90,7 +90,6 @@ const PortfolioDetail = () => {
   return (
     <div
       style={{
-        height: "100%",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
@@ -101,12 +100,13 @@ const PortfolioDetail = () => {
         style={{
           width: "100%",
           display: "flex",
-          justifyContent: "start",
           alignItems: "center",
           position: "relative",
+          justifyContent: "space-between",
+          padding: "0 20px",
         }}
       >
-        <h2 style={{ marginLeft: "60px", marginBottom: "15px" }}>{pfName}</h2>
+        <h2 style={{ marginBottom: "15px" }}>{pfName}</h2>
         <DeleteButton onClick={() => setIsDeleteOpen(true)} />
         {isDeleteOpen && (
           <DeleteConfirmationModal
diff --git a/src/Component/SearchBar/SearchBar.tsx b/src/Component/SearchBar/SearchBar.tsx
index 4f137b2..eea7b4c 100644
--- a/src/Component/SearchBar/SearchBar.tsx
+++ b/src/Component/SearchBar/SearchBar.tsx
@@ -44,9 +44,7 @@ const SearchBar: React.FC<SearchBarProps> = () => {
           nav("/login");
         }
       })
-      .catch((e) => {
-        nav("/error");
-      });
+      .catch((error) => {});
   }, [keyword]);
 
   const handleSelectStock = (event: StockDataProps) => {

From 34adf437efb73f0384374777b7ccaba4ba441d91 Mon Sep 17 00:00:00 2001
From: "yeondu._" <dustn2366@naver.com>
Date: Wed, 28 Aug 2024 19:08:49 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Style=20:=20=ED=8F=AC=ED=8F=B4=20=EC=9E=90?=
 =?UTF-8?q?=EC=82=B0=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Button/Animation/HyperText.tsx | 78 ++++++++++----------
 src/Component/Portfolio/pfStyle.css          |  3 +-
 src/Component/Portfolio/portfolio.tsx        | 12 ++-
 src/Component/SearchBar/SearchBarStyle.ts    |  4 +
 4 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/src/Component/Button/Animation/HyperText.tsx b/src/Component/Button/Animation/HyperText.tsx
index afae02a..fd1ef06 100644
--- a/src/Component/Button/Animation/HyperText.tsx
+++ b/src/Component/Button/Animation/HyperText.tsx
@@ -2,6 +2,15 @@
 
 import { useEffect, useRef, useState } from "react";
 import { motion, Variants } from "framer-motion";
+import styled from "styled-components";
+
+const MotionH1 = styled(motion.h1)`
+  font-size: 25px;
+
+  @media (max-width: 768px) {
+    font-size: 20px;
+  }
+`;
 
 interface HyperTextProps {
   text: string;
@@ -37,54 +46,47 @@ export default function HyperText({
   };
 
   useEffect(() => {
-    const interval = setInterval(
-      () => {
-        if (!animateOnLoad && isFirstRender.current) {
-          clearInterval(interval);
-          isFirstRender.current = false;
-          return;
-        }
-        if (interations.current < text.length) {
-          setDisplayText((t) =>
-            t
-              .split("")
-              .map((l, i) =>
-                l === " "
-                  ? l
-                  : i <= interations.current
-                  ? text[i]
-                  : numbers[getRandomInt(10)]
-              )
-              .join("")
-          );
-          interations.current = interations.current + 0.1;
-        } else {
-          setTrigger(false);
-          clearInterval(interval);
-        }
-      },
-      duration / (text.length * 10)
-    );
+    const interval = setInterval(() => {
+      if (!animateOnLoad && isFirstRender.current) {
+        clearInterval(interval);
+        isFirstRender.current = false;
+        return;
+      }
+      if (interations.current < text.length) {
+        setDisplayText((t) =>
+          t
+            .split("")
+            .map((l, i) =>
+              l === " "
+                ? l
+                : i <= interations.current
+                ? text[i]
+                : numbers[getRandomInt(10)]
+            )
+            .join("")
+        );
+        interations.current = interations.current + 0.1;
+      } else {
+        setTrigger(false);
+        clearInterval(interval);
+      }
+    }, duration / (text.length * 10));
     // Clean up interval on unmount
     return () => clearInterval(interval);
   }, [text, duration, trigger, animateOnLoad]);
-    
-    useEffect(() => {
-        setDisplayText(text);
-    }, [text]);
+
+  useEffect(() => {
+    setDisplayText(text);
+  }, [text]);
 
   return (
     <div
       className="overflow-hidden py-2 flex cursor-default scale-100"
       onMouseEnter={triggerAnimation}
     >
-        <motion.h1
-              style={{ fontSize: "32px", marginLeft: "-100px" }}
-        className={`font-mono ${className}`}
-        {...framerProps}
-        >
+      <MotionH1 className={`font-mono ${className}`} {...framerProps}>
         {displayText}
-      </motion.h1>
+      </MotionH1>
     </div>
   );
 }
diff --git a/src/Component/Portfolio/pfStyle.css b/src/Component/Portfolio/pfStyle.css
index 4dae14e..d84e934 100644
--- a/src/Component/Portfolio/pfStyle.css
+++ b/src/Component/Portfolio/pfStyle.css
@@ -25,11 +25,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  justify-content: space-between;
 }
 
 .total-growth {
   font-size: 12px;
-  margin-left: 4rem;
+  padding-left: 2rem;
 }
 
 .my-portfolio {
diff --git a/src/Component/Portfolio/portfolio.tsx b/src/Component/Portfolio/portfolio.tsx
index d08f3dd..0b54860 100644
--- a/src/Component/Portfolio/portfolio.tsx
+++ b/src/Component/Portfolio/portfolio.tsx
@@ -132,13 +132,11 @@ const Portfolio = () => {
         <p>모든 포트폴리오 자산의 총 합입니다.</p>
         <div className="asset-value">
           <div className="total-value">
-            <div>
-              <HyperText
-                text={`₩  ${formatPrice(totalAsset)}`} // 적용할 텍스트
-                duration={1200} // 애니메이션 지속 시간
-                className="text-xl font-bold" // 필요한 클래스명 추가
-              />
-            </div>
+            <HyperText
+              text={`₩  ${formatPrice(totalAsset)}`} // 적용할 텍스트
+              duration={1200} // 애니메이션 지속 시간
+              className="text-xl font-bold" // 필요한 클래스명 추가
+            />
             <div
               className="total-growth"
               style={{
diff --git a/src/Component/SearchBar/SearchBarStyle.ts b/src/Component/SearchBar/SearchBarStyle.ts
index 1c784ee..20dfe5c 100644
--- a/src/Component/SearchBar/SearchBarStyle.ts
+++ b/src/Component/SearchBar/SearchBarStyle.ts
@@ -44,6 +44,10 @@ export const SearchResult = styled.div`
   max-height: 300px;
   overflow: scroll;
   scrollbar-width: none;
+  @media (max-width: 768px) {
+    width: 93%;
+    margin-top: 1rem;
+  }
 `;
 
 export const StockItemContainer = styled.li`

From 5794ec164a4c71ba0af4f0915ce993860b47cfd4 Mon Sep 17 00:00:00 2001
From: "yeondu._" <dustn2366@naver.com>
Date: Wed, 28 Aug 2024 20:15:13 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Style=20:=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?=
 =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=83=81=EC=84=B8=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20CSS=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Button/DeleteButton.tsx       |   4 +-
 src/Component/Carousel/EmblaCarousel.tsx    |   2 -
 src/Component/Carousel/embla.css            | 190 +++++++++++---------
 src/Component/Chart/PieChart.tsx            |   4 +-
 src/Component/Portfolio/PortfolioDetail.tsx |  26 +--
 src/Component/Swipe/Swipe.tsx               |   2 +-
 6 files changed, 124 insertions(+), 104 deletions(-)

diff --git a/src/Component/Button/DeleteButton.tsx b/src/Component/Button/DeleteButton.tsx
index 8b3d9ab..50a3c58 100644
--- a/src/Component/Button/DeleteButton.tsx
+++ b/src/Component/Button/DeleteButton.tsx
@@ -7,7 +7,7 @@ interface AnimatedButtonProps {
 
 const DeleteButton: React.FC<AnimatedButtonProps> = ({ onClick }) => {
   return (
-    <button
+    <div
       className="delete"
       onClick={onClick}
       style={{
@@ -18,7 +18,7 @@ const DeleteButton: React.FC<AnimatedButtonProps> = ({ onClick }) => {
     >
       <div className="top"></div>
       <div className="bottom"></div>
-    </button>
+    </div>
   );
 };
 
diff --git a/src/Component/Carousel/EmblaCarousel.tsx b/src/Component/Carousel/EmblaCarousel.tsx
index 7635c07..c8f32cd 100644
--- a/src/Component/Carousel/EmblaCarousel.tsx
+++ b/src/Component/Carousel/EmblaCarousel.tsx
@@ -14,9 +14,7 @@ import {
 import { DotButton, useDotButton } from "./EmblaCarouselDotButton";
 import { formatPrice, formatROR } from "../../util/util";
 import myPortfolioImg from "../../img/myPortfolioImg.png";
-import axios from "axios";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
-import state from "sweetalert/typings/modules/state";
 
 const TWEEN_FACTOR_BASE = 0.52;
 
diff --git a/src/Component/Carousel/embla.css b/src/Component/Carousel/embla.css
index 80920d2..4247f40 100644
--- a/src/Component/Carousel/embla.css
+++ b/src/Component/Carousel/embla.css
@@ -1,142 +1,160 @@
 .embla {
-    max-width: 48rem;
-    margin: auto;
-    --slide-height: 19rem;
-    --slide-spacing: 0.2rem;
-    --slide-size: 50%;
+  max-width: 48rem;
+  margin: auto;
+  --slide-height: 19rem;
+  --slide-spacing: 0.1rem;
+  --slide-size: 55%;
 }
 
 .embla__viewport {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .embla__container {
-    display: flex;
-    touch-action: pan-y pinch-zoom;
-    margin-left: calc(var(--slide-spacing) * -1);
+  display: flex;
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--slide-spacing) * -1);
 }
 
 .embla__slide {
-    transform: translate3d(0, 0, 0);
-    flex: 0 0 var(--slide-size);
-    min-width: 0;
-    padding-left: var(--slide-spacing);
+  transform: translate3d(0, 0, 0);
+  flex: 0 0 var(--slide-size);
+  min-width: 0;
+  padding-left: var(--slide-spacing);
 }
 
 .embla__slide__number {
-    border-radius: 20px;
-    font-size: 18px;
-    font-weight: 600;
-    height: var(--slide-height);
-    user-select: none;
-    backface-visibility: hidden;
-    background: linear-gradient(200deg, #615efc 0%, #d8d7ff 100%);
-    color: white;
-    padding: 2rem 2rem;
+  border-radius: 20px;
+  font-size: 18px;
+  font-weight: 600;
+  height: var(--slide-height);
+  user-select: none;
+  backface-visibility: hidden;
+  background: linear-gradient(200deg, #615efc 0%, #d8d7ff 100%);
+  color: white;
+  padding: 2rem 2rem;
 }
 
 .embla__slide__info > h3 {
-    font-size: 25px;
+  font-size: 25px;
+  margin-top: 0.7rem;
+  margin-bottom: 1rem;
+  min-height: 75px;
+}
+
+@media screen and (max-width: 768px) {
+  .embla__slide__info > h3 {
+    font-size: 20px;
     margin-top: 0.7rem;
     margin-bottom: 1rem;
-    min-height: 75px;
+    min-height: 40px;
+  }
 }
 
 .embla__slide__info > p {
-    margin: 0.2rem 0;
+  margin: 0.2rem 0;
 }
 
 .embla__slide__info > img {
-    width: 130px;
-    height: 130px;
-    margin-left: 2.5rem;
-    margin-top: -2rem;
+  width: 130px;
+  height: 130px;
+  margin-left: 2.5rem;
+  margin-top: -2rem;
+}
+
+@media screen and (max-width: 768px) {
+  .embla__slide__info > img {
+    width: 80px;
+    height: 80px;
+    margin-left: 3rem;
+    margin-top: 2rem;
+  }
 }
 
 .embla__controls {
-    display: flex;
-    /* grid-template-columns: auto 1fr;
+  display: flex;
+  /* grid-template-columns: auto 1fr;
   justify-content: space-between; */
-    gap: 1rem;
-    margin-top: 1.8rem;
-    flex-direction: column;
+  gap: 1rem;
+  margin-top: 1.8rem;
+  flex-direction: column;
 }
 
 .embla__buttons {
-    display: flex;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.6rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 2rem;
+  display: flex;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
 }
 
 .embla__button {
-    appearance: none;
-    touch-action: manipulation;
-    cursor: pointer;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    /* box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); */
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    color: rgb(137, 136, 136);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  appearance: none;
+  touch-action: manipulation;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  /* box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); */
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  color: rgb(137, 136, 136);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .embla__button:hover {
-    background-color: #615efc;
-    color: #fff;
+  background-color: #615efc;
+  color: #fff;
 }
 
 .embla__button:disabled {
-    color: var(--detail-high-contrast);
+  color: var(--detail-high-contrast);
 }
 
 .embla__button__svg {
-    width: 35%;
-    height: 35%;
+  width: 35%;
+  height: 35%;
 }
 
 .embla__dots {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
-    gap: 1px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+  gap: 1px;
 }
 
 .embla__dot {
-    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-    appearance: none;
-    background-color: rgb(234, 234, 234);
-    touch-action: manipulation;
-    cursor: pointer;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    width: 8px;
-    height: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  appearance: none;
+  background-color: rgb(234, 234, 234);
+  touch-action: manipulation;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 8px;
+  height: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
 }
 
 .embla__dot:after {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: "";
 }
 
 .embla__dot--selected:after {
-    background-color: #615efc;
+  background-color: #615efc;
 }
diff --git a/src/Component/Chart/PieChart.tsx b/src/Component/Chart/PieChart.tsx
index b3d8dd4..b65f3d0 100644
--- a/src/Component/Chart/PieChart.tsx
+++ b/src/Component/Chart/PieChart.tsx
@@ -24,7 +24,7 @@ const PieChart: React.FC<PieChartProps> = ({ stockData }) => {
         breakpoint: 480,
         options: {
           chart: {
-            width: 200,
+            width: 450,
           },
         },
       },
@@ -32,7 +32,7 @@ const PieChart: React.FC<PieChartProps> = ({ stockData }) => {
   };
 
   return (
-    <div id="chart" style={{ marginTop: "6rem", marginBottom: "10rem" }}>
+    <div id="chart" style={{ marginTop: "4rem", marginBottom: "10rem" }}>
       <ReactApexChart options={options} series={series} type="donut" />
     </div>
   );
diff --git a/src/Component/Portfolio/PortfolioDetail.tsx b/src/Component/Portfolio/PortfolioDetail.tsx
index 4d12cca..5906724 100644
--- a/src/Component/Portfolio/PortfolioDetail.tsx
+++ b/src/Component/Portfolio/PortfolioDetail.tsx
@@ -8,6 +8,19 @@ import { usePortfolioStore } from "../../store/usePortfolioStore";
 import DeleteConfirmationModal from "../Modal/deleteProtfolio";
 import swal from "sweetalert";
 import DeleteButton from "../Button/DeleteButton";
+import styled from "styled-components";
+
+const TitleDiv = styled.div`
+  width: 60%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+  @media (max-width: 768px) {
+    width: 100%;
+    padding-right: 1rem;
+  }
+`;
 
 const PortfolioDetail = () => {
   const location = useLocation();
@@ -96,16 +109,7 @@ const PortfolioDetail = () => {
         flexDirection: "column",
       }}
     >
-      <div
-        style={{
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          position: "relative",
-          justifyContent: "space-between",
-          padding: "0 20px",
-        }}
-      >
+      <TitleDiv>
         <h2 style={{ marginBottom: "15px" }}>{pfName}</h2>
         <DeleteButton onClick={() => setIsDeleteOpen(true)} />
         {isDeleteOpen && (
@@ -116,7 +120,7 @@ const PortfolioDetail = () => {
             showCancelButton={true}
           />
         )}
-      </div>
+      </TitleDiv>
       <PfCard />
       <PieChart stockData={stockData} />
       <Swipe portfolioId={id} />
diff --git a/src/Component/Swipe/Swipe.tsx b/src/Component/Swipe/Swipe.tsx
index 2ae662a..82fe2bf 100644
--- a/src/Component/Swipe/Swipe.tsx
+++ b/src/Component/Swipe/Swipe.tsx
@@ -13,7 +13,7 @@ interface SwipeProps {
 }
 
 const MAX_HEIGHT_PERCENT = 80; // 80%
-const MIN_HEIGHT_PERCENT = 10; // 10%
+const MIN_HEIGHT_PERCENT = 8; // 10%
 
 const Swipe: React.FC<SwipeProps> = ({ portfolioId }) => {
   const stockData = usePortfolioStore((state) => state.stockData);