QA 이슈 해결 / 공고, 카테고리별 태그 API 추가 (#63)

* comment: delete Console. * feat: ready tab * style: add hover case * feat: selected tags * comment: delete comment * feat: console err fix * feat: ready tab * fix: QA fix * fix(qa) QA에서 발견된 오류 수정 (#58) * fix: 이미지 리소스 파일들 교체 (#64) * fix (#65) * feat(landing): 이미지 수정 (#67) * feat: 사이드바 기능 구현 및 애니메이션 구현 (#66) * feat: ready tab * style: add hover case * feat: ready tab * style: add hover case * feat: ready tab * fix: fixing build err * fix :build err * feat: 카드반영수정
depromeet · Aug 30, 2024 · 3e4e33b · 3e4e33b
1 parent 5898396
commit 3e4e33b
Show file tree

Hide file tree

Showing 18 changed files with 336 additions and 186 deletions.
diff --git a/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts b/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts
@@ -0,0 +1 @@
+const getOnboardStatus = () => {};
diff --git a/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx b/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx
@@ -1,18 +1,18 @@
+import { TouchButton } from '@/components/TouchButton';
+import { Icon } from '@/system/components';
 import { Dialog, DialogContent } from '@/system/components/Dialog/Dialog';
-import { Logo } from './Logo';
-import { Spacing } from '@/system/utils/Spacing';
+import { color } from '@/system/token/color';
 import { AnimateSlide } from '@/system/utils/AnimateSlide/AnimateSlide';
-import { TouchButton } from '@/components/TouchButton';
-import { useEffect, useState } from 'react';
 import { If } from '@/system/utils/If';
+import { Spacing } from '@/system/utils/Spacing';
+import { SwitchCase } from '@/system/utils/SwitchCase';
 import { cn } from '@/utils';
-import { motion, useAnimationControls } from 'framer-motion';
-import { color } from '@/system/token/color';
-import { LogoLeaf } from './LogoLeaf';
+import { motion } from 'framer-motion';
 import Image from 'next/image';
-import { Icon } from '@/system/components';
-import { SwitchCase } from '@/system/utils/SwitchCase';
+import { useEffect, useState } from 'react';
 import { usePutOnboardStatus } from '../../apis/usePutOnboardStatus';
+import { Logo } from './Logo';
+import { LogoLeaf } from './LogoLeaf';
 
 const MAX_INDEX = 3;
 
@@ -58,7 +58,7 @@ export function OnboardingDialog({}: OnboardingDialogProps) {
         if (step !== 'finish') {
           return;
         }
-        console.log('!!!');
+
         setOpen(false);
         putOnboardStatus();
       }}>

diff --git a/src/app/(sidebar)/(my-info)/page.tsx b/src/app/(sidebar)/(my-info)/page.tsx
@@ -17,6 +17,7 @@ import { Onboarding } from './containers/Onboarding/Onboarding';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useGetOnboardStatus } from './apis/useGetOnboadStatus';
 
