Merge pull request #124 from KAU-2024-Sanhak/pr-merge

Pr merge

src/main/frontend/.env.local

@@ -1,2 +1 @@
-# NEXT_PUBLIC_API_URL=http://3.34.208.68:8080
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://localhost:8080

src/main/frontend/next.config.js

@@ -1,5 +1,5 @@
 // // next.config.js
 // module.exports = {
-//     output: 'export',
-//     reactStrictMode: true,
-// };
+//    output: 'export',
+//    reactStrictMode: true,
+//};

src/main/frontend/src/app/mypage/RecommendCompany.tsx

@@ -29,7 +29,7 @@ export default function RecommendCompany({
       <div className="line-clamp-1 mb-2 relative z-10">{company.title}</div>
       <div className="mb-1 relative z-10">{categoryLabels[company.category]}</div>
       <div className="mb-5 relative z-10">기업 적합도: {company.congruence}%</div>
-      <div className="cursor-pointer text-xs relative z-10 ml-auto" onClick={() => window.open(`${company.openingUrl}`, '_blank')}>{'원티드에서 공고 확인하기 ->'}</div>
+      <div className="cursor-pointer text-xs relative z-10 ml-auto" onClick={() => window.open(`${company.openingUrl}`, '_blank')}>{'기업 홈페이지에서 확인하기 ->'}</div>
     </div>
   );
 }

src/main/frontend/src/app/mypage/UserProfile.tsx

