Merge branch 'main' of https://github.com/prgrms-fe-devcourse/FEDC4_N…

…IRVANA_Gidong into feat/notice/send
prgrms-fe-devcourse · Sep 25, 2023 · 2542a0d · 2542a0d
2 parents 875b408 + 3c1be96
commit 2542a0d
Show file tree

Hide file tree

Showing 18 changed files with 57 additions and 46 deletions.
diff --git a/src/components/Confirm/Confirm.tsx b/src/components/Confirm/Confirm.tsx
@@ -17,7 +17,7 @@ interface ConfirmProps {
   nextPageLink: string;
   CancelButton: React.ReactNode | (() => JSX.Element);
   ConfirmButton: React.ReactNode | (() => JSX.Element);
-  linkState: { [key: string]: any };
+  linkState?: { [key: string]: any };
 }
 
 const Confirm = ({
@@ -31,7 +31,7 @@ const Confirm = ({
 }: Partial<ConfirmProps>) => {
   const [disabled, setDisabled] = useState(false);
   const [domReady, setDomReady] = useState(false);
-  
+
   const FormedCancelButton =
     typeof CancelButton === 'function' ? CancelButton() : CancelButton;
   const FormedConfirmlButton =
@@ -53,9 +53,13 @@ const Confirm = ({
             {content}
             <NavButtonContainer>
               <CancelButtonDefaultEvent onClick={() => setDisabled(true)}>
-                {CancelButton}
+                {FormedCancelButton}
               </CancelButtonDefaultEvent>
-              <Link pageLink={nextPageLink}>{ConfirmButton}</Link>
+              <Link
+                state={linkState}
+                pageLink={nextPageLink}>
+                {FormedConfirmlButton}
+              </Link>
             </NavButtonContainer>
           </ContentContainer>
         </StyledConfirmBackground>

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -3,6 +3,7 @@ import { Link } from '../Link';
 import { StyledFooter } from './Footer.style';
 import useSessionStorage from '@hooks/useSessionStorage';
 import { User } from '@/types/User';
+import { useLocation } from 'react-router-dom';
 
 export const Footer = () => {
   const [userData] = useSessionStorage<Pick<User, '_id' | 'token'>>(
@@ -15,9 +16,10 @@ export const Footer = () => {
 
   const iconInfos = [
     { name: 'home', size: 35, link: '/posts' },
-    { name: 'self_improvement', size: 35, link: '/meditation' },
+    { name: 'spa', size: 35, link: '/meditation' },
     { name: 'person', size: 35, link: `/profile/${userData._id}` }
   ];
+  const location = useLocation();
 
   return (
     <StyledFooter>
@@ -34,7 +36,8 @@ export const Footer = () => {
           <Icon
             name={icon.name}
             size={icon.size}
-            color='black'
+            fill={icon.link === location.pathname}
+            color={icon.link === location.pathname ? 'purpleNormal' : 'black'}
           />
         </Link>
       ))}

diff --git a/src/components/Icon/Icon.style.ts b/src/components/Icon/Icon.style.ts
@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
+import { color } from '@styles/colors';
 
 export const StyledIcon = styled.span<{
   size: number;
-  color: string;
+  color: keyof typeof color;
   fill?: string;
 }>`
   color: ${({ theme, color }) => theme.color[color]};

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,10 +1,11 @@
 import { StyledIcon } from './Icon.style';
-import { GOOGLE_ICON_CLASSNAME } from '../../constants/Components';
+import { GOOGLE_ICON_CLASSNAME } from '@constants/Components';
+import { color } from '@styles/colors';
 
 interface IconProps {
   size: number;
   name: string;
-  color: string;
+  color: keyof typeof color;
   fill?: boolean;
 }
 

diff --git a/src/components/Link/Link.style.ts b/src/components/Link/Link.style.ts
@@ -1,7 +1,11 @@
 import { NavLink } from 'react-router-dom';
+import { color } from '@styles/colors';
 import styled from '@emotion/styled';
 
-export const StyledNavLink = styled(NavLink)<{ size: number; color: string }>`
+export const StyledNavLink = styled(NavLink)<{
+  size: number;
+  color: keyof typeof color;
+}>`
   color: ${({ theme, color }) => theme.color[color]};
   font-size: ${({ size }) => size}px;
   text-decoration: none;

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -1,4 +1,5 @@
 import { StyledNavLink } from './Link.style';
+import { color } from '@styles/colors';
 
 interface State {
   [key: string]: any;
@@ -9,14 +10,14 @@ interface LinkProps {
   pageLink: string;
   size: number;
   color: string;
-  state: State;
+  color: keyof typeof color;
 }
 
 const Link = ({
   children,
   pageLink,
   size = 14,
-  color = '#000',
+  color = 'black',
   state
 }: Partial<LinkProps>) => {
   return (

diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx
@@ -7,15 +7,8 @@ import {
   ContentContainer,
   NavButtonContainer
 } from '@components/Alert/Alert.style';
-import useSessionStorage from '@hooks/useSessionStorage';
 
 const NotFound = () => {
-  const [user] = useSessionStorage('userData', {
-    _id: '',
-    token: ''
-  });
-  const redirectPage = user.token === '' ? '/' : '/posts';
-
   return (
     <LandingMain>
       <StyledAlertBackground
@@ -25,7 +18,7 @@ const NotFound = () => {
         <ContentContainer contentFontSize={16}>
           {'404! 잘못된 페이지 접근이에요!'}
           <NavButtonContainer>
-            <Link pageLink={redirectPage}>
+            <Link pageLink={'/'}>
               <Button
                 width={300}
                 height={50}

diff --git a/src/pages/login/Login.style.tsx b/src/pages/login/Login.style.tsx
@@ -24,7 +24,7 @@ export const Logo = () => {
 export const LoginContainer = styled.div`
   ${({ theme }) => theme.style.flexCenter};
   flex-direction: column;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background-image: url(${logo});
   background: ${({ theme }) => theme.color.linearGradientPurple};

diff --git a/src/pages/password-update/PasswordUpdate.style.ts b/src/pages/password-update/PasswordUpdate.style.ts
@@ -18,7 +18,7 @@ const Logo = styled.h1`
 const PasswordUpdateContainer = styled.div`
   ${({ theme }) => theme.style.flexCenter};
   flex-direction: column;
-  width: 100vw;
+  width: 100%;
   height: calc(100vh - 64px);
   background: ${({ theme }) => theme.color.linearGradientPurple};
 `;

diff --git a/src/pages/posting/Posting.style.ts b/src/pages/posting/Posting.style.ts
@@ -3,29 +3,26 @@ import styled from '@emotion/styled';
 export const StyledPosting = styled.div`
   width: 100%;
   height: 100%;
-  ${({ theme }) => theme.style.flexCenter}
   background: ${({ theme }) => theme.color.linearGradientPurple};
 `;
 
 export const ContentContainer = styled.div`
   width: 100%;
-  height: 550px;
-  ${({ theme }) => theme.style.flexCenter};
+  height: 100%;
+  overflow-y: scroll;
+  ${({ theme }) => theme.style.flexAlignCenter};
   flex-direction: column;
 `;
 
 export const StyledDescription = styled.div`
+  width: 100%;
+  min-height: 130px;
   ${({ theme }) => theme.style.flexCenter};
   flex-direction: column;
   color: ${({ theme }) => theme.color.white};
-  margin-bottom: 20px;
 
   > p {
-    font-size: 18px;
-    margin-bottom: 20px;
-
-    > b {
-      font-weight: 700;
-    }
+    font-size: 16px;
+    padding: 10px 0px;
   }
 `;
diff --git a/src/pages/posting/Posting.tsx b/src/pages/posting/Posting.tsx
@@ -34,7 +34,7 @@ const Posting = () => {
     if (location.state === null) {
       navigate('/404');
     }
-
+    console.log(location.state);
     setMeditationInfo(location.state);
   }, []);
 

diff --git a/src/pages/posting/components/NewPost/NewPost.style.ts b/src/pages/posting/components/NewPost/NewPost.style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 export const PostContainer = styled.div`
-  min-width: 330px;
+  min-width: 300px;
   width: 80%;
   height: 450px;
   position: relative;
@@ -36,4 +36,6 @@ export const ButtonContainer = styled.div`
   left: 50%;
   transform: translateX(-50%);
   bottom: 30px;
+  ${({ theme }) => theme.style.flexCenter};
+  width: 90%;
 `;
diff --git a/src/pages/posting/components/SkipPosting/SkipPosting.style.ts b/src/pages/posting/components/SkipPosting/SkipPosting.style.ts
@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 export const StyledSkipPosting = styled.div`
   cursor: pointer;
   ${({ theme }) => theme.style.flexCenter};
-  height: 50px;
+  width: 100%;
+  min-height: 40px;
   color: ${({ theme }) => theme.color.white};
   font-size: 14px;
-  padding-top: 20px;
 `;
diff --git a/src/pages/posting/components/SkipPosting/SkipPosting.tsx b/src/pages/posting/components/SkipPosting/SkipPosting.tsx
@@ -19,7 +19,6 @@ const SkipPosting = ({ channelId, customToken }: SkipPostingProps) => {
 
   const handleClickSkipPost = () => {
     setShowConfirm(true);
-    sessionStorage.removeItem('posting');
   };
 
   const handleCancelButton = () => {
@@ -29,6 +28,7 @@ const SkipPosting = ({ channelId, customToken }: SkipPostingProps) => {
   const handleConfirmButton = async () => {
     const formData = createFormData('', channelId);
     await postCreateNewPost(customToken, formData).then(() => {
+      sessionStorage.removeItem('posting');
       navigate('/posts');
     });
   };

diff --git a/src/pages/profile/components/ProfileCarousel.tsx b/src/pages/profile/components/ProfileCarousel.tsx
@@ -12,6 +12,7 @@ import { PROFILE_TABS } from '../constants/profileTabs';
 import { Follow } from '@/types/Follow';
 import { PostPreview } from '@components/PostPreview';
 import { Post } from '@/types/Post';
+import { editPostData } from '@pages/posts/utils/editPostData';
 
 interface ProfileCarouselProps {
   tabItems: TabItems;
@@ -35,21 +36,23 @@ const ProfileCarousel = ({ tabItems, fullName }: ProfileCarouselProps) => {
       {Object.entries(tabItems).map(([label, tabItem], index) => {
         switch (label) {
           case MEDITATION:
-            return tabItem.data && tabItem.data.length > 0 ? (
+            const editedData = editPostData(tabItem.data as Post[]);
+            return editedData && editedData.length > 0 ? (
               <ProfileCarouselItem key={index}>
-                {tabItem.data &&
-                  tabItem.data.map((post, index) => {
-                    const { likes, comments } = post as Post;
-                    return (
+                {editedData.map((post, index) => {
+                  const { content, likes, comments } = post;
+                  return (
+                    content && (
                       <PostPreview
                         key={index}
-                        post={post as Post}
+                        post={post}
                         totalLikes={likes.length}
                         totalComments={comments.length}
                         noneProfile={true}
                       />
-                    );
-                  })}
+                    )
+                  );
+                })}
               </ProfileCarouselItem>
             ) : (
               <ProfileCarouselItem key={index}>

diff --git a/src/pages/signup/signup.style.ts b/src/pages/signup/signup.style.ts
@@ -9,7 +9,7 @@ export const SignUpContainer = styled.div`
   ${({ theme }) => theme.style.flexCenter};
 
   flex-direction: column;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background-image: url(${logo});
   background: ${({ theme }) => theme.color.linearGradientPurple};

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -1,4 +1,5 @@
 export const color = {
+  purpleNormal: '#8653ab',
   purpleDark: '#47346d',
   purpleDarker: '#272038',
   purpleLight: '#b796d0',

diff --git a/src/styles/global.tsx b/src/styles/global.tsx
@@ -13,6 +13,7 @@ const style = css`
     width: 100%;
     height: 100%;
     max-width: 768px;
+    margin: 0 auto;
   }
   #modal-root {
     position: absolute;