Merge pull request #169 from 100-hours-a-week/feature/elle

Feature/elle
100-hours-a-week · Aug 29, 2024 · 0a52af4 · 0a52af4
2 parents 3b371b8 + c47b6dd
commit 0a52af4
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 61 deletions.
diff --git a/src/Component/Button/Animation/rotatioin.tsx b/src/Component/Button/Animation/rotatioin.tsx
@@ -5,7 +5,7 @@ import { FaCaretDown } from "react-icons/fa";
 
 interface SlidingDivProps {
   isSliding: boolean;
-  isNegative: boolean;
+  $isNegative: boolean;
 }
 
 const slideUp = keyframes`
@@ -48,7 +48,7 @@ const SlidingDiv = styled.div<SlidingDivProps>`
   padding: 16px;
   animation: ${({ isSliding }) => (isSliding ? slideUp : slideDown)} 0.5s
     forwards;
-  color: ${({ isNegative }) => (isNegative ? "#615EFC" : "#FF5759")};
+  color: ${({ $isNegative }) => ($isNegative ? "#615EFC" : "#FF5759")};
 `;
 
 const InfoText = styled.div`
@@ -139,7 +139,7 @@ const RotationAnimation: React.FC<MarketDataProps> = ({ kospi, kosdaq }) => {
     <Container isExpanded={isExpanded}>
       <SlidingDiv
         isSliding={isSliding}
-        isNegative={currentMarket.changeRate < 0}
+        $isNegative={currentMarket.changeRate < 0}
       >
         <InfoText>{label}:</InfoText>
         <PriceText>{currentMarket.price}</PriceText>

diff --git a/src/Component/Button/button.tsx b/src/Component/Button/button.tsx
@@ -1,27 +1,28 @@
-import styled from "styled-components"
-import React from "react"
+import styled from "styled-components";
+import React from "react";
 import { buttonSize, buttonType } from "../../Styles/button";
 import { ButtonStyleProps, ButtonProps } from "../../constants/interface";
 
 const ButtonStyle = styled.button<ButtonStyleProps>`
-    border-radius: 10px;
+  border-radius: 10px;
 
-    ${(props) => buttonSize[props.size]}
-    ${(props) => buttonType[props.colorType]?.[props.state]}
-`
+  ${(props) => buttonSize[props.$size]}
+  ${(props) => buttonType[props.$colorType]?.[props.$state]}
+`;
 
-const Button = ({onClick, children, ...styleprops}: ButtonProps) => {
-    return (
-        <>
-            <ButtonStyle {...styleprops} onClick={onClick}>
-                {children}
-            </ButtonStyle>
-        </>
-    )
-}
+const Button = ({ onClick, children, ...styleprops }: ButtonProps) => {
+  return (
+    <>
+      <ButtonStyle {...styleprops} onClick={onClick}>
+        {children}
+      </ButtonStyle>
+    </>
+  );
+};
 
 export default Button;
 
-// 버튼 사용 예시 
-{/* <Button state="normal" colorType="main" size="small">버튼</Button> */}
-
+// 버튼 사용 예시
+{
+  /* <Button state="normal" colorType="main" size="small">버튼</Button> */
+}
diff --git a/src/Component/Calculator/calculResult.tsx b/src/Component/Calculator/calculResult.tsx
@@ -51,7 +51,7 @@ const SpanContainer = styled.div`
 `;
 const SpanStyle = styled.div<ValueProps>`
   font-weight: bold;
-  color: ${(props) => (props.isNegative ? "#615EFC" : "#FF5759")};
+  color: ${(props) => (props.$isNegative ? "#615EFC" : "#FF5759")};
 `;
 
 const SkrrrBird = styled.img`
@@ -118,9 +118,9 @@ const CalculResult: React.FC<CalculResultProps> = ({
       {price !== 0 ? (
         <Container>
           <SpanContainer>
-            <SpanStyle isNegative={true}>{userName}</SpanStyle>
+            <SpanStyle $isNegative={true}>{userName}</SpanStyle>
             님은
-            <SpanStyle isNegative={price < 0}>
+            <SpanStyle $isNegative={price < 0}>
               {formatPrice(Math.abs(price))}
             </SpanStyle>
             원을 <span>{price >= 0 ? "벌었습니다." : "잃었습니다.."}</span>
@@ -130,31 +130,33 @@ const CalculResult: React.FC<CalculResultProps> = ({
               <ImgStyle src={Salary} alt="" />
               <SpanContainer>
                 2024년 최저시급 기준{" "}
-                <SpanStyle isNegative={price < 0}>{slave}</SpanStyle>시간
+                <SpanStyle $isNegative={price < 0}>{slave}</SpanStyle>시간
               </SpanContainer>
             </DivContainer>
             <DivContainer>
               <ImgStyle src={Candy} alt="" />
               <SpanContainer>
-                새콤달콤 <SpanStyle isNegative={price < 0}>{candy}</SpanStyle>개
+                새콤달콤 <SpanStyle $isNegative={price < 0}>{candy}</SpanStyle>
+                개
               </SpanContainer>
             </DivContainer>
             <DivContainer>
               <ImgStyle src={Soul} alt="" />
               <SpanContainer>
-                국밥<SpanStyle isNegative={price < 0}>{soul}</SpanStyle>그릇
+                국밥<SpanStyle $isNegative={price < 0}>{soul}</SpanStyle>그릇
               </SpanContainer>
             </DivContainer>
             <DivContainer>
               <ImgStyle src={Chicken} alt="" />
               <SpanContainer>
-                치킨 <SpanStyle isNegative={price < 0}>{chicken}</SpanStyle>마리
+                치킨 <SpanStyle $isNegative={price < 0}>{chicken}</SpanStyle>
+                마리
               </SpanContainer>
             </DivContainer>
             <DivContainer>
               <ImgStyle src={Iphone} alt="" />
               <SpanContainer>
-                아이폰 <SpanStyle isNegative={price < 0}>{iphone}</SpanStyle>대
+                아이폰 <SpanStyle $isNegative={price < 0}>{iphone}</SpanStyle>대
               </SpanContainer>
             </DivContainer>
             <SkrrrBird src={Skrrr} alt="" />

diff --git a/src/Component/Calculator/calculator.tsx b/src/Component/Calculator/calculator.tsx
@@ -207,9 +207,9 @@ const Calculator = () => {
       <CalculResult {...result} />
       <Button
         children={"다시 계산하기"}
-        state="normal"
-        size="gradientBtn"
-        colorType="gradient"
+        $state="normal"
+        $size="gradientBtn"
+        $colorType="gradient"
         onClick={handleRetry}
       />
     </div>
@@ -247,9 +247,9 @@ const Calculator = () => {
       </div>
       <Button
         children={"결과 확인하기"}
-        state="normal"
-        size="gradientBtn"
-        colorType="gradient"
+        $state="normal"
+        $size="gradientBtn"
+        $colorType="gradient"
         onClick={ConfirmHandler}
       />
     </Container>

diff --git a/src/Component/Modal/modal.tsx b/src/Component/Modal/modal.tsx
@@ -52,9 +52,9 @@ const ModalOpen: React.FC<ModalProps> = ({
           {onConfirm && (
             <Button
               onClick={onConfirm}
-              size="plusBtn"
-              colorType="main"
-              state="normal"
+              $size="plusBtn"
+              $colorType="main"
+              $state="normal"
             >
               {text}
             </Button>
@@ -73,9 +73,9 @@ const ModalOpen: React.FC<ModalProps> = ({
             <div style={{ marginRight: "0.5rem" }}>
               <Button
                 onClick={onRequestClose}
-                size="small"
-                colorType="cancel"
-                state="normal"
+                $size="small"
+                $colorType="cancel"
+                $state="normal"
               >
                 {cancelLabel}
               </Button>
@@ -84,9 +84,9 @@ const ModalOpen: React.FC<ModalProps> = ({
           {showConfirmButton && onConfirm && (
             <Button
               onClick={onConfirm}
-              size="small"
-              colorType="main"
-              state="normal"
+              $size="small"
+              $colorType="main"
+              $state="normal"
             >
               {confirmLabel}
             </Button>

diff --git a/src/Component/News/noNews.tsx b/src/Component/News/noNews.tsx
@@ -31,9 +31,9 @@ const NoNews = () => {
       <Text>내 포트폴리오를 생성하고, 종목을 추가해보세요 !</Text>
       <Button
         children={"나만의 뉴스 만들러가기"}
-        state="normal"
-        size="plusBtn"
-        colorType="main"
+        $state="normal"
+        $size="plusBtn"
+        $colorType="main"
         onClick={handleClick}
       />
     </Container>

diff --git a/src/Component/News/NewsList.tsx b/src/Component/News/NewsList.tsx
@@ -43,7 +43,8 @@ const NewsList: React.FC = () => {
         } else if (res.status === 401) {
           navigate("/login");
         }
-      });
+      })
+      .catch((e) => {});
   }, [location]);
 
   return (

diff --git a/src/Component/Portfolio/PfCreate.tsx b/src/Component/Portfolio/PfCreate.tsx
@@ -101,9 +101,9 @@ const PfCreate: React.FC = () => {
       <div>
         <Button
           onClick={openModal}
-          size="large"
-          colorType="main"
-          state="normal"
+          $size="large"
+          $colorType="main"
+          $state="normal"
         >
           포트폴리오 만들기
         </Button>

diff --git a/src/Pages/404/errorPage.tsx b/src/Pages/404/errorPage.tsx
@@ -29,10 +29,10 @@ const ErrorPage = () => {
       </div>
       <div style={{ marginTop: "1rem" }}>
         <Button
-          colorType="main"
+          $colorType="main"
           onClick={userFeedback}
-          state="normal"
-          size="small"
+          $state="normal"
+          $size="small"
         >
           문의하기
         </Button>

diff --git a/src/Pages/home.tsx b/src/Pages/home.tsx
@@ -44,7 +44,7 @@ const Kosdaq = styled.div`
 `;
 
 export const Info = styled.div<ValueProps>`
-  color: ${(props) => (props.isNegative ? "#615EFC" : "#FF5759")};
+  color: ${(props) => (props.$isNegative ? "#615EFC" : "#FF5759")};
 
   display: flex;
   flex-direction: row;
@@ -135,7 +135,7 @@ const Home: React.FC = () => {
         <Kospi>
           <span>KOSPI</span>
           {market ? (
-            <Info isNegative={market.kospi.changeRate < 0}>
+            <Info $isNegative={market.kospi.changeRate < 0}>
               <span>{market.kospi.price}</span>
               <span>
                 {market.kospi.change < 0 ? (
@@ -154,7 +154,7 @@ const Home: React.FC = () => {
         <Kosdaq>
           <span>KOSDAQ</span>
           {market ? (
-            <Info isNegative={market.kosdaq.changeRate < 0}>
+            <Info $isNegative={market.kosdaq.changeRate < 0}>
               <span>{market.kosdaq.price}</span>
               <span>
                 {market.kosdaq.change < 0 ? (

diff --git a/src/constants/interface.ts b/src/constants/interface.ts
@@ -1,7 +1,7 @@
 export type ButtonStyleProps = {
-  state: "normal";
-  size: "small" | "medium" | "large" | "plusBtn" | "gradientBtn";
-  colorType: "main" | "gradient" | "cancel";
+  $state: "normal";
+  $size: "small" | "medium" | "large" | "plusBtn" | "gradientBtn";
+  $colorType: "main" | "gradient" | "cancel";
 };
 
 export interface ButtonProps extends ButtonStyleProps {
@@ -80,7 +80,7 @@ export interface NewsProps {
 }
 
 export interface ValueProps {
-  isNegative: boolean;
+  $isNegative: boolean;
 }
 
 export interface ViewSelectProps {