feat: 모바일 버전 카테고리 선택하는 탭을 구현해요. - 1

package.json

@@ -29,6 +29,7 @@
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.6.8",
+    "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.2.0",

src/components/timetable/SearchBox.tsx

@@ -1,21 +1,23 @@
 import { css, cva } from '@styled-system/css'
-import { Search } from 'lucide-react'
 import { CSSProperties, useState } from 'react'
+import { HiOutlineSearch } from 'react-icons/hi'
 
+import { vars } from '@/theme/theme.css'
 import { useDeepCompareEffect } from '@/util/hooks/useDeepCompare'
 
 const FormStyle = cva({
   base: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    bgColor: 'bg.gray',
-    rounded: 10,
+    bgColor: 'white',
+    rounded: '6px',
     border: '1px {colors.lightGray.1} solid',
     px: 5,
-    py: 3,
+    py: '0.8125rem',
     color: 'lightGray.1',
     transition: 'all 0.256s',
+    h: '2.8125rem',
   },
   variants: {
     isFocus: {
@@ -59,11 +61,9 @@ const SearchBox = ({ initialKeyword, placeholder, onSubmit, cssProps = {}, reset
         className={css({
           border: 'none',
           outline: 'none',
-          fontSize: 18,
-          fontWeight: 500,
           flexGrow: 1,
-          lineHeight: 1.2,
           color: 'black.2',
+          ...vars.typography.desktop.body1M,
           _placeholder: {
             color: 'lightGray.1',
           },
@@ -75,7 +75,7 @@ const SearchBox = ({ initialKeyword, placeholder, onSubmit, cssProps = {}, reset
         placeholder={placeholder}
       />
       <button type="submit" className={css({ cursor: 'pointer' })}>
-        <Search />
+        <HiOutlineSearch size={20} />
       </button>
     </form>
   )

src/domain/Post/components/FeedItem/index.tsx

@@ -0,0 +1,148 @@
+import { formatDistanceToNow } from 'date-fns'
+import { useCallback } from 'react'
+import { HiOutlineEye } from 'react-icons/hi'
+import { LuBookmark, LuCookie, LuMessageCircle } from 'react-icons/lu'
+import { useNavigate } from 'react-router-dom'
+
+import * as s from './style.css'
+
+import Profile from '@/components/ui/profile'
+import PostCategoryBadge from '@/domain/Post/components/PostCategoryBadge'
+import { PostPreviewWithBoardName } from '@/packages/api/ku-key/models'
+import { vars } from '@/theme/theme.css'
+import { Typography } from '@/ui/Typography'
+
+type Props = Pick<
+  PostPreviewWithBoardName,
+  | 'id'
+  | 'title'
+  | 'content'
+  | 'createdAt'
+  | 'user'
+  | 'views'
+  | 'reactionCount'
+  | 'commentCount'
+  | 'scrapCount'
+  | 'commentCount'
+  | 'scrapCount'
+  | 'myScrap'
+  | 'thumbnailDir'
+  | 'boardName'
+> & {
+  showCommunityBadge?: boolean
+}
+
+const FeedItem = ({
+  id,
+  title,
+  content,
+  createdAt,
+  user,
+  views,
+  reactionCount,
+  commentCount,
+  scrapCount,
+  myScrap,
+  thumbnailDir,
+  boardName,
+  showCommunityBadge,
+}: Props) => {
+  const timeDistance = formatDistanceToNow(createdAt)
+  const navigate = useNavigate()
+  const handleNavigate = useCallback(
+    () => navigate(`/community/${boardName.split(' ')[0].toLowerCase()}/post/${id}`),
+    [navigate, boardName, id],
+  )
+
+  return (
+    <button className={s.Wrapper} onClick={handleNavigate}>
+      <div className={s.ContentsWrapper}>
+        <div className={s.Header}>
+          <div className={s.LeftWrapper}>
+            {showCommunityBadge && <PostCategoryBadge boardName={boardName} />}
+            <Typography typography="headingSB" color="darkGray2">
+              {timeDistance}
+            </Typography>
+          </div>
+          <div className={s.ViewCount}>
+            <HiOutlineEye size={20} />
+            <Typography typography="headingSB" color="darkGray2">
+              {views}
+            </Typography>
+          </div>
+        </div>
+        <Typography
+          mobileTypography="display2SB"
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '100%',
+            textAlign: 'left',
+          }}
+        >
+          {title}
+        </Typography>
+        <Typography
+          typography="body1R"
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            whiteSpace: 'pre-wrap',
+          }}
+          color="darkGray1"
+        >
+          {content}
+        </Typography>
+      </div>
+      <div
+        className={s.FeedInfo}
+        style={{
+          padding: thumbnailDir ? '2.5rem 1.25rem' : '0.625rem 1.25rem',
+          background: thumbnailDir
+            ? `linear-gradient(0deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)), url(${thumbnailDir})`
+            : '',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          borderRadius: thumbnailDir ? '0 0 0.625rem 0.625rem' : '0',
+        }}
+      >
+        <div className={s.User}>
+          <Profile onlyTitle isAnonymous={user.isAnonymous} isDeleted={user.isDeleted} character={user.character} />
+          <Typography mobileTypography="headingSB" color={thumbnailDir ? 'white' : 'darkGray2'}>
+            {user.isAnonymous ? 'Anonymous' : user.username}
+          </Typography>
+        </div>
+        <div className={s.FeedBack}>
+          <div className={s.Icon}>
+            <LuCookie size={20} color={thumbnailDir ? 'white' : 'darkGray2'} />
+            <Typography mobileTypography="headingSB" color={thumbnailDir ? 'white' : 'darkGray2'}>
+              {reactionCount}
+            </Typography>
+          </div>
+          <div className={s.Icon}>
+            <LuMessageCircle size={20} color={thumbnailDir ? 'white' : 'darkGray2'} />
+            <Typography mobileTypography="headingSB" color={thumbnailDir ? 'white' : 'darkGray2'}>
+              {commentCount}
+            </Typography>
+          </div>
+          <div className={s.Icon}>
+            <LuBookmark
+              size={20}
+              fill={myScrap ? vars.color.red2 : 'none'}
+              color={myScrap ? vars.color.red2 : thumbnailDir ? 'white' : 'darkGray2'}
+            />
+            <Typography mobileTypography="headingSB" color={thumbnailDir ? 'white' : 'darkGray2'}>
+              {scrapCount}
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export default FeedItem

src/domain/Post/components/FeedItem/style.css.ts

@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([
+  f.flex,
+  f.directionColumn,
+  f.alignStart,
+  f.wFull,
+  f.cursorPointer,
+  {
+    gap: '2.5rem',
+    paddingTop: '2.5rem',
+    borderRadius: '10px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
+  },
+])
+
+export const ContentsWrapper = style([
+  f.flex,
+  f.directionColumn,
+  f.alignStart,
+  f.wFull,
+  { gap: '1.25rem', padding: '0 1.25rem' },
+])
+
+export const Header = style([f.flex, f.justifyBetween, f.alignCenter, f.wFull])
+
+export const LeftWrapper = style([f.flex, f.alignCenter, { gap: '1.25rem' }])
+
+export const ViewCount = style([f.flex, f.alignCenter, f.color.static.darkGray2, { gap: '0.25rem' }])
+
+export const FeedInfo = style([f.flex, f.justifyBetween, f.alignCenter, f.wFull, { padding: '2.5rem 1.25rem' }])
+
+export const User = style([f.flex, f.alignCenter, { gap: '0.625rem' }])
+
+export const FeedBack = style([f.flex, f.alignCenter, f.color.static.darkGray2, { gap: '1rem' }])
+
+export const Icon = style([f.flex, f.alignCenter, { gap: '0.25rem' }])

src/domain/Post/components/PostCategoryBadge/index.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from 'react'
+import { LuBookText, LuMessageCircleQuestion, LuUsers } from 'react-icons/lu'
+import { match } from 'ts-pattern'
+
+import * as s from './style.css'
+
+import { Typography } from '@/ui/Typography'
+
+type Props = {
+  boardName: string
+}
+
+const PostCategoryBadge = ({ boardName }: Props) => {
+  const svg = useMemo(
+    () =>
+      match(boardName)
+        .with('Community Board', () => <LuUsers />)
+        .with('Question Board', () => <LuMessageCircleQuestion />)
+        .with('Information Board', () => <LuBookText />)
+        .otherwise(() => <LuBookText />),
+    [boardName],
+  )
+  return (
+    <div className={s.Wrapper}>
+      {svg}
+      <Typography mobileTypography="miniTag1M" color="darkGray1">
+        {boardName}
+      </Typography>
+    </div>
+  )
+}
+
+export default PostCategoryBadge

src/domain/Post/components/PostCategoryBadge/style.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([
+  f.flex,
+  f.alignCenter,
+  f.background.lightGray2,
+  f.color.static.darkGray1,
+  { padding: '0.25rem 0.625rem', gap: '0.375rem', borderRadius: '6px' },
+])

src/domain/Post/components/PostPreviewCard/index.tsx

@@ -0,0 +1,36 @@
+import { formatDistanceToNow } from 'date-fns'
+
+import * as s from './style.css'
+
+import Profile from '@/components/ui/profile'
+import { PostPreviewWithBoardName } from '@/packages/api/ku-key/models'
+import { Typography } from '@/ui/Typography'
+
+type Props = Pick<PostPreviewWithBoardName, 'user' | 'createdAt' | 'title'>
+const CommunityPostPreviewCard = ({ user, createdAt, title }: Props) => {
+  const timeDistance = formatDistanceToNow(createdAt)
+
+  return (
+    <div className={s.Wrapper}>
+      <Profile isAnonymous={user.isAnonymous} isDeleted={user.isDeleted} character={user.character} onlyTitle />
+      <div className={s.Body}>
+        <div className={s.Header}>
+          <Typography mobileTypography="headingSB" color="darkGray2">
+            {user.isAnonymous ? 'Anonymous' : user.username}
+          </Typography>
+          <Typography mobileTypography="headingSB" color="darkGray2">
+            {timeDistance} ago
+          </Typography>
+        </div>
+        <Typography
+          typography="heading2SB"
+          style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+        >
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default CommunityPostPreviewCard

src/domain/Post/components/PostPreviewCard/style.css.ts

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([
+  f.flex,
+  f.alignCenter,
+  f.wFull,
+  f.background.white,
+  {
+    padding: '0.375rem 1.25rem 0.375rem 0.625rem',
+    gap: '0.625rem',
+    borderRadius: '10px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
+  },
+])
+
+export const Body = style([f.flex, f.directionColumn, f.alignStart, { gap: '0.25rem', flex: '1 0 0' }])
+
+export const Header = style([f.flex, f.alignCenter, f.justifyBetween, f.wFull])

src/domain/Post/components/PostPreviewItem/index.tsx

@@ -0,0 +1,18 @@
+import * as s from './style.css'
+
+import PostCategoryBadge from '@/domain/Post/components/PostCategoryBadge'
+import CommunityPostPreviewCard from '@/domain/Post/components/PostPreviewCard'
+import { PostPreviewWithBoardName } from '@/packages/api/ku-key/models'
+
+type Props = PostPreviewWithBoardName
+
+const PostPreviewItem = ({ user, createdAt, title, boardName }: Props) => {
+  return (
+    <div className={s.Wrapper}>
+      <PostCategoryBadge boardName={boardName} />
+      <CommunityPostPreviewCard user={user} createdAt={createdAt} title={title} />
+    </div>
+  )
+}
+
+export default PostPreviewItem

src/domain/Post/components/PostPreviewItem/style.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([f.flex, f.directionColumn, f.alignStart, f.wFull, { gap: '0.625rem' }])

src/domain/Post/hooks/useReadCommunityHotPosts.ts

@@ -0,0 +1,17 @@
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
+
+import { useAsyncRead } from '@/common/hooks/useAsyncRead'
+import { COMMUNITY_POSTS_QUERY_KEY } from '@/domain/Post/queries'
+import { kuKeyClient } from '@/packages/api'
+import { PostHotGetRequestParams } from '@/packages/api/ku-key/api/post-api'
+
+export const useReadCommunityHotPosts = ({ take = 10, cursor = undefined }: PostHotGetRequestParams) => {
+  const read = useAsyncRead(kuKeyClient.api.PostApi.postHotGet)
+  return useSuspenseInfiniteQuery({
+    queryKey: COMMUNITY_POSTS_QUERY_KEY.hot({ take, cursor }),
+    queryFn: ({ pageParam: cursor }) => read({ take, cursor: cursor?.toString() }),
+    getNextPageParam: lastPage => (lastPage.meta.hasNextData ? lastPage.meta.nextCursor : undefined),
+    initialPageParam: cursor,
+    select: data => (data.pages ?? []).flatMap(page => page.data),
+  })
+}