feat: 전체 피드 페이지 & 내 피드 페이지 구현

src/components/common/NavBar.tsx

@@ -15,31 +15,32 @@ const NavWrapper = styled.div`
   left: 0;
   right: 0;
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+
   min-width: 320px;
   max-width: 767px;
   height: 75px;
-  margin: 0 auto;
+  padding: 16px 32px;
 
+  border-top: 1px solid var(--color-grey-300);
+  border-left: 1px solid var(--color-grey-300);
+  border-right: 1px solid var(--color-grey-300);
   border-radius: 12px 12px 0px 0px;
-  border-top: 1px solid #888;
-  border-right: 1px solid #888;
-  border-left: 1px solid #888;
-  background: #121212;
-  padding: 16px 32px;
-  justify-content: space-between;
-  align-items: center;
+  background-color: var(--color-black-main);
 `;
 
 const NavItem = styled.div<{ active?: boolean }>`
   flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   gap: 5px;
-  color: ${({ active }) => (active ? '#6868FF' : '#888')};
-  font-size: 12px;
   cursor: pointer;
+  font-size: 12px;
+  color: ${({ active }) => (active ? 'var(--color-purple-main)' : 'var(--color-grey-300)')};
 
   svg {
     display: flex;

src/components/common/TitleHeader.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
 const HeaderWrapper = styled.div`
-  background-color: #121212;
   position: fixed;
   top: 0;
   left: 0;
@@ -10,23 +9,22 @@ const HeaderWrapper = styled.div`
   max-width: 767px;
   margin: 0 auto;
   padding: 16px 20px;
+  background-color: var(--color-black-main);
 `;
 
 const NextButton = styled.div<{ active: boolean }>`
   cursor: ${({ active }) => (active ? 'pointer' : 'default')};
   width: 49px;
   height: 28px;
   padding: 4px 12px;
-  align-items: center;
   border-radius: 20px;
-  background: ${({ active }) => (active ? '#6868FF' : '#888')};
-
-  color: #fefefe;
-  text-align: center;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
+  background-color: ${({ active }) =>
+    active ? 'var(--color-purple-main)' : 'var(--color-grey-300)'};
+  color: var(--color-white);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
   line-height: 20px;
+  text-align: center;
 `;
 
 const InnerHeader = styled.div`
@@ -35,18 +33,17 @@ const InnerHeader = styled.div`
   height: 56px;
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 
   .title {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    color: #fefefe;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 700;
+    color: var(--color-white);
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
   }
 `;
 

src/components/feed/BookInfoCard.tsx

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import rightArrow from '../../assets/common/rightArrow.svg';
+
+const BookContainer = styled.div`
+  display: flex;
+  height: 44px;
+  padding: 8px 4px 8px 12px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 12px;
+  background: var(--color-darkgrey-main);
+  cursor: pointer;
+
+  .left {
+    overflow: hidden;
+    max-width: 340px;
+    white-space: nowrap;
+    color: var(--color-white);
+    text-overflow: ellipsis;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    line-height: 24px;
+  }
+
+  .right {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    overflow: hidden;
+    color: var(--color-grey-100);
+    text-align: right;
+    text-overflow: ellipsis;
+    font-size: var(--font-size-xs);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: 24px;
+
+    .name {
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+`;
+
+interface BookInfoCardProps {
+  bookTitle: string;
+  bookAuthor: string;
+}
+
+const BookInfoCard = ({ bookTitle, bookAuthor }: BookInfoCardProps) => {
+  return (
+    <BookContainer>
+      <div className="left">{bookTitle}</div>
+      <div className="right">
+        <div className="name">{bookAuthor}</div>
+        <div className="author">저</div>
+        <img src={rightArrow} />
+      </div>
+    </BookContainer>
+  );
+};
+
+export default BookInfoCard;

src/components/feed/FeedPost.tsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import PostBody from './PostBody';
+import PostFooter from './PostFooter';
+import PostHeader from './PostHeader';
+import type { FeedPostProps } from '../../types/post';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 320px;
+  max-width: 540px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  gap: 16px;
+  background-color: var(--color-black-main);
+`;
+
+const BorderBottom = styled.div`
+  width: 100%;
+  height: 10px;
+  background-color: var(--color-darkgrey-dark);
+`;
+
+const FeedPost = ({ showHeader, isMyFeed, ...postData }: FeedPostProps) => {
+  return (
+    <>
+      <Container>
+        {showHeader && <PostHeader {...postData} />}
+        <PostBody {...postData} />
+        <PostFooter isMyFeed={isMyFeed} {...postData} />
+      </Container>
+      <BorderBottom />
+      {/* 페이징 처리에서 마지막 게시글인 경우 BorderBottom 안보이게 처리해야함 */}
+    </>
+  );
+};
+
+export default FeedPost;