Merge pull request #189 from SugarSyrup/feature/#187

Feature/#187 마이페이지 UI 업데이트
yeodahui · Jul 18, 2024 · 5e46cc8 · 5e46cc8
2 parents 3a76836 + b4a5afd
commit 5e46cc8
Show file tree

Hide file tree

Showing 17 changed files with 365 additions and 336 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
     "recoil": "^0.7.7",
     "sortablejs": "^1.15.2",
     "styled-components": "^6.1.8",
-    "use-long-press": "^3.2.0"
+    "use-long-press": "^3.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
     "@types/blueimp-load-image": "^5.16.6",

diff --git a/src/assets/icons/bell_pin_fill.svg b/src/assets/icons/bell_pin_fill.svg
diff --git a/src/assets/icons/chevron_right_expand.svg b/src/assets/icons/chevron_right_expand.svg
diff --git a/src/components/profile/TripItem/index.tsx b/src/components/profile/TripItem/index.tsx
@@ -45,19 +45,22 @@ function TripItem({ id, title, location, departureDate, arrivalDate, thumbnailUR
         </S.ThumbnailWrapper>
         <S.Info>
           <S.Name>
-            <Typography.Title size="md" noOfLine={2}>
+            <Typography.Title size="md" noOfLine={2} color="inherit">
               {title}
             </Typography.Title>
           </S.Name>
           <S.Desc>
-            <CalendarIcon />{' '}
-            <Typography.Label size="md" color="#424242">
-              {departureDate} ~ {arrivalDate}
+            <CalendarIcon />
+            <Typography.Label size="md" color="inherit">
+              {departureDate.replace('-', '.').replace('-', '.')} ~{' '}
+              {arrivalDate.slice(0, 4) === departureDate.slice(0, 4)
+                ? arrivalDate.slice(5).replace('-', '.').replace('-', '.')
+                : arrivalDate.replace('-', '.').replace('-', '.')}
             </Typography.Label>
           </S.Desc>
           <S.Desc>
-            <LocationIcon />{' '}
-            <Typography.Label size="md" color="#424242">
+            <LocationIcon />
+            <Typography.Label size="md" color="inherit">
               {location.toLocaleString()}
             </Typography.Label>
           </S.Desc>

diff --git a/src/components/profile/TripItem/style.ts b/src/components/profile/TripItem/style.ts
@@ -16,8 +16,8 @@ export const Container = styled.li`
 `;
 
 export const ThumbnailWrapper = styled.div`
-  width: 70px;
-  height: 70px;
+  width: 68px;
+  height: 68px;
   position: relative;
 
   flex-shrink: 0;
@@ -51,10 +51,11 @@ export const Name = styled.span`
   font-weight: 600;
 
   margin-bottom: 3px;
+  color: ${({ theme }) => theme.colors.font.primary};
 `;
 
 export const Desc = styled.span`
-  color: ${({ theme }) => theme.gray01};
+  color: ${({ theme }) => theme.colors.font.secondary};
   font-size: 10px;
   font-weight: 500;
 

diff --git a/src/components/profile/TripList/index.tsx b/src/components/profile/TripList/index.tsx
@@ -23,8 +23,8 @@ function TripList() {
 
   return (
     <S.List>
-      {data.map((trip) => (
-        <TripItem {...trip} />
+      {data.map((trip, index) => (
+        <TripItem {...trip} key={`${trip.id} ${index}`} />
       ))}
     </S.List>
   );

diff --git a/src/components/profile/UserActivity/index.tsx b/src/components/profile/UserActivity/index.tsx
@@ -8,7 +8,7 @@ import UserCommentsList from '../UserCommentsList';
 
 import { get, post } from '../../../utils/api';
 
-export interface articleResponseType {
+export interface ArticleResponseType {
   next: string | null;
   previous: string | null;
   results: {
@@ -22,21 +22,7 @@ export interface articleResponseType {
   }[];
 }
 
-export interface shortsResponseType {
-  next: string | null;
-  previous: string | null;
-  results: {
-    id: number;
-    title: string;
-    nickname: string;
-    avatarURL: string;
-    videoId: string;
-    clapCount: number;
-    commentCount: number;
-  }[];
-}
-
-export interface commentsResponseType {
+export interface CommentsResponseType {
   next: string | null;
   previous: string | null;
   results: {
@@ -48,65 +34,49 @@ export interface commentsResponseType {
 
 function UserActivity() {
   const [actFilter, setActFilter] = useState<'clap' | 'comment'>('clap');
-  const [postFilter, setPostFilter] = useState<'short-form' | 'article'>('article');
   const [next, setNext] = useState<string | null>(null);
   const [data, setData] = useState<
-    articleResponseType['results'] | shortsResponseType['results'] | commentsResponseType['results']
+    ArticleResponseType['results'] | CommentsResponseType['results']
   >([]);
 
   const dataContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (actFilter === 'clap' && postFilter === 'short-form') {
-      get<shortsResponseType>(
-        `/user/profile/my-activity?sort=${actFilter}&community=${postFilter}`,
-      ).then((response) => {
-        setData(response.data.results);
-        setNext(response.data.next);
-      });
-    } else if (actFilter === 'clap' && postFilter === 'article') {
-      get<articleResponseType>(
-        `/user/profile/my-activity?sort=${actFilter}&community=${postFilter}`,
+    if (actFilter === 'clap') {
+      get<ArticleResponseType>(
+        `/user/profile/my-activity?sort=${actFilter}&community=article`,
       ).then((response) => {
         setData(response.data.results);
         setNext(response.data.next);
       });
     } else {
-      get<commentsResponseType>(
-        `/user/profile/my-activity?sort=${actFilter}&community=${postFilter}`,
+      get<CommentsResponseType>(
+        `/user/profile/my-activity?sort=${actFilter}&community=article`,
       ).then((response) => {
         setData(response.data.results);
         setNext(response.data.next);
       });
     }
-  }, [actFilter, postFilter]);
+  }, [actFilter]);
 
   useEffect(() => {
     let observer = new IntersectionObserver(() => {});
 
     if (dataContainerRef.current) {
       observer = new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting && next) {
-          if (actFilter === 'clap' && postFilter === 'short-form') {
-            get<shortsResponseType>(next).then((response) => {
-              setData((prev) => {
-                const prevData = prev as shortsResponseType['results'];
-                return [...prevData, ...response.data.results];
-              });
-              setNext(response.data.next);
-            });
-          } else if (actFilter === 'clap' && postFilter === 'article') {
-            get<articleResponseType>(next).then((response) => {
+          if (actFilter === 'clap') {
+            get<ArticleResponseType>(next).then((response) => {
               setData((prev) => {
-                const prevData = prev as articleResponseType['results'];
+                const prevData = prev as ArticleResponseType['results'];
                 return [...prevData, ...response.data.results];
               });
               setNext(response.data.next);
             });
           } else {
-            get<commentsResponseType>(next).then((response) => {
+            get<CommentsResponseType>(next).then((response) => {
               setData((prev) => {
-                const prevData = prev as commentsResponseType['results'];
+                const prevData = prev as CommentsResponseType['results'];
                 return [...prevData, ...response.data.results];
               });
               setNext(response.data.next);
@@ -119,23 +89,17 @@ function UserActivity() {
     }
 
     return () => {
-      observer && observer.disconnect();
+      if (observer) observer.disconnect();
     };
   }, [next, dataContainerRef]);
 
   return (
     <S.Container>
-      <UserActivityFilter setActFilter={setActFilter} setPostFilter={setPostFilter} />
+      <UserActivityFilter setActFilter={setActFilter} actFilter={actFilter} />
       {data !== undefined && actFilter === 'clap' ? (
-        postFilter === 'short-form' ? (
-          <UserClapsPostList data={data as shortsResponseType['results']} type="short-form" />
-        ) : (
-          <UserClapsPostList data={data as articleResponseType['results']} type="article" />
-        )
+        <UserClapsPostList data={data as ArticleResponseType['results']} type="article" />
       ) : (
-        data !== undefined && (
-          <UserCommentsList data={data as commentsResponseType['results']} type={postFilter} />
-        )
+        <UserCommentsList data={data as CommentsResponseType['results']} type="article" />
       )}
 
       <div ref={dataContainerRef} />

diff --git a/src/components/profile/UserActivityFilter/index.tsx b/src/components/profile/UserActivityFilter/index.tsx
@@ -1,30 +1,25 @@
 import { Dispatch } from 'react';
 
 import * as S from './style';
+import Typography from '../../common/Typography';
 
 interface Props {
+  actFilter: 'clap' | 'comment';
   setActFilter: Dispatch<React.SetStateAction<'clap' | 'comment'>>;
-  setPostFilter: Dispatch<React.SetStateAction<'short-form' | 'article'>>;
 }
 
-function UserActivityFilter({ setActFilter, setPostFilter }: Props) {
+function UserActivityFilter({ actFilter, setActFilter }: Props) {
   return (
     <S.FilterList>
-      <S.FilterItem
-        onInput={(e) => {
-          setActFilter(e.currentTarget.value as 'clap' | 'comment');
-        }}
-      >
-        <option value="clap">공감한 글</option>
-        <option value="comment">댓글 단 글</option>
+      <S.FilterItem isActive={actFilter === 'clap'} onClick={() => setActFilter('clap')}>
+        <Typography.Title size="sm" color="inherit">
+          공감한 글
+        </Typography.Title>
       </S.FilterItem>
-      <S.FilterItem
-        onInput={(e) => {
-          setPostFilter(e.currentTarget.value as 'short-form' | 'article');
-        }}
-      >
-        <option value="article">아티클</option>
-        <option value="short-form">숏폼</option>
+      <S.FilterItem isActive={actFilter === 'comment'} onClick={() => setActFilter('comment')}>
+        <Typography.Title size="sm" color="inherit">
+          댓글 단 글
+        </Typography.Title>
       </S.FilterItem>
     </S.FilterList>
   );