chore: api 수정 (#52)

KUSITMS-29th-TEAM-D · May 23, 2024 · 9422472 · 9422472
1 parent 82b3826
commit 9422472
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 2 deletions.
diff --git a/src/components/MyPage/MyBrandingView.tsx b/src/components/MyPage/MyBrandingView.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+
+import styled from 'styled-components';
+
+import { authClient } from '@/apis/client';
+import { ExperienceCard } from '@/components/MyPage/ExperienceCard';
+
+interface ApiResponseItem {
+  selfUnderstandingUrl: string;
+  name: string;
+  link: string;
+  programsId: number;
+}
+
+interface MyExperienceProps {
+  programData: string[];
+  sortOrder: string;
+}
+
+export const MyBrandingView = ({ programData, sortOrder }: MyExperienceProps) => {
+  const [data, setData] = useState<ApiResponseItem[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await authClient.get('/api/users/experiences/branding/desc', {});
+
+        if (response.data.is_success) {
+          setData(response.data.payload);
+        } else {
+          console.error('error1', response.data.message);
+          setError(response.data.message);
+        }
+      } catch (error) {
+        console.error('error2', error);
+        setError('error3');
+      }
+    };
+
+    fetchData();
+  }, [programData, sortOrder]);
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <StyledSectionContainer>
+      <Container>
+        {data.map((item) => (
+          <ExperienceCard
+            key={item.programsId}
+            imageUrl={item.selfUnderstandingUrl}
+            title={item.link ? '셀피스 프로그램' : '외부 프로그램'}
+            subtitle={item.name}
+            $variant={item.link ? 'type1' : 'type2'}
+          />
+        ))}
+      </Container>
+    </StyledSectionContainer>
+  );
+};
+
+const StyledSectionContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 24px;
+  display: flex;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 16px;
+`;
diff --git a/src/components/MyPage/MyExperienceView.tsx b/src/components/MyPage/MyExperienceView.tsx
@@ -2,7 +2,9 @@ import { useState } from 'react';
 
 import styled from 'styled-components';
 
+import { MyBrandingView } from '@/components/MyPage/MyBrandingView';
 import { MyExperienceWholeView } from '@/components/MyPage/MyExperienceWholeView';
+import { MyUnderstandingView } from '@/components/MyPage/MyUnderstandingView';
 import { Dropdown } from '@/components/common/Dropdown/Dropdown';
 import { MyPageTab } from '@/components/common/Tab/MyPageTab';
 import { MyPageFilter } from '@/types/myPage.type';
@@ -84,7 +86,7 @@ export const MyExperienceView = ({
             </button>
           </StyledFilterContainer>
           <CardContainer>
-            <MyExperienceWholeView programData={programDate} sortOrder={sortOrder} />{' '}
+            <MyUnderstandingView programData={programDate} sortOrder={sortOrder} />{' '}
           </CardContainer>
         </div>
       ),
@@ -115,7 +117,7 @@ export const MyExperienceView = ({
             </button>
           </StyledFilterContainer>
           <CardContainer>
-            <MyExperienceWholeView programData={programDate} sortOrder={sortOrder} />{' '}
+            <MyBrandingView programData={programDate} sortOrder={sortOrder} />{' '}
           </CardContainer>
         </div>
       ),

diff --git a/src/components/MyPage/MyUnderstandingView.tsx b/src/components/MyPage/MyUnderstandingView.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+
+import styled from 'styled-components';
+
+import { authClient } from '@/apis/client';
+import { ExperienceCard } from '@/components/MyPage/ExperienceCard';
+
+interface ApiResponseItem {
+  selfUnderstandingUrl: string;
+  name: string;
+  link: string;
+  programsId: number;
+}
+
+interface MyExperienceProps {
+  programData: string[];
+  sortOrder: string;
+}
+
+export const MyUnderstandingView = ({ programData, sortOrder }: MyExperienceProps) => {
+  const [data, setData] = useState<ApiResponseItem[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await authClient.get('/api/users/experiences/self-understanding/desc', {});
+
+        if (response.data.is_success) {
+          setData(response.data.payload);
+        } else {
+          console.error('error1', response.data.message);
+          setError(response.data.message);
+        }
+      } catch (error) {
+        console.error('error2', error);
+        setError('error3');
+      }
+    };
+
+    fetchData();
+  }, [programData, sortOrder]);
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <StyledSectionContainer>
+      <Container>
+        {data.map((item) => (
+          <ExperienceCard
+            key={item.programsId}
+            imageUrl={item.selfUnderstandingUrl}
+            title={item.link ? '셀피스 프로그램' : '외부 프로그램'}
+            subtitle={item.name}
+            $variant={item.link ? 'type1' : 'type2'}
+          />
+        ))}
+      </Container>
+    </StyledSectionContainer>
+  );
+};
+
+const StyledSectionContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 24px;
+  display: flex;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 16px;
+`;