🚨Fix : 프로필 페이지 에러 수정 / 포스트 디테일 기능 추가

prgrms-fe-devcourse · Sep 25, 2023 · 167173f · 167173f
2 parents 634a333 + e151d8a
commit 167173f
Show file tree

Hide file tree

Showing 22 changed files with 221 additions and 123 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -11,6 +11,7 @@ interface ButtonProps {
   fontSize?: number;
   borderRadius?: number;
   children?: React.ReactNode;
+  disabled?: boolean;
 }
 
 const Button = ({
@@ -23,7 +24,8 @@ const Button = ({
   textColor,
   fontSize,
   borderRadius,
-  children
+  children,
+  disabled
 }: ButtonProps) => (
   <StyledButton
     width={width}
@@ -33,7 +35,8 @@ const Button = ({
     textColor={textColor}
     bold={bold}
     fontSize={fontSize}
-    borderRadius={borderRadius}>
+    borderRadius={borderRadius}
+    disabled={disabled}>
     {label}
     {children}
   </StyledButton>

diff --git a/src/components/PostPreview/PostPreview.style.ts b/src/components/PostPreview/PostPreview.style.ts
@@ -5,12 +5,12 @@ export const PreviewContainer = styled.div`
   width: 100%;
   height: 150px;
   margin: 0 auto;
-  padding: 15px 60px;
+  padding: 15px 26px;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-bottom: 0.5px solid ${({ theme }) => theme.color.greyLight};
+  border-bottom: 0.5px solid ${({ theme }) => theme.color.white800};
   &:hover {
     background-color: ${({ theme }) => theme.color.white900};
   }

diff --git a/src/pages/postDetail/components/PostComment.style.ts b/src/pages/postDetail/components/PostComment.style.ts
@@ -23,6 +23,7 @@ export const PostCommentUserContainer = styled.div`
 export const PostCommentContentContainer = styled.div`
   flex: 1;
   margin-top: 7px;
+  line-height: 1.5;
 `;
 
 export const PostCommentDeleteContainer = styled.div`

diff --git a/src/pages/postDetail/components/PostCommentHeader.style.ts b/src/pages/postDetail/components/PostCommentHeader.style.ts
@@ -24,31 +24,7 @@ export const PostLikeContainer = styled.div`
     transition: transform 0.2s ease-in-out;
     margin-top: 1px;
     &:active {
-      animation: shake 1s infinite;
-    }
-    :hover {
       transform: scale(1.2);
     }
   }
-
-  @keyframes shake {
-    0% {
-      transform: rotate(0) scale(1.2);
-    }
-    10% {
-      transform: rotate(15deg) scale(1.2);
-    }
-    30% {
-      transform: rotate(-15deg) scale(1.2);
-    }
-    50% {
-      transform: rotate(15deg) scale(1.2);
-    }
-    70% {
-      transform: rotate(0) scale(1.2);
-    }
-    100% {
-      transform: rotate(0) scale(1.2);
-    }
-  }
 `;
diff --git a/src/pages/postDetail/components/PostCommentInput.style.ts b/src/pages/postDetail/components/PostCommentInput.style.ts
@@ -1,5 +1,9 @@
 import styled from '@emotion/styled';
 
+interface CommentButtonProps {
+  buttonDisabled: boolean;
+}
+
 export const CommentInputSection = styled.section`
   ${({ theme }) => theme.style.flexCenter}
   border-top: 1px solid ${({ theme }) => theme.color.greyLight};
@@ -29,10 +33,20 @@ export const CommentInputContainer = styled.div`
   padding: 0 10px;
 `;
 
-export const CommentButtonContainer = styled.div`
+export const CommentButtonContainer = styled.div<CommentButtonProps>`
   ${({ theme }) => theme.style.flexCenter}
   width: 50px;
   height: 100%;
+  > button {
+    transition: all 0.2s ease-in-out;
+    background-color: ${({ buttonDisabled, theme }) =>
+      buttonDisabled ? theme.color.greyLight : theme.color.purpleDark};
+  }
+
+  > button:active {
+    transform: ${({ buttonDisabled }) =>
+      buttonDisabled ? 'none' : 'scale(0.9)'};
+  }
 `;
 
 export const CommentInput = styled.input`

diff --git a/src/pages/postDetail/components/PostCommentInput.tsx b/src/pages/postDetail/components/PostCommentInput.tsx
@@ -11,6 +11,7 @@ import {
 } from './PostCommentInput.style';
 import { Avatar } from '@components/Avatar';
 import { postComment } from '@apis/comment';
+import { useState } from 'react';
 import { postNotifications } from '@apis/notice';
 
 interface PostCommentInputProps {
@@ -29,6 +30,7 @@ const PostCommentInput = ({
   refetch
 }: PostCommentInputProps) => {
   const COMMENT_PLACEHOLDER = '댓글을 달아보세요.';
+  const [commentValue, setCommentValue] = useState(null);
   const commentRef = useRef(null);
 
   const { mutate, isSuccess } = useMutation(postComment, {
@@ -46,14 +48,23 @@ const PostCommentInput = ({
 
   const handleCommentSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    mutate({
-      postId,
-      comment: commentRef.current.value,
-      token
-    });
+    mutate(
+      {
+        postId,
+        comment: commentValue,
+        token
+      },
+      {
+        onSuccess: () => refetch()
+      }
+    );
     commentRef.current.value = '';
   };
 
+  const handleCommentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCommentValue(event.target.value);
+  };
+
   return (
     <CommentInputSection>
       <CommentAvatarContainer>
@@ -68,17 +79,19 @@ const PostCommentInput = ({
           <CommentInput
             ref={commentRef}
             name='comment'
+            onChange={handleCommentChange}
             placeholder={COMMENT_PLACEHOLDER}
           />
         </CommentInputContainer>
-        <CommentButtonContainer>
+        <CommentButtonContainer buttonDisabled={commentValue ? false : true}>
           <Button
             width={50}
             height={25}
             label='답글'
             fontSize={14}
             dark={true}
             borderRadius={5}
+            disabled={commentValue ? false : true}
           />
         </CommentButtonContainer>
       </CommentInputForm>

diff --git a/src/pages/postDetail/components/PostContent.style.ts b/src/pages/postDetail/components/PostContent.style.ts
@@ -93,6 +93,7 @@ export const PostContentMenu = styled.div<PostContentMenuProps>`
 export const PostContentBody = styled.div`
   padding: 20px;
   width: 100%;
+  line-height: 1.5;
 `;
 
 export const PostEditConfirmButtonContainer = styled.div<contentEditMode>`

diff --git a/src/pages/postDetail/components/PostContent.tsx b/src/pages/postDetail/components/PostContent.tsx
@@ -22,6 +22,7 @@ import { Avatar } from '@components/Avatar';
 import { Button } from '@components/Button';
 import { Confirm } from '@components/Confirm';
 import { createFormData, purifyContent } from '@pages/posting/utils';
+import { Link } from 'react-router-dom';
 
 interface PostContentProps {
   author: User;
@@ -109,19 +110,21 @@ const PostContent = ({
     <PostContentSection>
       <PostContentHeader>
         <PostContentAvatarContainer>
-          <Avatar
-            src={author?.image}
-            alt={author?.fullName}
-            size={39}
-          />
+          <Link to={`/profile/${author?._id}`}>
+            <Avatar
+              src={author?.image}
+              alt={author?.fullName}
+              size={39}
+            />
+          </Link>
         </PostContentAvatarContainer>
         <PostContentUserInfo>
           <PostContentUserName>
             <UserName>{author?.fullName}</UserName>
             <UserId email={author ? author.email : ''} />
           </PostContentUserName>
           <PostContentTime>
-            {createdAt} / {meditationTime}
+            {createdAt} / {meditationTime}분
           </PostContentTime>
         </PostContentUserInfo>
         {currentUserId === author?._id && (

diff --git a/src/pages/profile/Profile.style.ts b/src/pages/profile/Profile.style.ts
@@ -19,3 +19,10 @@ export const ProfileInfoContainer = styled.div`
   bottom: 0;
   position: relative;
 `;
+
+export const ProfileBodyContainer = styled.section`
+  width: 100%;
+  height: calc(100% - 100px);
+  padding: 0 26px;
+  position: relative;
+`;
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -8,7 +8,11 @@ import { User } from '@/types/User';
 import { getUser } from '@apis/user';
 import createTabItems from './utils/createTabItems';
 import { editModeState } from './states/editMode';
-import { ProfileInfoContainer, ProfilePage } from './Profile.style';
+import {
+  ProfileInfoContainer,
+  ProfilePage,
+  ProfileBodyContainer
+} from './Profile.style';
 import {
   ProfileInfo,
   ProfileCover,
@@ -19,7 +23,7 @@ import {
 import { getMyFollowData } from '@/utils';
 
 const Profile = () => {
-  const { userId } = useParams<{ userId: string }>();
+  const { userId: profileUserId } = useParams<{ userId: string }>();
   const location = useLocation();
   const [sideBarOpened, setSideBarOpened] = useState(false);
   const [editMode, setEditMode] = useRecoilState(editModeState);
@@ -28,11 +32,10 @@ const Profile = () => {
     setEditMode(location.hash === '#edit');
   }, [location.hash, setEditMode]);
 
-  const { data, isLoading, refetch } = useQuery(
-    ['userData', userId],
-    () => getUser(userId),
-    { enabled: !!userId }
-  );
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['userData', profileUserId],
+    queryFn: async () => await getUser(profileUserId)
+  });
 
   const [{ _id: currentUserId }] = useSessionStorage<Pick<User, '_id'>>(
     'userData',
@@ -46,7 +49,6 @@ const Profile = () => {
   };
 
   const closeSidebar = () => {
-    console.log('close');
     setSideBarOpened(false);
   };
 
@@ -69,20 +71,24 @@ const Profile = () => {
           avatarImgSrc={isLoading ? '' : data.image}
           refetch={() => refetch()}
         />
+      </ProfileInfoContainer>
+      <ProfileBodyContainer>
         {editMode ? (
           <ProfileEdit refetch={() => refetch()} />
         ) : (
           <ProfileMain
-            myProfile={currentUserId === userId}
-            myFollowData={getMyFollowData(data?.followers, currentUserId)}
-            profileId={userId}
+            myProfile={currentUserId === profileUserId}
+            myFollowData={
+              isLoading ? null : getMyFollowData(data?.followers, currentUserId)
+            }
+            profileId={profileUserId}
             tabItems={tabItems}
             openSidebar={openSidebar}
             fullName={isLoading ? '' : data.fullName}
             refetch={() => refetch()}
           />
         )}
-      </ProfileInfoContainer>
+      </ProfileBodyContainer>
     </ProfilePage>
   );
 };

diff --git a/src/pages/profile/components/ProfileCarousel.style.ts b/src/pages/profile/components/ProfileCarousel.style.ts
@@ -1,18 +1,32 @@
 import styled from '@emotion/styled';
 
-export const ProfileCarouselContainer = styled.div`
+interface ProfileCarouselContainerProps {
+  selectedTabIndex: number;
+}
+
+export const ProfileCarouselContainer = styled.div<ProfileCarouselContainerProps>`
   width: 100%;
-  display: flex;
   flex: 1;
+  display: flex;
   overflow: hidden;
   user-select: none;
+  scroll-behavior: smooth;
+  > div:first-of-type {
+    > div {
+      padding: 0;
+    }
+    > div:last-of-type {
+      border-bottom: none;
+    }
+  }
 `;
 
 export const ProfileCarouselItem = styled.div`
   flex: 1 0 100%;
+  overflow: auto;
 `;
 
-export const NonePostContainer = styled.div`
+export const NoneContentContainer = styled.div`
   ${({ theme }) => theme.style.flexCenter};
   width: 100%;
   height: 100%;