Merge branch 'develop' of https://github.com/yourssu/Soomsil-Web into…

… feat/#201-drawer-service-remove

package.json

@@ -23,7 +23,8 @@
     "@tanem/react-nprogress": "^5.0.51",
     "@tanstack/react-query": "^5.14.2",
     "@yourssu/design-system-react": "^1.1.2",
-    "@yourssu/logging-system-react": "^1.0.0",
+    "@yourssu/logging-system-react": "^1.1.0",
+    "@yourssu/utils": "^0.2.1",
     "axios": "^1.6.2",
     "date-fns": "^3.6.0",
     "react": "^18.2.0",

src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
+import { CustomDialog } from './components/Dialog/CustomDialog';
 import { Router } from './router';
 
 export const App = () => {
@@ -9,6 +10,7 @@ export const App = () => {
       <RecoilRoot>
         <BrowserRouter>
           <Router />
+          <CustomDialog />
         </BrowserRouter>
       </RecoilRoot>
     </>

src/components/Card/Card.style.ts

@@ -42,7 +42,7 @@ export const StyledBookmarkContainer = styled.div`
   align-items: center;
 `;
 
-export const StyledSettingIconContainer = styled.div`
-  display: flex;
+export const StyledSettingIconContainer = styled.button`
+  display: inline-flex;
   align-items: center;
 `;

src/components/Card/Card.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
+
 import {
-  IconContext,
+  IcDotsVerticalLine,
   IcStarFilled,
   IcStarLine,
-  IcDotsVerticalLine,
+  IconContext,
 } from '@yourssu/design-system-react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from 'styled-components';
@@ -12,12 +14,12 @@ import SmallThumbnail from '@/assets/smallThumbnail.png';
 import { FlexGrowItem } from '@/components/FlexContainer/FlexContainer';
 
 import {
+  StyledBookmarkContainer,
   StyledContainer,
+  StyledSettingIconContainer,
   StyledText,
-  StyledTitle,
   StyledThumbnail,
-  StyledBookmarkContainer,
-  StyledSettingIconContainer,
+  StyledTitle,
 } from './Card.style';
 import {
   CardContainerProps,
@@ -83,18 +85,16 @@ const CardContent = ({ title, body, bookmarkCount, isBookmarked }: CardContentPr
   );
 };
 
-const CardSetting = ({ onClick }: CardSettingProps) => {
-  const theme = useTheme();
-  return (
-    <StyledSettingIconContainer>
-      <IconContext.Provider
-        value={{ color: theme.color.buttonNormal, size: '36px', onClick: onClick }}
-      >
-        <IcDotsVerticalLine />
-      </IconContext.Provider>
-    </StyledSettingIconContainer>
-  );
-};
+const CardSetting = React.forwardRef<HTMLButtonElement, CardSettingProps>(
+  ({ onClick, ...props }, ref) => {
+    const theme = useTheme();
+    return (
+      <StyledSettingIconContainer ref={ref} {...props} onClick={onClick}>
+        <IcDotsVerticalLine color={theme.color.buttonNormal} size="36px" />
+      </StyledSettingIconContainer>
+    );
+  }
+);
 
 export const Card = Object.assign(CardContainer, {
   BigThumbnail: CardBigThumbnail,

src/components/Dialog/CustomDialog.style.ts

@@ -0,0 +1,31 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import styled, { keyframes } from 'styled-components';
+
+import { Z_INDEX } from '@/constants/zIndex.constant';
+
+const overlayShow = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const StyledDialogOverlay = styled(Dialog.Overlay)`
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: ${Z_INDEX.dialog};
+`;
+
+export const StyledDialogContent = styled(Dialog.Content)`
+  background-color: ${({ theme }) => theme.color.buttonBright};
+  box-shadow: 0rem 0rem 0.375rem 0rem rgba(61, 61, 61, 0.2);
+  border-radius: 0.5rem;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 1.5rem;
+  z-index: ${Z_INDEX.dialog};
+`;

src/components/Dialog/CustomDialog.tsx

@@ -0,0 +1,28 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useRecoilState } from 'recoil';
+
+import { DIALOG } from '@/constants/dialog.constant.tsx';
+import { DialogState } from '@/recoil/DialogState';
+
+import { StyledDialogContent, StyledDialogOverlay } from './CustomDialog.style';
+
+export const CustomDialog = () => {
+  const [dialog, setDialog] = useRecoilState(DialogState);
+
+  const handleClose = () => {
+    setDialog(null);
+  };
+
+  return (
+    <>
+      {dialog && (
+        <Dialog.Root modal={true} open={dialog.open} onOpenChange={handleClose}>
+          <Dialog.Portal>
+            <StyledDialogOverlay />
+            <StyledDialogContent>{DIALOG[dialog.type]}</StyledDialogContent>
+          </Dialog.Portal>
+        </Dialog.Root>
+      )}
+    </>
+  );
+};

src/components/Dialog/LoginDialog/LoginDialog.style.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+`;
+
+export const StyledTitle = styled.p`
+  white-space: pre-line;
+  text-align: center;
+  ${({ theme }) => theme.typo.body1};
+  color: ${({ theme }) => theme.color.textPrimary};
+`;
+
+export const StyledButtonContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;

src/components/Dialog/LoginDialog/LoginDialog.tsx

@@ -0,0 +1,39 @@
+import { DialogClose } from '@radix-ui/react-dialog';
+import { BoxButton } from '@yourssu/design-system-react';
+import { useNavigate } from 'react-router-dom';
+
+import Ppussung from '@/assets/defaultProfile.png';
+import { ProfileSvg } from '@/components/ProfileSvg/ProfileSVG';
+
+import { StyledContainer, StyledButtonContainer, StyledTitle } from './LoginDialog.style';
+
+export const LoginDialog = () => {
+  const navigate = useNavigate();
+
+  return (
+    <StyledContainer>
+      <ProfileSvg imageUrl={Ppussung} />
+      <StyledTitle>{'로그인이 필요한 서비스입니다.\n로그인하시겠어요?'}</StyledTitle>
+      <StyledButtonContainer>
+        <DialogClose asChild>
+          <BoxButton
+            rounding={4}
+            size="large"
+            variant="filled"
+            width="10.75rem"
+            onClick={() => {
+              navigate('/login');
+            }}
+          >
+            예
+          </BoxButton>
+        </DialogClose>
+        <DialogClose asChild>
+          <BoxButton rounding={4} size="large" variant="line" width="10.75rem">
+            아니오
+          </BoxButton>
+        </DialogClose>
+      </StyledButtonContainer>
+    </StyledContainer>
+  );
+};

src/components/ProfileDropdownMenu/ProfileDropdownMenu.style.ts

@@ -0,0 +1,44 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import styled, { css } from 'styled-components';
+
+import { Z_INDEX } from '@/constants/zIndex.constant';
+
+export const StyledProfileDropdownContent = styled(DropdownMenu.Content)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: fit-content;
+  padding: 1rem 0.75rem;
+  gap: 1rem;
+  z-index: ${Z_INDEX.dropdown};
+
+  border-radius: 0.25rem;
+  border: 1px solid ${({ theme }) => theme.color.borderThin};
+  background-color: ${({ theme }) => theme.color.bgNormal};
+  box-shadow: 0px 1px 3px 0px rgba(107, 114, 128, 0.4);
+`;
+
+export const StyledProfileDropdownNickname = styled(DropdownMenu.Item)`
+  ${({ theme }) => css`
+    ${theme.typo.body1}
+    color: ${theme.color.textPrimary};
+  `}
+`;
+
+export const StyledProfileDropdownEmail = styled(DropdownMenu.Item)`
+  ${({ theme }) => css`
+    ${theme.typo.caption0}
+    color: ${theme.color.textDisabled};
+  `}
+`;
+
+export const StyledProfileDropdownItem = styled(DropdownMenu.Item)`
+  ${({ theme }) => css`
+    ${theme.typo.body2}
+    color: ${theme.color.textPrimary};
+    &: hover {
+      color: ${theme.color.textPointed};
+    }
+  `}
+`;