fix: rollback 된 코드 추가

README.md

@@ -1,9 +1,109 @@
-# 11th_5team_fe
+# 🌡 Moodpic Front-end
+![CI](https://github.com/depromeet/11th_5team_fe/actions/workflows/front-test.yml/badge.svg)
 
-## Quick Start
+<img width="1016" alt="스크린샷 2022-06-29 오후 9 50 31" src="https://user-images.githubusercontent.com/29244798/176440486-a98d6aad-b62b-4246-9253-e03ac5cc21e3.png">
 
-```
-git clone https://github.com/depromeet/11th_5team_fe
+<br />
+
+<b>[무드픽 접속하기 ✏️](https://www.moodpic.kr/)</b>
+
+## 🌡 Installation
+
+```bash
+$ git clone https://github.com/depromeet/11th_5team_fe
 $ npm i
 $ npm run dev
-```
+```
+
+<br>
+
+## 🌡 Feature
+
+<img width="1045" alt="스크린샷 2022-06-29 오후 9 51 47" src="https://user-images.githubusercontent.com/29244798/176440677-63e21223-0592-4140-8137-f9530be079b1.png">
+
+<br/>
+
+
+## 🌡 Tech Stacks
+
+### ⚒️ Development Tools
+
+
+<br/>
+
+<div align="center">
+  <img src="https://img.shields.io/badge/React.js-v17.0.2-61DAFB?logo=react"/>
+  <img src="https://img.shields.io/badge/Styled components-v2.6.3-DB7093?logo=styled-components"/> 
+  <img src="https://img.shields.io/badge/Recoil-v0.7.26-61DAFB?logo=recoil"/> 
+  <img src="https://img.shields.io/badge/Prettier-v2.6.2-F7B93E?logo=prettier"/>
+  <img src="https://img.shields.io/badge/Eslint-v8.12.0-4B32C3?logo=eslint"/>
+</br>
+  <img src="https://img.shields.io/badge/Storybook-v6.4.21-FF4785?logo=storybook"/>
+  <img src="https://img.shields.io/badge/Jest-v.27.5.1-C21325?logo=jest"/> 
+  <img src="https://img.shields.io/badge/Testing Library-v13.3.0-E33332?logo=testing-library"/>
+</div>
+
+<br/>
+
+### ⚒️ Infra
+
+<div align="center">
+  <img src="https://img.shields.io/badge/Vercel-232F3E?logo=vercel"/>
+  <img src="https://img.shields.io/badge/GithubActions-CI/CD-232F3E?logo=githubactions"/>
+</div>
+
+<br/>
+
+
+## 🌡 Project Structure
+
+```
+🗂 11th_5team_fe
+    🗂 components
+    🗂 hooks
+    🗂 mocks
+    🗂 pages
+        🗂 login
+        🗂 mypage
+        🗂 oauth
+        🗂 posts
+        🗂 ready
+        🗂 search
+        🗂 share
+        🗂 write
+        ...
+    🗂 public
+        🗂 images
+        🗂 svgs
+        🗂 category-images
+    🗂 service
+        🗂 apis
+    🗂 shared
+        🗂 api
+        🗂 constants
+        🗂 type
+        🗂 utils
+    🗂 store
+    🗂 styles
+    ...
+    - jest.config.js
+    - package.json
+    - tsconfig.json
+```
+<br/>
+
+## 🌡 Back-end Repository
+
+https://github.com/depromeet/11th_5team
+
+<br />
+
+## 🌡 Contributors
+
+| ```Lead``` 박수진 | 박상범 | 조기문 |
+| :-: |  :-: | :-: |
+| [@sujin-park](https://github.com/sujin-park) |  [@sangbooom](https://github.com/sangbooom)  | [@guymoon](https://github.com/guymoon) |
+| <img src="https://user-images.githubusercontent.com/29244798/176429437-f2b203a9-aa98-4bca-96e0-eada8d909cca.png" width="350px" height="350px"> | <img src="https://user-images.githubusercontent.com/29244798/176429400-43d3cf65-c29e-43c1-a5f7-d530a0c77fb2.png" width="350px" height="100%"> | <img src="https://user-images.githubusercontent.com/29244798/176429443-191b6bc8-2d40-470c-999f-7c08a8eedf4e.png" width="350px" height="100%"> |
+
+<br/>
+<br/>

components/Common/Toast/Toast.tsx

@@ -2,13 +2,23 @@ import 'react-toastify/dist/ReactToastify.css';
 import React from 'react';
 import { ToastType } from '@/shared/type/common';
 import { CustomedToastContainer } from './Toast.styles';
+import { Slide } from 'react-toastify';
 
 interface ToastProps {
   type: ToastType;
 }
 
 const Toast = ({ type }: ToastProps) => {
-  return <CustomedToastContainer type={type} position="top-center" autoClose={2000} hideProgressBar closeOnClick />;
+  return (
+    <CustomedToastContainer
+      type={type}
+      position="top-center"
+      autoClose={2000}
+      hideProgressBar
+      closeOnClick
+      transition={Slide}
+    />
+  );
 };
 
 export default Toast;

components/Home/CollectedFolder/CollectedFolder.styles.ts

@@ -28,7 +28,7 @@ export const BoxContainer = styled.figure`
 `;
 
 export const FolderImage = styled.div<{ thumbnail?: string }>`
-  border-radius: 1rem;
+  border-radius: 1.4rem;
   padding-top: 100%;
   background-size: cover;
   background-color: ${theme.colors.gray1};

components/Home/FloatingButton/FloatingButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
+import { useRouter } from 'next/router';
 import Image from 'next/image';
 import { transition } from '@/styles/mixins';
 import theme from '@/styles/theme';
 import RightIcon from 'public/svgs/right-small.svg';
 import { CommonButton } from '@/components/Common';
-import { useRouter } from 'next/router';
+import DontknowIcon from 'public/category-images/category-dontknow.png';
 
 interface FloatingButtonProps {
   isScrollOnTop: boolean;
@@ -23,7 +24,8 @@ const FloatingButton = ({ isScrollOnTop }: FloatingButtonProps) => {
       <div>
         <CommonButton color="gray" onClick={goToDontknowFeelings}>
           <ButtonText>
-            &apos;모르겠어요&apos;를 선택한 기록들
+            <Image src={DontknowIcon} alt="" width={20} height={20} />
+            <strong>모르겠어요</strong>를 선택한 기록들
             <ButtonIcon>
               <Image src={RightIcon} alt="" />
             </ButtonIcon>
@@ -48,10 +50,12 @@ const FloatingContainer = styled.div<{ isHidden: boolean }>`
     `};
 
   > div {
-    width: 22.3rem;
+    width: 24.2rem;
     margin: 0 auto;
 
     button {
+      background-color: ${theme.colors.black};
+      border: 0.1rem solid ${theme.colors.gray3};
       box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
     }
   }
@@ -63,12 +67,17 @@ const ButtonText = styled.span`
   align-items: center;
   padding: 0 1.9rem 0 2.2rem;
   ${theme.fonts.btn2};
+
+  strong {
+    margin-left: 0.2rem;
+    color: ${theme.colors.gray5};
+  }
 `;
 
 const ButtonIcon = styled.i`
   position: absolute;
-  top: 0;
-  right: 1.9rem;
+  top: 0.2rem;
+  right: 2rem;
 `;
 
 export default FloatingButton;

components/Post/PostList/PostList.style.ts

@@ -7,7 +7,7 @@ export const HeaderTitle = styled.h2`
   color: ${theme.colors.white};
 `;
 
-export const BottomController = styled.div`
+export const Bottom = styled.div`
   position: fixed;
   bottom: 0;
   width: 100%;
@@ -33,22 +33,3 @@ export const BottomButton = styled.button<{ disabled: boolean }>`
 export const LoadingContainer = styled.div`
   margin: 2rem auto;
 `;
-
-export const FloatingContainer = styled.div`
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-`;
-
-export const ButtonContainer = styled.div`
-  position: relative;
-  max-width: 48rem;
-  margin: 0 auto;
-
-  button {
-    position: absolute;
-    right: 2.4rem;
-    bottom: 8rem;
-  }
-`;

components/Post/PostList/PostList.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import styled from 'styled-components';
-import theme from '@/styles/theme';
 import PostItem from '@/components/Post/PostItem/PostItem';
 import { Post } from '@/shared/type/post';
 import ListEmpty from 'public/images/list-empty.png';
@@ -15,7 +14,7 @@ interface PostListProps {
   isMine?: boolean;
 }
 
-const PostList = ({ postList = [], isEditing, checkedItems, setCheckedItems, isMine = true }: PostListProps) => {
+const PostList = ({ postList = [], isEditing, checkedItems, setCheckedItems, isMine = false }: PostListProps) => {
   const router = useRouter();
 
   const changeCheckedItems = (postId: string) => {

components/Post/WritingButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { CommonWritingButton } from '@/components/Common';
+
+const WritingButton = () => {
+  const router = useRouter();
+  const goToWritePage = () => router.push('/write');
+
+  return (
+    <FloatingContainer>
+      <ButtonContainer>
+        <CommonWritingButton onClick={goToWritePage} />
+      </ButtonContainer>
+    </FloatingContainer>
+  );
+};
+
+export const FloatingContainer = styled.div`
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+`;
+
+export const ButtonContainer = styled.div`
+  position: relative;
+  max-width: 48rem;
+  margin: 0 auto;
+  button {
+    position: absolute;
+    right: 2.4rem;
+    bottom: 8rem;
+  }
+`;
+
+export default WritingButton;

hooks/apis/folder/useFolderMutation.ts

@@ -33,3 +33,11 @@ export const useDeleteFolderMutation = () =>
       queryClient.invalidateQueries(QUERY_KEY.GET_FOLDERS);
     },
   });
+
+export const useDeletePostsByFolderMutation = () =>
+  useMutation((id: number) => folderService.deletePostsByFolderId(id), {
+    onSuccess: () => {
+      queryClient.invalidateQueries(QUERY_KEY.GET_POSTS_BY_FOLDER_ID);
+      queryClient.invalidateQueries(QUERY_KEY.GET_FOLDERS);
+    },
+  });

lib/gtag.js

@@ -0,0 +1,18 @@
+// lib/gtag.js
+export const GA_TRACKING_ID = 'G-H4Y31JE5GW';
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  });
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};

pages/_app.tsx

@@ -1,14 +1,16 @@
 import '@/styles/globals.css';
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { ThemeProvider } from 'styled-components';
+import { RecoilRoot } from 'recoil';
 import { QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
-import { RecoilRoot } from 'recoil';
 import theme from '@/styles/theme';
 import { queryClient } from '@/shared/utils/queryClient';
 import { CommonAppLayout } from '@/components/Common';
+import * as gtag from '@/lib/gtag';
 
 if (typeof window !== 'undefined') {
   if ('serviceWorker' in navigator) {
@@ -24,6 +26,18 @@ if (typeof window !== 'undefined') {
 }
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      gtag.pageview(url);
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <>
       <Head>