Merge pull request #167 from ywc8851/develop

프로필 아이콘 li 이미지 렌더링

package.json

@@ -33,6 +33,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "redux-persist": "^6.0.0",
     "speed-measure-webpack-plugin": "1.5.0",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"

src/components/ProfileIcon/List.tsx

@@ -6,14 +6,18 @@ import SocialLogin from '@/components/Modal/SocialLogin';
 import { Star } from '@/components/IconButton';
 
 import theme from '@/styles/theme';
-import foodImage from '@/assets/img/food.jpg';
+import { imgSkeleton } from '@/components/ProfileIcon/ProfileIcon.styled';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 
 import { PostsWithId } from '@/firebase/type';
+import { getImageDocs } from '@/firebase/request';
 import { useAppSelector, useAppDispatch } from '@/store/hooks';
 import { modalActions } from '@/store/modal/modal-slice';
 
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
 export interface ListProps extends PostsWithId {
   isLiFirst: boolean;
   deleteOnePost: (arg0: string) => void;
@@ -25,16 +29,27 @@ const List = ({
   address,
   category,
   score,
+  images,
   isLiFirst,
   deleteOnePost,
 }: ListProps) => {
   const dispatch = useAppDispatch();
   const { isUserLogin } = useAppSelector(({ user }) => user);
-  const { isOverlayModalOpen, isSocialModalOpen } = useAppSelector(
-    ({ modal }) => modal,
-  );
+  const { isSocialModalOpen } = useAppSelector(({ modal }) => modal);
+
+  const [starState, setStarState] = useState<boolean>(isLiFirst ? false : true);
+  const [isLoadingFinish, setIsLoadingFinish] = useState<boolean>(false);
+  const [imageSrc, setImageSrc] = useState<string>();
 
-  const [starState, setStarState] = useState(isLiFirst ? false : true);
+  useEffect(() => {
+    getImageDocs(images![0])
+      .then((res: any) => setImageSrc(res))
+      .then((res) => {
+        setTimeout(() => {
+          setIsLoadingFinish(true);
+        }, 600);
+      });
+  }, []);
 
   const handleSocialModal = () => {
     dispatch(modalActions.handleSocialModal());
@@ -80,7 +95,11 @@ const List = ({
     <li>
       <section>
         <Link to={`/restaurants/${id}`} onClick={handleOverlayModal}>
-          <img src={foodImage} alt="food" />
+          {isLoadingFinish ? (
+            <img src={imageSrc} alt="food" />
+          ) : (
+            <Skeleton css={imgSkeleton} />
+          )}
         </Link>
         <div>
           <Link to={`/restaurants/${id}`} onClick={handleOverlayModal}>

src/components/ProfileIcon/ProfileIcon.styled.tsx

@@ -201,3 +201,10 @@ export const loginButton = css`
   color: #ff7100;
   background-color: transparent;
 `;
+
+export const imgSkeleton = css`
+  width: 70px;
+  height: 70px;
+  margin-right: 16px;
+  margin-left: 16px;
+`;

src/components/ProfileIcon/index.tsx

@@ -137,7 +137,10 @@ const ProfileIcon = ({
             {isLiFirst ? (
               recentlyWatchedPosts.length ? (
                 recentlyWatchedPosts.map(
-                  ({ id, name, address, category, score }, index: number) => {
+                  (
+                    { id, name, address, category, score, images },
+                    index: number,
+                  ) => {
                     return (
                       <List
                         id={id}
@@ -146,6 +149,7 @@ const ProfileIcon = ({
                         address={address}
                         category={category}
                         score={score}
+                        images={images}
                         isLiFirst={isLiFirst}
                         deleteOnePost={deleteOneRecentlyWathced}
                       ></List>
@@ -160,7 +164,7 @@ const ProfileIcon = ({
               )
             ) : favoritePosts.length ? (
               favoritePosts.map(
-                ({ id, name, address, category, score }, index) => {
+                ({ id, name, address, category, score, images }, index) => {
                   return (
                     <List
                       id={id}
@@ -169,6 +173,7 @@ const ProfileIcon = ({
                       address={address}
                       category={category}
                       score={score}
+                      images={images}
                       isLiFirst={isLiFirst}
                       deleteOnePost={deleteOneFavorite}
                     ></List>

src/index.tsx

@@ -1,20 +1,27 @@
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { Provider } from 'react-redux';
 import store from '@/store';
 import App from '@/App';
 import { ThemeProvider } from '@emotion/react';
 import GlobalStyle from '@/styles/global';
 import theme from '@/styles/theme';
 
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+
+let persistor = persistStore(store);
+
 ReactDOM.render(
   <StrictMode>
     <ThemeProvider theme={theme}>
       <GlobalStyle />
       <Router>
         <Provider store={store}>
-          <App />
+          <PersistGate loading={null} persistor={persistor}>
+            <App />
+          </PersistGate>
         </Provider>
       </Router>
     </ThemeProvider>

src/store/index.ts

@@ -1,11 +1,29 @@
 import { configureStore } from '@reduxjs/toolkit';
+import storage from 'redux-persist/lib/storage/session';
+import { combineReducers } from 'redux';
+import { persistReducer } from 'redux-persist';
+
 import auth from './auth/auth-slice';
 import modal from './modal/modal-slice';
 import user from './user/user-slice';
 import searchkeyword from './searchkeyword/keyword-slice';
 
+const reducers = combineReducers({
+  auth,
+  modal,
+  user,
+  searchkeyword,
+});
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, reducers);
+
 const store = configureStore({
-  reducer: { auth, modal, user, searchkeyword },
+  reducer: persistedReducer,
 });
 
 export type RootState = ReturnType<typeof store.getState>;