Merge pull request #18 from Invest-SNS/feature/feed

feat: 피드 페이지 컴포넌트화 및 피드 get, 피드 작성하기 post

src/components/Feed/FeedDetail.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import FeedBoard from "./FeedShow/FeedBoard";
+import * as S from "../../style/GlobalStyle";
+import styled from "styled-components";
+
+const FeedDetail = ({ setShowDetail }) => {
+  console.log("detail");
+  return (
+    <S.Container>
+      <BtnDiv>
+        <CloseButton
+          onClick={() => setShowDetail(false)}
+          src="/icon/X.svg"
+          alt="x"
+        />
+      </BtnDiv>
+      <FeedBoard />
+    </S.Container>
+  );
+};
+
+const BtnDiv = styled.div`
+  display: flex;
+  background-color: white;
+`;
+
+const CloseButton = styled.img`
+  margin: 10px 10px 10px auto;
+`;
+
+export default FeedDetail;

src/components/Feed/FeedShow/Feed.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import FeedBoard from "./FeedBoard";
+import FeedOrder from "./FeedOrder";
+import FeedReturns from "./FeedReturns";
+import FeedVoteNot from "./FeedVoteNot";
+import FeedVoteYes from "./FeedVoteYes";
+import FeedDetail from "../FeedDetail";
+import styled from "styled-components";
+import { fetchAllFeed } from "../../../store/reducers/Feed/feed";
+import { useDispatch, useSelector } from "react-redux";
+
+const Feed = () => {
+  const [showDetail, setShowDetail] = useState(false);
+  const toggleDetail = () => {
+    setShowDetail(true);
+  };
+
+  useEffect(() => {
+    setShowDetail(false);
+    dispatch(fetchAllFeed());
+  }, []);
+  console.log(showDetail);
+
+  const dispatch = useDispatch();
+  const allFeedData = useSelector((state) => state.feed.allFeed);
+  console.log("allFeedData", allFeedData);
+  return (
+    <>
+      {allFeedData.map((item, idx) => {
+        console.log("item", item);
+        return (
+          <div key={idx}>
+            {item.isOrder ? (
+              <FeedOrder item={item} />
+            ) : item.isProfit ? (
+              <FeedReturns item={item} />
+            ) : item.isVote && item.myVote ? (
+              <FeedVoteYes item={item} />
+            ) : item.isVote ? (
+              <FeedVoteNot item={item} />
+            ) : (
+              <FeedBoard item={item} toggleDetail={toggleDetail} />
+            )}
+          </div>
+        );
+      })}
+
+      <DetailContainer $showdetail={showDetail}>
+        {showDetail ? (
+          <>
+            <FeedDetail setShowDetail={setShowDetail} />
+          </>
+        ) : (
+          <></>
+        )}
+      </DetailContainer>
+    </>
+  );
+};
+
+const DetailContainer = styled.div`
+  width: 400px;
+  height: 100%;
+  background-color: #fff;
+  transform: translateX(${(props) => (props.$showdetail ? "0" : "100%")});
+  transition: transform 0.3s ease;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: 999;
+`;
+
+export default Feed;

src/components/Feed/FeedShow/FeedBoard.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import * as S from "../../../style/GlobalStyle";
+
+const FeedBoard = ({ item, toggleDetail }) => {
+  console.log("board", item);
+  return (
+    <>
+      <S.FeedWrapper onClick={toggleDetail}>
+        <S.UserDiv>
+          <S.UserNickname>{item.user.nickname}</S.UserNickname>
+          <S.DateDiv>{item.createdAt}</S.DateDiv>
+        </S.UserDiv>
+        <S.BodyWrapper>
+          <S.BodyDiv>{item.body}</S.BodyDiv>
+          {item.photoUrl ? (
+            <a href={item.photoUrl} target="_blank">
+              <Img src={item.photoUrl} alt="본문 사진" />
+            </a>
+          ) : (
+            <></>
+          )}
+        </S.BodyWrapper>
+        <S.BottomWrapper>
+          <S.IconDiv>
+            <img
+              src="/icon/Heart.svg"
+              alt="좋아요"
+              style={{ width: "25px", marginRight: "8px" }}
+            />
+            <div>{item.like}</div>
+          </S.IconDiv>
+          <S.IconDiv>
+            <img
+              src="/icon/Comment.svg"
+              alt="댓글"
+              style={{ width: "30px", marginRight: "5px" }}
+            />
+            <div>7</div>
+          </S.IconDiv>
+        </S.BottomWrapper>
+      </S.FeedWrapper>
+    </>
+  );
+};
+
+const Img = styled.img`
+  width: 100%;
+  /* object-fit: cover; */
+`;
+
+export default FeedBoard;

src/components/Feed/FeedShow/FeedOrder.jsx

