chore: app qa (#develop)

Author: createhb21

services/ahhachul.com/src/components/domain/home/panel/rankHashtag/RankHashtag.component.tsx

@@ -1,6 +1,7 @@
 import { NoticeGraphic } from '@/assets/graphics';
 import { useAuth } from '@/contexts';
 import { useFetchUserProfile } from '@/services/user';
+import { StackFlow } from '@/stackflow';
 
 import * as S from './RankHashtag.styled';
 
@@ -12,6 +13,12 @@ interface Hashtag {
 }
 
 const MOCK_RANKING: Hashtag[] = [
+  {
+    id: 0,
+    title: '1호선 빌런',
+    upRank: 4,
+    downRank: 3,
+  },
   {
     id: 1,
     title: '2호선 연착',
@@ -36,12 +43,6 @@ const MOCK_RANKING: Hashtag[] = [
     upRank: 18,
     downRank: 3,
   },
-  {
-    id: 5,
-    title: '우크라이나',
-    upRank: 4,
-    downRank: 3,
-  },
 ];
 
 const RankHashtag = () => {
@@ -61,13 +62,19 @@ const RankHashtag = () => {
         </S.TopRankBox>
         <S.RankList>
           {MOCK_RANKING.map((item, idx) => (
-            <S.RankContent key={item.id}>
-              <div>
-                <span>{idx + 1}</span>
-                <b>{item.title}</b>
-              </div>
-              <span>{'-'}</span>
-            </S.RankContent>
+            <StackFlow.Link
+              key={item.id}
+              activityName="HashtagPage"
+              activityParams={{ keyword: item.title }}
+            >
+              <S.RankContent>
+                <div>
+                  <span>{idx + 1}</span>
+                  <b>{item.title}</b>
+                </div>
+                <span>{'-'}</span>
+              </S.RankContent>
+            </StackFlow.Link>
           ))}
         </S.RankList>
       </S.HashtagList>

services/ahhachul.com/src/components/domain/home/panel/rankHashtag/RankHashtag.styled.ts

@@ -9,6 +9,7 @@ import { mixins } from '@/styles';
 
 export const Container = styled.div`
   ${({ theme }) => css`
+    ${mixins.pagePaddingBottom};
     background-color: ${theme.colors.gray[20]};
 
     b {

services/ahhachul.com/src/components/domain/home/panel/subwayNews/SubwayNews.component.tsx

@@ -1,6 +1,7 @@
 import { subwayIconMap } from '@/constants';
 import { useAuth } from '@/contexts';
 import { useFetchUserProfile } from '@/services/user';
+import { StackFlow } from '@/stackflow';
 
 import * as S from './SubwayNews.styled';
 
@@ -64,37 +65,43 @@ const SubwayNews = () => {
       <b>실시간 지하철 뉴스</b>
       <S.NewsList>
         {MOCK_NEWS.map(news => (
-          <S.Article key={news.id}>
-            <S.Container>
-              <S.ContentWrapper>
-                <S.TextContainer>
-                  <S.Title>{news.title}</S.Title>
-                </S.TextContainer>
-                <S.MetaContainer>
-                  <S.MetaInfo>
-                    {news.lineNumber && (
-                      <>
-                        {subwayIconMap.get(news.lineNumber)}
-                        <S.StyledDotIcon />
-                      </>
-                    )}
-                    <span>{news.timeElapsed}</span>
-                  </S.MetaInfo>
-                </S.MetaContainer>
-              </S.ContentWrapper>
-              <S.ImageContainer>
-                {news?.thumbnailUrl && (
-                  <S.PostImage
-                    width="100%"
-                    height="100%"
-                    effect="opacity"
-                    src={news.thumbnailUrl || '/placeholder.svg'}
-                    alt={`${news.title} - ${news.timeElapsed}`}
-                  />
-                )}
-              </S.ImageContainer>
-            </S.Container>
-          </S.Article>
+          <StackFlow.Link
+            key={news.id}
+            activityName="NewsDetailPage"
+            activityParams={{ newsId: news.id }}
+          >
+            <S.Article>
+              <S.Container>
+                <S.ContentWrapper>
+                  <S.TextContainer>
+                    <S.Title>{news.title}</S.Title>
+                  </S.TextContainer>
+                  <S.MetaContainer>
+                    <S.MetaInfo>
+                      {news.lineNumber && (
+                        <>
+                          {subwayIconMap.get(news.lineNumber)}
+                          <S.StyledDotIcon />
+                        </>
+                      )}
+                      <span>{news.timeElapsed}</span>
+                    </S.MetaInfo>
+                  </S.MetaContainer>
+                </S.ContentWrapper>
+                <S.ImageContainer>
+                  {news?.thumbnailUrl && (
+                    <S.PostImage
+                      width="100%"
+                      height="100%"
+                      effect="opacity"
+                      src={news.thumbnailUrl || '/placeholder.svg'}
+                      alt={`${news.title} - ${news.timeElapsed}`}
+                    />
+                  )}
+                </S.ImageContainer>
+              </S.Container>
+            </S.Article>
+          </StackFlow.Link>
         ))}
       </S.NewsList>
     </S.SubwayNews>

services/ahhachul.com/src/components/domain/home/stations/subwayLineFilter/SubwayLineFilter.styled.ts

@@ -9,31 +9,28 @@ export const filters = [
   ({ colors: { gray } }: Theme) => ({
     backgroundColor: gray[100],
     marginBottom: '32px',
-
-    '& > li': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 'max-content',
-      height: '32px',
-      borderRadius: 999999,
-      padding: '0 8px',
-      marginRight: '12px',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    },
   }),
 ] as Interpolation<Theme>;
 
+export const inherit = (line: number) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: line < 10 ? '28px' : 'max-content',
+  height: '28px',
+  borderRadius: 999999,
+  padding: '0 8px',
+  marginRight: '12px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  transition: 'background-color 0.4s ease-in-out',
+  backgroundColor: subwayLineHexColors(line),
+});
+
 export const filterBtn = (length: number) => ({
   color: 'white',
   fontSize: length >= 4 ? '12px' : '14px',
   fontWeight: 600,
   letterSpacing: '-0.2px',
 });
-
-export const inherit = (line: number) => ({
-  transition: 'background-color 0.4s ease-in-out',
-  background: subwayLineHexColors(line),
-});

services/ahhachul.com/src/components/layout/ComposedLayout.component.tsx

@@ -7,14 +7,20 @@ import * as S from './ComposedLayout.styled';
 
 interface ComposedLayoutProps extends ComponentProps<typeof AppScreen> {
   children: ReactNode;
-  outerChildren: ReactNode;
+  outerChildren?: ReactNode;
+  navigationSlot?: boolean;
 }
 
-const ComposedLayout = ({ children, outerChildren, ...props }: ComposedLayoutProps) => {
+const ComposedLayout = ({
+  children,
+  outerChildren,
+  navigationSlot = true,
+  ...props
+}: ComposedLayoutProps) => {
   return (
-    <S.ComposedLayout>
+    <S.ComposedLayout data-vaul-drawer-wrapper="true">
       {outerChildren}
-      <LayoutComponent.Base navigationSlot {...props}>
+      <LayoutComponent.Base navigationSlot={navigationSlot} {...props}>
         {children}
       </LayoutComponent.Base>
     </S.ComposedLayout>

services/ahhachul.com/src/constants/filter.ts

@@ -4,4 +4,5 @@ export const APP_UNIQUE_FILTER_ID_LIST: Record<AppUniqueFilterId, AppUniqueFilte
   CommunityPage: 'CommunityPage',
   LostFoundPage: 'LostFoundPage',
   ComplaintPage: 'ComplaintPage',
+  HashtagPage: 'HashtagPage',
 } as const;

services/ahhachul.com/src/constants/path.ts

@@ -66,6 +66,16 @@ export const PATH = {
     edit: '/comments/:commentId/edit',
     reply: '/comments/:commentId/reply',
   },
+
+  /** 뉴스 */
+  news: {
+    detail: '/news/:newsId',
+  },
+
+  /** 해시태그 */
+  hashtag: {
+    home: '/hashtag',
+  },
 } as const;
 
 export const MAIN_PATHS: KeyOf<TypeActivities>[] = [

services/ahhachul.com/src/pages/hashtag/index.ts

@@ -0,0 +1 @@
+export { default as HashtagPage } from './page';

services/ahhachul.com/src/pages/hashtag/page.tsx

@@ -0,0 +1,90 @@
+import React, { useReducer } from 'react';
+
+import styled from '@emotion/styled';
+import { useActivity } from '@stackflow/react';
+
+import { HeaderComponent, LayoutComponent, UiComponent } from '@/components';
+import { CommunityType, SubwayLineFilterOptions } from '@/types';
+
+const SearchedListSkeleton = React.lazy(
+  () => import('@/components/domain/community/searchResults/skeleton/SearchedList.skeleton'),
+);
+const SearchedList = React.lazy(
+  () => import('@/components/domain/community/searchResults/searchedList/SearchedList.component'),
+);
+
+const HashtagPage = ({ params: { keyword } }: any) => {
+  const { isActive } = useActivity();
+  const [isScale, toggleScale] = useReducer(scale => !scale, false);
+
+  return (
+    <LayoutComponent.Composed
+      navigationSlot={false}
+      appBar={{
+        renderLeft: HeaderComponent.HeaderBrand,
+        renderRight: HeaderComponent.HeaderActions,
+      }}
+      outerChildren={
+        <>
+          <Motion isScale />
+          <FilterGroup isScale isActive={isActive}>
+            <UiComponent.SearchInput uniqueId="HashtagPage" toggleScale={toggleScale} />
+          </FilterGroup>
+        </>
+      }
+    >
+      <UiComponent.SuspenseQueryBoundary
+        keys={[keyword]}
+        errorFallback={<div />}
+        suspenseFallback={<SearchedListSkeleton isScale={isScale} />}
+      >
+        <SearchedList
+          keyword={keyword}
+          filters={{
+            communityType: CommunityType.FREE,
+            subwayLineId: SubwayLineFilterOptions.ALL_LINES,
+          }}
+          isScale
+        />
+      </UiComponent.SuspenseQueryBoundary>
+    </LayoutComponent.Composed>
+  );
+};
+
+interface MotionProps {
+  isScale: boolean;
+}
+
+const Motion = styled.div<MotionProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 58px;
+  z-index: 40;
+  background-color: white;
+  transition: background-color 0.15s ease;
+`;
+
+interface FilterGroupProps {
+  isScale: boolean;
+  isActive: boolean;
+}
+
+const FilterGroup = styled.div<FilterGroupProps>`
+  position: fixed;
+  top: 58px;
+  left: 0;
+  flex-direction: column;
+  width: 100%;
+  gap: 9px;
+  transform: translateY(-42px);
+  transition: all 0.4s ease;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray[20]};
+  background-color: ${({ theme }) => theme.colors.white};
+  padding-bottom: 16px;
+  z-index: 50;
+  display: ${({ isActive }) => (isActive ? 'flex' : 'none')};
+`;
+
+export default HashtagPage;

services/ahhachul.com/src/pages/index.ts

@@ -1,4 +1,6 @@
 import { EditCommentPage, NewCommentReplyPage } from './comment';
+import { HashtagPage } from './hashtag';
+import { NewsDetailPage } from './news';
 import { NotificationPage, NotificationSettingPage } from './notification';
 import { TalkPage, TalkDetailPage, TalkSettingPage } from './talk';
 
@@ -10,6 +12,8 @@ export const SharingPages = {
   NotificationSettingPage,
   EditCommentPage,
   NewCommentReplyPage,
+  NewsDetailPage,
+  HashtagPage,
 } as const;
 
 export * as MyPages from './my';