From 752c8c7b8ca6e0bdaa296ad0fdd80ae5986a1658 Mon Sep 17 00:00:00 2001 From: Luis Date: Tue, 28 Nov 2023 18:39:22 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20Feat(#272):=20Main=20Page=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 34 +++++++++++------- src/components/BottomModal/index.tsx | 47 +++++++++++++++++++++++++ src/components/Posts/index.tsx | 40 ++++++--------------- src/components/_common/AppBar/index.tsx | 21 ++++------- src/components/_common/Footer/index.tsx | 2 +- 5 files changed, 87 insertions(+), 57 deletions(-) create mode 100644 src/components/BottomModal/index.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index b6b9618c..54f8ddca 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,7 +4,7 @@ import type { Dispatch, SetStateAction } from "react"; import { useEffect, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; -import { usePathname } from "next/navigation"; +import BottomModal from "@/components/BottomModal"; import Pagination from "@/components/Pagination"; import Posts from "@/components/Posts"; import Dolphin from "@/images/dolphin.png"; @@ -35,7 +35,6 @@ import Button, { buttonSize } from "@/components/_common/Button"; import Icon from "@/components/_common/Icon"; import AlertModal from "@/components/_common/Modal/AlertModal"; import LoginModal from "@/components/_common/Modal/LoginModal"; -import NavigationBar from "@/components/_common/NavigationBar"; import { MultiSelector, SingleSelector } from "@/components/_common/Selector"; import StickyButton from "@/components/_common/StickyButton"; import { @@ -49,7 +48,7 @@ import { steadyRunningMethods } from "@/constants/selectorItems"; const Home = () => { const { page, setPage } = usePageStore(); const [like, setLike] = useState(false); - const [recruit, setRecruit] = useState(false); + const [recruit, setRecruit] = useState(true); const [post, setPost] = useState(); const [type, setType] = useState("all"); const [activeIndex, setActiveIndex] = useState(0); @@ -61,7 +60,6 @@ const Home = () => { const [mode, setMode] = useState(""); const { isAuth } = useAuthStore(); const [isInitialRender, setIsInitialRender] = useState(true); - const pathname = usePathname(); const rankImageArray = [ { image: First, @@ -76,6 +74,7 @@ const Home = () => { const { isFocus, setIsFocus } = useIsSearchBarFocusStore(); const { isOpen } = useLoginModalOpenStore(); const inputRef = useRef(null); + const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { if (!isOpen && isFocus) { @@ -557,11 +556,19 @@ const Home = () => {
{isAuth && ( - - + + - +
)} {!isAuth && ( { } trigger={
- -
@@ -664,7 +674,7 @@ const Home = () => {
-
+
{
ChannelIO.showMessenger()} /> + {isModalOpen && setIsModalOpen(false)} />} - ); }; diff --git a/src/components/BottomModal/index.tsx b/src/components/BottomModal/index.tsx new file mode 100644 index 00000000..ff756320 --- /dev/null +++ b/src/components/BottomModal/index.tsx @@ -0,0 +1,47 @@ +// components/BottomModal.js +import { useEffect, useState } from "react"; + +interface BottomModalType { + onClose: () => void; +} + +const BottomModal = ({ onClose }: BottomModalType) => { + const [isOpen, setIsOpen] = useState(true); + + const handleClose = () => { + setIsOpen(false); + onClose && onClose(); + }; + + // Add useEffect to listen for isOpen changes and apply transition effect + useEffect(() => { + if (isOpen) { + document.body.style.overflow = "hidden"; // Disable scrolling when modal is open + } else { + document.body.style.overflow = ""; // Enable scrolling when modal is closed + } + }, [isOpen]); + + return ( +
+
+

Modal Content

+ + +
+
+ ); +}; + +export default BottomModal; diff --git a/src/components/Posts/index.tsx b/src/components/Posts/index.tsx index f9325616..30328360 100644 --- a/src/components/Posts/index.tsx +++ b/src/components/Posts/index.tsx @@ -97,41 +97,21 @@ const Posts = ({ info }: { info: Steadies }) => {
{item.profileImage !== "new_profile_image.jpg" ? ( - <> - - - + ) : ( - <> +
profile - profile - +
)} |{" "} {item.nickname.length > 6 diff --git a/src/components/_common/AppBar/index.tsx b/src/components/_common/AppBar/index.tsx index bb97378b..383893a4 100644 --- a/src/components/_common/AppBar/index.tsx +++ b/src/components/_common/AppBar/index.tsx @@ -27,20 +27,13 @@ const AppBar = ({ className }: AppBarProps) => { )} > - 스테디 로고 - 스테디 로고 +
+ 스테디 로고 +
{isAuth && (
diff --git a/src/components/_common/Footer/index.tsx b/src/components/_common/Footer/index.tsx index 00e50108..46f0633d 100644 --- a/src/components/_common/Footer/index.tsx +++ b/src/components/_common/Footer/index.tsx @@ -11,7 +11,7 @@ const Footer = () => { return (
From 6d0ad2aca9fa22856b00b49d680fa317db49b835 Mon Sep 17 00:00:00 2001 From: Musix Date: Wed, 29 Nov 2023 16:57:05 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20Feat(#272):=20Main=20Page=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 105 +++++++++ src/app/page.tsx | 201 ++++++++++++++---- src/components/BottomModal/index.tsx | 47 ---- src/components/_common/AppBar/index.tsx | 23 +- .../_common/NotificationPopup/index.tsx | 10 +- 6 files changed, 277 insertions(+), 110 deletions(-) delete mode 100644 src/components/BottomModal/index.tsx diff --git a/package.json b/package.json index 22e61e97..08fdfddb 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-dom": "^18", "react-hook-form": "^7.47.0", "react-infinite-scroller": "^1.2.6", + "react-modal-sheet": "^2.2.0", "sharp": "^0.32.6", "tailwind-merge": "^1.14.0", "tailwind-scrollbar-hide": "^1.1.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4ad5ddde..db6e50bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ dependencies: react-infinite-scroller: specifier: ^1.2.6 version: 1.2.6(react@18.0.0) + react-modal-sheet: + specifier: ^2.2.0 + version: 2.2.0(framer-motion@10.16.5)(react@18.0.0) sharp: specifier: ^0.32.6 version: 0.32.6 @@ -549,6 +552,20 @@ packages: chalk: 4.1.2 dev: true + /@emotion/is-prop-valid@0.8.8: + resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} + requiresBuild: true + dependencies: + '@emotion/memoize': 0.7.4 + dev: false + optional: true + + /@emotion/memoize@0.7.4: + resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + requiresBuild: true + dev: false + optional: true + /@eslint-community/eslint-utils@4.4.0(eslint@8.0.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2165,10 +2182,63 @@ packages: react-dom: 18.0.0(react@18.0.0) dev: false + /@react-aria/ssr@3.9.0(react@18.0.0): + resolution: {integrity: sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==} + engines: {node: '>= 12'} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + '@swc/helpers': 0.5.2 + react: 18.0.0 + dev: false + + /@react-aria/utils@3.17.0(react@18.0.0): + resolution: {integrity: sha512-NEul0cQ6tQPdNSHYzNYD+EfFabeYNvDwEiHB82kK/Tsfhfm84SM+baben/at2N51K7iRrJPr5hC5fi4+P88lNg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + '@react-aria/ssr': 3.9.0(react@18.0.0) + '@react-stately/utils': 3.9.0(react@18.0.0) + '@react-types/shared': 3.22.0(react@18.0.0) + '@swc/helpers': 0.4.36 + clsx: 1.2.1 + react: 18.0.0 + dev: false + + /@react-stately/utils@3.9.0(react@18.0.0): + resolution: {integrity: sha512-yPKFY1F88HxuZ15BG2qwAYxtpE4HnIU0Ofi4CuBE0xC6I8mwo4OQjDzi+DZjxQngM9D6AeTTD6F1V8gkozA0Gw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + '@swc/helpers': 0.5.2 + react: 18.0.0 + dev: false + + /@react-types/shared@3.22.0(react@18.0.0): + resolution: {integrity: sha512-yVOekZWbtSmmiThGEIARbBpnmUIuePFlLyctjvCbgJgGhz8JnEJOipLQ/a4anaWfzAgzSceQP8j/K+VOOePleA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + react: 18.0.0 + dev: false + /@rushstack/eslint-patch@1.5.1: resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==} dev: true + /@swc/helpers@0.4.14: + resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==} + dependencies: + tslib: 2.6.2 + dev: false + + /@swc/helpers@0.4.36: + resolution: {integrity: sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==} + dependencies: + legacy-swc-helpers: /@swc/helpers@0.4.14 + tslib: 2.6.2 + dev: false + /@swc/helpers@0.5.2: resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} dependencies: @@ -2868,6 +2938,11 @@ packages: wrap-ansi: 7.0.0 dev: true + /clsx@1.2.1: + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} + engines: {node: '>=6'} + dev: false + /clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} @@ -3869,6 +3944,24 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true + /framer-motion@10.16.5(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + tslib: 2.6.2 + optionalDependencies: + '@emotion/is-prop-valid': 0.8.8 + dev: false + /fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} dev: false @@ -5368,6 +5461,18 @@ packages: /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + /react-modal-sheet@2.2.0(framer-motion@10.16.5)(react@18.0.0): + resolution: {integrity: sha512-OAIWuVWxMx3zQqrMLbYWnczadplg0WLd+AaBWmN5+ysNF5/pneqjkOV3AWaIZOCIF4TcrejiCsTduutbzCRP2Q==} + engines: {node: '>=16'} + peerDependencies: + framer-motion: '>=6' + react: '>=16' + dependencies: + '@react-aria/utils': 3.17.0(react@18.0.0) + framer-motion: 10.16.5(react-dom@18.0.0)(react@18.0.0) + react: 18.0.0 + dev: false + /react-remove-scroll-bar@2.3.4(@types/react@18.0.0)(react@18.0.0): resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==} engines: {node: '>=10'} diff --git a/src/app/page.tsx b/src/app/page.tsx index 54f8ddca..4e240ef6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,9 +2,9 @@ import type { Dispatch, SetStateAction } from "react"; import { useEffect, useRef, useState } from "react"; +import Sheet from "react-modal-sheet"; import Image from "next/image"; import Link from "next/link"; -import BottomModal from "@/components/BottomModal"; import Pagination from "@/components/Pagination"; import Posts from "@/components/Posts"; import Dolphin from "@/images/dolphin.png"; @@ -74,7 +74,7 @@ const Home = () => { const { isFocus, setIsFocus } = useIsSearchBarFocusStore(); const { isOpen } = useLoginModalOpenStore(); const inputRef = useRef(null); - const [isModalOpen, setIsModalOpen] = useState(false); + const [isModalOpen, setModalOpen] = useState(false); useEffect(() => { if (!isOpen && isFocus) { @@ -207,6 +207,14 @@ const Home = () => { ) + 1; }; + const setToInitialState = () => { + setStack(""); + setPosition(""); + setMode(""); + setLike(false); + setRecruit(true); + }; + useEffect(() => { if (data) { setIsInitialRender(false); @@ -293,7 +301,7 @@ const Home = () => { return (
-
+
{
setActiveIndex(0)} >
setActiveIndex(1)} >
setActiveIndex(2)} >
-
🔥 인기 스테디
-
+
+ 🔥 인기 스테디 +
+
{popularSteadies.content.slice(0, 4).map((item, index) => ( -
+
{index <= 2 ? ( rank image ) : ( "" )} -
-
-
+
+
+
D-{calcDateDifference(item.deadline)}
-
-
+
+
{item.type === "STUDY" ? "📖 스터디" : "🖥 프로젝트"}
{item.title}
-
-
+
+
마감일 | {item.deadline}
-
+
{
handleInputChange(e)} @@ -554,21 +562,16 @@ const Home = () => {
-
+
{isAuth && ( -
- - - - -
+ )} {!isAuth && ( { /> } trigger={ -
- - -
+ } >
@@ -605,6 +600,12 @@ const Home = () => {
)} +
{
ChannelIO.showMessenger()} /> - {isModalOpen && setIsModalOpen(false)} />} + setModalOpen(false)} + > + + + +
+ ({ + value: stack.id.toString(), + label: stack.name, + }))} + onSelectedChange={(value) => + setStack(value.map((item) => item.label).join(",")) + } + className="w-220" + /> + ({ + value: position.name, + label: position.name, + }))} + onSelectedChange={(value) => + setPosition(value.map((item) => item.label).join(",")) + } + className="w-220" + /> + setMode(value)} + /> +
+ {isAuth && ( + + )} + {!isAuth && ( + + 로그인 + + } + /> + } + trigger={ + + } + > +
+ 로그인이 필요한 기능입니다!
+ 로그인 하시겠어요? +
+ + )} +
+
+ +
+
+ +
+
+ + + +
); diff --git a/src/components/BottomModal/index.tsx b/src/components/BottomModal/index.tsx deleted file mode 100644 index ff756320..00000000 --- a/src/components/BottomModal/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -// components/BottomModal.js -import { useEffect, useState } from "react"; - -interface BottomModalType { - onClose: () => void; -} - -const BottomModal = ({ onClose }: BottomModalType) => { - const [isOpen, setIsOpen] = useState(true); - - const handleClose = () => { - setIsOpen(false); - onClose && onClose(); - }; - - // Add useEffect to listen for isOpen changes and apply transition effect - useEffect(() => { - if (isOpen) { - document.body.style.overflow = "hidden"; // Disable scrolling when modal is open - } else { - document.body.style.overflow = ""; // Enable scrolling when modal is closed - } - }, [isOpen]); - - return ( -
-
-

