Merge pull request #316 from boostcampwm-2021/dev

version 1.0.1 release
boostcampwm-2021 · Dec 2, 2021 · e10739a · e10739a
2 parents d181a0a + f60f3b7
commit e10739a
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 44 deletions.
diff --git a/front/src/components/DetailModal/DetailContainer.tsx b/front/src/components/DetailModal/DetailContainer.tsx
@@ -3,6 +3,7 @@ import { Post } from '@src/types/Post';
 import { formatDate } from '@lib/utils/time';
 import { ToggleHandler } from '@common/Modal/useModal';
 import React from 'react';
+import { useScrollDispatch } from '@src/contexts/ScrollContext';
 
 interface DetailContainerProps {
   detailFeed: Post;

diff --git a/front/src/components/Feed/Feed.tsx b/front/src/components/Feed/Feed.tsx
@@ -19,6 +19,7 @@ import { Palette } from '@src/lib/styles/Palette';
 import { useHistory, useLocation } from 'react-router';
 import queryString from '@src/lib/utils/queryString';
 import AlertDiv from '@common/Alert/AlertDiv';
+import WriteModal from '@components/Write/WriteModal';
 
 export interface FeedProps {
   feedId: number;
@@ -32,12 +33,13 @@ export interface FeedProps {
   numOfComments: number;
   is_heart: 0 | 1;
   avatarImage: string | null;
+  contentIds: string;
   lazy?: (node: HTMLDivElement) => void;
 }
 
-const Feed = ({ feedId, userId, nickname, imageURLs, humanText, animalText, lazy, createdTime, is_heart, avatarImage, numOfComments }: FeedProps) => {
+const Feed = ({ contentIds, feedId, userId, nickname, imageURLs, humanText, animalText, lazy, createdTime, is_heart, avatarImage, numOfComments }: FeedProps) => {
   const { isShowing: isDeleteShowing, toggle: toggleDeleteModal } = useModal();
-  const { toggle: toggleEditModal } = useModal();
+  const { toggle: toggleEditModal, isShowing: isEditShowing } = useModal();
   const { isShowing: isHeartErrorShowing, toggle: toggleErrorModal } = useModal();
   const [like, toggleLike] = useLike(is_heart, feedId);
   const ago = formatDate(createdTime);
@@ -79,6 +81,9 @@ const Feed = ({ feedId, userId, nickname, imageURLs, humanText, animalText, lazy
       <Modal isShowing={isDeleteShowing} hide={toggleDeleteModal}>
         <DeleteModal hide={toggleDeleteModal} feedId={feedId} />
       </Modal>
+      <Modal isShowing={isEditShowing} hide={toggleEditModal}>
+        <WriteModal hide={toggleEditModal} initState={{ contents: imageURLs, contentIds: contentIds.split(',').map((str) => parseInt(str)), feedId: feedId, text: humanText }} />
+      </Modal>
       <Modal isShowing={isHeartErrorShowing} hide={toggleErrorModal}>
         <AlertDiv>먼저 로그인 해주세요!</AlertDiv>
       </Modal>

diff --git a/front/src/components/Feed/FeedContainer.tsx b/front/src/components/Feed/FeedContainer.tsx
@@ -80,6 +80,7 @@ const FeedContainer = ({ habitatInfo, curHabitatId }: FeedScrollBoxProps) => {
                   numOfComments={feed.numOfComments}
                   is_heart={feed.is_heart}
                   avatarImage={feed.user_image_url}
+                  contentIds={feed.post_contents_ids}
                   lazy={lazy}
                 />
               ))

diff --git a/front/src/components/Register/ProfileImage.tsx b/front/src/components/Register/ProfileImage.tsx
@@ -53,6 +53,7 @@ const ProfileImage = () => {
 
     if (target.classList.contains('cancel-button')) {
       try {
+        setLoading('loading');
         const response = await fetch('/api/users/register', { method: 'POST', body: data });
         if (!response.ok) {
           throw new Error('회원가입 실패');
@@ -67,6 +68,7 @@ const ProfileImage = () => {
       return;
     }
     if (flag && target.classList.contains('confirm-button')) {
+      setLoading('loading');
       data.append('upload', profile!);
 
       try {

diff --git a/front/src/components/User/UserAbout.tsx b/front/src/components/User/UserAbout.tsx
@@ -84,8 +84,10 @@ const UserAbout = ({ userInfo }: UserAboutProps) => {
       )}
       {loading === 'fail' && (
         <Modal isShowing={true}>
-          <AlertDiv>다시 시도해주세요.</AlertDiv>
-          <Button borderColor={'black'} onClick={() => setLoading(null)} children={'확인'} />
+          <AlertDiv>
+            다시 시도해주세요.
+            <Button borderColor={'black'} onClick={() => setLoading(null)} children={'확인'} />
+          </AlertDiv>
         </Modal>
       )}
       {loading === 'success' && (

diff --git a/front/src/components/Write/WriteModal.tsx b/front/src/components/Write/WriteModal.tsx
@@ -111,7 +111,7 @@ const WriteModal = ({ hide, initState }: WriteModalProps) => {
                   {contents.length}/{MAX_CONTENTS}
                 </p>
               </FileInsertLabel>
-              <FileInput ref={fileInputRef} onChange={handleFileInputChange} id="input-contents" type="file" accept="image/*, video/*" name="contents" form="write" multiple />
+              <FileInput ref={fileInputRef} onChange={handleFileInputChange} id="input-contents" type="file" accept=".jpg, .png, .jpeg" name="contents" form="write" multiple />
               {contents.length ? (
                 <SwipeBox width="80%" height="100%" gap="10px">
                   <>

diff --git a/front/src/components/_common/Avatar/Avatar.tsx b/front/src/components/_common/Avatar/Avatar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 export const DEFAULT_AVATAR = `/default_avatar.png`;
 
 const AvatarBlock = styled.div<Omit<AvatarProps, 'imgSrc'>>`
@@ -23,13 +23,19 @@ interface AvatarProps {
 }
 
 const Avatar = ({ imgSrc, size, userId, preventLink }: AvatarProps) => {
+  const history = useHistory();
+  // const handleClick = () => {
+  //   history.push(`/user/${userId}`);
+  // };
   return (
     <AvatarBlock size={size}>
       {preventLink ? (
         <img src={imgSrc?.replace('.webp', '-profile.webp') ?? DEFAULT_AVATAR} alt="아바타 이미지" />
       ) : (
         <Link to={userId && userId !== -1 ? `/user/${userId}` : '#'}>
+          {/*<div onClick={handleClick}>*/}
           <img src={imgSrc?.replace('.webp', '-profile.webp') ?? DEFAULT_AVATAR} alt="아바타 이미지" />
+          {/*</div>*/}
         </Link>
       )}
     </AvatarBlock>

diff --git a/front/src/contexts/ScrollContext.tsx b/front/src/contexts/ScrollContext.tsx
@@ -122,15 +122,15 @@ export const ScrollProvider = ({ children }: { children: React.ReactNode }) => {
 export const useScrollState = () => {
   const state = useContext(ScrollStateContext);
   if (!state) {
-    throw new Error('user state context error');
+    throw new Error('scroll state context error');
   }
   return state;
 };
 
 export const useScrollDispatch = () => {
   const dispatch = useContext(ScrollDispatchContext);
   if (!dispatch) {
-    throw new Error('user dispatch context error');
+    throw new Error('scroll dispatch context error');
   }
   return dispatch;
 };
diff --git a/front/src/hooks/useSideNavi.ts b/front/src/hooks/useSideNavi.ts
@@ -62,14 +62,11 @@ const useSideNavi = (userHabitatId: number) => {
       if (curHabitatId === getCurHabitat()) {
         if (historyState.habitatList.length) return;
         initRandomList(curHabitatId);
-      } else if (curHabitatId === getCurHabitat(1)) historyDispatch({ type: 'GO_NEXT_HABITAT', data: [] });
-      else if (curHabitatId === getCurHabitat(-1)) historyDispatch({ type: 'GO_PREV_HABITAT', data: [] });
-      else {
+      } else {
         initRandomList(curHabitatId);
       }
-    } else {
-      initRandomList(userHabitatId);
-      history.push(`${location.pathname}?habitat=${userHabitatId}`);
+    } else if (!location.pathname.includes('user')) {
+      history.replace(`${location.pathname}?habitat=${userHabitatId}`);
     }
   }, [location]);
 
@@ -87,11 +84,13 @@ const useSideNavi = (userHabitatId: number) => {
   const handleNextHabitat = () => {
     if (historyState.curIndex + 1 === historyState.habitatList.length) return;
     history.push(`/?habitat=${getCurHabitat(1)}`);
+    historyDispatch({ type: 'GO_NEXT_HABITAT', data: [] });
   };
 
   const handlePrevHabitat = () => {
     if (historyState.curIndex - 1 === 0) return;
     history.push(`/?habitat=${getCurHabitat(-1)}`);
+    historyDispatch({ type: 'GO_PREV_HABITAT', data: [] });
   };
 
   return {

diff --git a/front/src/pages/MainArticle.tsx b/front/src/pages/MainArticle.tsx
@@ -7,7 +7,6 @@ import HabitatPreview from '@components/Habitat/HabitatPreview';
 import { Palette } from '@lib/styles/Palette';
 import { flexBox } from '@lib/styles/mixin';
 import MagicNumber from '@src/lib/styles/magic';
-import { ScrollProvider } from '@src/contexts/ScrollContext';
 
 const MainArticle = ({ getCurHabitat, handleNextHabitat, handlePrevHabitat, error, habitatInfo }: any) => {
   const [mode, setMode] = useState<'feed' | 'explore'>('feed');
@@ -35,28 +34,26 @@ const MainArticle = ({ getCurHabitat, handleNextHabitat, handlePrevHabitat, erro
 
   return (
     <MainPageBlock>
-      <ScrollProvider>
-        <MainContentsDiv ref={feedModeRef}>
+      <MainContentsDiv ref={feedModeRef}>
+        {
           {
-            {
-              feed: (
-                <>
-                  <FeedContainer habitatInfo={habitatInfo} curHabitatId={getCurHabitat()} />
-                  <FeedFAB mode={mode} getPosFunc={getFeedFloatingPos} toggleMode={toggleMode} />
-                  <HabitatPreview habitat={getCurHabitat(1)} onClick={handleNextHabitat} side={'right'} />
-                  <HabitatPreview habitat={getCurHabitat(-1)} onClick={handlePrevHabitat} side={'left'} />
-                </>
-              ),
-              explore: (
-                <>
-                  <Explore habitatInfo={habitatInfo} />
-                  <FeedFAB mode={mode} getPosFunc={getExploreFloatingPos} toggleMode={toggleMode} />
-                </>
-              ),
-            }[mode]
-          }
-        </MainContentsDiv>
-      </ScrollProvider>
+            feed: (
+              <>
+                <FeedContainer habitatInfo={habitatInfo} curHabitatId={getCurHabitat()} />
+                <FeedFAB mode={mode} getPosFunc={getFeedFloatingPos} toggleMode={toggleMode} />
+                <HabitatPreview habitat={getCurHabitat(1)} onClick={handleNextHabitat} side={'right'} />
+                <HabitatPreview habitat={getCurHabitat(-1)} onClick={handlePrevHabitat} side={'left'} />
+              </>
+            ),
+            explore: (
+              <>
+                <Explore habitatInfo={habitatInfo} />
+                <FeedFAB mode={mode} getPosFunc={getExploreFloatingPos} toggleMode={toggleMode} />
+              </>
+            ),
+          }[mode]
+        }
+      </MainContentsDiv>
       <EmptyStyleDiv color={habitatInfo?.habitat.color} />
     </MainPageBlock>
   );

diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx
@@ -8,6 +8,7 @@ import { useUserState } from '@src/contexts/UserContext';
 import useValidateUser from '@hooks/useValidateUser';
 import useSideNavi from '@hooks/useSideNavi';
 import useHabitatInfo from '@hooks/useHabitatInfo';
+import { ScrollProvider } from '@src/contexts/ScrollContext';
 
 const MainPageDiv = styled.div`
   overflow: hidden;
@@ -26,14 +27,15 @@ const MainPage = () => {
   return (
     <MainPageDiv>
       <Header habitatInfo={habitatInfo} />
+      <ScrollProvider>
+        <Route exact path="/user/:id/(modal/.*)?">
+          <UserArticle />
+        </Route>
 
-      <Route exact path="/user/:id/(modal/.*)?">
-        <UserArticle />
-      </Route>
-
-      <Route exact path="/(modal/.*)?">
-        <MainArticle getCurHabitat={getCurHabitat} handleNextHabitat={handleNextHabitat} handlePrevHabitat={handlePrevHabitat} error={error} habitatInfo={habitatInfo} />
-      </Route>
+        <Route exact path="/(modal/.*)?">
+          <MainArticle getCurHabitat={getCurHabitat} handleNextHabitat={handleNextHabitat} handlePrevHabitat={handlePrevHabitat} error={error} habitatInfo={habitatInfo} />
+        </Route>
+      </ScrollProvider>
     </MainPageDiv>
   );
 };

diff --git a/front/src/pages/UserArticle.tsx b/front/src/pages/UserArticle.tsx
@@ -13,7 +13,7 @@ import useValidateUser from '@src/hooks/useValidateUser';
 const UserArticle = () => {
   const param: { id: string } = useParams();
   const [userInfo, setUserInfo] = useState<User | null>(null);
-  const { habitatInfo } = useHabitatInfo(userInfo?.habitat?.id ?? undefined);
+  const { habitatInfo } = useHabitatInfo(userInfo?.habitat?.id);
   const userState = useUserState();
   useValidateUser(userState);