diff --git a/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx b/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
index bffd892..f322c54 100644
--- a/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
+++ b/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
@@ -64,7 +64,7 @@ export default ExpandScreenBtn;
 // type 정의
 interface OwnProps {
   direction: string;
-  buttonHover: boolean;
+  buttonHover?: boolean; //build error 해결을 위해 ?를 붙였습니다
 }
 
 // component 생성
diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
index d130806..a990e92 100644
--- a/client/src/components/HoldingList/HoldingList.tsx
+++ b/client/src/components/HoldingList/HoldingList.tsx
@@ -5,6 +5,9 @@ import StockItem from "./StockItem";
 import useGetStockHolds from "../../hooks/useGetStockholds";
 import { StockItemProps } from "./StockItem";
 import useCompanyData from "../../hooks/useCompanyData";
+import LoginRequestIndicator from "./LoginRequestIndicator"; 
+import { RootState } from "../../store/config"; 
+import { useSelector } from "react-redux";
 
 // 🔴
 const evalutationProfitText = "평가 수익금";
@@ -20,9 +23,19 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
   // 모든 stockReturn의 합을 계산합니다.
   let totalEvaluationProfit = 0;
 
-  if (stockHolds) {
-    totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
-  }
+if (Array.isArray(stockHolds) && stockHolds.length > 0) {
+  totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
+}
+
+  // if (stockHolds) {
+  //   totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
+  // }
+    const isLogin = useSelector((state: RootState) => state.login); // 로그인 상태 가져오기
+
+    // OAuth 모달을 열기 위한 함수
+    const openOAuthModal = () => {
+      // OAuth 로그인 모달을 열기 위한 로직
+    };
 
   return (
     <WatchListContainer>
@@ -40,20 +53,31 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
       </Header2Container>
       {/* <Divider /> */}
       <StockList>
-        {isLoading || isCompanyDataLoading ? (
-          <div>Loading...</div>
-        ) : isError || isCompanyDataError ? (
-          <div>Error fetching data</div>
-        ) : (
-          stockHolds.map((stockHold: StockItemProps["stockData"]) => {
-            const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined;
-
-            return matchedCompany ? <StockItem key={stockHold.companyId} stockData={stockHold} companyData={matchedCompany} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} /> : null;
-          })
-        )}
-      </StockList>
-    </WatchListContainer>
-  );
+    {isLogin === 0 ? (
+        <LoginRequestIndicator openOAuthModal={openOAuthModal} />
+    ) : isLoading || isCompanyDataLoading ? (
+        <div>Loading...</div>
+    ) : isError || isCompanyDataError ? (
+        <div>Error fetching data</div>
+    ) : (
+      (Array.isArray(stockHolds) && stockHolds.length > 0) && // 여기에 조건을 추가합니다
+      stockHolds.map((stockHold: StockItemProps["stockData"]) => {
+          const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined;
+
+          return matchedCompany ? (
+              <StockItem 
+                  key={stockHold.companyId} 
+                  stockData={stockHold} 
+                  companyData={matchedCompany} 
+                  setShowChangePrice={setShowChangePrice} 
+                  showChangePrice={showChangePrice} 
+              />
+          ) : null;
+      })
+  )}
+</StockList>
+</WatchListContainer>
+);
 };
 
 export default HoldingList;
