feat: TeddyMonthly

TeddyMonthly 관련 코드 수정

app/teddy/monthly/page.tsx

@@ -0,0 +1,9 @@
+import { TeddyMonthly } from '@/views/teddy/index';
+
+export default function TeddyMonthlyPage() {
+    return (
+        <>
+            <TeddyMonthly />
+        </>
+    );
+}

src/views/teddy/index.tsx

@@ -1,3 +1,4 @@
 export { TeddyPage } from './ui/teddy-page';
 export { TeddyTop5 } from './ui/teddy-top5';
 export { TeddyWeekly } from './ui/teddy-weekly';
+export { TeddyMonthly } from './ui/teddy-monthly';

src/views/teddy/ui/teddy-monthly.tsx

@@ -0,0 +1,29 @@
+import { TeddyMonthlyMember } from '@/widgets/teddyMonthly';
+import { TeddyIntro } from '@/widgets/teddyIntro/index';
+import stylex from '@stylexjs/stylex';
+
+export const styles = stylex.create({
+  container: {
+    width: '1200px',
+    margin: '0 auto',
+    paddingTop: '115px',
+  },
+});
+
+export const TeddyMonthly = () => {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <TeddyIntro
+        title={'The Teddy received this month '}
+        content={
+          '이번 달에 곰인형을 받은 구성원을 소개합니다' +
+          '매달 업데이트 되며, 이번 달에 공로를 인정받은 우수한 구성원들이 이곳에 자리하고 있습니다.' +
+          '이들은 우리 동아리의 활동에 뛰어난 기여를 하였으며, 우리의 목표 달성을 위해 열심히 노력해왔습니다.' +
+          '그들의 헌신과 열정은 우리 모두에게 영감을 주고, 동시에 동아리 내의 긍정적인 분위기를 조성하는데 큰 역할을 합니다. 이번 달에 곰인형을 받은 회원들을 통해 우리는' +
+          '그들의 공로와 노력을 공식적으로 인정하고, 함께 성장하는 동아리로 나아가는 길을 함께합니다.'
+        }
+      />
+      <TeddyMonthlyMember />
+    </div>
+  );
+};

src/widgets/teddyMonthly/index.ts

@@ -0,0 +1 @@
+export { TeddyMonthlyMember } from './ui/teddyMonthlyMember';

src/widgets/teddyMonthly/ui/style.ts

@@ -0,0 +1,27 @@
+import * as stylex from '@stylexjs/stylex';
+import {
+  colors,
+  sizes,
+  fontWeight,
+} from '../../../shared/ui/styles/tokens.stylex';
+
+export const styles = stylex.create({
+  container: {
+    width: '1200px',
+    margin: '0 auto',
+    paddingTop: '215px',
+  },
+
+  image: {
+    width: '282px',
+    height: '312px',
+    borderRadius: '10px',
+    backgroundColor: colors.grey450,
+  },
+
+  imageContainer: {
+    display: 'flex',
+    gap: '24px',
+    height: '170px',
+  },
+});

src/widgets/teddyMonthly/ui/teddyMonthlyMember.tsx

@@ -0,0 +1,22 @@
+import { GetTeddyData } from "@/entities/teddy";
+import { styles } from './style';
+import stylex from '@stylexjs/stylex';
+
+export const TeddyMonthlyMember = async() => {
+    const TeddyData = await GetTeddyData('Monthly');
+    const dummyData = Array.from({ length: 4});
+
+    return (
+        <div {...stylex.props(styles.container)}>
+            {TeddyData.data == null ? (
+                <div {...stylex.props(styles.imageContainer)}>
+                    {dummyData.map((_, index) => (
+                        <div key={index} {...stylex.props(styles.image)}></div>
+                    ))}
+                </div>
+            ) : (
+                <div></div>
+            )}
+        </div>
+    );
+};