style: 코드 컨벤션 통일 및 eslint 반영 (#ATR-95)

apps/service/app/page.tsx

@@ -1,7 +1,7 @@
-import MainAds from '@/widgets/mainAds/ui'
-import RecentArticles from '@/widgets/recentArticles/ui'
-import TrendNewsletters from '@/widgets/trendNewsletters/ui'
-import UserRank from '@/widgets/userRank/ui'
+import { MainAds } from '@/widgets/mainAds'
+import { RecentArticles } from '@/widgets/recentArticles'
+import { TrendNewsletters } from '@/widgets/trendNewsletters'
+import { UserRank } from '@/widgets/userRank'
 
 export default function Home() {
   return (

apps/service/constants/category.ts

@@ -1,3 +1,8 @@
+import {
+  NewsletterCategory,
+  NewsletterCategoryName,
+} from '@/features/newsletterCategories/model'
+
 export const NEWSLETTER_CATEGORY = {
   RECOMMEND: '추천',
   TREND_LIFE: '트렌드/라이프',
@@ -14,11 +19,6 @@ export const NEWSLETTER_CATEGORY = {
   HEALTH_MEDICINE: '건강/의학',
 } as const
 
-export type NewsletterCategory = keyof typeof NEWSLETTER_CATEGORY
-
-export type NewsletterCategoryName =
-  (typeof NEWSLETTER_CATEGORY)[keyof typeof NEWSLETTER_CATEGORY]
-
 export const NEWSLETTER_CATEGORY_KEYS: NewsletterCategory[] = Object.keys(
   NEWSLETTER_CATEGORY,
 ) as NewsletterCategory[]

apps/service/constants/index.ts

@@ -0,0 +1 @@
+export * from './category'

apps/service/entities/recentArticles/index.ts

@@ -1 +1,2 @@
-export * from './ui'
+export * from './model'
+export { default as RecentArticles } from './ui'

apps/service/entities/recentArticles/ui/index.tsx

@@ -1,8 +1,9 @@
-import { RecentArticle } from '@/widgets/recentArticles/model'
 import Image from 'next/image'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import 'dayjs/locale/ko'
+import Link from 'next/link'
+import { RecentArticle } from '../model'
 
 // TODO: Util 함수로 분리
 dayjs.extend(relativeTime)
@@ -11,7 +12,7 @@ dayjs.locale('ko')
 // TODO: 다른 페이지 적용 완료되면 Link 적용할 것
 export default function Article({ ...props }: RecentArticle) {
   return (
-    <a className="grid max-w-[280px] justify-items-start gap-y-4">
+    <Link href="/" className="grid max-w-[280px] justify-items-start gap-y-4">
       <div className="relative h-40 w-full overflow-hidden rounded-xl">
         <Image
           className="size-full object-cover"
@@ -27,7 +28,8 @@ export default function Article({ ...props }: RecentArticle) {
           {/* // TODO: cva 적용하여 리팩토링 */}
           <div
             className="h-full bg-blue-400"
-            style={{ width: `${props.readPercentage}%` }}></div>
+            style={{ width: `${props.readPercentage}%` }}
+          />
         </div>
       </div>
       <div className="flex gap-x-2">
@@ -50,6 +52,6 @@ export default function Article({ ...props }: RecentArticle) {
           </div>
         </div>
       </div>
-    </a>
+    </Link>
   )
 }

apps/service/entities/trendNewsletters/index.ts

@@ -0,0 +1 @@
+export * from './ui'

apps/service/entities/trendNewsletters/ui/TrendNewletterList.tsx

@@ -1,4 +1,4 @@
-import { TrendNewsletterResponse } from '@/widgets/trendNewsletters'
+import { TrendNewsletterResponse } from '@/widgets/trendNewsletters/model'
 import TrendNewsletterItem from './TrendNewsletterItem'
 
 interface TrendNewletterListProps {
@@ -11,7 +11,7 @@ export default function TrendNewsletterList({
   return (
     <section className="grid gap-4 xl:grid-cols-2">
       {content.newsletters.map((newsletter) => (
-        <TrendNewsletterItem newsletter={newsletter} />
+        <TrendNewsletterItem key={newsletter.id} newsletter={newsletter} />
       ))}
     </section>
   )

apps/service/entities/trendNewsletters/ui/TrendNewsletterItem.tsx

@@ -1,5 +1,6 @@
-import { TrendNewsletter } from '@/widgets/trendNewsletters'
 import Image from 'next/image'
+import Link from 'next/link'
+import { TrendNewsletter } from '@/widgets/trendNewsletters/model'
 
 interface TrendNewsletterItemProps {
   newsletter: TrendNewsletter
@@ -10,7 +11,7 @@ export default function TrendNewsletterItem({
   newsletter,
 }: TrendNewsletterItemProps) {
   return (
-    <a>
+    <Link href="/">
       <article className="flex gap-x-4">
         <Image
           src={newsletter.newsletterThumbnailUrl}
@@ -24,6 +25,6 @@ export default function TrendNewsletterItem({
           <p className="font-thin text-gray-500">{newsletter.description}</p>
         </div>
       </article>
-    </a>
+    </Link>
   )
 }

apps/service/entities/trendNewsletters/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as TrendNewsletterItem } from './TrendNewsletterItem'
+export { default as TrendNewsletterList } from './TrendNewletterList'

apps/service/features/newsletterCategories/index.ts

@@ -0,0 +1,2 @@
+export * from './model'
+export { default as NewsletterCategories } from './ui'

apps/service/features/newsletterCategories/model/index.ts

@@ -0,0 +1 @@
+export * from './types'

apps/service/features/newsletterCategories/model/types/index.ts

@@ -0,0 +1,6 @@
+import { NEWSLETTER_CATEGORY } from '@/constants/category'
+
+export type NewsletterCategory = keyof typeof NEWSLETTER_CATEGORY
+
+export type NewsletterCategoryName =
+  (typeof NEWSLETTER_CATEGORY)[keyof typeof NEWSLETTER_CATEGORY]

apps/service/features/newsletterCategories/ui/index.tsx

@@ -1,43 +1,56 @@
 'use client'
 
+import { EmblaOptionsType } from 'embla-carousel'
+import { Button } from '@attraction/design-system'
 import {
   NEWSLETTER_CATEGORY,
   NEWSLETTER_CATEGORY_LIST,
-  NewsletterCategory,
-  NewsletterCategoryName,
 } from '@/constants/category'
-import EmblaCarousel from '@/shared/carousel/ui'
-import { TrendNewsletterResponse } from '@/widgets/trendNewsletters'
-import { Button } from '@attraction/design-system'
-import { EmblaOptionsType } from 'embla-carousel'
+import { NewsletterCategory, NewsletterCategoryName } from '../model/types'
+import { Carousel } from '@/shared'
 
 interface NewsletterCategoriesProps {
   currentCategory: NewsletterCategory
-  priorityCategory: TrendNewsletterResponse['priorityCategory']
+  priorityCategory: NewsletterCategoryName[]
   onClick: (category: NewsletterCategoryName) => void
 }
 
+// priority category를 받아서 해당 부분을 앞에 띄운다.
+// 나머지 카테고리를 뒤에 띄운다.
+
 export default function NewsletterCategories({
   currentCategory,
   priorityCategory,
   onClick,
 }: NewsletterCategoriesProps) {
+  const sortedCategoryList = (priority: NewsletterCategoryName[]) => {
+    const categorySet = new Set<NewsletterCategoryName>()
+
+    categorySet.add(NEWSLETTER_CATEGORY.RECOMMEND)
+    priority.forEach((category) => categorySet.add(category))
+    NEWSLETTER_CATEGORY_LIST.forEach((category) => categorySet.add(category))
+
+    return Array.from(categorySet)
+  }
+
+  const priorityCategoryList = sortedCategoryList(priorityCategory)
   const option: EmblaOptionsType = {
     dragFree: true,
   }
+  const newsletterCategoryList = priorityCategoryList.map((category) => (
+    <Button
+      key={category}
+      className={`${NEWSLETTER_CATEGORY[currentCategory] === category ? 'bg-gray-700 text-white' : 'bg-gray-50'} rounded-xl px-5 py-2 transition-all duration-75 ease-in hover:bg-gray-700 hover:text-white`}
+      onClick={() => onClick(category)}>
+      {category}
+    </Button>
+  ))
 
   return (
     <section className="overflow-x-auto">
-      <EmblaCarousel
+      <Carousel
         options={option}
-        slides={NEWSLETTER_CATEGORY_LIST}
-        slideRenderer={(category: NewsletterCategoryName) => (
-          <Button
-            className={`${NEWSLETTER_CATEGORY[currentCategory] === category ? 'bg-gray-700 text-white' : 'bg-gray-50'} rounded-xl px-5 py-2 transition-all duration-75 ease-in hover:bg-gray-700 hover:text-white`}
-            onClick={() => onClick(category)}>
-            {category}
-          </Button>
-        )}
+        slides={newsletterCategoryList}
         showButton="right"
       />
     </section>

apps/service/features/recentArticles/index.ts

@@ -1 +1 @@
-export * from './ui'
+export { default as Articles } from './ui'

apps/service/features/recentArticles/ui/index.tsx

@@ -1 +1,26 @@
-export * from './Articles'
+'use client'
+
+import { EmblaOptionsType } from 'embla-carousel'
+import EmblaCarousel from '@/shared/ui/carousel'
+import Article from '@/entities/recentArticles/ui'
+import { RecentArticleReponse } from '@/entities/recentArticles/model'
+
+const carouselOptions: EmblaOptionsType = {
+  dragFree: true,
+}
+
+export default function Articles({ mainArticles }: RecentArticleReponse) {
+  const articleList = mainArticles.map((articleProps) => (
+    <Article key={articleProps.id} {...articleProps} />
+  ))
+
+  return (
+    <section className="overflow-x-auto">
+      <EmblaCarousel
+        options={carouselOptions}
+        slides={articleList}
+        showBlur="right"
+      />
+    </section>
+  )
+}

apps/service/shared/index.ts

@@ -1,3 +1 @@
-export * from './background'
-export * from './carousel'
-export * from './title'
+export * from './ui'

apps/service/shared/carousel/ui/index.tsx → apps/service/shared/ui/carousel/index.tsx

@@ -6,21 +6,19 @@ import useEmblaCarousel from 'embla-carousel-react'
 import './embla.css'
 import { ChevronLeftOutline, ChevronRightOutline } from '@attraction/icons'
 
-interface CarouselProps<T> {
-  slides: T[]
-  slideRenderer: (slide: T) => ReactNode
+interface CarouselProps {
+  slides: ReactNode[]
   options?: EmblaOptionsType
   showBlur?: 'both' | 'left' | 'right' | 'none'
   showButton?: 'both' | 'left' | 'right' | 'none'
 }
 
-export default function EmblaCarousel<T>({
+export default function EmblaCarousel({
   slides,
-  slideRenderer,
   options,
   showBlur = 'none',
   showButton = 'none',
-}: CarouselProps<T>) {
+}: CarouselProps) {
   const [emblaRef, emblaApi] = useEmblaCarousel(options)
 
   const scrollPrev = useCallback(() => {
@@ -35,43 +33,38 @@ export default function EmblaCarousel<T>({
     <section className="embla">
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
-          {slides.map((value, idx) => (
+          {slides.map((slide: ReactNode, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
             <div key={idx} className="embla__slide">
-              {slideRenderer(value)}
+              {slide}
             </div>
           ))}
         </div>
       </div>
       {showBlur === 'both' || showBlur === 'left' ? (
         <div className="embla__blur__left" />
-      ) : (
-        <></>
-      )}
+      ) : null}
       {showBlur === 'both' || showBlur === 'right' ? (
         <div className="embla__blur__right" />
-      ) : (
-        <></>
-      )}
+      ) : null}
       {showButton === 'both' || showButton === 'left' ? (
         <button
+          aria-label="Previous"
           className="embla__left__button"
           type="button"
           onClick={scrollPrev}>
           <ChevronLeftOutline className="size-6" />
         </button>
-      ) : (
-        <></>
-      )}
+      ) : null}
       {showButton === 'both' || showButton === 'right' ? (
         <button
+          aria-label="Next"
           className="embla__right__button"
           type="button"
           onClick={scrollNext}>
           <ChevronRightOutline className="size-6" />
         </button>
-      ) : (
-        <></>
-      )}
+      ) : null}
     </section>
   )
 }

apps/service/shared/ui/index.ts

@@ -0,0 +1,3 @@
+export { default as Background } from './background'
+export { default as Carousel } from './carousel'
+export { default as Title } from './title'

apps/service/widgets/mainAds/index.ts

@@ -1 +1 @@
-export * from './ui'
+export { default as MainAds } from './ui'

apps/service/widgets/recentArticles/api/fetchArticles.ts

@@ -1,4 +1,4 @@
-import { RecentArticleReponse } from '../model'
+import { RecentArticleReponse } from '@/entities/recentArticles'
 
 export async function fetchArticles(
   size: number = 5,

apps/service/widgets/recentArticles/index.ts

@@ -1 +1,2 @@
-export * from './ui'
+export * from './api'
+export { default as RecentArticles } from './ui'

apps/service/widgets/recentArticles/ui/index.tsx

@@ -1,8 +1,8 @@
-import { fetchArticles } from '@/widgets/recentArticles/api'
-import Articles from '@/features/recentArticles/ui/Articles'
-import Title from '@/shared/title/ui'
-import Background from '@/shared/background/ui'
 import { ClockOutline } from '@attraction/icons'
+import Link from 'next/link'
+import { Background, Title } from '@/shared'
+import { fetchArticles } from '../api'
+import { Articles } from '@/features/recentArticles'
 
 // TODO: 다른 페이지 적용 완료되면 Link 적용할 것
 export default async function RecentArticles() {
@@ -16,7 +16,9 @@ export default async function RecentArticles() {
             icon={<ClockOutline className="size-5" />}
             text="최근 받은 아티클"
           />
-          <a className="text-sm text-gray-400">보관함 바로가기</a>
+          <Link href="/" className="text-sm text-gray-400">
+            보관함 바로가기
+          </Link>
         </div>
         <Articles mainArticles={mainArticles} />
       </div>