@@ -61,6 +85,7 @@ export default HoldingList;
 type WatchListProps = {
   currentListType: "전체종목" | "관심종목" | "보유종목";
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
+  openOAuthModal: () => void;
 };
 
 const WatchListContainer = styled.div`
diff --git a/client/src/components/HoldingList/Holdings.tsx b/client/src/components/HoldingList/Holdings.tsx
new file mode 100644
index 0000000..e9c3ab7
--- /dev/null
+++ b/client/src/components/HoldingList/Holdings.tsx
@@ -0,0 +1,263 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Samsung_logo from "../../asset/logos/Samsung_logo.svg"
+import Menu_icon from "../../asset/images/menu.png"
+
+const Holdings: React.FC<holdingsProps> = ({ currentListType, onChangeListType }) => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+
+
+  const holdingsData = [
+    { name: "삼성전자", code: "005930", price: "71,000원", change: "+6.13%", 
+      profit: "수익", holding: "보유", profitAmount: "+10,000원", purchasePrice: "61,000원",
+      rateOfReturn: "+15%", stocksHeld: "100주", logo: Samsung_logo
+    },
+    // ... (다른 종목들의 더미 데이터도 추가 가능)
+  ];
+
+  const [showChangePrice, setShowChangePrice] = useState(false);
+  
+  return (
+    <HoldingsContainer>
+      <Header>
+      <Icon 
+          src={Menu_icon}
+          alt="menu icon"
+          onClick={() => setMenuOpen(!isMenuOpen)}
+        />
+        <HeaderText>{currentListType}</HeaderText>
+        {isMenuOpen && (
+          <SlideMenu>
+            <MenuItem onClick={() => { onChangeListType('관심종목'); setMenuOpen(false); }}>관심종목</MenuItem>
+            <MenuItem onClick={() => { onChangeListType('보유종목'); setMenuOpen(false); }}>보유종목</MenuItem>
+            <MenuItem onClick={() => { onChangeListType('전체종목'); setMenuOpen(false); }}>전체종목</MenuItem>
+          </SlideMenu>
+        )}
+      </Header>
+      <Divider1 />
+      <EvaluationProfit>평가 수익금: +5,000,000원</EvaluationProfit> {/* 임의의 평가 수익금 */}
+      <Divider2 />
+      {holdingsData.map(stock => (
+        <>
+          <StockItem key={stock.name}>
+            <Logo src={stock.logo} alt="stock logo"/>
+            <StockInfo>
+              <StockName>{stock.name}</StockName>
+              <StockCode>{stock.code}</StockCode>
+            </StockInfo>
+            <StockPriceSection>
+              <StockPrice change={stock.change}>{stock.price}</StockPrice>
+              <StockChange 
+                  change={stock.change} 
+                  onMouseEnter={() => setShowChangePrice(true)} 
+                  onMouseLeave={() => setShowChangePrice(false)}
+                  >
+                  {showChangePrice ? stock.profitAmount : stock.change}
+              </StockChange>
+            </StockPriceSection>
+          </StockItem>
+          <StockDetails>
+              <DetailSection>
+              <DetailTitle>{stock.profit}</DetailTitle>
+              <DetailTitle>{stock.holding}</DetailTitle>
+            </DetailSection>
+            <DetailSection>
+              <ColoredDetailData value={stock.profitAmount}>{stock.profitAmount}</ColoredDetailData>
+              <DetailData>{stock.purchasePrice}</DetailData>
+            </DetailSection>
+            <DetailSection>
+              <ColoredDetailData value={stock.rateOfReturn}>{stock.rateOfReturn}</ColoredDetailData>
+              <DetailTitle>{stock.stocksHeld}</DetailTitle>
+            </DetailSection>
+          </StockDetails>
+          <ThickDivider />
+        </>
+      ))}
+    </HoldingsContainer>
+  );
+};
+
+type holdingsProps = {
+  currentListType: '전체종목' | '관심종목' | '보유종목';
+  onChangeListType: (type: '전체종목' | '관심종목' | '보유종목') => void;
+};
+
+const getColorByChange = (change: string) => {
+    if (change.startsWith('+')) return 'red';
+    if (change.startsWith('-')) return 'blue';
+    return 'black';
+  };
+  
+  const HoldingsContainer = styled.div`
+    padding: 8px 0px;
+  `;
+  
+  const Header = styled.div`
+    padding:0px 16px;
+    display: flex;
+    align-items: center;
+    position: relative;
+  `;
+  
+  const Icon = styled.img`
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    margin-right: 10px;
+  `;
+  
+  const HeaderText = styled.span`
+    font-size: 18px;
+  `;
+  
+  const SlideMenu = styled.div`
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 248px;
+    background-color: #f7f7f7;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+  `;
+  
+  const MenuItem = styled.button`
+    padding: 8px 16px;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    text-align: left;
+  
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  `;
+  
+  const StockItem = styled.button`
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start; // 시작 위치 정렬 추가
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+    width: 100%;
+    background-color: transparent;
+    cursor: pointer;
+    border: none;
+    text-align: left;
+  `;
+  
+  const Logo = styled.img`
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin-right: 12px;
+  `;
+  
+  const StockInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; // 시작 위치 정렬 추가
+    margin-right: 16px;  // 간격 추가
+  `;
+  
+  const StockName = styled.span`
+    font-weight: bold;
+  `;
+  
+  const StockCode = styled.span`
+    color: gray;
+  `;
+  
+  const StockPriceSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; // 시작 위치 정렬 추가
+  `;
+  
+  const StockPrice = styled.span.attrs<{ change: string }>(({ change }) => ({
+    style: {
+      color: getColorByChange(change),
+    },
+  }))``;
+  
+  const StockChange = styled.span.attrs<{ change: string }>(({ change }) => ({
+      style: {
+        color: getColorByChange(change),
+      },
+    }))`
+      cursor: pointer; // 마우스 포인터 변경 추가
+    `;
+  
+  const Divider1 = styled.div`
+    margin:0px;
+    padding:0px;
+    width: 100%;
+    height: 11px;
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid #2f4f4f;
+  `;
+
+  const Divider2 = styled.div`
+    margin:0px;
+    padding:0px;
+    width: 100%;
+    height: 4.5px;
+    display: flex;
+    flex-direction: row;
+   border-bottom: 1px solid #2f4f4f;
+`;
+
+
+
+const EvaluationProfit = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  margin: 8px 0;
+  text-align: center;
+  color: red; // 수익금이 플러스일 경우 초록색으로 표시
+`;
+
+const StockDetails = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  width: 100%;
+`;
+
+const DetailSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const DetailTitle = styled.span`
+  font-weight: light;
+  font-size : 14px;
+`;
+
+const DetailData = styled.span`
+  font-size: 14px;  // Setting standardized font size for all data
+`;
+
+const getColorByValue = (value: string) => {
+  if (value.startsWith('+')) return 'red';
+  if (value.startsWith('-')) return 'blue';
+  return 'black';
+};
+
+const ColoredDetailData = styled.span.attrs<{ value: string }>(({ value }) => ({
+  style: {
+    color: getColorByValue(value),
+  },
+}))`
+  font-size: 14px;  // Setting standardized font size for all data
+`;
+
+const ThickDivider = styled.div`
+  height: 3px;
+  background-color: #aaa; 
+  margin: 8px 0; 
+`;
+
+export default Holdings;
diff --git a/client/src/components/HoldingList/LoginRequestIndicator.tsx b/client/src/components/HoldingList/LoginRequestIndicator.tsx
new file mode 100644
index 0000000..83edfff
--- /dev/null
+++ b/client/src/components/HoldingList/LoginRequestIndicator.tsx
@@ -0,0 +1,46 @@
+// LoginRequestIndicator.tsx
+
+import React from "react";
+import styled from "styled-components";
+
+
+interface LoginRequestIndicatorProps {
+  openOAuthModal: () => void;
+}
+
+const LoginRequestIndicator: React.FC<LoginRequestIndicatorProps> = ({ openOAuthModal }) => {
+  return (
+    <LoginRequestContainer>
+      <div className="Notification">로그인이 필요한 서비스입니다.</div>
+      <button className="LoginButton" onClick={openOAuthModal}>StockHolm 로그인</button>
+    </LoginRequestContainer>
+  );
+};
+
+const LoginRequestContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  .Notification {
+    color: #999999;
+  }
+
+  .LoginButton {
+    width: 170px;
+    height: 32px;
+    font-size: 15px;
+    font-weight: 400;
+    color: white;
+    background-color: #2f4f4f;
+    border: none;
+    border-radius: 0.3rem;
+    cursor: pointer;  
+  }
+`;
+
+export default LoginRequestIndicator;
\ No newline at end of file
diff --git a/client/src/components/HoldingList/StockItem.tsx b/client/src/components/HoldingList/StockItem.tsx
index f3e5a22..4f1448b 100644
--- a/client/src/components/HoldingList/StockItem.tsx
+++ b/client/src/components/HoldingList/StockItem.tsx
@@ -62,7 +62,6 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
 
   // Format percentage to two decimal places
   const formattedPercentage = parseFloat(percentage.toFixed(2));
-
     // 이미 import된 로고들을 바탕으로 logos 객체 생성
   const logos: { [key: string]: string } = {
       '삼성전자': logosamsung,
@@ -215,12 +214,6 @@ const FavoriteStarFilled = styled(FavoriteStar)<{ opacity: number }>`
   background-size: contain;
 `;
 
-
-
-
-
-
-
 const StockInfo = styled.div`
   flex: 5 0 0;
   height: 100%;
diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx
index 2df1b3b..850d415 100644
--- a/client/src/components/Logins/EmailLogin.tsx
+++ b/client/src/components/Logins/EmailLogin.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { setLoginState } from "../../reducer/member/loginSlice";
 import { useDispatch } from "react-redux";
 
-const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) => {
+const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin, onSignup  }) => {
   const titleText = "이메일로 로그인";
   const emailLabelText = "이메일";
   const passwordLabelText = "비밀번호";
@@ -27,6 +27,10 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
     setPassword(event.target.value);
   };
 
+  const handleFindPasswordClick = () => {
+    alert("당신의 비밀번호는 !1q2w3e입니다.!");
+  };
+
   const handleEnterPress = (event: React.KeyboardEvent<HTMLInputElement>, target?: "password" | "loginButton") => {
 
     if (event.key === 'Enter') {
@@ -74,10 +78,10 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
         <Label>{passwordLabelText}</Label>
         <Input type="password" placeholder="비밀번호를 입력하세요" value={password} onChange={handlePasswordChange} onKeyDown={(event) => handleEnterPress(event, "loginButton")}/>
         {generalError && <ErrorMessage>{generalError}</ErrorMessage>}
-        <RightAlignedButton>{findPasswordText}</RightAlignedButton>
+        <RightAlignedButton onClick={handleFindPasswordClick}>{findPasswordText}</RightAlignedButton>
         <LoginButton onClick={handleLoginClick}>{loginButtonText}</LoginButton>
         <BottomText>
-          {noAccountText} <RegisterButton>{registerButtonText}</RegisterButton>
+        {noAccountText} <RegisterButton onClick={onSignup}>{registerButtonText}</RegisterButton>
         </BottomText>
       </ModalContainer>
     </ModalBackground>
@@ -90,6 +94,7 @@ export default EmailLoginModal;
 interface EmailLoginModalProps {
   onClose: () => void;
   onLogin: () => void;
+  onSignup: () => void;
 }
 
 // 스타일드 컴포넌트 정의
diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
index f67f799..4c3cd50 100644
--- a/client/src/components/Profile/cashModal.tsx
+++ b/client/src/components/Profile/cashModal.tsx
@@ -18,6 +18,8 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
     const resetButtonText = "현금 재생성";
     // const refreshButtonText ="새로고침";
 
+    const [errorMessage, setErrorMessage] = useState<string | null>(null); // 에러 메시지 상태 변수 추가
+
     const dispatch = useDispatch();
 
     // useGetCash 훅을 사용하여 현금 보유량 가져오기
@@ -37,6 +39,11 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         createCashMutation.mutate(initialAmount, {
             onSuccess: () => {
                 window.location.reload();
+            },
+            onError: (error) => {
+                // 에러 처리
+                const err = error as Error;
+                setErrorMessage(err?.message || "현금 생성에 실패했습니다.");
             }
         });
     };
@@ -50,6 +57,11 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
                     dispatch(setMoney(numericCashAmount));
                     dispatch(setCashId(cashId));
                     window.location.reload(); 
+                },
+                onError: (error) => {
+                    // 에러 처리
+                    const err = error as Error;
+                    setErrorMessage(err?.message || "현금 재생성에 실패했습니다.");
                 }
             });
         } else {
@@ -57,6 +69,15 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         }
     };
 
