Style : 포트폴리오 상세 삭제버튼 CSS 수정

100-hours-a-week · Aug 28, 2024 · 5794ec1 · 5794ec1
1 parent 34adf43
commit 5794ec1
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 104 deletions.
diff --git 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
@@ -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
@@ -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
@@ -24,15 +24,15 @@ const PieChart: React.FC<PieChartProps> = ({ stockData }) => {
         breakpoint: 480,
         options: {
           chart: {
-            width: 200,
+            width: 450,
           },
         },
       },
     ],
   };
 
   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
@@ -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
@@ -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);