From 942247224ec8e7b6e6f61d9894e8f4a75c5f12e0 Mon Sep 17 00:00:00 2001
From: Mungjin01 <beckaljm@naver.com>
Date: Thu, 23 May 2024 17:55:12 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20api=20=EC=88=98=EC=A0=95=20(#52)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyPage/MyBrandingView.tsx      | 81 +++++++++++++++++++
 src/components/MyPage/MyExperienceView.tsx    |  6 +-
 src/components/MyPage/MyUnderstandingView.tsx | 81 +++++++++++++++++++
 3 files changed, 166 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MyPage/MyBrandingView.tsx
 create mode 100644 src/components/MyPage/MyUnderstandingView.tsx

diff --git a/src/components/MyPage/MyBrandingView.tsx b/src/components/MyPage/MyBrandingView.tsx
new file mode 100644
index 0000000..387d30e
--- /dev/null
+++ 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
index 9aa0c64..cf697dc 100644
--- 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
new file mode 100644
index 0000000..ccb4f05
--- /dev/null
+++ 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;
+`;