레이아웃에 후원사 목록 추가

Author: constmoon

@types/sponsor.ts

@@ -52,3 +52,21 @@ export interface SponsorLevelTypeApiResponse {
   limit: number;
   id: number;
 }
+
+export interface ISponsorListItem {
+  level: string;
+  list: ISponsorData[];
+}
+export interface ISponsorData {
+  name: string;
+  logoImage: string;
+  level: string;
+  id: number;
+}
+
+export interface ISponsorApiListItem {
+  name: string;
+  logo_image: string;
+  level: number;
+  id: number;
+}

api/login.ts

@@ -17,7 +17,7 @@ export function signIn(id: string, password: string): Promise<string> {
         resolve(response.data.basic_auth_token);
       })
       .catch((e) => {
-        console.error(e);
+        //console.error(e);
         reject(e);
       });
   });
@@ -35,7 +35,7 @@ export function signOut(): Promise<void> {
         resolve();
       })
       .catch((e) => {
-        console.error(e);
+        // console.error(e);
         reject(e);
       });
   });

api/sponsor.ts

@@ -1,5 +1,8 @@
 import axios from '@/lib/axios';
 import { getHeaders } from '.';
+import { ISponsorApiListItem, ISponsorListItem } from '@/@types/sponsor';
+import { SponsorLevel } from '@/data/enums/SponsorLevel';
+import { groupBy } from '@/helpers/array.helpers';
 
 export function addSponsor(formData: FormData): Promise<void> {
   return new Promise((resolve, reject) => {
@@ -18,3 +21,19 @@ export function addSponsor(formData: FormData): Promise<void> {
       });
   });
 }
+
+export async function getSponsorList(): Promise<ISponsorListItem[]> {
+  const response = await axios.get(`/sponsors/list/`);
+  const list = response.data.map((item: ISponsorApiListItem) => ({
+    id: item.id || 0,
+    name: item.name || '',
+    logoImage: item.logo_image || '',
+    level: item.level ? SponsorLevel[item.level] : '',
+  }));
+  const groupedList = groupBy(list, (item) => item.level);
+  const sponsorList = Object.entries(groupedList).map(([level, data]) => ({
+    level,
+    list: data,
+  }));
+  return sponsorList;
+}

components/layout/Container.tsx

@@ -1,6 +1,8 @@
 import { styled } from 'stitches.config';
 import NavBar from '@/components/layout/NavBar';
 import Footer from '@/components/layout/Footer';
