fix: scroll with prettier (#132)

* fix: add scroll in tag * chore: prettier to eslint * chore: format * chore: test design * chore: style * chore: ai image to top * chore: font-semibold * chore: lint * chore: prettier error * chore: weight * refactor: register button floating * refactor: recommendation chat * chore: bottom cta
mash-up-kr · Sep 20, 2024 · d8dd19a · d8dd19a
1 parent b04a0c8
commit d8dd19a
Show file tree

Hide file tree

Showing 35 changed files with 319 additions and 194 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,7 +16,7 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
-  "plugins": ["react", "@typescript-eslint", "unicorn"],
+  "plugins": ["react", "@typescript-eslint", "prettier", "unicorn"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/jsx-props-no-spreading": "off",

diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+.vscode
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,5 +3,6 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/src/app/map/[mapId]/place-list-bottom-sheet.tsx b/src/app/map/[mapId]/place-list-bottom-sheet.tsx
@@ -102,7 +102,7 @@ const PlaceListBottomSheet = forwardRef<
     }
 
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex h-full flex-col">
         <div
           ref={(element) => {
             if (typeof ref !== 'function' && ref?.current) {
@@ -120,7 +120,7 @@ const PlaceListBottomSheet = forwardRef<
           </FilterButton>
         </div>
         {placeList.length > 0 ? (
-          <div className="flex-1 no-scrollbar overflow-y-scroll overscroll-contain px-5">
+          <div className="no-scrollbar flex-1 overflow-y-scroll overscroll-contain px-5">
             <ul
               ref={(element) => {
                 if (typeof ref !== 'function' && ref?.current) {
@@ -152,7 +152,7 @@ const PlaceListBottomSheet = forwardRef<
                     }}
                     className="first:pt-1"
                   />
-                  <hr className="bg-neutral-600 border-0 h-[1px] my-[2px] last:hidden" />
+                  <hr className="my-[2px] h-[1px] border-0 bg-neutral-600 last:hidden" />
                 </Fragment>
               ))}
             </ul>

diff --git a/src/app/map/[mapId]/place-list-skeleton.tsx b/src/app/map/[mapId]/place-list-skeleton.tsx
@@ -18,13 +18,13 @@ const PlaceListSkeleton = forwardRef<HTMLElement[]>(({}, ref) => {
           {[...Array(3)].map((_, index) => (
             <Skeleton
               key={index}
-              className="aspect-square w-[calc(33.4%-8px)] object-cover rounded-md"
+              className="aspect-square w-[calc(33.4%-8px)] rounded-md object-cover"
             />
           ))}
         </ul>
 
         <div>
-          <Skeleton className="h-[20px] w-[194px] rounded-full my-[3px]" />
+          <Skeleton className="my-[3px] h-[20px] w-[194px] rounded-full" />
 
           <div className="flex gap-[7px] py-1.5">
             <Skeleton className="h-[14px] w-[37px] rounded-full" />

diff --git a/src/app/my-map/[mapId]/crew-info-bottom-button.tsx b/src/app/my-map/[mapId]/crew-info-bottom-button.tsx
@@ -118,13 +118,13 @@ const CrewInfoBottomButton = ({
   return (
     <>
       {mapInfo.createBy.id === user.id ? (
-        <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[420px] px-5 h-[102px] flex justify-center items-center invitation-gradient">
+        <div className="invitation-gradient fixed bottom-0 left-1/2 flex h-[102px] w-full max-w-[420px] -translate-x-1/2 items-center justify-center px-5">
           <Button colorScheme="orange" onClick={handleIssuedInviteCode}>
             초대장 보내기
           </Button>
         </div>
       ) : (
-        <div className={cn('py-6 w-full', className)}>
+        <div className={cn('w-full py-6', className)}>
           <button
             type="button"
             onClick={() => setIsOpenExitMapModal(true)}

diff --git a/src/app/my-map/[mapId]/crew-info-editable-item.tsx b/src/app/my-map/[mapId]/crew-info-editable-item.tsx
@@ -29,7 +29,7 @@ const RoleButton = ({
     <li className="w-full py-4">
       <button
         type="button"
-        className="w-full flex justify-between items-center"
+        className="flex w-full items-center justify-between"
         onClick={() => onClick(role)}
       >
         <div className="flex flex-1 flex-col gap-[2px]">
@@ -128,7 +128,7 @@ const CrewInfoEditableItem = ({
 
   return (
     <>
-      <li className="flex justify-between items-center h-[52px]">
+      <li className="flex h-[52px] items-center justify-between">
         <div className="flex items-center gap-2">
           <Avatar
             value={member.nickname}

diff --git a/src/app/my-map/[mapId]/crew-info-read-only-item.tsx b/src/app/my-map/[mapId]/crew-info-read-only-item.tsx
@@ -14,7 +14,7 @@ const CrewInfoReadOnlyItem = ({
   isMe: boolean
 }) => {
   return (
-    <li className="flex justify-between items-center h-[52px]">
+    <li className="flex h-[52px] items-center justify-between">
       <div className="flex items-center gap-2">
         <Avatar
           value={member.nickname}

diff --git a/src/app/my-map/my-map-card.tsx b/src/app/my-map/my-map-card.tsx
@@ -28,7 +28,7 @@ const MyMapCard = ({ className, mapId }: MyMapCardProps) => {
 
   return (
     <section className={cn('flex flex-col', className)}>
-      <div className="flex justify-between items-center rounded-t-[24px] pt-5 pb-4 px-5 bg-neutral-600">
+      <div className="flex items-center justify-between rounded-t-[24px] bg-neutral-600 px-5 pb-4 pt-5">
         <div className="flex gap-1">
           <Typography
             as="h3"
@@ -52,10 +52,10 @@ const MyMapCard = ({ className, mapId }: MyMapCardProps) => {
         </Link>
       </div>
 
-      <BoardingDivider className="w-full max-h-[24px]" />
+      <BoardingDivider className="max-h-[24px] w-full" />
 
-      <div className="flex justify-center pb-5 pt-4 px-5 bg-neutral-600 rounded-b-[24px]">
-        <div className="flex-1 h-[45px] flex-col gap-[2px]">
+      <div className="flex justify-center rounded-b-[24px] bg-neutral-600 px-5 pb-5 pt-4">
+        <div className="h-[45px] flex-1 flex-col gap-[2px]">
           <div className="flex gap-[2px]">
             <Icon type="person" size="md" fill="neutral-300" />
             <Typography size="body3" color="neutral-300">
@@ -68,7 +68,7 @@ const MyMapCard = ({ className, mapId }: MyMapCardProps) => {
           </Typography>
         </div>
 
-        <div className="flex-1 h-[45px] flex-col gap-[2px]">
+        <div className="h-[45px] flex-1 flex-col gap-[2px]">
           <div className="flex gap-[2px]">
             <Icon type="pin" size="md" fill="neutral-300" />
             <Typography size="body3" color="neutral-300">
@@ -85,7 +85,7 @@ const MyMapCard = ({ className, mapId }: MyMapCardProps) => {
           role="link"
           icon={{ type: 'arrowRight', size: 'xl', stroke: 'neutral-100' }}
           label={`${mapInfo?.name} 지도로 이동`}
-          className="w-10 h-10 bg-neutral-400 rounded-full p-2"
+          className="h-10 w-10 rounded-full bg-neutral-400 p-2"
           onClick={() => router.push(`/map/${mapId}`)}
         />
       </div>

diff --git a/src/app/my-map/page.tsx b/src/app/my-map/page.tsx
@@ -35,14 +35,14 @@ const MyMap = () => {
           </Typography>
         </header>
 
-        <div className="flex flex-col pt-5 px-5 gap-4">
+        <div className="flex flex-col gap-4 px-5 pt-5">
           {myMapList?.map((map) => <MyMapCard key={map.id} mapId={map.id} />)}
         </div>
 
         <div className="pb-5">
           <Link
             href="/map/create"
-            className="flex justify-center items-center mx-auto gap-2 px-[24px] py-[12px] rounded-full border border-neutral-500 w-fit mt-5"
+            className="mx-auto mt-5 flex w-fit items-center justify-center gap-2 rounded-full border border-neutral-500 px-[24px] py-[12px]"
           >
             <Icon type="plus" size="md" />
             <Typography size="body1" color="neutral-000">

diff --git a/src/app/place/[placeId]/like-tooltip.tsx b/src/app/place/[placeId]/like-tooltip.tsx
@@ -44,7 +44,7 @@ const LikeToolTip = ({ likeMembers, className, onClick }: LikeToolTipProps) => {
     <motion.button
       type="button"
       className={cn(
-        'px-4 py-[6px] rounded-full bg-neutral-600 flex items-center transition-all',
+        'flex items-center rounded-full bg-neutral-600 px-4 py-[6px] transition-all',
         className,
       )}
       onClick={onClick}
@@ -57,7 +57,7 @@ const LikeToolTip = ({ likeMembers, className, onClick }: LikeToolTipProps) => {
       }}
     >
       <div
-        className="absolute top-[-5.41px] right-[13px] w-[14px] h-[7px] bg-neutral-600 rounded-[1px] transform"
+        className="absolute right-[13px] top-[-5.41px] h-[7px] w-[14px] transform rounded-[1px] bg-neutral-600"
         style={{
           clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
         }}
@@ -84,7 +84,7 @@ const LikeToolTip = ({ likeMembers, className, onClick }: LikeToolTipProps) => {
         </div>
 
         {likeMembers.length > 3 && (
-          <div className="whitespace-nowrap ml-[6px] text-[12px] text-neutral-000 font-bold">
+          <div className="ml-[6px] whitespace-nowrap text-[12px] font-bold text-neutral-000">
             + {likeMembers.length - 3}
           </div>
         )}

diff --git a/src/app/place/[placeId]/place-box-skeleton.tsx b/src/app/place/[placeId]/place-box-skeleton.tsx
@@ -7,11 +7,11 @@ const PlaceBoxSkeleton = () => {
     <div className="relative flex min-h-dvh flex-col bg-neutral-700">
       <Skeleton className="h-[200px] w-full" />
 
-      <div className="space-y-3.5 py-4 px-5">
+      <div className="space-y-3.5 px-5 py-4">
         <Skeleton className="h-[36px] w-[90px] rounded-full" />
 
         <div>
-          <Skeleton className="h-[20px] w-[194px] rounded-full my-[3px]" />
+          <Skeleton className="my-[3px] h-[20px] w-[194px] rounded-full" />
 
           <div className="flex gap-[7px] py-1.5">
             <Skeleton className="h-[14px] w-[37px] rounded-full" />
@@ -28,16 +28,16 @@ const PlaceBoxSkeleton = () => {
 
       <PlaceDivider className="w-full" />
 
-      <div className="px-5 pt-6 space-y-4">
+      <div className="space-y-4 px-5 pt-6">
         <Skeleton className="h-[16px] w-[40px] rounded-full" />
         <Skeleton className="h-[148px] w-full rounded-md" />
       </div>
 
-      <ul className="flex flex-col px-5 divide-y divide-neutral-600">
+      <ul className="flex flex-col divide-y divide-neutral-600 px-5">
         {[...Array(4)].map((_, index) => (
           <li
             key={index}
-            className="flex justify-between items-center py-[18px]"
+            className="flex items-center justify-between py-[18px]"
           >
             <div className="space-y-2">
               <Skeleton className="h-[18px] w-[100px] rounded-full" />
@@ -51,7 +51,7 @@ const PlaceBoxSkeleton = () => {
 
       <PlaceDivider className="w-full" />
 
-      <div className="p-5 space-y-[10px]">
+      <div className="space-y-[10px] p-5">
         <Skeleton className="h-[16px] w-[40px] rounded-full" />
 
         <div className="flex w-full items-center justify-between space-x-[14px] rounded-md bg-neutral-600 px-5 py-[14px]">

diff --git a/src/app/place/[placeId]/place-box.tsx b/src/app/place/[placeId]/place-box.tsx
@@ -214,26 +214,24 @@ const PlaceBox = ({ place, mapId }: PlaceBoxProps) => {
         <KakaoRating
           rating={roundToNthDecimal(place.score, 2)}
           placeId={place.kakaoId}
-          className="px-5 py-5"
+          className="mb-[102px] px-5 py-5"
         />
 
         <footer className="px-5">
-          {isAlreadyPick ? (
-            <PlaceActionButtons
-              like={isLikePlace}
-              onLikePlace={handleLikePlace}
-              onDeletePlace={() => setIsDeleteModalOpen(true)}
-              onUnLikePlace={handleUnLikePlace}
-            />
-          ) : (
-            <Button
-              type="button"
-              onClick={handleRegisterPlace}
-              className="mb-5"
-            >
-              맛집 등록하기
-            </Button>
-          )}
+          <div className="invitation-gradient fixed bottom-0 left-1/2 flex h-[102px] w-full max-w-[420px] -translate-x-1/2 items-center justify-center px-5">
+            {isAlreadyPick ? (
+              <PlaceActionButtons
+                like={isLikePlace}
+                onLikePlace={handleLikePlace}
+                onDeletePlace={() => setIsDeleteModalOpen(true)}
+                onUnLikePlace={handleUnLikePlace}
+              />
+            ) : (
+              <Button type="button" onClick={handleRegisterPlace}>
+                맛집 등록하기
+              </Button>
+            )}
+          </div>
         </footer>
       </div>
 

diff --git a/src/app/place/[placeId]/place-liked-users.tsx b/src/app/place/[placeId]/place-liked-users.tsx
@@ -18,7 +18,7 @@ const PlaceLikedUsers = ({
   return (
     <ul className={cn('flex flex-col pb-6', className)}>
       {likedUsers.map((user) => (
-        <li key={user.id} className="pt-2 flex items-center gap-2">
+        <li key={user.id} className="flex items-center gap-2 pt-2">
           <Avatar
             value={user.nickname}
             imageUrl={user.profileImage}

diff --git a/src/app/place/[placeId]/place-top-information.tsx b/src/app/place/[placeId]/place-top-information.tsx
@@ -85,7 +85,7 @@ const PlaceTopInformation = ({
               {name}
             </Typography>
             {pick && (
-              <div className="flex items-center gap-3 relative">
+              <div className="relative flex items-center gap-3">
                 <PickChip isMyPick={pick.isMyPick} />
                 <LikeButton
                   numOfLikes={pick.numOfLikes}
@@ -97,7 +97,7 @@ const PlaceTopInformation = ({
                   likeMembers={likeUserList.map(
                     (likeUser) => likeUser.nickname,
                   )}
-                  className="absolute top-[34px] right-0"
+                  className="absolute right-0 top-[34px]"
                   onClick={() => setIsOpenLikeMembers(true)}
                 />
               </div>

diff --git a/src/app/place/[placeId]/register/hash-tag-list.tsx b/src/app/place/[placeId]/register/hash-tag-list.tsx
@@ -72,7 +72,7 @@ const HashTagList = ({
           # 해시태그
         </Typography>
 
-        <ul className="flex flex-wrap gap-x-3 gap-y-[10px]">
+        <ul className="no-scrollbar flex max-h-[calc(100vh-300px)] flex-wrap gap-x-3 gap-y-[10px] overflow-y-scroll">
           {tags.map((tag) => {
             const isActive = selectedTags.includes(tag)
 

diff --git a/src/app/recommendation/ai-recommend-place-box.tsx b/src/app/recommendation/ai-recommend-place-box.tsx
@@ -18,7 +18,7 @@ const AIRecommendPlaceBox = ({
   place,
 }: AIRecommendPlaceBoxProps) => {
   return (
-    <section className={cn('bg-neutral-600 py-5 rounded-[20px]', className)}>
+    <section className={cn('rounded-[20px] bg-neutral-600 py-5', className)}>
       <div className="flex flex-col gap-[2px] px-5">
         <Typography size="h5" color="neutral-000">
           {place.name}
@@ -28,12 +28,12 @@ const AIRecommendPlaceBox = ({
         </Typography>
       </div>
 
-      <div className="w-full h-[1px] my-3 bg-neutral-500" />
+      <div className="my-3 h-[1px] w-full bg-neutral-500" />
 
       <div className="flex flex-col gap-1 px-5 pb-3">
         <Typography
           size="h6"
-          className="bg-gradient-to-r from-orange-400 to-purple-300 bg-clip-text inline-block text-transparent w-fit"
+          className="inline-block w-fit bg-gradient-to-r from-orange-400 to-purple-300 bg-clip-text text-transparent"
         >
           AI봇의 추천 이유
         </Typography>
@@ -49,7 +49,7 @@ const AIRecommendPlaceBox = ({
       <div className="px-5">
         <Link
           href={`/place/${place.placeId}`}
-          className="bg-neutral-500 rounded-full py-3 w-full flex justify-center items-center"
+          className="flex w-full items-center justify-center rounded-full bg-neutral-500 py-3"
         >
           <Typography size="body1" color="neutral-000">
             맛집 상세 보기

diff --git a/src/app/recommendation/chat-box.tsx b/src/app/recommendation/chat-box.tsx
@@ -20,15 +20,15 @@ const ChatBox = ({
   onClickSuggestion,
 }: ChatBoxProps) => {
   return (
-    <section className={cn('w-full h-full', className)}>
+    <section className={cn('h-full w-full', className)}>
       <ul className="flex flex-col gap-6">
-        {chats.map((chat) => {
+        {chats.map((chat, index) => {
           if (chat.type === 'gpt') {
             return (
               <AISuggestion
                 key={chat.value}
                 chat={chat}
-                className="w-fit"
+                isFirst={index === 0}
                 onClickSuggestion={(suggestion) => {
                   if (isFinish && suggestion !== '지도 홈으로') {
                     notify.error('채팅이 종료되었습니다.')
@@ -39,7 +39,7 @@ const ChatBox = ({
               />
             )
           }
-          return <UserChat key={chat.value} chat={chat} className="w-fit" />
+          return <UserChat key={chat.value} chat={chat} />
         })}
 
         {isLoading && <ChatLoading />}

diff --git a/src/app/recommendation/chat-input.tsx b/src/app/recommendation/chat-input.tsx
@@ -24,12 +24,12 @@ const ChatInput = ({
   return (
     <div
       className={cn(
-        'w-full flex justify-center invitation-gradient',
+        'invitation-gradient flex w-full justify-center',
         className,
       )}
     >
       {isFinish ? (
-        <div className="flex justify-center items-center bg-neutral-600 rounded-[6px] w-full">
+        <div className="flex w-full items-center justify-center rounded-[6px] bg-neutral-600">
           <Typography size="body3" color="neutral-100">
             추천이 종료되었습니다.
           </Typography>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,3 +40,5 @@ next-env.d.ts

		# Sentry Config File
		.env.sentry-build-plugin

		.vscode