Feat: 폰트변경, 색상선택(static)

src/app/globals.css

@@ -48,3 +48,10 @@ body {
   box-shadow: none;
   background-color: transparent;
 }
+
+@font-face {
+  font-family: 'Pretendard-Medium';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/Pretendard-Medium.otf') format('opentype');
+}

src/components/canvas/fabricCanvas.jsx

@@ -81,6 +81,9 @@ export default function FabricCanvas() {
 
     canvas.selection = false;
 
+    // 캔버스에 로고 추가
+    addlogoToCanvas();
+
     canvas.renderAll();
   }, [canvas, isCanvasInit]);
 
@@ -125,6 +128,34 @@ export default function FabricCanvas() {
     setSaveOpen(false);
   };
 
+  const generateLogoText = () => {
+    const text = new fabric.Text('fit-a-pat', {
+      fontSize: 50,
+      fontFamily: 'Pretendard-Medium',
+      fill: 'rgba(78, 78, 78, 1)' /* 투명도 조절 */,
+      fontWeight: 'bold',
+      originX: 'center',
+      originY: 'center',
+      evented: false,
+      selectable: false,
+    });
+    return text;
+  };
+
+  const addlogoToCanvas = () => {
+    const logoText = generateLogoText();
+    logoText.set({
+      originX: 'center',
+      originY: 'center',
+      left: canvas.getWidth() / 2,
+      top: canvas.getHeight() / 2,
+      zIndex: 50,
+    });
+    canvas.discardActiveObject();
+    canvas.add(logoText);
+    canvas.renderAll();
+  };
+
   return (
     <Box
       sx={{

src/components/canvas/stylePicker.jsx

@@ -17,13 +17,13 @@ function simpleObjectToString(workouts) {
       if (workouts[i].aerobic) {
         string +=
           workouts[i].sets[j].intensity +
-          'km/h x ' +
+          'km/h | ' +
           workouts[i].sets[j].time +
           'min\n';
       } else {
         string +=
           workouts[i].sets[j].intensity +
-          'kg x ' +
+          'kg | ' +
           workouts[i].sets[j].time +
           'reps\n';
       }
@@ -33,14 +33,12 @@ function simpleObjectToString(workouts) {
   return string;
 }
 
-function simpleText(workoutsString) {
+function simpleText(workoutsString, color) {
   const text = new fabric.Text(workoutsString, {
     textAlign: 'left',
     fontSize: 20,
-    fontFamily: 'Helvetica',
-    fill: 'white',
-    stroke: 'black',
-    strokeWidth: 1,
+    fontFamily: 'Pretendard-Medium',
+    fill: color,
     fontWeight: 'bold',
     originX: 'center',
     originY: 'center',
@@ -80,9 +78,15 @@ export default function StylePicker(props) {
   React.useEffect(() => {
     if (value === null || value === undefined) return;
 
-    if (value === 'simple') {
+    if (value === 'white') {
       const workoutsString = simpleObjectToString(selectedWorkout);
-      const text = simpleText(workoutsString);
+      const text = simpleText(workoutsString, 'white');
+      setWorkoutResult(text);
+    }
+
+    if (value === 'black') {
+      const workoutsString = simpleObjectToString(selectedWorkout);
+      const text = simpleText(workoutsString, 'black');
       setWorkoutResult(text);
     }
   }, [value]);
@@ -106,17 +110,17 @@ export default function StylePicker(props) {
           }}
         >
           <TabList onChange={handleChange} aria-label="lab API tabs example">
-            <Tab label="Simple" value="simple" />
-            {
-              // WIP: Work In Progress
-            }
-            <Tab label="Work In Progress.." value="WIP" disabled={true} />{' '}
+            <Tab label="White" value="white" />
+            <Tab label="Black" value="black" />
           </TabList>
         </Box>
-        <TabPanel value="simple"></TabPanel>
-        <TabPanel value="2">Item Two</TabPanel>
+        {/* <TabPanel value="white"></TabPanel>
+        <TabPanel value="black"></TabPanel> */}
       </TabContext>
       <Button
+        sx={{
+          mt: 2,
+        }}
         variant="contained"
         onClick={() => {
           addItemToCanvasCenter(canvas, workoutResult);

src/components/canvas/workoutModal.jsx

@@ -12,6 +12,8 @@ import Box from '@mui/material/Box';
 import SelectWorkoutButtons from './selectWorkoutButtons';
 import StylePicker from './stylePicker';
 
+import { useSession } from 'next-auth/react';
+
 // 운동 예시 오브젝트
 const EXAMPLE_WORKOUT1 = {
   _id: '1',