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

…IRVANA_Gidong into feat/profile/followButton
prgrms-fe-devcourse · Sep 23, 2023 · ea81301 · ea81301
2 parents 69a1af0 + 7174a7c
commit ea81301
Show file tree

Hide file tree

Showing 25 changed files with 433 additions and 189 deletions.
diff --git a/index.html b/index.html
@@ -6,13 +6,24 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0" />
     <title>NIRVANA</title>
-    <link rel="icon" href="/assets/favicon.ico">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0,-25" />
-    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css" />
+    <link
+      rel="icon"
+      href="/assets/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0,-25" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css" />
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script
       type="module"
       src="/src/main.tsx"></script>

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   StyledDeemBackground,
@@ -32,40 +32,48 @@ const Alert = ({
   nextPageLink
 }: Partial<AlertProps>) => {
   const [disabled, setDisabled] = useState(false);
+  const [domReady, setDomReady] = useState(false);
 
-  return createPortal(
-    <StyledDeemBackground disabled={disabled}>
-      <StyledAlertBackground
-        width={width}
-        height={height}>
-        <IconContainer emojiSize={emojiSize}>{emoji}</IconContainer>
-        <ContentContainer contentFontSize={contentFontSize}>
-          <p>{content}</p>
-          <NavButtonContainer onClick={() => setDisabled(true)}>
-            {nextPageLink ? (
-              <Link pageLink={nextPageLink}>
+  useEffect(() => {
+    setDomReady(true);
+  }, []);
+
+  return (
+    domReady &&
+    createPortal(
+      <StyledDeemBackground disabled={disabled}>
+        <StyledAlertBackground
+          width={width}
+          height={height}>
+          <IconContainer emojiSize={emojiSize}>{emoji}</IconContainer>
+          <ContentContainer contentFontSize={contentFontSize}>
+            {content}
+            <NavButtonContainer onClick={() => setDisabled(true)}>
+              {nextPageLink ? (
+                <Link pageLink={nextPageLink}>
+                  <Button
+                    width={300}
+                    height={50}
+                    dark={true}
+                    bold={true}
+                    label={buttonLabel}
+                  />
+                </Link>
+              ) : (
                 <Button
                   width={300}
                   height={50}
                   dark={true}
                   bold={true}
                   label={buttonLabel}
                 />
-              </Link>
-            ) : (
-              <Button
-                width={300}
-                height={50}
-                dark={true}
-                bold={true}
-                label={buttonLabel}
-              />
-            )}
-          </NavButtonContainer>
-        </ContentContainer>
-      </StyledAlertBackground>
-    </StyledDeemBackground>,
-    document.getElementById('root-modal')
+              )}
+            </NavButtonContainer>
+          </ContentContainer>
+        </StyledAlertBackground>
+      </StyledDeemBackground>,
+      document.getElementById('root-modal')
+    )
   );
 };
 export default Alert;
diff --git a/src/components/Confirm/Confirm.tsx b/src/components/Confirm/Confirm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Link } from '../Link';
 import {
@@ -30,32 +30,38 @@ const Confirm = ({
   ConfirmButton
 }: Partial<ConfirmProps>) => {
   const [disabled, setDisabled] = useState(false);
+  const [domReady, setDomReady] = useState(false);
+
   const FormedCancelButton =
     typeof CancelButton === 'function' ? CancelButton() : CancelButton;
   const FormedConfirmlButton =
     typeof ConfirmButton === 'function' ? ConfirmButton() : ConfirmButton;
-  return createPortal(
-    <StyledDeemBackground disabled={disabled}>
-      <StyledConfirmBackground
-        width={330}
-        height={390}>
-        <IconContainer emojiSize={80}>{emoji}</IconContainer>
-        <ContentContainer contentFontSize={contentFontSize}>
-          {content}
-          <NavButtonContainer>
-            <CancelButtonDefaultEvent onClick={() => setDisabled(true)}>
-              {FormedCancelButton}
-            </CancelButtonDefaultEvent>
-            <Link
-              pageLink={nextPageLink}
-              state={{ ...linkState }}>
-              {FormedConfirmlButton}
-            </Link>
-          </NavButtonContainer>
-        </ContentContainer>
-      </StyledConfirmBackground>
-    </StyledDeemBackground>,
-    document.getElementById('root-modal')
+
+  useEffect(() => {
+    setDomReady(true);
+  }, []);
+
+  return (
+    domReady &&
+    createPortal(
+      <StyledDeemBackground disabled={disabled}>
+        <StyledConfirmBackground
+          width={330}
+          height={390}>
+          <IconContainer emojiSize={80}>{emoji}</IconContainer>
+          <ContentContainer contentFontSize={contentFontSize}>
+            {content}
+            <NavButtonContainer>
+              <CancelButtonDefaultEvent onClick={() => setDisabled(true)}>
+                {CancelButton}
+              </CancelButtonDefaultEvent>
+              <Link pageLink={nextPageLink}>{ConfirmButton}</Link>
+            </NavButtonContainer>
+          </ContentContainer>
+        </StyledConfirmBackground>
+      </StyledDeemBackground>,
+      document.getElementById('root-modal')
+    )
   );
 };
 export default Confirm;
diff --git a/src/components/PostPreview/PostHeader.tsx b/src/components/PostPreview/PostHeader.tsx
@@ -22,7 +22,7 @@ const PostHeader = ({
   totalComments,
   noneProfile
 }: PostHeaderProps) => {
-  const { image, author, createdAt } = post;
+  const { author, createdAt } = post;
   const iconDescription = [
     { name: 'favorite', size: 12, total: totalLikes },
     { name: 'chat', size: 12, total: totalComments }
@@ -37,7 +37,7 @@ const PostHeader = ({
             color='black'>
             <Avatar
               alt={'유저 프로필'}
-              src={image}
+              src={author.image}
               size={35}
             />
           </Link>

diff --git a/src/hooks/useSessionStorage.ts b/src/hooks/useSessionStorage.ts
@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 
 function useSessionStorage<T>(
   key: string,
-  initialValue?: T
-): [T, React.Dispatch<React.SetStateAction<T>>] {
+  initialValue: T
+): [T, React.Dispatch<React.SetStateAction<T>>, () => void] {
   const storedValue = sessionStorage.getItem(key);
   const initial = storedValue ? JSON.parse(storedValue) : initialValue;
   const [value, setValue] = useState<T>(initial);
@@ -12,7 +12,11 @@ function useSessionStorage<T>(
     sessionStorage.setItem(key, JSON.stringify(value));
   }, [key, value]);
 
-  return [value, setValue];
+  const removeValue = () => {
+    sessionStorage.removeItem(key);
+  };
+
+  return [value, setValue, removeValue];
 }
 
 export default useSessionStorage;
diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx
@@ -0,0 +1,37 @@
+import { Link } from '@components/Link';
+import { Button } from '@components/Button';
+import { LandingMain } from '@pages/landing/Landing.style';
+import {
+  StyledAlertBackground,
+  IconContainer,
+  ContentContainer,
+  NavButtonContainer
+} from '@components/Alert/Alert.style';
+
+const NotFound = () => {
+  return (
+    <LandingMain>
+      <StyledAlertBackground
+        width={330}
+        height={390}>
+        <IconContainer emojiSize={80}>{'😢'}</IconContainer>
+        <ContentContainer contentFontSize={16}>
+          {'404! 잘못된 페이지 접근이에요!'}
+          <NavButtonContainer>
+            <Link pageLink={'/'}>
+              <Button
+                width={300}
+                height={50}
+                dark={true}
+                bold={true}
+                label={'메인화면으로 이동하기'}
+              />
+            </Link>
+          </NavButtonContainer>
+        </ContentContainer>
+      </StyledAlertBackground>
+    </LandingMain>
+  );
+};
+
+export default NotFound;
diff --git a/src/pages/NotFound/index.ts b/src/pages/NotFound/index.ts
@@ -0,0 +1,3 @@
+import NotFound from './NotFound';
+
+export default NotFound;
diff --git a/src/pages/profile/Profile.style.ts b/src/pages/profile/Profile.style.ts
@@ -2,8 +2,11 @@ import styled from '@emotion/styled';
 
 export const ProfilePage = styled.div`
   display: flex;
+  position: relative;
   flex-direction: column;
+  width: 100%;
   height: 100%;
+  overflow: hidden;
 `;
 
 export const ProfileInfoContainer = styled.div`

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -1,5 +1,5 @@
 import createTabItems from './utils/createTabItems';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { getUser } from '@apis/user';
 import { useLocation, useParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
@@ -10,12 +10,14 @@ import {
   ProfileInfo,
   ProfileCover,
   ProfileMain,
-  ProfileEdit
+  ProfileEdit,
+  SettingSideBar
 } from '@pages/profile/components';
 
 const Profile = () => {
   const { userId } = useParams<{ userId: string }>();
   const location = useLocation();
+  const [sideBarOpened, setSideBarOpened] = useState(false);
   const [editMode, setEditMode] = useRecoilState(editModeState);
   useEffect(() => {
     setEditMode(location.hash === '#edit');
@@ -27,10 +29,23 @@ const Profile = () => {
     { enabled: !!userId }
   );
 
+  const openSidebar = () => {
+    setSideBarOpened(true);
+  };
+
+  const closeSidebar = () => {
+    console.log('close');
+    setSideBarOpened(false);
+  };
+
   const tabItems = createTabItems(data, isLoading);
 
   return (
     <ProfilePage>
+      <SettingSideBar
+        sideBarOpened={sideBarOpened}
+        closeSidebar={closeSidebar}
+      />
       <ProfileCover
         refetch={() => refetch()}
         src={isLoading ? '' : data.coverImage}
@@ -46,7 +61,11 @@ const Profile = () => {
         {editMode ? (
           <ProfileEdit refetch={() => refetch()} />
         ) : (
-          <ProfileMain tabItems={tabItems} />
+          <ProfileMain
+            tabItems={tabItems}
+            openSidebar={openSidebar}
+            fullName={isLoading ? '' : data.fullName}
+          />
         )}
       </ProfileInfoContainer>
     </ProfilePage>

diff --git a/src/pages/profile/components/MeditationInfo.tsx b/src/pages/profile/components/MeditationInfo.tsx
@@ -2,28 +2,23 @@ import { MeditationInfoSection } from './MeditationInfo.style';
 import { MeditationInfoItem } from '@pages/profile/components';
 
 interface MeditationInfoProps {
-  totalMeditationCount: number;
-  totalMeditationTime: number;
+  data: number[];
   fullName: string;
 }
 
-const MeditationInfo = ({
-  totalMeditationCount,
-  totalMeditationTime,
-  fullName
-}: MeditationInfoProps) => {
+const MeditationInfo = ({ data, fullName }: MeditationInfoProps) => {
   return (
     <MeditationInfoSection>
       <MeditationInfoItem icon='🧘🏻'>
         <p>
-          <strong>{fullName}</strong> 님은 총 <b>{totalMeditationCount}</b>번의
-          명상을 진행했어요.
+          <strong>{fullName}</strong> 님은 총 <b>{data[0]}</b>번의 명상을
+          진행했어요.
         </p>
       </MeditationInfoItem>
       <MeditationInfoItem icon='⏰'>
         <p>
-          <strong>{fullName}</strong> 님은 총 <b>{totalMeditationTime}</b>분의
-          명상을 하셨어요.
+          <strong>{fullName}</strong> 님은 총 <b>{data[1]}</b>분의 명상을
+          하셨어요.
         </p>
       </MeditationInfoItem>
     </MeditationInfoSection>

diff --git a/src/pages/profile/components/ProfileCarousel.style.ts b/src/pages/profile/components/ProfileCarousel.style.ts
@@ -9,6 +9,5 @@ export const ProfileCarouselContainer = styled.div`
 `;
 
 export const ProfileCarouselItem = styled.div`
-  border: 1px solid #ccc;
   flex: 1 0 100%;
 `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import NotFound from './NotFound';

		export default NotFound;