clean: 코드 컨벤션 유지를 위한 패키지 적용

- 패키지 yarn berry -> pnpm으로 변경 - prettier tailwind plugin 적용 - lint를 통해 tailwind rule 추가 - unused-var 는 _ 로 사용
dnd-side-project · Jun 26, 2024 · bdb23ca · bdb23ca
1 parent 0130ca6
commit bdb23ca
Show file tree

Hide file tree

Showing 90 changed files with 725 additions and 986 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,6 @@
 {
   "extends": [
+    "next",
     "next/core-web-vitals",
     "plugin:prettier/recommended",
     "plugin:storybook/recommended",
@@ -8,7 +9,18 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
-    "@typescript-eslint/no-unused-vars": "error",
-    "react-hooks/rules-of-hooks": "off"
+    "react-hooks/rules-of-hooks": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "args": "all",
+        "argsIgnorePattern": "^_",
+        "caughtErrors": "all",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ]
   }
 }
diff --git a/.storybook/main.ts b/.storybook/main.ts
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
diff --git a/components/badge/badge-period.tsx b/components/badge/badge-period.tsx
@@ -1,6 +1,5 @@
 import { cn } from '@/lib/client/utils'
 
-
 // !THINK
 export const periods: { [key: string]: string } = {
   SIX_MONTHS: '6개월 미만',
@@ -13,12 +12,10 @@ export const PeriodBadge = ({ period }: { period: string }) => {
   return (
     <div
       className={cn(
-        'w-fit h-fit rounded-md !text-caption2-medium px-2 py-1 bg-gray-gray50 text-text-sub-gray4f',
+        'h-fit w-fit rounded-md bg-gray-gray50 px-2 py-1 !text-caption2-medium text-text-sub-gray4f',
       )}
     >
       {periods[period]}
     </div>
   )
 }
-
-
diff --git a/components/badge/badge-relation.tsx b/components/badge/badge-relation.tsx
@@ -54,7 +54,7 @@ export const RelationBadge = ({ relation }: { relation: string }) => {
   return (
     <div
       className={cn(
-        'w-fit h-fit rounded-md !text-caption2-medium px-2 py-1',
+        'h-fit w-fit rounded-md px-2 py-1 !text-caption2-medium',
         bgColor(relation),
         textColor(relation),
       )}

diff --git a/components/bottomsheet-button/index.tsx b/components/bottomsheet-button/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { MouseEventHandler, useState } from 'react'
 import Link from 'next/link'
 import { Drawer, DrawerContent } from '../ui/drawer'
 import Image from 'next/image'
@@ -18,27 +18,27 @@ const BottomSheetButton = ({ id, senderWikiId }: BottomSheetButtonProps) => {
   })
   const [modalOpen, setModalOpen] = useState(false)
 
-  const toggleBottomSheet = (e: any) => {
+  const toggleBottomSheet: MouseEventHandler<HTMLButtonElement> = (e) => {
     setBottomSheet((prev) => ({
       ...prev,
       isOpen: !prev.isOpen,
     }))
     e.stopPropagation()
   }
 
-  const handleLinkClick = (e: any) => {
+  const handleLinkClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
     if (senderWikiId === null) {
       e.preventDefault()
     } else {
       e.stopPropagation()
     }
   }
 
-  const handleDetailClick = (e: any) => {
+  const handleDetailClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation()
   }
 
-  const handleWritingClick = (e: any) => {
+  const handleWritingClick: MouseEventHandler<HTMLButtonElement> = (_) => {
     if (senderWikiId === null) {
       setModalOpen(true)
     } else {
@@ -52,7 +52,7 @@ const BottomSheetButton = ({ id, senderWikiId }: BottomSheetButtonProps) => {
   return (
     <>
       <button
-        className="absolute z-20 top-3 right-3"
+        className="absolute right-3 top-3 z-20"
         onClick={toggleBottomSheet}
       >
         <Image src={menu} alt="menu" />
@@ -67,14 +67,14 @@ const BottomSheetButton = ({ id, senderWikiId }: BottomSheetButtonProps) => {
         }
       >
         <DrawerContent>
-          <div className="p-4 flex flex-col text-body3-medium">
-            <div className="ml-2 flex flex-col my-auto space-y-4 justify-start items-start">
+          <div className="flex flex-col p-4 text-body3-medium">
+            <div className="my-auto ml-2 flex flex-col items-start justify-start space-y-4">
               <Link
                 href={`/surveys/questions?wikiId=${senderWikiId}`}
                 onClick={handleLinkClick}
               >
                 <button
-                  className="flex gap-2 items-center"
+                  className="flex items-center gap-2"
                   onClick={handleWritingClick}
                 >
                   <Image src={pen} alt="pen" />
@@ -85,7 +85,7 @@ const BottomSheetButton = ({ id, senderWikiId }: BottomSheetButtonProps) => {
                 href={`/answers?surveyId=${id}`}
                 onClick={handleDetailClick}
               >
-                <button className="flex gap-2 items-center">
+                <button className="flex items-center gap-2">
                   <Image src={eye} alt="eye" />
                   소개서 자세히 보기
                 </button>

diff --git a/components/carousel/carousel.stories.tsx b/components/carousel/carousel.stories.tsx
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState, useEffect, useCallback, useRef } from 'react'
+import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react'
 import type { ReactNode, PropsWithChildren } from 'react'
 import { UseEmblaCarouselType } from 'embla-carousel-react'
 import { EmblaCarouselType } from 'embla-carousel'
@@ -14,7 +14,6 @@ import {
 import { fadeInProps } from '@/variants'
 import { cn } from '@/lib/client/utils'
 
-
 interface CarouselProps<T> {
   className?: string
   itemClass?: string
@@ -73,9 +72,9 @@ const Carousel = <T,>({
   return (
     <LazyMotion features={domAnimation}>
       <m.div className={cn(className)} {...fadeInProps}>
-        <div className="overflow-hidden grow flex flex-col" ref={viewportRef}>
+        <div className="flex grow flex-col overflow-hidden" ref={viewportRef}>
           <div
-            className="disabled-select flex grow relative h-full"
+            className="disabled-select relative flex h-full grow"
             ref={containerRef}
           >
             {slides.map((item, index) => (
@@ -144,7 +143,7 @@ export const DotButton = ({
   return (
     <m.button
       style={{ width: x, backgroundColor }}
-      className="h-[6px] mx-[3px] flex items-center origin-center rounded-full"
+      className="mx-[3px] flex h-[6px] origin-center items-center rounded-full"
       type="button"
       onClick={onClick}
     />

diff --git a/components/combobox/index.tsx b/components/combobox/index.tsx
@@ -40,10 +40,10 @@ const ComboboxDropdown = forwardRef<HTMLDivElement, CombocoxDropdownProps>(
       <div ref={ref} className="relative" onBlur={() => setIsOpen(false)}>
         <div
           className={cn(
-            'flex items-center justify-between w-full px-4 py-2 text-left bg-white border border-[#E5E5EC] rounded-md shadow-sm ',
-            'focus:outline-none focus:border-brand-main-green400 ',
+            'flex w-full items-center justify-between rounded-md border border-[#E5E5EC] bg-white px-4 py-2 text-left shadow-sm ',
+            'focus:border-brand-main-green400 focus:outline-none ',
             disabled &&
-              'text-text-sub-gray99 bg-gray-gray50  cursor-not-allowed',
+              'cursor-not-allowed bg-gray-gray50  text-text-sub-gray99',
             !disabled && 'hover:bg-gray-gray50',
           )}
           onClick={() => setIsOpen(!isOpen)}
@@ -58,7 +58,7 @@ const ComboboxDropdown = forwardRef<HTMLDivElement, CombocoxDropdownProps>(
             strokeWidth={1.5}
             stroke="currentColor"
             className={cn(
-              'w-5 h-5 text-text-sub-gray76 duration-300 ease-in-out',
+              'h-5 w-5 text-text-sub-gray76 duration-300 ease-in-out',
               isOpen && 'rotate-180',
             )}
           >
@@ -72,7 +72,7 @@ const ComboboxDropdown = forwardRef<HTMLDivElement, CombocoxDropdownProps>(
         <AnimatePresence>
           {isOpen && (
             <motion.div
-              className="absolute z-10 mt-1 w-full bg-white border border-[#E5E5EC] rounded-md shadow-lg"
+              className="absolute z-10 mt-1 w-full rounded-md border border-[#E5E5EC] bg-white shadow-lg"
               variants={variants}
               initial="initial"
               animate="animate"
@@ -82,7 +82,7 @@ const ComboboxDropdown = forwardRef<HTMLDivElement, CombocoxDropdownProps>(
                 <motion.div
                   key={option.value}
                   className={cn(
-                    'px-4 py-2 cursor-pointer select-none text-left',
+                    'cursor-pointer select-none px-4 py-2 text-left',
                     index === options.length - 1 ? 'rounded-b-md' : '',
                     selectedOption?.value === option.value && 'font-bold',
                     !disabled && 'hover:bg-gray-gray50',

diff --git a/components/compositions/answers/answer-detail/index.tsx b/components/compositions/answers/answer-detail/index.tsx
@@ -3,7 +3,7 @@ import Reason from '@/components/compositions/answers/reason'
 interface AnswerDetailProps {
   questionTitle: string
   questionName: string
-  answer?: string | number | any
+  answer?: string | number
   reason: string
   index: number
   value: string | boolean
@@ -42,17 +42,14 @@ const AnswerDetail = ({
   })()
   return (
     <>
-      <div className="py-4 px-1 flex flex-col space-y-4 ">
+      <div className="flex flex-col space-y-4 px-1 py-4 ">
         <div className="flex justify-between">
           <p className="text-body3-bold">
             {index + 1}.{' '}
             <span dangerouslySetInnerHTML={{ __html: questionTitle }}></span>
           </p>
           {onShareClick && (
-            <button
-              onClick={onShareClick}
-              className="shrink-0 self-baseline"
-            >
+            <button onClick={onShareClick} className="shrink-0 self-baseline">
               <svg
                 width="20"
                 height="20"
@@ -84,7 +81,7 @@ const AnswerDetail = ({
         </div>
         {answer && (
           <div
-            className="w-fit text-body3-medium px-2 py-1 rounded-md"
+            className="w-fit rounded-md px-2 py-1 text-body3-medium"
             style={answerStyle}
           >
             {answer}

diff --git a/components/compositions/answers/reason/index.tsx b/components/compositions/answers/reason/index.tsx
@@ -9,7 +9,7 @@ const Reason = ({ reason, ...rest }: ReasonProps) => {
     <div
       {...rest}
       className={cn(
-        'text-body3-medium bg-bg-gray1 text-text-sub-gray76 px-2 py-4 rounded-md whitespace-pre-wrap',
+        'whitespace-pre-wrap rounded-md bg-bg-gray1 px-2 py-4 text-body3-medium text-text-sub-gray76',
         rest.className,
       )}
     >