+
 const getType = (typeParam: string | null) => {
   if (typeParam && INFO_TYPES.includes(typeParam as InfoType)) {
     return typeParam as InfoType;
@@ -32,8 +33,10 @@ export default function MyInfo() {
   const [showHeader, setShowHeader] = useState(false);
   const headerRef = useRef<HTMLDivElement>(null);
 
+
   const { isOnboardComplete } = useGetOnboardStatus().data;
 
+
   const typeParam = searchParams.get('type');
   const currentCardType = getType(typeParam);
 
@@ -45,6 +48,8 @@ export default function MyInfo() {
 
   useScroll(headerRef, (y) => setShowHeader(y > 192));
 
+  const params = useSearchParams();
+
   return (
     <div ref={headerRef} className="max-h-[100vh] w-full overflow-auto">
       <div className="mx-auto max-w-[1700px] py-[64px] px-[80px] bg-neutral-1">
@@ -133,6 +138,7 @@ export default function MyInfo() {
           pendingFallback={<InfoCardSkeleton count={4} />}>
           <InfoCardList cardType={currentCardType} />
         </AsyncBoundaryWithQuery>
+
         <If condition={!isOnboardComplete}>
           <Onboarding />
         </If>

diff --git a/src/app/(sidebar)/my-recruit/[id]/api/useGetCategoryTags.ts b/src/app/(sidebar)/my-recruit/[id]/api/useGetCategoryTags.ts
@@ -0,0 +1,24 @@
+import { http } from '@/apis/http';
+import { TagType } from '@/types';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export const GET_CATEGORY_TAGS = 'get-category-tags';
+
+const getCategoryTags = ({ recruitId, type }: { recruitId: string; type: string }) => {
+  return http.get<TagType[]>({
+    url: `recruits/${recruitId}/tags`,
+    params: { type },
+  });
+};
+
+export function useGetCategoryTags({ recruitId, type }: { recruitId: string; type: string }) {
+  const result = useSuspenseQuery({
+    queryKey: [GET_CATEGORY_TAGS, recruitId, type],
+    queryFn: async () => {
+      const res = await getCategoryTags({ recruitId, type });
+      return res.data;
+    },
+  });
+
+  return result;
+}
diff --git a/src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts b/src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts
@@ -27,8 +27,6 @@ export const usePatchStatus = () => {
     mutationFn: async ({ newStatus, id }: PatchStatusProps) => {
       const res = await patchStatus({ newStatus, id });
 
-      console.log(res);
-
       return res.data;
     },
     onSuccess: () => {

diff --git a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx
@@ -3,14 +3,16 @@
 import { InfoCard } from '@/components/InfoCard';
 import { TouchButton } from '@/components/TouchButton';
 import { Droppable } from '@/lib/dnd-kit/Droppable';
-import { Icon } from '@/system/components';
+import { Icon, Text } from '@/system/components';
+import { If } from '@/system/utils/If';
 import { InfoCardType } from '@/types';
 import { RECRUIT_TYPES, RecruitType } from '@/types/recruit';
 import { cn } from '@/utils/tailwind-util';
 import { useDndContext } from '@dnd-kit/core';
 import { motion } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
 import { useGetRecruitCardCount } from '../api/useGetCardCount';
+import { useGetCategoryTags } from '../api/useGetCategoryTags';
 import { useGetRecruitCards } from '../api/useGetRecruitCards';
 import { AddRecruitCardDialog } from './AddRecruitCardDialog';
 import TagList from './TagList';
@@ -25,6 +27,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
 
   const { data: cardCount } = useGetRecruitCardCount(recruitId);
   const { data: cardList } = useGetRecruitCards({ id: recruitId, type: currentOption, tagIds: selectedTags });
+  const { data: tagsData } = useGetCategoryTags({ recruitId, type: currentOption });
 
   const filteredCardList =
     selectedTags.length > 0
@@ -64,32 +67,31 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
             const copyCardSelected = option === '내_정보_복사' && active;
 
             return (
-              <Droppable key={option} id={1234}>
-                <TouchButton
+              <TouchButton
+                key={option}
+                className={cn(
+                  'flex gap-[6px] justify-center items-center cursor-pointer py-12 shrink-0',
+                  copyCardSelected &&
+                    'border-1 border-mint-30 bg-[rgba(221,243,235,0.50)] rounded-12 shrink-0 m-[-1px] px-12 -ml-13',
+                )}
+                onClick={() => setCurrentOption(option)}>
+                <div
                   className={cn(
-                    'flex gap-[6px] justify-center items-center cursor-pointer py-12 shrink-0',
-                    copyCardSelected &&
-                      'border-1 border-mint-30 bg-[rgba(221,243,235,0.50)] rounded-12 shrink-0 m-[-1px] px-12 -ml-13',
-                  )}
-                  onClick={() => setCurrentOption(option)}>
-                  <div
-                    className={cn(
-                      'text-[18px] font-semibold ',
-                      isActive ? 'text-neutral-80' : 'text-neutral-10',
-                      copyCardSelected && 'text-mint-40',
-                    )}>
-                    {option.replace(/_/g, ' ')}
-                  </div>
-                  <div
-                    className={cn(
-                      'text-heading-2 px-[8px] py-[2px] rounded-[6px] text-[14px] font-semibold',
-                      isActive ? 'bg-neutral-80 text-neutral-1' : 'bg-neutral-10 text-neutral-1',
-                      copyCardSelected && 'bg-mint-30 text-neutral-1',
-                    )}>
-                    {cardCount?.[option] || 0}
-                  </div>
-                </TouchButton>
-              </Droppable>
+                    'text-[18px] font-semibold ',
+                    isActive ? 'text-neutral-80' : 'text-neutral-10',
+                    copyCardSelected && 'text-mint-40',
+                  )}>
+                  {option.replace(/_/g, ' ')}
+                </div>
+                <div
+                  className={cn(
+                    'text-heading-2 px-[8px] py-[2px] rounded-[6px] text-[14px] font-semibold',
+                    isActive ? 'bg-neutral-80 text-neutral-1' : 'bg-neutral-10 text-neutral-1',
+                    copyCardSelected && 'bg-mint-30 text-neutral-1',
+                  )}>
+                  {cardCount?.[option] || 0}
+                </div>
+              </TouchButton>
             );
           })}
         </div>
@@ -107,42 +109,55 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
         </AddRecruitCardDialog>
       </div>
 
-      <TagList selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
+      <If condition={tagsData.length > 0}>
+        <TagList tagsData={tagsData} selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
+      </If>
 
-      <div
-        ref={contentRef}
-        className={'h-[calc(100vh-350px)] overflow-scroll [&::-webkit-scrollbar]:hidden'}
-        style={{ scrollBehavior: 'smooth' }}>
-        {filteredCardList && filteredCardList.length > 0 ? (
-          <ul className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
-            {filteredCardList.map((info: InfoCardType) => (
-              <li key={info.id} className="min-w-[343px]">
-                <InfoCard {...info} />
-              </li>
-            ))}
-            {scrollPosition > 0 && (
-              <TouchButton
-                layout
-                onClick={scrollToTop}
-                className="fixed flex flex-col justify-center items-center a w-62 h-62 rounded-full right-[95px] bottom-[40px] bg-neutral-95 border-neutral-9">
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.5 }}>
-                  <Icon name="arrowUp" size={24} />
-                  <span className="text-neutral-1 text-caption1">TOP</span>
-                </motion.div>
-              </TouchButton>
-            )}
-          </ul>
-        ) : (
-          <div className={'flex flex-col w-full h-full justify-center items-center'}>
-            <Icon name="empty" size={280} />
-            <p className="my-[16px] text-body1 text-neutral-30">아직 생성된 정보 카드가 없어요!</p>
-          </div>
-        )}
-      </div>
+      <Droppable id={1234}>
+        <div
+          ref={contentRef}
+          className={'h-[calc(100vh-350px)] overflow-scroll [&::-webkit-scrollbar]:hidden'}
+          style={{ scrollBehavior: 'smooth' }}>
+          {filteredCardList && filteredCardList.length > 0 ? (
+            <ul className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
+              {filteredCardList.map((info: InfoCardType) => (
+                <li key={info.id} className="min-w-[343px]">
+                  <InfoCard {...info} />
+                </li>
+              ))}
+              {scrollPosition > 0 && (
+                <TouchButton
+                  layout
+                  whileHover="hover"
+                  onClick={scrollToTop}
+                  className="fixed flex flex-col justify-center items-center a w-62 h-62 rounded-full right-[95px] bottom-[40px] bg-neutral-95 border-neutral-9">
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.5 }}>
+                    <Icon name="arrowUp" size={24} />
+                    <span className="text-neutral-1 text-caption1">TOP</span>
+                  </motion.div>
+                  <motion.div
+                    className="absolute top-full left-1/2 translate-x-[-50%] mt-[4px] w-max px-[10px] py-[4px] rounded-[6px] bg-[#70737C] pointer-events-none"
+                    initial={{ opacity: 0 }}
+                    variants={{ hover: { opacity: 1 } }}>
+                    <Text typography="label1" color="white">
+                      내 정보 가져오기
+                    </Text>
+                  </motion.div>
+                </TouchButton>
+              )}
+            </ul>
+          ) : (
+            <div className={'flex flex-col w-full h-full justify-center items-center'}>
+              <Icon name="empty" size={280} />
+              <p className="my-[16px] text-body1 text-neutral-30">아직 생성된 정보 카드가 없어요!</p>
+            </div>
+          )}
+        </div>
+      </Droppable>
     </section>
   );
 }