🔖 release: 1.1v

grass-diary/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./jsconfig.paths.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES6"
+  },
+  "include": ["src/**/*"]
+}

grass-diary/jsconfig.paths.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@icon/*": ["src/assets/icon/*"],
+      "@components/*": ["src/components/*"],
+      "@constants/*": ["src/constants/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@pages/*": ["src/pages/*"],
+      "@services/*": ["src/services/*"],
+      "@utils/*": ["src/utils/*"],
+      "@recoil/*": ["src/recoil/*"]
+    }
+  }
+}

grass-diary/package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.22.0",
     "react-slick": "^0.30.1",
     "react-spring": "^9.7.3",
+    "recoil": "^0.7.7",
     "slick-carousel": "^1.8.1",
     "sweetalert2": "^11.6.13",
     "vite-plugin-stylex": "^0.5.0"

grass-diary/src/components/Button/BackButton.jsx

@@ -0,0 +1,45 @@
+import stylex from '@stylexjs/stylex';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+const styles = stylex.create({
+  button: {
+    backgroundColor: {
+      default: '#F9F9F9',
+      ':hover': '#000000',
+    },
+    color: {
+      default: '#000000',
+      ':hover': '#ffffff',
+    },
+    border: '1px solid #BFBFBF',
+    width: '36px',
+    height: '36px',
+    borderRadius: '50%',
+    cursor: 'pointer',
+    marginRight: '16px',
+    transition: '0.3s',
+  },
+});
+
+const BackButton = ({ goBackTo }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const goBack = () => {
+    if (goBackTo) {
+      return navigate(goBackTo);
+    }
+    if (location.state === 'editcomplete') {
+      return navigate(-2);
+    }
+    navigate(-1);
+  };
+  return (
+    <div>
+      <button onClick={goBack} type="button" {...stylex.props(styles.button)}>
+        <i className="fa-solid fa-arrow-left"></i>
+      </button>
+    </div>
+  );
+};
+
+export default BackButton;

grass-diary/src/components/Button/Button.jsx

@@ -0,0 +1,72 @@
+import stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  startButton: (
+    width,
+    height,
+    defaultColor,
+    hoverColor,
+    defaultBgColor,
+    hoverBgColor,
+    border,
+    marginTop,
+  ) => ({
+    padding: '12px 10px 12px 10px',
+    borderRadius: '30px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    transition: '0.5s',
+
+    width,
+    height,
+    border,
+    marginTop,
+
+    color: {
+      default: defaultColor,
+      ':hover': hoverColor,
+    },
+
+    backgroundColor: {
+      default: defaultBgColor,
+      ':hover': hoverBgColor,
+    },
+  }),
+});
+
+const Button = ({
+  text,
+  onClick,
+  width,
+  height,
+  defaultColor,
+  hoverColor,
+  defaultBgColor,
+  hoverBgColor,
+  border,
+  marginTop,
+}) => {
+  return (
+    <>
+      <button
+        onClick={onClick}
+        {...stylex.props(
+          styles.startButton(
+            width,
+            height,
+            defaultColor,
+            hoverColor,
+            defaultBgColor,
+            hoverBgColor,
+            border,
+            marginTop,
+          ),
+        )}
+      >
+        {text}
+      </button>
+    </>
+  );
+};
+
+export default Button;

grass-diary/src/components/Ellipsis.jsx

@@ -1,4 +1,4 @@
-import * as stylex from '@stylexjs/stylex';
+import stylex from '@stylexjs/stylex';
 import { useState, useRef, useEffect } from 'react';
 
 const ellipsis = stylex.create({

grass-diary/src/components/Feed/Feed.jsx

@@ -0,0 +1,75 @@
+import stylex from '@stylexjs/stylex';
+import { Link } from 'react-router-dom';
+import DOMPurify from 'dompurify';
+import { NormalLike } from '@components';
+
+const feed = stylex.create({
+  box: {
+    display: 'inline-block',
+    backgroundColor: '#F9F9F9',
+    boxShadow: `rgba(149, 157, 165, 0.2) 2px 2px 4px`,
+    borderRadius: '20px',
+    margin: '10px',
+    padding: '20px 30px',
+    width: '360px',
+    height: '440px',
+    ':hover': {
+      transform: 'scale(1.02)',
+    },
+    transition: '0.3s',
+    overflow: 'hidden',
+  },
+  header: {
+    display: 'flex',
+  },
+  img: {
+    width: '40px',
+    height: '40px',
+    objectFit: 'cover',
+    borderRadius: '50%',
+  },
+  name: {
+    lineHeight: '40px',
+    marginLeft: '10px',
+    fontSize: '13px',
+  },
+  title: {
+    fontSize: '22px',
+    fontWeight: '600',
+    margin: '18px 0',
+  },
+  content: {
+    height: '260px',
+    lineHeight: '27px',
+    overflow: 'hidden',
+  },
+});
+
+const Feed = ({ likeCount, link, title, content, name, profile }) => {
+  const createMarkup = htmlContent => {
+    return { __html: DOMPurify.sanitize(htmlContent) };
+  };
+
+  const processedContent =
+    content && content.length > 350 ? `${content.slice(0, 350)}...` : content;
+
+  return (
+    <Link to={link}>
+      <article {...stylex.props(feed.box)}>
+        <NormalLike likeCount={likeCount} justifyContent={'flex-end'} />
+        <div {...stylex.props(feed.header)}>
+          <img {...stylex.props(feed.img)} src={profile}></img>
+          <div {...stylex.props(feed.name)}>{name}</div>
+        </div>
+
+        <div {...stylex.props(feed.title)}>{title}</div>
+        <div
+          {...stylex.props(feed.content)}
+          dangerouslySetInnerHTML={createMarkup(processedContent)}
+        />
+      </article>
+    </Link>
+  );
+};
+
+export default Feed;