Modal Content

- - -
-
- ); -}; - -export default BottomModal; diff --git a/src/components/_common/AppBar/index.tsx b/src/components/_common/AppBar/index.tsx index 383893a4..fa32b57f 100644 --- a/src/components/_common/AppBar/index.tsx +++ b/src/components/_common/AppBar/index.tsx @@ -14,7 +14,7 @@ interface AppBarProps { className?: string; } -export const appBarTextStyles = "text-lg font-bold"; +export const appBarTextStyles = "text-12 md:text-lg font-bold"; const AppBar = ({ className }: AppBarProps) => { const { isAuth } = useAuthStore(); @@ -36,9 +36,11 @@ const AppBar = ({ className }: AppBarProps) => {
{isAuth && ( -
+
-
내 스테디
+
+ 내 스테디 +
{ { label: "로그아웃", linkTo: "/logout" }, ]} > - 스테디 로고 +
+ 스테디 로고 +
)} diff --git a/src/components/_common/NotificationPopup/index.tsx b/src/components/_common/NotificationPopup/index.tsx index 61b31a49..dcfa31ec 100644 --- a/src/components/_common/NotificationPopup/index.tsx +++ b/src/components/_common/NotificationPopup/index.tsx @@ -103,21 +103,17 @@ const NotificationPopup = () => { setNotificationMenuOpen(!notificationMenuOpen)} > -
+
{freshCount > 0 && (
{freshCount}
)} - +
From 44bf53e6f352f26c8b324f2aef74ebc1f3888078 Mon Sep 17 00:00:00 2001 From: Musix Date: Thu, 30 Nov 2023 17:00:14 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=9D=20Chore(#272):=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 148 +++++++++++++++++++++++++++++++++ src/components/Posts/index.tsx | 2 +- 2 files changed, 149 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d4fa1f0..8179ca68 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,30 @@ dependencies: react-infinite-scroller: specifier: ^1.2.6 version: 1.2.6(react@18.0.0) + react-modal-sheet: + specifier: ^2.2.0 + version: 2.2.0(framer-motion@10.16.5)(react@18.0.0) + rehype-parse: + specifier: ^9.0.0 + version: 9.0.0 + rehype-remark: + specifier: ^10.0.0 + version: 10.0.0 + rehype-stringify: + specifier: ^10.0.0 + version: 10.0.0 + remark-parse: + specifier: ^11.0.0 + version: 11.0.0 + remark-rehype: + specifier: ^11.0.0 + version: 11.0.0 + remark-stringify: + specifier: ^11.0.0 + version: 11.0.0 + sanitize-html: + specifier: ^2.11.0 + version: 2.11.0 sharp: specifier: ^0.32.6 version: 0.32.6 @@ -3525,6 +3549,82 @@ packages: react-dom: 18.0.0(react@18.0.0) dev: false + /@react-aria/ssr@3.9.0(react@18.0.0): + resolution: + { + integrity: sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==, + } + engines: { node: ">= 12" } + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + "@swc/helpers": 0.5.2 + react: 18.0.0 + dev: false + + /@react-aria/utils@3.17.0(react@18.0.0): + resolution: + { + integrity: sha512-NEul0cQ6tQPdNSHYzNYD+EfFabeYNvDwEiHB82kK/Tsfhfm84SM+baben/at2N51K7iRrJPr5hC5fi4+P88lNg==, + } + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + "@react-aria/ssr": 3.9.0(react@18.0.0) + "@react-stately/utils": 3.9.0(react@18.0.0) + "@react-types/shared": 3.22.0(react@18.0.0) + "@swc/helpers": 0.4.36 + clsx: 1.2.1 + react: 18.0.0 + dev: false + + /@react-hook/intersection-observer@3.1.1(react@18.0.0): + resolution: + { + integrity: sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==, + } + peerDependencies: + react: ">=16.8" + dependencies: + "@react-hook/passive-layout-effect": 1.2.1(react@18.0.0) + intersection-observer: 0.10.0 + react: 18.0.0 + dev: false + + /@react-hook/passive-layout-effect@1.2.1(react@18.0.0): + resolution: + { + integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==, + } + peerDependencies: + react: ">=16.8" + dependencies: + react: 18.0.0 + dev: false + + /@react-stately/utils@3.9.0(react@18.0.0): + resolution: + { + integrity: sha512-yPKFY1F88HxuZ15BG2qwAYxtpE4HnIU0Ofi4CuBE0xC6I8mwo4OQjDzi+DZjxQngM9D6AeTTD6F1V8gkozA0Gw==, + } + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + "@swc/helpers": 0.5.2 + react: 18.0.0 + dev: false + + /@react-types/shared@3.22.0(react@18.0.0): + resolution: + { + integrity: sha512-yVOekZWbtSmmiThGEIARbBpnmUIuePFlLyctjvCbgJgGhz8JnEJOipLQ/a4anaWfzAgzSceQP8j/K+VOOePleA==, + } + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + dependencies: + react: 18.0.0 + dev: false + /@rushstack/eslint-patch@1.5.1: resolution: { @@ -3532,6 +3632,32 @@ packages: } dev: true + /@stitches/core@1.2.8: + resolution: + { + integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==, + } + dev: false + + /@swc/helpers@0.4.14: + resolution: + { + integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==, + } + dependencies: + tslib: 2.6.2 + dev: false + + /@swc/helpers@0.4.36: + resolution: + { + integrity: sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==, + } + dependencies: + legacy-swc-helpers: /@swc/helpers@0.4.14 + tslib: 2.6.2 + dev: false + /@swc/helpers@0.5.2: resolution: { @@ -10024,6 +10150,28 @@ packages: integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==, } + /react-is@17.0.2: + resolution: + { + integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==, + } + dev: false + + /react-modal-sheet@2.2.0(framer-motion@10.16.5)(react@18.0.0): + resolution: + { + integrity: sha512-OAIWuVWxMx3zQqrMLbYWnczadplg0WLd+AaBWmN5+ysNF5/pneqjkOV3AWaIZOCIF4TcrejiCsTduutbzCRP2Q==, + } + engines: { node: ">=16" } + peerDependencies: + framer-motion: ">=6" + react: ">=16" + dependencies: + "@react-aria/utils": 3.17.0(react@18.0.0) + framer-motion: 10.16.5(react-dom@18.0.0)(react@18.0.0) + react: 18.0.0 + dev: false + /react-remove-scroll-bar@2.3.4(@types/react@18.0.0)(react@18.0.0): resolution: { diff --git a/src/components/Posts/index.tsx b/src/components/Posts/index.tsx index 30328360..2d7b98d6 100644 --- a/src/components/Posts/index.tsx +++ b/src/components/Posts/index.tsx @@ -101,7 +101,7 @@ const Posts = ({ info }: { info: Steadies }) => { src={item.profileImage} alt="profile" radius="full" - className="h-20 w-20 cursor-pointer md:flex md:h-25 md:w-25" + className="aspect-square h-20 w-20 cursor-pointer md:flex md:h-25 md:w-25" fallback={""} /> ) : (