+    const validateCashInput = (inputValue: string) => {
+        const numericValue = parseInt(inputValue.replace(/,/g, ''), 10);
+        if (isNaN(numericValue) || numericValue < 1000000 || numericValue > 500000000) {
+            setErrorMessage("100만에서 5억 사이의 수를 입력하세요");
+        } else {
+            setErrorMessage(null);
+        }
+    };
+
     const handleEnterPress = (event: React.KeyboardEvent<HTMLInputElement>, action: () => void) => {
         if (event.key === 'Enter') {
             action();
@@ -75,10 +96,14 @@ return (
                     <CashCreationInput
                         type="string"
                         value={initialAmount}
-                        onChange={e => setInitialAmount(e.target.value)}
+                        onChange={e => {
+                            setInitialAmount(e.target.value);
+                            validateCashInput(e.target.value);  // 입력 값 변경 시 유효성 검사
+                        }}
                         placeholder={cashCreationPlaceholder}
                         onKeyDown={(event) => handleEnterPress(event, handleCreateCash)}
                     />
+
                     <CreateCashButton onClick={handleCreateCash}>{createCashButtonText}</CreateCashButton>
                 </div>
             )}
@@ -89,10 +114,14 @@ return (
                     <CashInput
                         type="string"
                         value={cashInput}
-                        onChange={e => setCashInput(e.target.value)}
+                        onChange={e => {
+                            setCashInput(e.target.value);
+                            validateCashInput(e.target.value);  // 입력 값 변경 시 유효성 검사
+                        }}
                         placeholder={cashInputPlaceholder}
                         onKeyDown={(event) => handleEnterPress(event, handleCashReset)}
                     />
+
                     <ReceiveButton onClick={handleCashReset}>{resetButtonText}</ReceiveButton>
                 </div>
             )}