@@ -107,8 +107,8 @@ export default function UserProfile({
   },[userInfo])
 
   return (
-    <div className='w-full h-fit min-h-64 flex justify-between border-b border-gray-cc pb-5'>
-      <div className='w-1/2 flex flex-row items-center justify-between'>
+    <div className='w-full h-fit min-h-64 flex lg:flex-col justify-between border-b border-gray-cc pb-5 lg:px-10'>
+      <div className='w-1/2 flex flex-row items-center justify-between lg:w-full'>
         <div className='w-full flex items-center'>
           <div className="w-64 h-64 object-cover rounded-xl border border-gray-cc">
             {isEditing ? (
@@ -193,9 +193,9 @@ export default function UserProfile({
         </div>
       </div>
 
-      <div className='w-[555px] max-h-[256px] bg-primary rounded-xl flex flex-wrap content-start p-4 overflow-y-auto scrollbar'>
+      <div className='w-1/2 max-h-[256px] bg-primary rounded-xl flex flex-wrap content-start p-4 ml-4 overflow-y-auto scrollbar xl:w-3/7 lg:w-full'>
         {badgeInfo?.map((skill) => (
-            <SkillBadge key={skill.id} skill={skill} />
+          <SkillBadge key={skill.id} skill={skill} />
         ))}
       </div>
     </div>

src/main/frontend/src/app/mypage/pageComponents.tsx

@@ -21,7 +21,6 @@ export default function MypagePage() {
   const [currentRoadmap, setCurrentRoadmap] = useState(0); 
   const [currentCard, setCurrentCard] = useState(0);
   const [recommendCompanyList, setRecommendCompanyList] = useState<UserRecommendCompany[]>([]);
-  const [isLoadingRoadmaps, setIsLoadingRoadmaps] = useState(true);
 
   const roadmapSlideSettings = {
     dots: true, // 슬라이더 하단에 점 표시
@@ -112,9 +111,7 @@ export default function MypagePage() {
         setRoadmapInfos(data);
       } catch (error) {
         console.error('Error fetching roadmaps:', error);
-      } finally {
-        setIsLoadingRoadmaps(false);
-      }
+      } 
     };
     fetchRoadmaps();
 
@@ -161,42 +158,48 @@ export default function MypagePage() {
 
   return (
     <div className="w-full h-full flex flex-col items-center mt-5">
-      <div className='w-[1400px] h-full px-24'>
+      <div className='max-w-[1400px] h-full px-24 xl:px-20 lg:px-12'>
         <div className='w-full flex flex-col pb-5'>
           <UserProfile userInfo={userInfo} badgeInfo={badgeInfo} onSave={onSaveProfile}/>
         </div>
         <div className='w-full flex justify-between mb-10 border-b border-gray-cc pb-10'>
           <div className='w-3/5 flex flex-col justify-start'>
             <div className='flex flex-col'>
               <div className='flex items-center text-center text-2xl font-gmarketsansMedium'><img className='w-6 h-6 mb-1 mr-1' src='asset/png/icon_filter_roadmap.png' alt='커스텀로드맵' />커스텀 로드맵</div>
-              <div className='text-xl font-gmarketsansMedium'>{roadmapInfos[currentRoadmap]?.name || ''}</div>
+              <div className='text-xl font-gmarketsansMedium'>{roadmapInfos[currentRoadmap]?.name || '-'}</div>
             </div>
-            <Slider {...roadmapSlideSettings} className="w-full mx-auto">
-              {isLoadingRoadmaps ? (
-                  <div>Loading...</div>
-              ) : roadmapInfos.length > 0 ? (
-                  roadmapInfos.map((roadmap, index) => (
-                      <div key={index} className="w-full h-full flex justify-center items-center p-5">
-                        <Roadmap isEditMode={false} roadmapSkills={roadmap.skills} style={'h-[75dvh] max-h-[600px] mb-4'} />
-                      </div>
-                  ))
-              ) : (
-                  <div>No roadmaps available</div>
-              )}
-            </Slider>
+            {roadmapInfos.length > 0 ? (
+              <Slider {...roadmapSlideSettings} className="w-full mx-auto">
+                {roadmapInfos.map((roadmap, index) => (
+                  <div key={index} className="w-full h-full flex justify-center items-center p-5">
+                    <Roadmap isEditMode={false} roadmapSkills={roadmap.skills} style={'h-[75dvh] max-h-[600px] mb-4'} />
+                  </div>
+                ))}
+              </Slider>
+            ) : (
+              <div className="w-full h-full flex justify-center items-center p-5">
+                <div className='w-full h-[75dvh] max-h-[600px] mb-4 box-border flex flex-col items-center justify-center rounded-xl shadow-[4px_4px_8px_rgba(0,0,0,0.3)] font-gmarketsansMedium'>빈 커스텀 로드맵</div>
+              </div>
+            )}
           </div>
           <div className='w-[435px] flex flex-col'>
             <div className='flex flex-col'>
               <div className='flex items-center text-center text-2xl font-gmarketsansMedium'><img className='w-6 h-6 mb-1 mr-1' src='asset/png/icon_filter_card.png' alt='AI 경험 카드' />AI경험카드</div>
-              <div className='text-xl font-gmarketsansMedium'>{cardInfos[currentCard]?.title || ''}</div>
+              <div className='text-xl font-gmarketsansMedium'>{cardInfos[currentCard]?.title || '-'}</div>
             </div>
-            <Slider {...cardSlideSettings} className="w-full mx-auto">
-              {cardInfos.map((card, index) => (
-                <div key={index} className="w-full h-full flex justify-center items-center p-5"> 
-                  <Card card={card} />
-                </div>
-              ))}
-            </Slider>
+            {cardInfos.length > 0 ? (
+              <Slider {...cardSlideSettings} className="w-full mx-auto">
+                {cardInfos.map((card, index) => (
+                  <div key={index} className="w-full h-full flex justify-center items-center p-5"> 
+                    <Card card={card} />
+                  </div>
+                ))}
+              </Slider>
+            ) : (
+              <div className="w-full h-full flex justify-center items-center p-5"> 
+                <div className='w-[400px] h-[75dvh] max-h-[600px] flex items-center justify-center relative mb-4 font-gmarketsansMedium bg-white rounded-xl shadow-[4px_4px_8px_rgba(0,0,0,0.3)]'>빈 AI경험카드</div>
+              </div>
+            )}
           </div>
         </div>
         <div>

src/main/frontend/tailwind.config.ts

@@ -43,18 +43,18 @@ const config: Config = {
       white: '#FFFFFF',
       transparent: 'transparent',
     },
-    screens: {
-      'sm': '980px',
-      'md': '1098px',
-      'lg': '1280px',
-      'desktop': '1440px',
-      'custom-928': '928px',
-      'custom-min': '723px',
-    },
     extend: {
       maxWidth: {
         'custom': '1400px',
       },
+      screens: {
+        '2xl': { max: '1400px' }, // 기존 2xl을 1400px로 변경
+        'xl': { max: '1280px' },    // 데스크톱
+        'lg': { max: '1024px' },    // 태블릿 (가로)
+        'md': { max: '768px' },     // 태블릿 (세로)
+        'sm': { max: '640px' },     // 작은 화면
+        'xs': { max: '480px' },     // 모바일
+      },
       fontFamily: {
         pretendard: ["pretendard",'sans-serif'],
         dsdigi: ["DS-DIGI"],