Fix: CSS, ESLint 머지 후 충돌 해결

suyeon1218 · web-flow · commit 7a8e1b541ec0 · 2023-09-27T18:17:58.000+09:00
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -15,7 +15,6 @@ interface ButtonProps {
   children?: React.ReactNode;
   disabled?: boolean;
   padding?: boolean;
-  border?: string;
   backgroundColor?: keyof typeof color;
 }
 
@@ -53,5 +52,4 @@ const Button = ({
   );
 };
 
-
 export default Button;
diff --git a/src/components/PostPreview/PostHeader.tsx b/src/components/PostPreview/PostHeader.tsx
@@ -3,6 +3,7 @@ import { Icon } from '../Icon';
 import { Avatar } from '../Avatar';
 import {
   AvatarContainer,
+  PostInfoContainer,
   PostDetailInfoContainer,
   UserContainer,
   NameContainer,
diff --git a/src/pages/landing/Landing.style.tsx b/src/pages/landing/Landing.style.tsx
@@ -3,7 +3,7 @@ import logo from '../../assets/logo.svg';
 
 export const LandingMain = styled.main`
   background: ${({ theme }) => theme.color.linearGradientPurple};
-  ${({ theme }) => theme.style.flexAlignCenter};
+  ${({ theme }) => theme.style.flexCenter};
   flex-direction: column;
   width: 100%;
   height: 100%;
diff --git a/src/pages/layout/components/IconNav.tsx b/src/pages/layout/components/IconNav.tsx
@@ -7,8 +7,6 @@ import { AlertButton, SearchButton } from '@pages/layout/components';
 import useSessionStorage from '@hooks/useSessionStorage';
 import { LoginConfirm } from '@components/Confirm';
 import { EtcNavContainer } from './IconNav.style';
-import { User } from '@/types';
-
 
 interface EtcNavProps {
   handleOpenSearchBox: () => void;
diff --git a/src/pages/layout/components/PathNav.tsx b/src/pages/layout/components/PathNav.tsx
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@components/Button';
 import { Icon } from '@components/Icon';
 import { Logo, PathNavContainer } from './PathNav.style';
+import { Link } from '@components/Link';
 
 interface pathNavProps {
   pathStatus: 'back' | 'home';
@@ -26,7 +27,11 @@ const PathNav = ({ pathStatus }: pathNavProps) => {
           />
         </Button>
       ) : (
-        <Logo />
+        <Link
+          pageLink='/posts'
+          setActiveStyle={false}>
+          <Logo />
+        </Link>
       )}
     </PathNavContainer>
   );
diff --git a/src/pages/layout/components/SearchBody.style.ts b/src/pages/layout/components/SearchBody.style.ts
@@ -7,12 +7,11 @@ export const SearchResultContainer = styled.div`
   position: absolute;
   top: 50px;
   left: 0;
+  overflow-y: scroll;
   z-index: 100;
 `;
 
-export const SearchResult = styled.div`
-  overflow: auto;
-`;
+export const SearchResult = styled.div``;
 
 export const SearchItem = styled.div`
   ${({ theme }) => theme.style.flexAlignCenter}
diff --git a/src/pages/meditation/components/MeditationTimeSetter.tsx b/src/pages/meditation/components/MeditationTimeSetter.tsx
@@ -45,6 +45,11 @@ const MeditationTimeSetter = ({ themePicked }: MeditationTimeSetterProps) => {
     };
 
     const handleEndMeditation = () => {
+      const headerEl = document.querySelector('header');
+      const footerEl = document.querySelector('footer');
+
+      headerEl.style.display = 'flex';
+      footerEl.style.display = 'flex';
       navigate('/posting', {
         state: {
           channelId: themePicked.id,
diff --git a/src/pages/meditation/components/MeditationTimer.style.ts b/src/pages/meditation/components/MeditationTimer.style.ts
@@ -56,7 +56,7 @@ export const TimerElement = styled.button<{ timerPaused: boolean }>`
     transition: 0.3s;
   }
 
-  z-index: 2;
+  z-index: 1;
 `;
 
 export const IconContainer = styled.div`
diff --git a/src/pages/password-update/PasswordUpdate.tsx b/src/pages/password-update/PasswordUpdate.tsx
@@ -66,9 +66,6 @@ const PasswordUpdate = () => {
 
   return (
     <LandingMain>
-      <HeadingContentContainer>
-        <Heading />
-      </HeadingContentContainer>
       {passwordChanged && (
         <Alert
           emoji={'✅'}
diff --git a/src/pages/postDetail/components/PostContent.style.ts b/src/pages/postDetail/components/PostContent.style.ts
@@ -21,13 +21,13 @@ export const PostContentHeader = styled.header`
 
 export const PostContentMenuIconContainer = styled.div<PostContentMenuProps>`
   ${({ theme }) => theme.style.flexCenter}
-  user-select: none;
   position: relative;
   cursor: pointer;
-  width: 50px;
-  height: 100%;
+  width: 54px;
+  height: 50px;
   border-radius: 50%;
   border-left: none;
+  margin: 0;
   z-index: 2;
   > span {
     transition: transform 0.4s ease-in-out;
@@ -42,6 +42,7 @@ export const PostContentMenuIconContainer = styled.div<PostContentMenuProps>`
 
 export const PostContentMenu = styled.div<PostContentMenuProps>`
   z-index: 1;
+
   ${({ theme }) => theme.style.flexAlignCenter}
   flex-direction: column;
   justify-content: space-around;
@@ -68,7 +69,7 @@ export const PostContentMenu = styled.div<PostContentMenuProps>`
     }
   }
 
-  & > p:first-child {
+  & > p:first-of-type {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
   }
@@ -80,6 +81,7 @@ export const PostContentMenu = styled.div<PostContentMenuProps>`
 `;
 
 export const PostContentBody = styled.div`
+  margin-top: 10px;
   padding: 20px;
   width: 100%;
   line-height: 1.5;
diff --git a/src/pages/postDetail/components/PostContent.tsx b/src/pages/postDetail/components/PostContent.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@tanstack/react-query';
 
 import type { User } from '@/types';
@@ -13,6 +13,7 @@ import {
   PostContentMenu,
   PostEditConfirmButtonContainer
 } from './PostContent.style';
+import PostHeader from '@components/PostPreview/PostHeader';
 import { Toast } from '@components/Toast';
 import { deletePost, putPost } from '@apis/posts';
 import { Button } from '@components/Button';
diff --git a/src/pages/posts/Posts.style.ts b/src/pages/posts/Posts.style.ts
@@ -13,13 +13,6 @@ const ThemePickerContainer = styled.div`
   ${({ theme }) => theme.style.flexCenter};
 `;
 
-const StyledNoPosts = styled.div`
-  width: 100%;
-  height: 300px;
-  ${({ theme }) => theme.style.flexCenter};
-  color: ${({ theme }) => theme.color.greyLight};
-`;
-
 const PostsContainer = styled.div``;
 
-export { StyledPostsPage, ThemePickerContainer, PostsContainer, StyledNoPosts };
+export { StyledPostsPage, ThemePickerContainer, PostsContainer };
diff --git a/src/pages/posts/Posts.tsx b/src/pages/posts/Posts.tsx
@@ -13,11 +13,11 @@ import { editPostData } from './utils/editPostData';
 import useObserver from './hooks/useObserver';
 import {
   PostsContainer,
-  StyledNoPosts,
   StyledPostsPage,
   ThemePickerContainer
 } from './Posts.style';
 import { CONCENTRATION_KEY } from '@pages/meditation/constants';
+import NoPosts from './components/NoPosts/NoPosts';
 
 const Posts = () => {
   const locate = useLocation();
@@ -58,7 +58,7 @@ const Posts = () => {
       const { lastChild } = postsRef.current;
       lastChild && observe(lastChild);
     }
-  }, [postsData, observe]);
+  }, [postsData]);
 
   const clickThemePicker = (selected: ThemeInfoType) => {
     setChannel(selected);
@@ -80,7 +80,7 @@ const Posts = () => {
         />
       )}
       <PostsContainer ref={postsRef}>
-        {postsData.length >= 0 ? (
+        {postsData.length > 0 ? (
           postsData.map((post: EditedPost, index) => {
             const { content, likes, comments } = post;
             return (
@@ -96,7 +96,7 @@ const Posts = () => {
             );
           })
         ) : (
-          <StyledNoPosts>현재 발행된 포스트가 없습니다.</StyledNoPosts>
+          <NoPosts />
         )}
       </PostsContainer>
     </StyledPostsPage>
diff --git a/src/pages/posts/components/NoPosts/NoPosts.style.ts b/src/pages/posts/components/NoPosts/NoPosts.style.ts
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const NoPostsContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.color.white};
+`;
+export const NoPostsText = styled.p`
+  width: 100%;
+  height: 200px;
+  ${({ theme }) => theme.style.flexCenter};
+  color: ${({ theme }) => theme.color.greyLight};
+`;
diff --git a/src/pages/posts/components/NoPosts/NoPosts.tsx b/src/pages/posts/components/NoPosts/NoPosts.tsx
@@ -0,0 +1,11 @@
+import { NoPostsContainer, NoPostsText } from './NoPosts.style';
+
+const NoPosts = () => {
+  return (
+    <NoPostsContainer>
+      <NoPostsText>현재 채널에 작성된 포스트가 없습니다.</NoPostsText>
+    </NoPostsContainer>
+  );
+};
+
+export default NoPosts;
diff --git a/src/pages/posts/components/NoPosts/index.ts b/src/pages/posts/components/NoPosts/index.ts
diff --git a/src/pages/posts/components/SkeletonPosts/SkeletonPosts.style.ts b/src/pages/posts/components/SkeletonPosts/SkeletonPosts.style.ts
diff --git a/src/pages/posts/components/SkeletonPosts/SkeletonPosts.tsx b/src/pages/posts/components/SkeletonPosts/SkeletonPosts.tsx
diff --git a/src/pages/posts/components/SkeletonPosts/index.ts b/src/pages/posts/components/SkeletonPosts/index.ts
diff --git a/src/pages/profile/components/FollowButton.tsx b/src/pages/profile/components/FollowButton.tsx
@@ -22,7 +22,7 @@ const FollowButton = ({
   followingUserId,
   possibleDeleteFollow,
   followedThisUser = true,
-  width = 68,
+  width = 80,
   height = 30,
   fontSize = 12,
   refetch
@@ -67,6 +67,7 @@ const FollowButton = ({
     <Button
       width={width}
       height={height}
+      borderRadius={30}
       label={followed ? '팔로잉' : '팔로우'}
       fontSize={fontSize}
       bold={true}
diff --git a/src/pages/profile/components/FollowUser.style.ts b/src/pages/profile/components/FollowUser.style.ts
@@ -10,10 +10,4 @@ export const FollowUserContainer = styled.div`
   &:active {
     background-color: ${({ theme }) => theme.color.white900};
   }
-
-  & > button {
-    display: inline-block;
-    border-radius: 30px;
-    font-size: 12px;
-  }
 `;
diff --git a/src/pages/profile/components/FollowUser.tsx b/src/pages/profile/components/FollowUser.tsx
@@ -31,7 +31,7 @@ const FollowUser = ({
           followingDataId={followDataId}
           followingUserId={_id}
           possibleDeleteFollow={possibleDeleteFollow}
-          FollowedThisUser={FollowedThisUser}
+          followedThisUser={FollowedThisUser}
         />
       }
     </FollowUserContainer>
diff --git a/src/pages/profile/components/ProfileHeader.style.ts b/src/pages/profile/components/ProfileHeader.style.ts
@@ -8,29 +8,22 @@ export const ProfileHeaderButtonContainer = styled.div`
   position: absolute;
   top: 10px;
   right: 20px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
   ${({ theme }) => theme.style.flexCenter};
   > button {
-<<<<<<< HEAD
     transition: all 0.2s ease-out;
     :active {
       background-color: ${({ theme }) => theme.color.white800};
+      transform: scale(0.9);
     }
     :hover {
       background-color: ${({ theme }) => theme.color.white800};
-=======
+      transform: scale(0.9);
     transition: all 0.3s ease-in-out;
     ${({ theme }) => theme.style.flexCenter};
     margin-right: 6px;
 
     &:last-child {
       margin-right: 0;
     }
-    :active {
-      transform: scale(0.9);
->>>>>>> a20a74fdbfb510e43a6df37cf2af1283d351403d
-    }
   }
 `;

Original file line number	Diff line number	Diff line change
@@ -56,7 +56,7 @@ export const TimerElement = styled.button<{ timerPaused: boolean }>`
`56`	`56`	`transition: 0.3s;`
`57`	`57`	`}`
`58`	`58`
`59`		`- z-index: 2;`
	`59`	`+ z-index: 1;`
`60`	`60`	`;
`61`	`61`
`62`	`62`	export const IconContainer = styled.div`