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

Feature/lucy
100-hours-a-week · Aug 27, 2024 · ea9eafd · ea9eafd
2 parents 5f5c956 + 9246c91
commit ea9eafd
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 117 deletions.
diff --git a/src/Component/Calculator/calculator.tsx b/src/Component/Calculator/calculator.tsx
@@ -147,11 +147,19 @@ const Calculator = () => {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
+
+    if (value.includes("-")) {
+      setError("음수 값은 입력 불가합니다");
+      setIsValid(false);
+      return;
+    }
+
     setPrice(e.target.value);
+
     if (e.target.value) {
       setIsValid(true);
     }
-    if (value === "") {
+    if (value === "" || parseInt(value) === 0) {
       setError("금액을 입력해주세요");
       setIsValid(false);
     } else if (isNaN(Number(value))) {
@@ -182,6 +190,7 @@ const Calculator = () => {
     setResult(null);
   };
 
+  // 사용자 이름 적용
   let userName: string = "사용자";
 
   const userData = localStorage.getItem("user");
@@ -237,6 +246,7 @@ const Calculator = () => {
             value={price}
             onChange={handleInputChange}
             isValid={isValid}
+            maxLength={13}
           />
         </div>
       </div>

diff --git a/src/Component/Chart/chart.tsx b/src/Component/Chart/chart.tsx
@@ -14,7 +14,7 @@ interface CandleData {
 }
 const Chart = ({ data }: CandleData) => {
   const chartRef = useRef<HTMLDivElement>(null);
-  console.log("chart : ", data);
+  // console.log("chart : ", data);
   const [click, setClick] = useState(false);
 
   const handlerClick = () => {
@@ -32,7 +32,7 @@ const Chart = ({ data }: CandleData) => {
   };
 
   useEffect(() => {
-    console.log("차트", data);
+    // console.log("차트", data);
     if (chartRef.current && data.length > 0) {
       const options = {
         series: [
@@ -57,8 +57,8 @@ const Chart = ({ data }: CandleData) => {
             // },
             click: function (event: any, chartContext: any, opts: any) {
               var newsHtml = "";
-              console.log("차트컨텍스트", chartContext);
-              console.log("데이터포인트", opts.dataPointIndex);
+              // console.log("차트컨텍스트", chartContext);
+              // console.log("데이터포인트", opts.dataPointIndex);
               const news = opts.globals.seriesZ[0][opts.dataPointIndex]; // 뉴스 데이터
               if (Array.isArray(news)) {
                 newsHtml = `<ul>`;
@@ -107,7 +107,7 @@ const Chart = ({ data }: CandleData) => {
         },
         tooltip: {
           custom: function ({ seriesIndex, dataPointIndex, w }: any) {
-            console.log("뉴스는 과연 어디에 뜰까?? : ", w.globals);
+            // console.log("뉴스는 과연 어디에 뜰까?? : ", w.globals);
 
             const close = w.globals.seriesCandleC[seriesIndex][dataPointIndex]; // Close
             const low = w.globals.seriesCandleL[seriesIndex][dataPointIndex]; // Low

diff --git a/src/Component/Input/input.tsx b/src/Component/Input/input.tsx
@@ -23,84 +23,81 @@ const IconWrapper = styled.span`
 `;
 
 const InputStyle = styled.input<InputStyleProps & { hasIcon: boolean }>`
-    border-radius: 5px;
-    padding: ${(props) =>
-        props.hasIcon ? "0.5rem 1rem 0.5rem 2.5rem" : "1rem"};
-    font-size: 12px;
-    font-family: "SCDream4";
-    color: black;
-    ::placeholder {
-        color: #b6b6b6;
-        opacity: 1;
-    }
-    ${(props) => inputSize[props.size]}
-    ${(props) => inputType[props.colorType]?.normal}
+  border-radius: 5px;
+  padding: ${(props) => (props.hasIcon ? "0.5rem 1rem 0.5rem 2.5rem" : "1rem")};
+  font-size: 12px;
+  font-family: "SCDream4";
+  color: black;
+  ::placeholder {
+    color: #b6b6b6;
+    opacity: 1;
+  }
+  ${(props) => inputSize[props.size]}
+  ${(props) => inputType[props.colorType]?.normal}
 `;
 
 export const Input = forwardRef<HTMLInputElement, inputProps>(
-    (
-        {
-            placeholder,
-            value,
-            onChange,
-            onBlur,
-            name,
-            icon,
-            isValid = true,
-            errorMessage,
-            maxLength,
-            ...styleProps
-        },
-        ref
-    ) => {
-        return (
-            <div>
-                <InputContainer>
-                    {icon && <IconWrapper>{icon}</IconWrapper>}
-                    <InputStyle
-                        {...styleProps}
-                        placeholder={placeholder}
-                        value={value}
-                        onChange={onChange}
-                        onBlur={onBlur}
-                        ref={ref}
-                        name={name}
-                        disabled={styleProps.disabled}
-                        hasIcon={!!icon}
-                        maxLength={maxLength}
-                        style={{
-                            border: isValid
-                                ? "1px solid #ccc"
-                                : "1px solid red",
-                            paddingRight: isValid ? "0.5rem" : "2rem",
-                        }}
-                    />
-                    {!isValid && (
-                        <span
-                            style={{
-                                position: "absolute",
-                                right: "10px",
-                                top: "50%",
-                                transform: "translateY(-50%)",
-                                color: "red",
-                                fontSize: "1.5rem",
-                            }}
-                        />
-                    )}
-                </InputContainer>
-                {!isValid && (
-                    <div
-                        style={{
-                            color: "red",
-                            marginTop: "0.5rem",
-                            paddingLeft: "0.5rem",
-                            fontSize: "10px",
-                        }}
-                    >
-                        {errorMessage}
-                    </div>
-                )}
-            </div>
-        );
-    }
+  (
+    {
+      placeholder,
+      value,
+      onChange,
+      onBlur,
+      name,
+      icon,
+      isValid = true,
+      errorMessage,
+      maxLength,
+      ...styleProps
+    },
+    ref
+  ) => {
+    return (
+      <div>
+        <InputContainer>
+          {icon && <IconWrapper>{icon}</IconWrapper>}
+          <InputStyle
+            {...styleProps}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            ref={ref}
+            name={name}
+            disabled={styleProps.disabled}
+            hasIcon={!!icon}
+            maxLength={maxLength}
+            style={{
+              border: isValid ? "1px solid #ccc" : "1px solid red",
+              paddingRight: isValid ? "0.5rem" : "2rem",
+            }}
+          />
+          {!isValid && (
+            <span
+              style={{
+                position: "absolute",
+                right: "10px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: "red",
+                fontSize: "1.5rem",
+              }}
+            />
+          )}
+        </InputContainer>
+        {!isValid && (
+          <div
+            style={{
+              color: "red",
+              marginTop: "0.5rem",
+              paddingLeft: "0.5rem",
+              fontSize: "10px",
+            }}
+          >
+            {errorMessage}
+          </div>
+        )}
+      </div>
+    );
+  }
 );
diff --git a/src/Component/News/NewsItem.tsx b/src/Component/News/NewsItem.tsx
@@ -25,6 +25,7 @@ const NewsItem: React.FC<NewsProps> = ({
       <div className="news-section">
         <div className="news-content">{title}</div>
         <div className="news-info">
+
           <div className="stock">{name}</div>
           <h3>{publisher}</h3>
           <p>{date}</p>

diff --git a/src/Component/Portfolio/PortfolioDetail.tsx b/src/Component/Portfolio/PortfolioDetail.tsx
@@ -7,8 +7,8 @@ import axios from "axios";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
 
 const PortfolioDetail = () => {
-    const location = useLocation();
-    const id = Number(location.pathname.split("/")[2]);
+  const location = useLocation();
+  const id = Number(location.pathname.split("/")[2]);
 
   const setPortfolio = usePortfolioStore((state) => state.setPortfolio);
   const setFinancialData = usePortfolioStore((state) => state.setFinancialData);
@@ -34,6 +34,7 @@ const PortfolioDetail = () => {
       .then((res) => {
         if (res.status === 200) {
           // console.log("개별 포트폴리오 조회", res);
+
           setPortfolio(res.data.name, res.data, res.data.stocks);
           setFinancialData(
             res.data.budget,
@@ -53,39 +54,36 @@ const PortfolioDetail = () => {
       });
   }, [setPortfolio, setFinancialData, changeStatus]);
 
+  if (!data) {
+    return <div>포트폴리오를 찾을 수 없습니다.</div>;
+  }
 
-    if (!data) {
-        return <div>포트폴리오를 찾을 수 없습니다.</div>;
-    }
-
-    return (
-        <div
-            style={{
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-            }}
-        >
-            <div
-                style={{
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "start",
-                    alignItems: "center",
-                }}
-            >
-                {/* <h2 style={{ marginLeft: "-200px", marginBottom: "30px" }}> */}
-                <h2 style={{ marginLeft: "60px", marginBottom: "15px" }}>
-                    {pfName}
-                </h2>
-            </div>
-            <PfCard />
-            <PieChart stockData={stockData} />
-            <Swipe portfolioId={id} />
-        </div>
-    );
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "start",
+          alignItems: "center",
+        }}
+      >
+        {/* <h2 style={{ marginLeft: "-200px", marginBottom: "30px" }}> */}
+        <h2 style={{ marginLeft: "60px", marginBottom: "15px" }}>{pfName}</h2>
+      </div>
+      <PfCard />
+      <PieChart stockData={stockData} />
+      <Swipe portfolioId={id} />
+    </div>
+  );
 };
 
 export default PortfolioDetail;