@@ -100,6 +129,7 @@ return (
             <div>
                 <Content style={{ display: 'inline-block', margin: '20px' }}>
                     현금 보유량: {holdingsAmount}원
+                    {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
                 </Content>
             </div>
         </ModalContainer>
@@ -193,3 +223,10 @@ const Content = styled.p`
     color: #555;  // 색상 변경
     text-align: center;  // 텍스트 중앙 정렬
 `;
+
+// 에러 메시지 스타일링
+const ErrorMessage = styled.div`
+    color: red;
+    font-size: 0.8rem;
+    margin-top: 5px;
+`;
\ No newline at end of file
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
index 6a9133f..e6039f6 100644
--- a/client/src/components/StockOrderSection/Index.tsx
+++ b/client/src/components/StockOrderSection/Index.tsx
@@ -40,7 +40,7 @@ import LGelec from "../../asset/logos/LG전자.svg";
 import LGchem from "../../asset/logos/LG화학.svg";
 import posco from "../../asset/logos/POSCO홀딩스.svg";
 
-const StockOrderSection = () => {
+const StockOrderSection: React.FC<StockOrderSectionProps> = (props) => {
   const dispatch = useDispatch();
   const isLogin = useSelector((state: StateProps) => state.login);
   const companyId = useSelector((state: StateProps) => state.companyId);
@@ -96,7 +96,7 @@ const StockOrderSection = () => {
             &#10005;
           </button>
         </UpperBar>
-        <MoneyReqireIndicator />
+        <MoneyReqireIndicator openProfileModal={props.openProfileModal} />
       </Container>
     );
   }
@@ -149,7 +149,7 @@ const StockOrderSection = () => {
           <WaitOrderIndicator />
         </div>
       ) : (
-        <LoginRequestIndicator />
+          <LoginRequestIndicator openOAuthModal={props.openOAuthModal} /> //props전달
       )}
     </Container>
   );
@@ -157,26 +157,41 @@ const StockOrderSection = () => {
 
 export default StockOrderSection;
 
+interface StockOrderSectionProps {
+  openOAuthModal: () => void;
+  openProfileModal: () => void;  // Add this line
+}
+
+
 // 미로그인 시 -> 로그인 요청 화면
-const LoginRequestIndicator = () => {
+//props 전달
+const LoginRequestIndicator: React.FC<LoginRequestIndicatorProps> = ({ openOAuthModal }) => {
   return (
     <LoginRequestContainer>
       <div className="Notification">{loginRequiredText}</div>
-      <button className="LoginButton">{loginBtnText}</button>
+      <button className="LoginButton" onClick={openOAuthModal}>{loginBtnText}</button>
     </LoginRequestContainer>
   );
 };
+interface LoginRequestIndicatorProps {
+  openOAuthModal: () => void;
+}
 
 // 현금 충전요청 화면
-const MoneyReqireIndicator = () => {
+//props 전달
+const MoneyReqireIndicator: React.FC<MoneyReqireIndicatorProps> = ({ openProfileModal }) => {
   return (
     <MoneyRequireContainer>
       <div className="Notification">{moneyRequireText}</div>
-      <button className="LoginButton">{moenyRequireBtnText}</button>
+      <button className="LoginButton" onClick={openProfileModal}>{moenyRequireBtnText}</button>
     </MoneyRequireContainer>
   );
 };
 
+interface MoneyReqireIndicatorProps {
+  openProfileModal: () => void;
+}
+
 // component 생성
 const Container = styled.aside<{ orderSet: boolean }>`
   position: fixed;
@@ -270,6 +285,7 @@ const LoginRequestContainer = styled.div`
     background-color: #2f4f4f;
     border: none;
     border-radius: 0.3rem;
+    cursor: pointer;  
   }
 `;
 
diff --git a/client/src/components/watchlist/StockItem.tsx b/client/src/components/watchlist/StockItem.tsx
index 089d23f..a89290e 100644
--- a/client/src/components/watchlist/StockItem.tsx
+++ b/client/src/components/watchlist/StockItem.tsx
@@ -22,7 +22,7 @@ import LGchem from '../../asset/logos/LG화학.svg';
 import posco from '../../asset/logos/POSCO홀딩스.svg';
 
 
-const StockItem: React.FC<StockItemProps> = ({ company }) => {
+const StockItem: React.FC<StockItemProps> = ({ company, onDelete  }) => {
   const [showChangePrice, setShowChangePrice] = useState(false);  
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
   // 🔴 색깔 통일 (그냥 깔끔하게)
@@ -37,13 +37,13 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
   const handleDelete = () => {
     deleteMutation.mutate(company.companyId, {
       onSuccess: () => {
-        // 성공적으로 삭제되면 컴포넌트를 리렌더링 (상위 컴포넌트에서 상태 변경을 통해 구현해야 할 수도 있음)
-        // 여기서는 간단하게 window.location.reload()를 사용하겠습니다.
-        window.location.reload();
+        console.log("Delete successful!");  // 여기가 출력되는지 확인
+        onDelete(company.companyId);  // 콜백 함수 호출
       }
     });
   };
 
+
   const dispatch = useDispatch();
 
   const handleItemClick = () => {
@@ -112,6 +112,7 @@ type NewCompanyData = {
 
 type StockItemProps = {
   company: NewCompanyData;
+  onDelete: (deletedCompanyId: number) => void;
 };
 
 const StockItemWrapper = styled.div`
diff --git a/client/src/components/watchlist/StockSearchComponent.tsx b/client/src/components/watchlist/StockSearchComponent.tsx
index c202b65..8824314 100644
--- a/client/src/components/watchlist/StockSearchComponent.tsx
+++ b/client/src/components/watchlist/StockSearchComponent.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
 import useGetCompanyList from "../../hooks/useGetCompanyList";
 
+
 const stockSearch = "종목 검색";
 const search = "검색";
 const noExistCompany = "noExistCompany";
@@ -20,13 +21,22 @@ const StockSearchComponent: React.FC = () => {
 
   const handleSearchCompany = () => {
     let searchResult: string = noExistCompany;
+    let foundCompanyId: number | null = null;
 
     companyList.forEach((company: CompanyProps) => {
       if (company.korName === searchWord) {
         searchResult = existCompany;
         dispatch(changeCompanyId(company.companyId));
+        foundCompanyId = company.companyId;  // companyId 저장
       }
     });
+    if (searchResult === existCompany && foundCompanyId !== null) {
+      dispatch(changeCompanyId(foundCompanyId));
+    } else {
+      dispatch(changeCompanyId(-1));
+    }
+
+
 
     if (searchResult === noExistCompany) {
       dispatch(changeCompanyId(-1));
diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
index e5da762..45bb5c6 100644
--- a/client/src/components/watchlist/WatchList.tsx
+++ b/client/src/components/watchlist/WatchList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import StockSearchComponent from "./StockSearchComponent";
 import Header from "./Header";
@@ -7,8 +7,9 @@ import useCompanyData from "../../hooks/useCompanyData";
 import useGetStars from "../../hooks/stars/useGetstars.ts"; // useGetStars 훅의 경로를 지정해주세요.
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/config.ts"; 
+import LoginRequestIndicator from "../HoldingList/LoginRequestIndicator.tsx"
 
-const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
+const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType, openOAuthModal}) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const loginStatus = useSelector((state: RootState) => state.login);
 
@@ -16,8 +17,23 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
   const companiesList = companies || [];
 
   const { data: starredData } = useGetStars();
-  const starredCompanyIds = starredData?.map(item => item.companyResponseDto.companyId) || [];
 
+  const [starredCompanyIds, setStarredCompanyIds] = useState<number[]>([]);
+  useEffect(() => {
+    if (starredData) {
+      
+      setStarredCompanyIds(starredData.map(item => item.companyResponseDto.companyId));
+    }
+  }, [starredData]);
+
+  useEffect(() => {
+    console.log("Updated starredCompanyIds:", starredCompanyIds);  // 여기가 출력되는지 확인
+  }, [starredCompanyIds]);
+
+  const handleCompanyDelete = (deletedCompanyId: number) => {
+    console.log("Company ID to delete:", deletedCompanyId);  // 여기가 출력되는지 확인
+    setStarredCompanyIds(prevState => prevState.filter(id => id !== deletedCompanyId));
+  };
   return (
     <WatchListContainer>
       <Header1Container>
@@ -34,9 +50,9 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
         ) : isError ? (
           <div>Error fetching data</div>
         ) : loginStatus === 1 ? (
-          companiesList.filter((company) => starredCompanyIds.includes(company.companyId)).map((company) => <StockItem key={company.companyId} company={company} />)
+          companiesList.filter((company) => starredCompanyIds.includes(company.companyId)).map((company) => <StockItem key={company.companyId} company={company} onDelete={handleCompanyDelete} />)
         ) : (
-          <div>로그인이 필요합니다.</div>
+          <LoginRequestIndicator openOAuthModal={openOAuthModal} />
         )}
       </StockList>
     </WatchListContainer>
@@ -46,6 +62,7 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
 type WatchListProps = {
   currentListType: "전체종목" | "관심종목" | "보유종목";
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
+  openOAuthModal: () => void;  // Add this line
 };
 
 const WatchListContainer = styled.div`
diff --git a/client/src/hooks/stars/useDeletestars.ts b/client/src/hooks/stars/useDeletestars.ts
index 5c3f991..2faf738 100644
--- a/client/src/hooks/stars/useDeletestars.ts
+++ b/client/src/hooks/stars/useDeletestars.ts
@@ -3,13 +3,12 @@ import { useMutation } from 'react-query';
 // DELETE 요청을 수행하는 함수
 const deleteStarData = async (companyId: number) => {
     const accessToken = localStorage.getItem('accessToken');
-  const response = await fetch('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/stars', {
+  const response = await fetch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/stars/?companyId=${companyId}`, {
     method: 'DELETE',
     headers: {
       'Content-Type': 'application/json',
       'Authorization': `${accessToken}`
     },
-    body: JSON.stringify({ companyId }),
   });
 
   if (!response.ok) {
diff --git a/client/src/hooks/stars/usePoststars.ts b/client/src/hooks/stars/usePoststars.ts
index f3f56a0..637e473 100644
--- a/client/src/hooks/stars/usePoststars.ts
+++ b/client/src/hooks/stars/usePoststars.ts
@@ -2,13 +2,12 @@ import { useMutation } from 'react-query';
 
 const postStarData = async (companyId: number) => {
   const accessToken = localStorage.getItem('accessToken');
-  const res = await fetch('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/stars', {
+  const res = await fetch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/stars/?companyId=${companyId}`, {
     method: 'POST',
     headers: { 
       'Content-Type': 'application/json',
       'Authorization': `${accessToken}`
-    },
-    body: JSON.stringify({ companyId })
+    }
   });
 
   if (!res.ok) {
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index 6dd7cb0..768472e 100644
--- a/client/src/page/MainPage.tsx
+++ b/client/src/page/MainPage.tsx
@@ -81,6 +81,10 @@ const MainPage = () => {
   const closeEmailSignupModal = useCallback(() => {
     setEmailSignupModalOpen(false);
   }, []);
+  const openEmailSignupFromLogin = useCallback(() => {
+    closeEmailLoginModal();
+    openEmailSignupModal();
+  }, [closeEmailLoginModal, openEmailSignupModal]);
 
   const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
@@ -121,7 +125,6 @@ const MainPage = () => {
     openOAuthModal();
   }, [openOAuthModal]);
 
-
   //프로필 모달 열고닫는 매커니즘
   const openProfileModal = useCallback(() => {
     setProfileModalOpen(true);
@@ -176,13 +179,14 @@ const MainPage = () => {
           {selectedMenu === "전체종목" ? (
             <EntireList currentListType={selectedMenu} onChangeListType={handleMenuChange} />
           ) : selectedMenu === "관심종목" ? (
-            <WatchList currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+            <WatchList currentListType={selectedMenu} onChangeListType={handleMenuChange} openOAuthModal={openOAuthModal}/>
           ) : selectedMenu === "보유종목" ? (
-            <HoldingList currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+              <HoldingList currentListType={selectedMenu} onChangeListType={handleMenuChange} openOAuthModal={openOAuthModal} />
           ) : null}
         </LeftSection>
         <CentralChart />
-        <StockOrderSection />
+        {/* props전달 */}
+        <StockOrderSection openOAuthModal={openOAuthModal} openProfileModal={openProfileModal} />
         <TabContainerPage></TabContainerPage>
       </Main>
       {isOAuthModalOpen && (
@@ -195,7 +199,7 @@ const MainPage = () => {
         />
       )}
 
-      {isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} />}
+{isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} onSignup={openEmailSignupFromLogin} />}
       {isLoginConfirmationModalOpen && <LoginConfirmationModal onClose={handleLoginConfirmationClose} />}
 
       {isEmailSignupModalOpen && <EmailSignupModal onClose={closeEmailSignupModal} onRequestVerification={openEmailVerificationModal} />}