[Feat] 브랜치 병합

- 우측 메뉴탭 및 메인페이지 레이아웃 변경으로 인한 브랜치 병합 Issues #17
codestates-seb · Sep 14, 2023 · 1f75ecc · 1f75ecc
2 parents 9e9944d + ce6249d
commit 1f75ecc
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 109 deletions.
diff --git a/client/src/components/MarketComponents/MarketStockList.tsx b/client/src/components/MarketComponents/MarketStockList.tsx
@@ -1,12 +1,16 @@
 import axios from "axios";
 import { useState, useEffect } from "react"; // useEffect 추가
 import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
+
 const MarketServerUrl =
   "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies";
 
 const MarketStockList: React.FC = () => {
   const [marketStockList, setMarketStockList] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+
   useEffect(() => {
     MarketDataFromServer();
   }, []);
@@ -27,9 +31,10 @@ const MarketStockList: React.FC = () => {
     sortedList.sort((a, b) => a.korName.localeCompare(b.korName));
     setMarketStockList(sortedList);
   };
+  const dispatch = useDispatch();
 
   return (
-    <div>
+    <StockListContainer>
       <StockListTitle>
         <StockListDetail onClick={SortName}>
           {MarketStockLists.stockName}
@@ -40,7 +45,7 @@ const MarketStockList: React.FC = () => {
       </StockListTitle>
 
       {marketStockList.map((el) => (
-        <StockListInfo>
+        <StockListInfo onClick={() => dispatch(changeCompanyId(el.companyId))}>
           <div>
             {isLoading === true ? (
               <div>{MarketStockLists.isLoading}</div>
@@ -49,12 +54,11 @@ const MarketStockList: React.FC = () => {
             )}
             <StockCode key={el.code}>{el.code}</StockCode>
             <br />
-            <StockInfo>{el.stockInfResponseDto}</StockInfo>
           </div>
           <AfterLine></AfterLine>
         </StockListInfo>
       ))}
-    </div>
+    </StockListContainer>
   );
 };
 
@@ -67,6 +71,10 @@ const MarketStockLists = {
   stockTrade: "#거래량",
   isLoading: "isLoading...",
 };
+
+const StockListContainer = styled.div`
+  max-height: 500px;
+`;
 const StockListTitle = styled.div`
   display: flex;
   justify-content: space-around;
@@ -96,4 +104,3 @@ const StockListInfo = styled.div`
 `;
 const StockName = styled.div``;
 const StockCode = styled.div``;
-const StockInfo = styled.div``;
diff --git a/client/src/components/MarketComponents/index.tsx b/client/src/components/MarketComponents/index.tsx
@@ -69,13 +69,10 @@ const NewsListLink = {
 
 const Market = styled.div`
   text-align: center;
-  height: 600px;
 `;
 const News = styled.div`
   display: flex;
   flex-direction: column;
-
-  height: 500px;
   width: 100%;
   margin-top: 120px;
   flex-wrap: wrap;

diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx
@@ -5,7 +5,7 @@ import { DotIcon } from "./IconComponent/Icon";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 const serverUrl =
-  "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/boards";
+  "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards";
 
 const TimeLineComponent = () => {
   const navigate = useNavigate();
@@ -41,20 +41,22 @@ const TimeLineComponent = () => {
   };
 
   // 서브밋 버튼 클릭
+  const authToken = localStorage.getItem("authToken");
   const handleClickSubmit = async () => {
     if (inputValue.length !== 0) {
-      //if 문의 조건식에 inputValue만 사용해도 정상 작동하는
-      //이유는 JavaScript와 TypeScript의 "Truthy"와 "Falsy" 값 변환 규칙때문
-      const newBoardData: BoardData = {
+      const newBoardData = {
         id: new Date().getTime(),
         content: inputValue,
         comments: "",
-        title: `user${UserId}`,
         boardId: 0,
       };
 
       try {
-        const response = await axios.post(`${serverUrl}`, newBoardData);
+        const response = await axios.post(serverUrl, newBoardData, {
+          headers: {
+            Authorization: authToken, // 토큰을 헤더에 추가
+          },
+        });
         if (response.status === 201) {
           // 서버에 성공적으로 데이터를 업로드한 경우
           alert("작성완료");
@@ -90,7 +92,11 @@ const TimeLineComponent = () => {
   const handleDeleteClick = async (boardId: number) => {
     // boardId로 수정
     try {
-      const response = await axios.delete(`${serverUrl}/${boardId}`); // URL에 boardId 추가
+      const response = await axios.delete(`${serverUrl}/${boardId}`, {
+        headers: {
+          Authorization: authToken, // 토큰을 헤더에 추가
+        },
+      }); // URL에 boardId 추가
       if (response.status === 200) {
         // 삭제 성공 처리
         alert("삭제되었습니다");
@@ -109,12 +115,6 @@ const TimeLineComponent = () => {
     }
   };
   //유저 아이디 랜덤 설정
-  const getRandomFourDigitNumber = () => {
-    const min = 1000; // 1000 이상의 수
-    const max = 9999; // 9999 이하의 수
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-  };
-  const UserId = getRandomFourDigitNumber();
 
   //boardData업데이트될때 마다 로컬스토리지 데이터 저장
   // useEffect(() => {
@@ -143,7 +143,7 @@ const TimeLineComponent = () => {
         </>
       )}
       <DevideLine></DevideLine>
-      <BoardArea>
+      <BoardArea className="scroll">
         {boardData.length === 0 ? (
           <BoardTextAreaNoText>
             {timeLineText.notYetWriting}
@@ -152,7 +152,7 @@ const TimeLineComponent = () => {
           boardData
             .slice()
             .reverse()
-            .map((el) => (
+            .map((el: BoardData) => (
               <BoardTextArea>
                 <Delete>
                   <div onClick={() => handleDotOpen(el.boardId)}>
@@ -165,11 +165,12 @@ const TimeLineComponent = () => {
                   )}
                 </Delete>
                 <BoardText>
-                  {el.title}
+                  {el.member}
                   <br />
                   {el.content}
                 </BoardText>
-                <Comments postId={el.boardId}></Comments>
+                <DevideLine2 />
+                <Comments boardId={el.boardId}></Comments>
               </BoardTextArea>
             ))
         )}
@@ -184,7 +185,7 @@ interface BoardData {
   id: number;
   content: string;
   comments: string;
-  title: string;
+  member: string;
 }
 const timeLineText = {
   close: "닫기",
@@ -196,7 +197,7 @@ const timeLineText = {
 const DropdownInput = styled.input`
   text-align: center;
   border: 1px solid#40797c;
-  width: 90%;
+  width: 100%;
   height: 80px;
   outline: none;
   &:focus {
@@ -238,6 +239,21 @@ const Button = styled.button`
 `;
 
 //버튼 과 글영역 구분
+const DevideLine2 = styled.div`
+  margin-bottom: 10px;
+  position: relative;
+  margin-bottom: 30px;
+  &:after {
+    position: absolute;
+    top: 5px;
+    content: "";
+    border-bottom: 2px solid#e1e1e1;
+    display: block;
+    width: 100%;
+    height: 5px;
+  }
+`;
+
 const DevideLine = styled.div`
   margin-bottom: 10px;
   position: relative;
@@ -276,9 +292,9 @@ const SubmitButton = styled.button`
 //게시판 전체 영역
 const BoardArea = styled.div`
   text-align: center;
-
+  max-height: 500px;
   margin-top: 25px;
-  width: 90%;
+  width: 100%;
 `;
 //게시글 스타일
 const BoardTextAreaNoText = styled.div`
@@ -292,27 +308,23 @@ const BoardTextAreaNoText = styled.div`
   color: #c3c3c3;
 `;
 const BoardTextArea = styled.div`
-  width: 80%;
+  width: 100%;
   padding-bottom: 10px;
-  border-radius: 20px 20px;
-  border: 1px solid#40797c;
-  margin: 0 auto;
-  margin-bottom: 10px;
+  background-color: #f3f3f3;
+  border-bottom: 10px solid#333;
   padding-top: 10px;
   color: #333;
 `;
 const BoardText = styled.div`
   margin-top: 10px;
   margin-left: 25px;
-  max-width: 300px;
   min-height: 100px;
 `;
 const TimeLine = styled.div`
   display: flex;
   flex-direction: column;
   align-content: space-around;
   flex-wrap: wrap;
-  max-height:600px;
 `;
 //게시글 삭제
 const Delete = styled.div`

diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -180,14 +180,13 @@ export default MainPage;
 const Container = styled.div`
   width: 100vw;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
 
-  /* overflow: scroll;
   &::-webkit-scrollbar {
     display: none;
-  } */
-
-  display: flex;
-  flex-direction: column;
+  }
 `;
 
 const Main = styled.main`

diff --git a/client/src/page/TabPages/MarketInfoPage.tsx b/client/src/page/TabPages/MarketInfoPage.tsx
@@ -14,7 +14,7 @@ const MarketInfo: React.FC<Props> = () => {
     setTabStyle(number);
   };
   return (
-    <div>
+    <MarketInfoContainer>
       <style>
         @import
         url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');
@@ -42,7 +42,7 @@ const MarketInfo: React.FC<Props> = () => {
         {selectedTab === "market" && <MarketSummary />}
         {selectedTab === "stockList" && <MarketStockList />}
       </div>
-    </div>
+    </MarketInfoContainer>
   );
 };
 
@@ -53,6 +53,9 @@ const MarketInfoText = {
 };
 // **스타일 옮기기
 
+const MarketInfoContainer = styled.div`
+  max-height: 500px;
+`;
 const TabStyle = styled.div`
   cursor: pointer;
 `;

diff --git a/client/src/page/TabPages/TabContainerPage.tsx b/client/src/page/TabPages/TabContainerPage.tsx
@@ -1,15 +1,13 @@
 import MarketInfo from "./MarketInfoPage";
 import { Routes, Route, Link } from "react-router-dom";
 import styled from "styled-components";
-import { DetailStockInformation } from "../../components/stockListComponents/DetailStockInformation";
+import { DetailStockInformation } from "../../components/stockinfoComponents/DetailStockInformation";
 import { Community } from "./communityPage";
-import { Status } from "../../components/statusComponents";
 import { useState } from "react";
 import {
   MarketImages,
   InfoImages,
   CommunityImages,
-  InvestImage,
 } from "../../components/communityComponents/IconComponent/Icon";
 export const TabContainerPage = () => {
   const [activeTab, setActiveTab] = useState(1);
@@ -18,7 +16,7 @@ export const TabContainerPage = () => {
   };
 
   return (
-    <TabContainerStyle>
+    <TabContainerStyle className="scroll">
       <style>
         @import
         url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');
@@ -50,20 +48,11 @@ export const TabContainerPage = () => {
             <CommunityImages />
             {TabContainerText.community}
           </Nav>
-          <Nav
-            to="/status"
-            onClick={() => handleClickActiveTab(4)}
-            className={`tab ${activeTab === 4 ? "active-tab" : "inactive-tab"}`}
-          >
-            <InvestImage />
-            {TabContainerText.myPortfolio}
-          </Nav>
         </TabNavArea>
         <Routes>
           <Route path="/" element={<MarketInfo />} />
           <Route path="/stockitems" element={<DetailStockInformation />} />
           <Route path="/community" element={<Community />} />
-          <Route path="/status" element={<Status />} />
         </Routes>
       </div>
     </TabContainerStyle>
@@ -82,6 +71,9 @@ const TabContainerStyle = styled.div`
   min-width: 400px;
   overflow: scroll;
   border-left: 1px solid #2d4f51;
+  &.scroll::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const TabNavArea = styled.div`