[🥁 : feat] 내가 작성한 글 목록 보기

- where('userId', '==', user?.uid), 쿼리를 원활하게 적용하기 위해서는, 이런 필터링이 적용될 거라고 firestore에 알려주는 과정이 필요함. 콘솔 에러를 통해 연결된 URL에서 복합 인덱스를 생성해주어야 함
- 공통적으로 자주 사용되는 인터페이스를 별도의 컴포넌트로 분리

src/components/timeline.tsx

@@ -10,15 +10,7 @@ import { Unsubscribe } from 'firebase/auth';
 import { db } from '../firebase.ts';
 import Tweet from './tweet.tsx';
 import * as S from '../styles/layout.ts';
-
-export interface ITweet {
-  id: string;
-  userId: string;
-  userName: string;
-  tweet: string;
-  createdAt: number;
-  photo: string;
-}
+import ITweet from '../interfaces/ITweet.ts';
 
 export default function Timeline() {
   const [tweets, setTweets] = useState<ITweet[]>([]);

src/components/tweet.tsx

@@ -1,7 +1,7 @@
 import { deleteDoc, doc } from 'firebase/firestore';
 import { deleteObject, ref } from 'firebase/storage';
 import { auth, db, storage } from '../firebase.ts';
-import { ITweet } from './timeline.tsx';
+import ITweet from '../interfaces/ITweet.ts';
 import FormattedDate from '../utils/formattedDate.tsx';
 import * as S from '../styles/components/tweet.ts';
 

src/components/user-timeline.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import {
+  collection,
+  getDocs,
+  limit,
+  orderBy,
+  query,
+  where,
+} from 'firebase/firestore';
+import { auth, db } from '../firebase.ts';
+import Tweet from './tweet.tsx';
+import * as S from '../styles/layout.ts';
+import ITweet from '../interfaces/ITweet.ts';
+
+export default function UserTimeline() {
+  const user = auth.currentUser;
+  const [tweets, setTweets] = useState<ITweet[]>([]);
+  const fetchTweets = async () => {
+    const tweetsQuery = query(
+      collection(db, 'tweets'),
+      where('userId', '==', user?.uid),
+      orderBy('createdAt', 'desc'),
+      limit(25),
+    );
+    const snapshot = await getDocs(tweetsQuery);
+    const tweetList = snapshot.docs.map((doc) => {
+      const { userId, userName, tweet, createdAt, photo } = doc.data();
+      return {
+        userId,
+        userName,
+        tweet,
+        createdAt,
+        photo,
+        id: doc.id,
+      };
+    });
+    setTweets(tweetList);
+  };
+  useEffect(() => {
+    fetchTweets();
+  }, []);
+  return (
+    <S.UserTimeLineWrapper>
+      {tweets.map((tweet) => (
+        <Tweet key={tweet.id} {...tweet} />
+      ))}
+    </S.UserTimeLineWrapper>
+  );
+}

src/interfaces/ITweet.ts

@@ -0,0 +1,8 @@
+export default interface ITweet {
+  id: string;
+  userId: string;
+  userName: string;
+  tweet: string;
+  createdAt: number;
+  photo: string;
+}

src/routes/profile.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 import { updateProfile } from 'firebase/auth';
 import { auth, storage } from '../firebase.ts';
+import UserTimeline from '../components/user-timeline.tsx';
 import * as S from '../styles/profile.ts';
 import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
 
@@ -34,6 +35,7 @@ export default function Profile() {
         accept="image/*"
       />
       <S.Name>{user?.displayName ?? 'Anonymous'}</S.Name>
+      <UserTimeline />
     </S.Wrapper>
   );
 }

src/styles/layout.ts

@@ -20,3 +20,7 @@ export const TimeLineWrapper = styled.ul`
   margin-top: 250px;
   overflow-y: auto;
 `;
+
+export const UserTimeLineWrapper = styled.ul`
+  display: block;
+`;

src/styles/popup.ts

@@ -22,7 +22,8 @@ export const Popup = styled.div`
   justify-content: center;
   width: calc(100vw - 100px);
   max-width: 757px;
-  height: 728px;
+  height: calc(100vh - 100px);
+  max-height: 728px;
   padding: 30px;
   background-color: ${whiteColor};
   border-radius: 10px;