@@ -0,0 +1,98 @@
+import React from "react";
+import styled from "styled-components";
+import * as S from "../../../style/GlobalStyle";
+
+//TODO : 로고 사진 변경
+import default_Img from "/icon/+.svg";
+const FeedOrder = ({ item }) => {
+  console.log("order", item);
+  const getLogoFileName = (name, code) => {
+    if (name.includes("스팩")) {
+      return "SPAC_230706";
+    } else if (name.includes("ETN")) {
+      return "ETN_230706";
+    } else if (
+      name.includes("KODEX") ||
+      name.includes("KOSEF") ||
+      name.includes("KoAct") ||
+      name.includes("TIGER") ||
+      name.includes("ACE") ||
+      name.includes("ARIRANG") ||
+      name.includes("합성 H") ||
+      name.includes("HANARO") ||
+      name.includes("SOL")
+    ) {
+      return "ETF_230706";
+    } else {
+      return `kr/${code}`;
+    }
+  };
+
+  const onErrorImg = (e) => {
+    e.target.src = default_Img;
+  };
+  return (
+    <>
+      <S.FeedWrapper>
+        <S.UserDiv>
+          <S.UserNickname>{item.user.nickname}</S.UserNickname>
+          <S.DateDiv>{item.createdAt}</S.DateDiv>
+        </S.UserDiv>
+        <S.BodyWrapper>
+          <S.BodyCenter>
+            <S.StockWrapper $buy="sell">
+              <img
+                src={`https://file.alphasquare.co.kr/media/images/stock_logo/${getLogoFileName(
+                  "삼성생명",
+                  "032830"
+                )}.png`}
+                style={{
+                  width: "30px",
+                  borderRadius: 100,
+                }}
+                onError={onErrorImg}
+              />
+              <S.StockDiv>삼성생명</S.StockDiv>
+              <QuantityDiv>10주</QuantityDiv>
+              <OrderDiv>매수</OrderDiv>
+            </S.StockWrapper>
+          </S.BodyCenter>
+        </S.BodyWrapper>
+        <S.BottomWrapper>
+          <S.IconDiv>
+            <img
+              src="/icon/Heart.svg"
+              alt="좋아요"
+              style={{ width: "25px", marginRight: "8px" }}
+            />
+            <div>{item.like}</div>
+          </S.IconDiv>
+          <S.IconDiv>
+            <img
+              src="/icon/Comment.svg"
+              alt="댓글"
+              style={{ width: "30px", marginRight: "5px" }}
+            />
+            <div>7</div>
+          </S.IconDiv>
+        </S.BottomWrapper>
+      </S.FeedWrapper>
+    </>
+  );
+};
+
+const QuantityDiv = styled.div`
+  margin-left: 7px;
+  color: #000;
+  font-size: 16px;
+  font-weight: 500;
+`;
+
+const OrderDiv = styled.div`
+  margin-left: 7px;
+  color: #000;
+  font-size: 16px;
+  font-weight: 500;
+`;
+
+export default FeedOrder;

src/components/Feed/FeedShow/FeedReturns.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+import * as S from "../../../style/GlobalStyle";
+
+const FeedReturns = ({ item }) => {
+  console.log("profit", item);
+  return (
+    <>
+      <S.FeedWrapper>
+        <S.UserDiv>
+          <S.UserNickname>{item.user.nickname}</S.UserNickname>
+          <S.DateDiv>{item.createdAt}</S.DateDiv>
+        </S.UserDiv>
+        <S.BodyWrapper>
+          <S.BodyCenter>
+            <S.StockWrapper $buy="returns">
+              <S.StockDiv $margin="0px">나의 전체 수익률은?</S.StockDiv>
+              <ReturnDiv $returns={item.profit}>{item.profit}</ReturnDiv>
+            </S.StockWrapper>
+          </S.BodyCenter>
+        </S.BodyWrapper>
+        <S.BottomWrapper>
+          <S.IconDiv>
+            <img
+              src="/icon/Heart.svg"
+              alt="좋아요"
+              style={{ width: "25px", marginRight: "8px" }}
+            />
+            <div>{item.like}</div>
+          </S.IconDiv>
+          <S.IconDiv>
+            <img
+              src="/icon/Comment.svg"
+              alt="댓글"
+              style={{ width: "30px", marginRight: "5px" }}
+            />
+            <div>7</div>
+          </S.IconDiv>
+        </S.BottomWrapper>
+      </S.FeedWrapper>
+    </>
+  );
+};
+
+const ReturnDiv = styled.div`
+  margin-left: auto;
+  color: ${(props) =>
+    parseFloat(props.$returns) >= 0 ? "#ee2f2a" : "#2679ed"};
+`;
+
+export default FeedReturns;

src/components/Feed/FeedShow/FeedVoteNot.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import * as S from "../../../style/GlobalStyle";
+
+const FeedVoteNot = ({ item }) => {
+  console.log("votenot", item);
+  return (
+    <>
+      <S.FeedWrapper>
+        <S.UserDiv>
+          <S.UserNickname>{item.user.nickname}</S.UserNickname>
+          <S.DateDiv>{item.createdAt}</S.DateDiv>
+        </S.UserDiv>
+        <S.BodyWrapper>
+          <S.BodyCenter>
+            <S.BodyDiv $weight="550">{item.body}</S.BodyDiv>
+            <ButtonWrapper>
+              <VoteBtn color="#bee4ff" $hover="#74c5ff">
+                O
+              </VoteBtn>
+              <VoteBtn color="#FFE3D7" $hover="#ff9a6f">
+                X
+              </VoteBtn>
+            </ButtonWrapper>
+          </S.BodyCenter>
+        </S.BodyWrapper>
+      </S.FeedWrapper>
+    </>
+  );
+};
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 30px;
+  margin-bottom: 25px;
+  margin-top: 5px;
+`;
+
+const VoteBtn = styled.button`
+  width: 150px;
+  height: 44px;
+  border: none;
+  border-radius: 10px;
+  background: ${(props) => props.color};
+
+  color: #fff;
+  font-size: 25px;
+  font-weight: 600;
+
+  &:hover {
+    background: ${(props) => props.$hover};
+  }
+`;
+
+export default FeedVoteNot;