+import SponsorList from '@/components/sponsor/SponsorList';
+import { ISponsorListItem } from '@/@types/sponsor';
 
 const ContainerBody = styled('div', {
   maxWidth: '1920px',
@@ -27,15 +29,27 @@ const Wrapper = styled('div', {
   width: '100%',
 });
 
+const SponsorWrapper = styled('div', {
+  marginTop: '32px',
+});
+
 type ContainerProps = {
   children: React.ReactNode;
+  sponsorList: ISponsorListItem[];
 };
 
-const Container = ({ children }: ContainerProps) => (
+const Container = ({ children, sponsorList }: ContainerProps) => (
   <ContainerBody>
     <NavBar />
     <Main>
-      <Wrapper>{children}</Wrapper>
+      <Wrapper>
+        {children}
+        {sponsorList.length > 0 ?? (
+          <SponsorWrapper>
+            <SponsorList list={sponsorList} />
+          </SponsorWrapper>
+        )}
+      </Wrapper>
     </Main>
     <Footer />
   </ContainerBody>

components/sponsor/SponsorList.tsx

@@ -0,0 +1,75 @@
+import { ISponsorData, ISponsorListItem } from '@/@types/sponsor';
+import { H3, H4 } from '@/components/heading';
+import { sponsorLevelLabel } from '@/constants/sponsor/sponsorLevel';
+import { styled } from 'stitches.config';
+
+const SponsorGroupContainer = styled('div', {
+  marginTop: 32,
+});
+const SponsorLevelContainer = styled('div', {
+  marginBottom: 8,
+});
+
+const SponsorGroup = styled('ul', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexWrap: 'wrap',
+  flex: 'auto',
+  gap: '2rem',
+});
+
+const SponsorGroupItem = styled('li', {
+  width: '200px',
+  height: '200px',
+  textAlign: 'center',
+  listStyle: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+});
+
+const SponsorImage = styled('img', {
+  width: '100%',
+  display: 'inline-block',
+  verticalAlign: 'top',
+});
+
+const SponsorListItem: React.FC<{ sponsor: ISponsorData }> = (props: {
+  sponsor: ISponsorData;
+}) => {
+  const { sponsor } = props;
+  return (
+    <SponsorGroupItem>
+      <SponsorImage src={sponsor.logoImage} alt={sponsor.name} />
+    </SponsorGroupItem>
+  );
+};
+
+const SponsorList: React.FC<{ list: ISponsorListItem[] }> = (props: {
+  list: ISponsorListItem[];
+}) => {
+  return (
+    <div>
+      <H3>후원사 목록</H3>
+      <SponsorGroupContainer>
+        {props.list.map((item: ISponsorListItem) => (
+          <SponsorLevelContainer key={`level-${item.level}`}>
+            <H4>
+              {sponsorLevelLabel[item.level as keyof typeof sponsorLevelLabel]}
+            </H4>
+            <SponsorGroup>
+              {item.list.map((item, index) => (
+                <SponsorListItem
+                  key={`sponsor-${item.level}-${index}`}
+                  sponsor={item}
+                />
+              ))}
+            </SponsorGroup>
+          </SponsorLevelContainer>
+        ))}
+      </SponsorGroupContainer>
+    </div>
+  );
+};
+
+export default SponsorList;

constants/sponsor/sponsorLevel.ts

@@ -223,3 +223,16 @@ export const SponsorLevelData2 = [
     publisher: '현수막\n스탠딩 배너\n웹사이트',
   },
 ];
+
+export const sponsorLevelLabel = {
+  Keystone: '키스톤',
+  Diamond: '다이아몬트',
+  Sapphire: '사파이어',
+  Platinum: '플래티넘',
+  Ruby: '루비',
+  Gold: '골드',
+  Silver: '실버',
+  Startup: '스타트업',
+  Community: '커뮤니티',
+  Publisher: '출판사',
+};

data/enums/SponsorLevel.ts

@@ -0,0 +1,12 @@
+export enum SponsorLevel {
+  Keystone = 1,
+  Diamond = 2,
+  Sapphire = 3,
+  Platinum = 4,
+  Ruby = 5,
+  Gold = 6,
+  Silver = 7,
+  Startup = 8,
+  Community = 9,
+  Publisher = 10,
+}

helpers/array.helpers.ts

@@ -0,0 +1,3 @@
+import { groupBy as _groupBy } from 'lodash-es';
+
+export const groupBy = _groupBy;

pages/_app.tsx

@@ -11,6 +11,8 @@ import Script from 'next/script';
 import { darkTheme } from '@/stitches.config';
 import { ThemeProvider } from 'next-themes';
 import RecoilNexus from 'recoil-nexus';
+import { getSponsorList } from '@/api/sponsor';
+import { ISponsorListItem } from '@/@types/sponsor';
 
 function RecoilDebugObserver() {
   const snapshot = useRecoilSnapshot();
@@ -27,7 +29,11 @@ function RecoilDebugObserver() {
 
 const queryClient = new QueryClient();
 
-function MyApp({ Component, pageProps }: AppProps) {
+function App({
+  Component,
+  pageProps,
+  sponsorList,
+}: AppProps & { sponsorList: ISponsorListItem[] }) {
   const router = useRouter();
   React.useEffect(() => {
     const handleRouteChange = (url: URL) => {
@@ -70,7 +76,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <RecoilNexus />
           {process.env.NODE_ENV === 'development' && <RecoilDebugObserver />}
           <QueryClientProvider client={queryClient}>
-            <Container>
+            <Container sponsorList={sponsorList}>
               <Script
                 strategy="afterInteractive"
                 src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
@@ -85,4 +91,17 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-export default MyApp;
+App.getInitialProps = async () => {
+  try {
+    const sponsorList = await getSponsorList();
+    console.log(sponsorList);
+    return {
+      sponsorList,
+    };
+  } catch (e) {
+    console.error(e);
+    return [];
+  }
+};
+
+export default App;