프로필 페이지 너비 수정 및 스켈레톤 ui 구현 (#352)

* design: 프로필 중앙 정렬 제거 * fix: lint error * design: 프로필 모달 layout 설정 * feat: 프로필 페이지 스켈레톤 ui 구현 * feat: 매너 리뷰 페이지 프로필 스켈레톤 ui 적용 * refactor: 코딩 컨벤션 적용 * chore: 프로필 스켈레톤 ui 고도화 * feat: 팔로우 클릭 이벤트 토스트 알림 추가
Java-and-Script · Nov 27, 2023 · 664f318 · 664f318
1 parent 706ad73
commit 664f318
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 27 deletions.
diff --git a/src/pages/MannerScoreReviewPage/MannerScoreReviewPage.style.ts b/src/pages/MannerScoreReviewPage/MannerScoreReviewPage.style.ts
@@ -48,3 +48,7 @@ type BoxProps = {
 export const Box = styled.div<BoxProps>`
   height: ${(props) => props.height};
 `;
+
+export const ProfileWrapper = styled.div`
+  margin: 0 16px;
+`;
diff --git a/src/pages/MannerScoreReviewPage/MannerScoreReviewPage.tsx b/src/pages/MannerScoreReviewPage/MannerScoreReviewPage.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Profile } from '@pages/ProfilePage/Profile';
+import { ProfileSkeleton } from '@pages/ProfilePage';
+import { Profile } from '@pages/ProfilePage';
 
 import { Avatar } from '@components/Avatar';
 import { Header } from '@components/Header';
@@ -27,6 +28,7 @@ import {
   BackwardWrapper,
   Box,
   MemberListContainer,
+  ProfileWrapper,
   ReviewPageContainer,
   TextWrapper,
 } from './MannerScoreReviewPage.style';
@@ -222,9 +224,15 @@ export const MannerScoreReviewPage = () => {
       </Flex>
       <Modal isOpen={isOpen} close={() => setIsOpen(false)}>
         <Modal.Content>
-          <Profile
-            memberId={teammateList[currentSelectedMemberIndex].memberId}
-          />
+          <ProfileWrapper>
+            <Suspense fallback={<ProfileSkeleton />}>
+              {isOpen && (
+                <Profile
+                  memberId={teammateList[currentSelectedMemberIndex].memberId}
+                />
+              )}
+            </Suspense>
+          </ProfileWrapper>
         </Modal.Content>
       </Modal>
     </ReviewPageContainer>

diff --git a/src/pages/ProfilePage/Profile.tsx b/src/pages/ProfilePage/Profile.tsx
@@ -1,4 +1,5 @@
 import { ReactNode, useState } from 'react';
+import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { Avatar } from '@components/Avatar';
@@ -53,6 +54,7 @@ type NumberedItemProps = {
   count: number;
   icon: ReactNode;
   color?: string;
+  onClick?: () => void;
 };
 
 export const Profile = ({ memberId }: { memberId: Member['id'] }) => {
@@ -134,7 +136,12 @@ export const Profile = ({ memberId }: { memberId: Member['id'] }) => {
               color="black"
             />
           </NumberedItemWrapper>
-          <NumberedItem text="팔로우" icon={<Social />} count={0} />
+          <NumberedItem
+            text="팔로우"
+            icon={<Social />}
+            count={0}
+            onClick={handleClickFollow}
+          />
         </Flex>
         {myId === memberId ? (
           <EventButton
@@ -144,7 +151,7 @@ export const Profile = ({ memberId }: { memberId: Member['id'] }) => {
           />
         ) : (
           <Flex justify="center" gap={10}>
-            <EventButton text="팔로우" onClick={() => console.log('팔로우')} />
+            <EventButton text="팔로우" onClick={handleClickFollow} />
             <EventButton text="대화하기" onClick={handleClickChattingButton} />
           </Flex>
         )}
@@ -179,11 +186,8 @@ export const Profile = ({ memberId }: { memberId: Member['id'] }) => {
               : '없음'}
           </CrewGroup>
         </ProfileField>
-        <ProfileField category="획득한 뱃지">{'없음'}</ProfileField>
         <ProfileField category="자기소개">
-          <Introduce>
-            <Text>{profile.introduction}</Text>
-          </Introduce>
+          <Introduce>{profile.introduction}</Introduce>
         </ProfileField>
       </FlexItem>
       <Modal isOpen={isModalOpen} close={() => setIsModalOpen(false)}>
@@ -202,7 +206,7 @@ export const Profile = ({ memberId }: { memberId: Member['id'] }) => {
   );
 };
 
-const ProfileField = ({ category, children }: ProfileFieldProps) => {
+export const ProfileField = ({ category, children }: ProfileFieldProps) => {
   return (
     <ProfileFieldContainer>
       <Text size="1.2rem" weight={700}>
@@ -217,7 +221,7 @@ const ProfileField = ({ category, children }: ProfileFieldProps) => {
 
 const EventButton = ({ text, width, onClick }: EventButtonProps) => (
   <Button
-    width={width ?? '160px'}
+    width={width ?? '50%'}
     height="32px"
     backgroundColor="white"
     textColor={theme.PALETTE.GRAY_400}
@@ -231,9 +235,15 @@ const EventButton = ({ text, width, onClick }: EventButtonProps) => (
   </Button>
 );
 
-const NumberedItem = ({ text, count, icon, color }: NumberedItemProps) => {
+const NumberedItem = ({
+  text,
+  count,
+  icon,
+  color,
+  onClick,
+}: NumberedItemProps) => {
   return (
-    <PointerFlex direction="column" align="center" gap={4}>
+    <PointerFlex direction="column" align="center" gap={4} onClick={onClick}>
       <Text size={12} color={theme.PALETTE.GRAY_400}>
         {text}
       </Text>
@@ -244,3 +254,9 @@ const NumberedItem = ({ text, count, icon, color }: NumberedItemProps) => {
     </PointerFlex>
   );
 };
+
+const handleClickFollow = () => {
+  toast('차후에 업데이트될 기능입니다!', {
+    icon: '👏',
+  });
+};
diff --git a/src/pages/ProfilePage/ProfilePage.style.ts b/src/pages/ProfilePage/ProfilePage.style.ts
@@ -1,20 +1,16 @@
 import styled from '@emotion/styled';
 
 import { Flex } from '@components/shared/Flex';
-
-const MAX_WIDTH = '480px';
+import { Text } from '@components/shared/Text';
 
 export const ProfileContainer = styled.div`
   ${({ theme }) => theme.STYLES.LAYOUT}
   min-height: 100dvh;
   display: flex;
-  justify-content: center;
 `;
 
 export const Main = styled.div`
   margin: 10px 0;
-  display: flex;
-  justify-content: center;
   width: 100%;
 `;
 
@@ -40,7 +36,6 @@ export const ItemBox = styled.div<{ border?: string }>`
 `;
 
 export const ProfileFieldContainer = styled.div`
-  max-width: ${MAX_WIDTH};
   width: 100%;
 `;
 
@@ -52,15 +47,13 @@ export const CrewGroup = styled.div`
   flex-wrap: wrap;
 `;
 
-export const Introduce = styled.div`
+export const Introduce = styled(Text)`
   background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
   border-radius: 20px;
   width: 100%;
   padding: 16px;
-  display: inline-block;
-  & > p {
-    white-space: pre-wrap;
-  }
+  white-space: pre-wrap;
+  word-break: break-all;
 `;
 
 export const PointerFlex = styled(Flex)`

diff --git a/src/pages/ProfilePage/ProfilePageSkeleton.tsx b/src/pages/ProfilePage/ProfilePageSkeleton.tsx
@@ -0,0 +1,11 @@
+import { Header } from '@components/Header';
+
+import { ProfileContainer } from './ProfilePage.style';
+import { ProfileSkeleton } from './ProfileSkeleton';
+
+export const ProfilePageSkeleton = () => (
+  <ProfileContainer>
+    <Header isLogo={false} isRightContainer={true} />
+    <ProfileSkeleton />
+  </ProfileContainer>
+);
diff --git a/src/pages/ProfilePage/ProfileSkeleton.tsx b/src/pages/ProfilePage/ProfileSkeleton.tsx
@@ -0,0 +1,59 @@
+import { Skeleton } from '@components/Skeleton';
+import { Flex } from '@components/shared/Flex';
+
+import { theme } from '@styles/theme';
+
+import { FlexItem, Main } from './ProfilePage.style';
+
+export const ProfileSkeleton = () => (
+  <Main>
+    <Skeleton
+      width="100%"
+      height="30px"
+      radius="5px"
+      defaultColor={theme.PALETTE.GRAY_100}
+      gradientColor={theme.PALETTE.GRAY_200}
+    >
+      <FlexItem>
+        <Flex align="flex-end" gap={8}>
+          <Skeleton.Item width="70px" height="24px" />
+          <Skeleton.Item width="72px" height="17px" />
+        </Flex>
+        <Flex justify="center" gap={40} align="center">
+          <Skeleton.Item width="100px" height="100px" radius="50px" />
+          <Skeleton.Item width="58px" height="78px" />
+          <Skeleton.Item width="35px" height="78px" />
+        </Flex>
+
+        <Flex justify="center" gap={10}>
+          <Skeleton.Item width="50%" radius="0.75rem" height="32px" />
+          <Skeleton.Item width="50%" radius="0.75rem" height="32px" />
+        </Flex>
+        <Flex gap={7} direction="column">
+          <Skeleton.Item width="56px" height="20px" />
+          <Flex gap={10} flexWrap="wrap">
+            {Array(2)
+              .fill(null)
+              .map((_, index) => (
+                <Skeleton.Item width="45px" height="45px" key={index} />
+              ))}
+          </Flex>
+        </Flex>
+        <Flex gap={7} direction="column">
+          <Skeleton.Item width="80px" height="20px" />
+          <Flex gap={10} flexWrap="wrap">
+            {Array(3)
+              .fill(null)
+              .map((_, index) => (
+                <Skeleton.Item width="45px" height="45px" key={index} />
+              ))}
+          </Flex>
+        </Flex>
+        <Flex gap={7} direction="column">
+          <Skeleton.Item width="92px" height="20px" />
+          <Skeleton.Item width="100%" height="32px" radius="20px" />
+        </Flex>
+      </FlexItem>
+    </Skeleton>
+  </Main>
+);
diff --git a/src/pages/ProfilePage/index.ts b/src/pages/ProfilePage/index.ts
@@ -1 +1,4 @@
 export * from './ProfilePage';
+export * from './ProfilePageSkeleton';
+export * from './ProfileSkeleton';
+export * from './Profile';
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
@@ -6,6 +6,7 @@ import { CrewsDetailPageLoading } from '@pages/CrewsDetailPage';
 import { GamesDetailPageLoading } from '@pages/GamesDetailPage';
 import { Layout } from '@pages/Layout';
 import { MainPageLoading } from '@pages/MainPage';
+import { ProfilePageSkeleton } from '@pages/ProfilePage';
 import { CardListPageSkeleton } from '@pages/__components__/CardListPageSkeleton';
 import { ManagePageSkeleton } from '@pages/__components__/ManagePageSkeleton';
 
@@ -176,7 +177,11 @@ export const router = createBrowserRouter([
       },
       {
         path: 'profile/:id',
-        element: <ProfilePage />,
+        element: (
+          <Suspense fallback={<ProfilePageSkeleton />}>
+            <ProfilePage />
+          </Suspense>
+        ),
       },
       { path: 'profile/update', element: <h1>프로필 수정 페이지</h1> },
       {