111224 til

트위터 클론 코딩 최종 

 

프로필 이미지 , 설정 

 

 

프로필 클릭시 , 사진 첨부로 프로필 이미지 바꾸게 하기 

 

 

프로필에 들어가면 쓴 포스트가 나온다 .

 

export default function Profile() {

 

const user = auth.currentUser;

const [avatar, setAvatar] = useState(user?.photoURL);

const [tweets, setTweets] = useState<ITweet[]>([]);

const onAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {

const { files } = e.target;

if (!user) return;

if (files && files.length === 1) {

const file = files[0];

const locationRef = ref(storage, `avatars/${user?.uid}`);

const result = await uploadBytes(locationRef, file);

const avatarUrl = await getDownloadURL(result.ref);

setAvatar(avatarUrl);

await updateProfile(user, {

photoURL: avatarUrl,

});

}

};

const fetchTweets = async () => {

const tweetQuery = query(

collection(db, "tweets"),

where("userId", "==", user?.uid),

orderBy("createdAt", "desc"),

limit(25)

);

const snapshot = await getDocs(tweetQuery);

const tweets = snapshot.docs.map((doc) => {

const { tweet, createdAt, userId, username, photo } = doc.data();

return {

tweet,

createdAt,

userId,

username,

photo,

id: doc.id,

};

});

setTweets(tweets);

};

useEffect(() => {

fetchTweets();

}, []);