Merge pull request #125 from 100-hours-a-week/feature/lucy

Feature/lucy
100-hours-a-week · Aug 27, 2024 · 7789a10 · 7789a10
2 parents 33bc857 + d8d0ca7
commit 7789a10
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 353 deletions.
diff --git a/src/Component/Calculator/calculResult.tsx b/src/Component/Calculator/calculResult.tsx
@@ -5,7 +5,7 @@ import Chicken from "../../img/chicken.png";
 import Iphone from "../../img/iphone.png";
 import styled from "styled-components";
 import Skrrr from "../../img/SkerrImg.png";
-import { CalculResultProps } from "../../constants/interface";
+import { CalculResultProps, UserProps } from "../../constants/interface";
 import { ValueProps } from "../../constants/interface";
 import { formatPrice } from "../../util/util";
 
@@ -106,12 +106,21 @@ const CalculResult: React.FC<CalculResultProps> = ({
   chicken,
   iphone,
 }) => {
+  let userName: string = "사용자";
+
+  const userData = localStorage.getItem("user");
+  if (userData) {
+    userName = JSON.parse(userData).name;
+  } else {
+    console.log("유저 정보 없음");
+  }
+
   return (
     <>
       {price !== 0 ? (
         <Container>
           <SpanContainer>
-            <SpanStyle isNegative={true}>스껄</SpanStyle>
+            <SpanStyle isNegative={true}>{userName}</SpanStyle>
             님은
             <SpanStyle isNegative={price < 0}>
               {formatPrice(Math.abs(price))}

diff --git a/src/Component/Calculator/calculator.tsx b/src/Component/Calculator/calculator.tsx
@@ -182,6 +182,15 @@ const Calculator = () => {
     setResult(null);
   };
 
+  let userName: string = "사용자";
+
+  const userData = localStorage.getItem("user");
+  if (userData) {
+    userName = JSON.parse(userData).name;
+  } else {
+    console.log("유저 정보 없음");
+  }
+
   return result ? (
     <div
       style={{
@@ -205,7 +214,7 @@ const Calculator = () => {
       <TitleContainer>
         <img src={Img} alt="앵무새가 컴퓨터 보는 이미지" />
         <span style={{ fontSize: "20px" }}>
-          만약 <User>스껄</User>님이 이 때 샀다면?
+          만약 <User>{userName}</User>님이 이 때 샀다면?
         </span>
       </TitleContainer>
       <div style={{ marginBottom: "0.5rem" }}>

diff --git a/src/Component/Modal/addStock.tsx b/src/Component/Modal/addStock.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import ModalOpen from "./modal";
 import { Input } from "../Input/input";
 import * as M from "../List/modalStyle";
@@ -8,31 +8,31 @@ import swal from "sweetalert";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
 
 interface AddOrEditModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: (quantity: number, price: number) => void;
-    action: "add" | "edit" | undefined;
-    selectedStock: {
-        portfolioId: number;
-        name: string;
-        code: string;
-        logo?: string;
-    } | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (quantity: number, price: number) => void;
+  action: "add" | "edit" | undefined;
+  selectedStock: {
+    portfolioId: number;
+    name: string;
+    code: string;
+    logo?: string;
+  } | null;
 }
 
 const AddOrEditModal: React.FC<AddOrEditModalProps> = ({
-    isOpen,
-    onClose,
-    onConfirm,
-    action,
-    selectedStock,
+  isOpen,
+  onClose,
+  onConfirm,
+  action,
+  selectedStock,
 }) => {
-    const [quantity, setQuantity] = useState<number>(0);
-    const [price, setPrice] = useState<number>(0);
-    const [isValidQuantity, setIsValidQuantity] = useState(true);
-    const [isValidPrice, setIsValidPrice] = useState(true);
-    const location = useLocation();
-    const id = location.pathname.split("/")[2];
+  const [quantity, setQuantity] = useState<number>(0);
+  const [price, setPrice] = useState<number>(0);
+  const [isValidQuantity, setIsValidQuantity] = useState(true);
+  const [isValidPrice, setIsValidPrice] = useState(true);
+  const location = useLocation();
+  const id = location.pathname.split("/")[2];
 
   const changeStatus = usePortfolioStore((state) => state.change);
   const changeCheck = usePortfolioStore((state) => state.setChange);
@@ -43,16 +43,16 @@ const AddOrEditModal: React.FC<AddOrEditModalProps> = ({
     setIsValidQuantity(true);
   };
 
-    const handelChangePrice = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = parseFloat(e.target.value);
-        setPrice(isNaN(value) ? 0 : value);
-        setIsValidPrice(true);
-    };
+  const handleChangePrice = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseFloat(e.target.value);
+    setPrice(isNaN(value) ? 0 : value);
+    setIsValidPrice(true);
+  };
 
   const handleConfirm = () => {
-    if (!quantity || !price) {
-      setIsValidQuantity(!quantity);
-      setIsValidPrice(!price);
+    if (quantity <= 0 || price <= 0) {
+      setIsValidQuantity(quantity > 0);
+      setIsValidPrice(price > 0);
       swal({
         title: "입력 오류",
         text: "수량과 가격을 정확히 입력해주세요!",
@@ -61,7 +61,7 @@ const AddOrEditModal: React.FC<AddOrEditModalProps> = ({
       return;
     }
 
-    if (selectedStock && quantity > 0 && price > 0) {
+    if (selectedStock) {
       axios
         .post(
           `${process.env.REACT_APP_API_URL}/v1/portfolio/${id}/holding/${selectedStock.code}`,
@@ -70,128 +70,105 @@ const AddOrEditModal: React.FC<AddOrEditModalProps> = ({
         )
         .then((res) => {
           if (res.status === 200) {
-            const newStock = { ...selectedStock, quantity, price };
-            // onUpdateStocks(newStock);
-            // 상태변화 업데이트
-            changeCheck(!changeStatus);
             swal({
-                title: "입력 오류",
-                text: "수량과 가격을 정확히 입력해주세요!",
-                icon: "warning",
+              title: "자산 추가가 되었습니다.",
+              text: "성공적으로 완료되었습니다",
+              icon: "success",
             });
-            return;
-        }
-
-        if (selectedStock && quantity > 0 && price > 0) {
-            axios
-                .post(
-                    `${process.env.REACT_APP_API_URL}/v1/portfolio/${id}/holding/${selectedStock.code}`,
-                    //`http://localhost:8080/v1/portfolio/${id}/holding/${selectedStock.code}`,
-                    { quantity, price },
-                    { withCredentials: true }
-                )
-                .then((res) => {
-                    if (res.status === 200) {
-                        const newStock = { ...selectedStock, quantity, price };
-                        // onUpdateStocks(newStock);
-                        swal({
-                            title: "자산 추가가 되었습니다.",
-                            text: "성공적으로 완료되었습니다",
-                            icon: "success",
-                        });
-                        onConfirm(quantity, price);
-                        onClose();
-                    }
-                })
-                .catch((error) => {
-                    console.log(error);
-                    swal({
-                        title: "추가에 실패하셨습니다.",
-                        text: "다시 시도해주세요!",
-                        icon: "error",
-                    });
+            onConfirm(quantity, price);
+            onClose();
+            changeCheck(!changeStatus);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          swal({
+            title: "추가에 실패하셨습니다.",
+            text: "다시 시도해주세요!",
+            icon: "error",
+          });
 
-                    setPrice(0);
-                    setQuantity(0);
-                });
-        }
-    };
+          setPrice(0);
+          setQuantity(0);
+        });
+    }
+  };
 
-    return (
-        <ModalOpen
-            title={action === "add" ? "자산 추가" : "자산 수정"}
-            isOpen={isOpen}
-            onRequestClose={onClose}
-            showOneConfirmBtn={true}
-            text={action === "add" ? "자산 추가" : "자산 수정"}
-            onConfirm={handleConfirm}
-        >
-            <div>
-                <M.Box>
-                    {selectedStock?.logo ? (
-                        <img
-                            src={selectedStock.logo}
-                            alt={`${selectedStock.name} logo`}
-                            style={{
-                                width: "30px",
-                                height: "30px",
-                                marginRight: "20px",
-                            }}
-                        />
-                    ) : (
-                        <div
-                            style={{
-                                width: "30px",
-                                height: "30px",
-                                marginRight: "20px",
-                                borderRadius: "10px",
-                                textAlign: "center",
-                                alignItems: "center",
-                                display: "flex",
-                                justifyContent: "center",
-                                color: "#fff",
-                                background: "#615EFC",
-                            }}
-                        >
-                            {selectedStock?.name.charAt(0)}
-                        </div>
-                    )}
-                    <div>
-                        <h2>{selectedStock?.name}</h2>
-                        <M.P>{selectedStock?.code}</M.P>
-                    </div>
-                </M.Box>
-                <M.Container>
-                    <div>
-                        <M.Div>수량 (최대 99,999주)</M.Div>
-                        <Input
-                            placeholder="수량"
-                            size="medium"
-                            colorType="fillType"
-                            errorMessage="수량을 입력해주세요"
-                            isValid={isValidQuantity || !!quantity}
-                            value={quantity.toString()}
-                            onChange={handleChangeQuantity}
-                            maxLength={5}
-                        />
-                    </div>
-                    <div style={{ marginTop: "1rem" }}>
-                        <M.Div>평균 단가 (최대 9,999,999,999원)</M.Div>
-                        <Input
-                            placeholder="단가"
-                            size="medium"
-                            colorType="fillType"
-                            errorMessage="단가를 입력해주세요"
-                            isValid={isValidPrice || !!price}
-                            value={price.toString()}
-                            onChange={handelChangePrice}
-                            maxLength={10}
-                        />
-                    </div>
-                </M.Container>
+  return (
+    <ModalOpen
+      title={action === "add" ? "자산 추가" : "자산 수정"}
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      showOneConfirmBtn={true}
+      text={action === "add" ? "자산 추가" : "자산 수정"}
+      onConfirm={handleConfirm}
+    >
+      <div>
+        <M.Box>
+          {selectedStock?.logo ? (
+            <img
+              src={selectedStock.logo}
+              alt={`${selectedStock.name} logo`}
+              style={{
+                width: "30px",
+                height: "30px",
+                marginRight: "20px",
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                width: "30px",
+                height: "30px",
+                marginRight: "20px",
+                borderRadius: "10px",
+                textAlign: "center",
+                alignItems: "center",
+                display: "flex",
+                justifyContent: "center",
+                color: "#fff",
+                background: "#615EFC",
+              }}
+            >
+              {selectedStock?.name.charAt(0)}
             </div>
-        </ModalOpen>
-    );
+          )}
+          <div>
+            <h2>{selectedStock?.name}</h2>
+            <M.P>{selectedStock?.code}</M.P>
+          </div>
+        </M.Box>
+        <M.Container>
+          <div>
+            <M.Div>수량 (최대 99,999주)</M.Div>
+            <Input
+              placeholder="수량"
+              size="medium"
+              colorType="fillType"
+              errorMessage="수량을 입력해주세요"
+              isValid={isValidQuantity || quantity > 0}
+              value={quantity.toString()}
+              onChange={handleChangeQuantity}
+              maxLength={5}
+            />
+          </div>
+          <div style={{ marginTop: "1rem" }}>
+            <M.Div>평균 단가 (최대 9,999,999,999원)</M.Div>
+            <Input
+              placeholder="단가"
+              size="medium"
+              colorType="fillType"
+              errorMessage="단가를 입력해주세요"
+              isValid={isValidPrice || price > 0}
+              value={price.toString()}
+              onChange={handleChangePrice}
+              maxLength={10}
+            />
+          </div>
+        </M.Container>
+      </div>
+    </ModalOpen>
+  );
 };
 
 export default AddOrEditModal;