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",

packages/api/ku-key/.openapi-generator/FILES

@@ -76,6 +76,7 @@ models/get-friend-response-dto.ts
 models/get-hot-club-response-dto.ts
 models/get-my-comment-list-response-dto.ts
 models/get-notice-response-dto.ts
+models/get-nullable-timetable-response-dto.ts
 models/get-point-history-response-dto.ts
 models/get-post-list-response-dto.ts
 models/get-post-list-with-board-response-dto.ts

packages/api/ku-key/api/banner-api.ts

@@ -95,12 +95,14 @@ const bannerIdDeleteAxiosParamCreator = async (
  * @summary 배너 이미지 생성
  * @param {any} image 배너 이미지 파일
  * @param {string} title 배너 제목
+ * @param {string} [link] 링크
  * @param {*} [options] Override http request option.
  * @throws {RequiredError}
  */
 const bannerPostAxiosParamCreator = async (
   image: any,
   title: string,
+  link?: string,
   options: AxiosRequestConfig = {},
   configuration?: Configuration,
 ): Promise<RequestArgs> => {
@@ -125,6 +127,10 @@ const bannerPostAxiosParamCreator = async (
     localVarFormParams.append('title', title as any)
   }
 
+  if (link !== undefined) {
+    localVarFormParams.append('link', link as any)
+  }
+
   localVarHeaderParameter['Content-Type'] = 'multipart/form-data'
 
   setSearchParams(localVarUrlObj, localVarQueryParameter)
@@ -175,16 +181,18 @@ const bannerIdDeleteFp = async (
  * @summary 배너 이미지 생성
  * @param {any} image 배너 이미지 파일
  * @param {string} title 배너 제목
+ * @param {string} [link] 링크
  * @param {*} [options] Override http request option.
  * @throws {RequiredError}
  */
 const bannerPostFp = async (
   image: any,
   title: string,
+  link?: string,
   options?: AxiosRequestConfig,
   configuration?: Configuration,
 ): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<BannerDto>> => {
-  const localVarAxiosArgs = await bannerPostAxiosParamCreator(image, title, options, configuration)
+  const localVarAxiosArgs = await bannerPostAxiosParamCreator(image, title, link, options, configuration)
   return createRequestFunction(localVarAxiosArgs, globalAxios, configuration)
 }
 
@@ -246,6 +254,7 @@ export const bannerIdDelete = ({
 export type BannerPostRequestParams = {
   image: any
   title: string
+  link?: string
   options?: any
 }
 
@@ -254,6 +263,7 @@ export type BannerPostRequestParams = {
  * @summary 배너 이미지 생성
  * @param {any} image 배너 이미지 파일
  * @param {string} title 배너 제목
+ * @param {string} [link] 링크
  * @param {*} [options] Override http request option.
  * @throws {RequiredError}
  */
@@ -267,7 +277,7 @@ export const bannerPost = ({
   axios?: AxiosInstance
 }) => {
   return (params: BannerPostRequestParams): AxiosPromise<BannerDto> => {
-    return bannerPostFp(params.image, params.title, params.options, configuration).then(request =>
+    return bannerPostFp(params.image, params.title, params.link, params.options, configuration).then(request =>
       request(axios, basePath),
     )
   }

packages/api/ku-key/api/friendship-api.ts

@@ -25,9 +25,9 @@ import { DeleteFriendshipResponseDto } from '../models'
 // @ts-ignore
 import { GetFriendResponseDto } from '../models'
 // @ts-ignore
-import { GetReceivedFriendshipRequestCountDto } from '../models'
+import { GetNullableTimetableResponseDto } from '../models'
 // @ts-ignore
-import { GetTimetableByTimetableIdDto } from '../models'
+import { GetReceivedFriendshipRequestCountDto } from '../models'
 // @ts-ignore
 import { GetWaitingFriendResponseDto } from '../models'
 // @ts-ignore
@@ -455,7 +455,7 @@ const friendshipFriendTimetableGetFp = async (
   semester: string,
   options?: AxiosRequestConfig,
   configuration?: Configuration,
-): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<GetTimetableByTimetableIdDto>>> => {
+): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GetNullableTimetableResponseDto>> => {
   const localVarAxiosArgs = await friendshipFriendTimetableGetAxiosParamCreator(
     username,
     year,
@@ -652,7 +652,7 @@ export const friendshipFriendTimetableGet = ({
   basePath?: string
   axios?: AxiosInstance
 }) => {
-  return (params: FriendshipFriendTimetableGetRequestParams): AxiosPromise<Array<GetTimetableByTimetableIdDto>> => {
+  return (params: FriendshipFriendTimetableGetRequestParams): AxiosPromise<GetNullableTimetableResponseDto> => {
     return friendshipFriendTimetableGetFp(
       params.username,
       params.year,

packages/api/ku-key/api/timetable-api.ts

@@ -29,7 +29,7 @@ import { CreateTimetableCourseResponseDto } from '../models'
 // @ts-ignore
 import { CreateTimetableDto } from '../models'
 // @ts-ignore
-import { GetTimetableByTimetableIdDto } from '../models'
+import { GetNullableTimetableResponseDto } from '../models'
 // @ts-ignore
 import { GetTimetableByUserIdResponseDto } from '../models'
 // @ts-ignore
@@ -606,7 +606,7 @@ const timetableTimetableIdGetFp = async (
   timetableId: number,
   options?: AxiosRequestConfig,
   configuration?: Configuration,
-): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GetTimetableByTimetableIdDto>> => {
+): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GetNullableTimetableResponseDto>> => {
   const localVarAxiosArgs = await timetableTimetableIdGetAxiosParamCreator(timetableId, options, configuration)
   return createRequestFunction(localVarAxiosArgs, globalAxios, configuration)
 }
@@ -901,7 +901,7 @@ export const timetableTimetableIdGet = ({
   basePath?: string
   axios?: AxiosInstance
 }) => {
-  return (params: TimetableTimetableIdGetRequestParams): AxiosPromise<GetTimetableByTimetableIdDto> => {
+  return (params: TimetableTimetableIdGetRequestParams): AxiosPromise<GetNullableTimetableResponseDto> => {
     return timetableTimetableIdGetFp(params.timetableId, params.options, configuration).then(request =>
       request(axios, basePath),
     )

packages/api/ku-key/models/banner-dto.ts

@@ -36,4 +36,10 @@ export interface BannerDto {
    * @memberof BannerDto
    */
   title: string
+  /**
+   * 배너 링크
+   * @type {string}
+   * @memberof BannerDto
+   */
+  link: string | null
 }

packages/api/ku-key/models/get-nullable-timetable-response-dto.ts

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * KU-KEY API
+ * API for KU-KEY service
+ *
+ * The version of the OpenAPI document: 1.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { GetTimetableByTimetableIdDto } from './get-timetable-by-timetable-id-dto'
+
+/**
+ *
+ * @export
+ * @interface GetNullableTimetableResponseDto
+ */
+export interface GetNullableTimetableResponseDto {
+  /**
+   * 특정 시간표 정보
+   * @type {GetTimetableByTimetableIdDto}
+   * @memberof GetNullableTimetableResponseDto
+   */
+  timetable: GetTimetableByTimetableIdDto | null
+}

packages/api/ku-key/models/index.ts

@@ -50,6 +50,7 @@ export * from './get-friend-response-dto'
 export * from './get-hot-club-response-dto'
 export * from './get-my-comment-list-response-dto'
 export * from './get-notice-response-dto'
+export * from './get-nullable-timetable-response-dto'
 export * from './get-point-history-response-dto'
 export * from './get-post-list-response-dto'
 export * from './get-post-list-with-board-response-dto'

scripts/re-create-api-json.js

@@ -37,5 +37,5 @@ async function removeOperationId(filePath) {
 }
 
 // 스크립트 실행
-await removeOperationId('https://15.164.27.130.nip.io/api-json')
+await removeOperationId('https://dev.api.ku-key.devkor.club/api-json')
 await execShellCommand(`yarn prettier --w "scripts/__generated__/ku-key-api.json"`)

src/components/ui/profile/index.tsx

@@ -16,16 +16,19 @@ const bgConfig: Record<CharacterType, string> = {
 interface ProfileProps extends Pick<User, 'isAnonymous' | 'isDeleted' | 'character'> {
   onlyTitle: boolean
   bgWhite?: boolean
+  size?: number
 }
 
-const Profile = ({ isAnonymous, isDeleted, character, onlyTitle, bgWhite }: ProfileProps) => {
+const Profile = ({ isAnonymous, isDeleted, character, onlyTitle, bgWhite, size = 20 }: ProfileProps) => {
   const profileImg = characterConfig[character.type][character.level ?? 1]
   const bgColor = bgConfig[character.type]
+
+  const w = size ?? (onlyTitle ? 15 : 20)
   return (
     <img
       src={isDeleted ? Characters.CharacterDeleted : isAnonymous ? Characters.CharacterDefault : profileImg}
       alt="Profile"
-      className={css({ w: onlyTitle ? 15 : 20, h: onlyTitle ? 15 : 20, rounded: 'full' })}
+      className={css({ w, h: w, rounded: 'full' })}
       style={{ backgroundColor: bgWhite ? 'white' : bgColor }}
     />
   )

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

@@ -0,0 +1,152 @@
+import { useCallback, useMemo } from 'react'
+import { LuBookmark, LuBookText, LuCookie, LuMessageCircle, LuMessageCircleQuestion, LuUsers } from 'react-icons/lu'
+import { useNavigate } from 'react-router-dom'
+import { match } from 'ts-pattern'
+
+import * as s from './style.css'
+
+import Profile from '@/components/ui/profile'
+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'
+  | 'user'
+  | 'reactionCount'
+  | 'commentCount'
+  | 'scrapCount'
+  | 'commentCount'
+  | 'scrapCount'
+  | 'myScrap'
+  | 'thumbnailDir'
+  | 'boardName'
+> & {
+  showCommunityBadge?: boolean
+}
+const MobileFeedItem = ({
+  id,
+  title,
+  content,
+  user,
+  reactionCount,
+  commentCount,
+  scrapCount,
+  myScrap,
+  thumbnailDir,
+  boardName,
+  showCommunityBadge,
+}: Props) => {
+  const navigate = useNavigate()
+  const handleNavigate = useCallback(
+    () => navigate(`/community/${boardName.split(' ')[0].toLowerCase()}/post/${id}`),
+    [navigate, boardName, id],
+  )
+  const svg = useMemo(
+    () =>
+      match(boardName)
+        .with('Community Board', () => <LuUsers className={s.Icon} />)
+        .with('Question Board', () => <LuMessageCircleQuestion className={s.Icon} />)
+        .with('Information Board', () => <LuBookText className={s.Icon} />)
+        .otherwise(() => <LuBookText className={s.Icon} />),
+    [boardName],
+  )
+  return (
+    <div className={s.Wrapper} onClick={handleNavigate} role="button" tabIndex={0} onKeyDown={handleNavigate}>
+      <div className={s.BodyWrapper}>
+        {thumbnailDir && (
+          <div
+            className={s.Image}
+            style={{
+              backgroundImage: `url(${thumbnailDir})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
+        )}
+        <div className={s.Text}>
+          {showCommunityBadge && (
+            <div className={s.Tag}>
+              {svg}
+              <Typography mobileTypography="miniTag1R" color="red3">
+                {boardName}
+              </Typography>
+            </div>
+          )}
+          <div className={s.TypoWrapper}>
+            <Typography
+              mobileTypography="headingM"
+              style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'pre-wrap',
+                display: '-webkit-box',
+                wordBreak: 'break-all',
+                width: '100%',
+                WebkitLineClamp: 1,
+                WebkitBoxOrient: 'vertical',
+              }}
+            >
+              {title}
+            </Typography>
+          </div>
+          <div className={s.TypoWrapper}>
+            <Typography
+              mobileTypography="bodyR"
+              color="darkGray1"
+              style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'pre-wrap',
+                display: '-webkit-box',
+                wordBreak: 'break-all',
+                width: '100%',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+              }}
+            >
+              {content}
+            </Typography>
+          </div>
+        </div>
+      </div>
+      <div className={s.FeedbackWrapper}>
+        <div className={s.Profile}>
+          <Profile onlyTitle={false} size={5} {...user} />
+          <Typography mobileTypography="miniTag1M" color="darkGray1">
+            {user.isAnonymous ? 'Anonymous' : user.username}
+          </Typography>
+        </div>
+        <div className={s.FeedBack}>
+          <div className={s.FeedBackIcon}>
+            <LuCookie size={16} />
+            <Typography mobileTypography="headingSB" color="darkGray2">
+              {reactionCount}
+            </Typography>
+          </div>
+          <div className={s.FeedBackIcon}>
+            <LuMessageCircle size={16} />
+            <Typography mobileTypography="headingSB" color="darkGray2">
+              {commentCount}
+            </Typography>
+          </div>
+          <div className={s.FeedBackIcon}>
+            <LuBookmark
+              size={16}
+              fill={myScrap ? vars.color.red2 : 'none'}
+              color={myScrap ? vars.color.red2 : 'darkGray2'}
+            />
+            <Typography mobileTypography="headingSB" color="darkGray2">
+              {scrapCount}
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MobileFeedItem