daily-tf : impl when2meet/detail page

package.json

@@ -17,10 +17,15 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.1",
+    "@mui/material": "^6.4.1",
     "@tanstack/react-query": "^5.36.2",
     "@tanstack/react-query-devtools": "^5.36.2",
     "axios": "^0.21.2",
     "classnames": "^2.2.6",
+    "date-fns": "^4.1.0",
     "framer-motion": "^10.15.0",
     "i18next": "^19.7.0",
     "i18next-browser-languagedetector": "^6.0.1",
@@ -44,6 +49,7 @@
     "react-slick": "^0.29.0",
     "redux": "^4.0.0",
     "slick-carousel": "^1.8.1",
+    "styled-components": "^6.1.14",
     "zabo-embed": "^0.0.7"
   },
   "devDependencies": {

src/App.tsx

@@ -11,7 +11,16 @@ import CampaignPopupImage from '@/features/campaign/components/popup/CampaignPop
 import PopupMenu from '@/features/campaign/components/popup/PopupMenu';
 import { setIsPortrait, setSemesters, setTracks, setUser } from '@/redux/actions/common';
 
+import { ThemeProvider } from 'styled-components';
+import colors from './lib/styles/themes/colors';
+import fonts from './lib/styles/themes/fonts';
+
 const App: React.FC = () => {
+  const Theme = {
+    colors,
+    fonts,
+  };
+
   const dispatch = useDispatch();
   const location = useLocation();
   const [popupOpen, setPopupOpen] = useState(localStorage.getItem(STORAGE_KEY) !== CAMPAIGN_KEY);
@@ -102,30 +111,32 @@ const App: React.FC = () => {
 
   return (
     <>
-      <Header />
-      <Outlet />
-      <section>
-        <BannerPopup popupOpen={popupOpen} setPopupOpen={setPopupOpen}>
-          <CampaignPopupImage closePopup={() => setPopupOpen(false)} />
-          <PopupMenu
-            onClose={() => {
-              ReactGA.event({
-                category: 'Campaign',
-                action: 'popup-close',
-              });
-              setPopupOpen(false);
-            }}
-            onDoNotShow={() => {
-              ReactGA.event({
-                category: 'Campaign',
-                action: 'popup-do-not-show',
-              });
-              setDoNotShow(true);
-              setPopupOpen(false);
-            }}
-          />
-        </BannerPopup>
-      </section>
+      <ThemeProvider theme={Theme}>
+        <Header />
+        <Outlet />
+        <section>
+          <BannerPopup popupOpen={popupOpen} setPopupOpen={setPopupOpen}>
+            <CampaignPopupImage closePopup={() => setPopupOpen(false)} />
+            <PopupMenu
+              onClose={() => {
+                ReactGA.event({
+                  category: 'Campaign',
+                  action: 'popup-close',
+                });
+                setPopupOpen(false);
+              }}
+              onDoNotShow={() => {
+                ReactGA.event({
+                  category: 'Campaign',
+                  action: 'popup-do-not-show',
+                });
+                setDoNotShow(true);
+                setPopupOpen(false);
+              }}
+            />
+          </BannerPopup>
+        </section>
+      </ThemeProvider>
     </>
   );
 };

src/common/daily-tf/Arrow.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+interface ArrowProps {
+  handleOnClick: () => void;
+  isForward?: boolean;
+}
+
+const ArrowWrapper = styled.div`
+  display: flex;
+  width: 24px;
+  height: 24px;
+  color: ${({ theme }) => theme.colors.Highlight.default};
+  position: relative;
+  overflow: visible;
+  display: inline-block;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const Triangle = styled.div`
+  width: 0;
+  height: 0;
+  border-left: 4.5px solid transparent;
+  border-right: 4.5px solid transparent;
+  border-top: 15px solid rgba(229, 76, 101, 0.8);
+`;
+
+const HoverTextWrapper = styled.div`
+  background-color: rgba(229, 76, 101, 0.8);
+  color: white;
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 400;
+  padding: 10px;
+  white-space: nowrap;
+  border-radius: 2px;
+`;
+
+const HoverWrapper = styled.div<{ top: number; left: number }>`
+  position: absolute;
+  top: ${(props) => props.top - 5}px;
+  left: ${(props) => props.left}px;
+  transform: translateX(-50%) translateY(-50%);
+  pointer-events: none;
+  width: fit-content;
+  height: auto;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Arrow: React.FC<ArrowProps> = ({ handleOnClick, isForward = true }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const arrowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (arrowRef.current) {
+      const rect = arrowRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.top - 20,
+        left: rect.left + rect.width / 2,
+      });
+    }
+  }, [isHovered]);
+
+  return (
+    <ArrowWrapper
+      onClick={handleOnClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      ref={arrowRef}>
+      {isHovered &&
+        ReactDOM.createPortal(
+          <HoverWrapper top={position.top} left={position.left}>
+            <HoverTextWrapper>표시되지 않은 날짜가 있어요!</HoverTextWrapper>
+            <Triangle />
+          </HoverWrapper>,
+          document.body,
+        )}
+      {isForward ? <ArrowForwardIosIcon /> : <ArrowBackIosNewIcon />}
+    </ArrowWrapper>
+  );
+};
+
+export default Arrow;

src/common/daily-tf/Button.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React, { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+type ButtonProps = {
+  type?: keyof typeof ButtonTypeInner;
+  children?: React.ReactNode;
+  isFlexColumn?: boolean;
+  isFlexRow?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+const ButtonInner = styled.div<{ isFlexColumn: boolean; isFlexRow: boolean }>`
+  display: inline-flex;
+  padding: 9px 20px;
+  justify-content: center;
+  width: ${(props) => (props.isFlexRow ? '100%' : 'fit-content')};
+  height: ${(props) => (props.isFlexColumn ? '100%' : 'fit-content')};
+  align-items: center;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 17.5px;
+  font-weight: 400;
+`;
+
+const ButtonDefaultInner = styled(ButtonInner)`
+  color: ${({ theme }) => theme.colors.Text.placeholder};
+  background: ${({ theme }) => theme.colors.Background.Button.default};
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme }) => theme.colors.Background.Button.dark};
+  }
+`;
+
+const ButtonSelectedInner = styled(ButtonInner)`
+  color: ${({ theme }) => theme.colors.Highlight.default};
+  background: ${({ theme }) => theme.colors.Background.Button.highlight};
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme }) => theme.colors.Background.Button.highlightDark};
+  }
+`;
+
+const ButtonDisabledInner = styled(ButtonInner)`
+  color: ${({ theme }) => theme.colors.Text.placeholder};
+  background: ${({ theme }) => theme.colors.Background.Button.default};
+  cursor: not-allowed;
+`;
+
+const ButtonTypeInner = {
+  default: ButtonDefaultInner,
+  disabled: ButtonDisabledInner,
+  selected: ButtonSelectedInner,
+};
+
+const ButtonWithTextInner = styled.div`
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
+`;
+
+const ButtonWithChildren = (children: React.ReactNode) => (
+  <ButtonWithTextInner>{children}</ButtonWithTextInner>
+);
+
+const Button = ({
+  type = 'default',
+  isFlexRow = true,
+  isFlexColumn = true,
+  children = undefined,
+  ...divProps
+}: ButtonProps) => {
+  const ButtonChosenInner = ButtonTypeInner[type];
+
+  const ButtonContent = () => {
+    return ButtonWithChildren(children);
+  };
+
+  return (
+    <ButtonChosenInner
+      {...divProps}
+      onClick={type === 'disabled' ? undefined : divProps.onClick}
+      isFlexRow={isFlexRow}
+      isFlexColumn={isFlexColumn}>
+      <ButtonContent />
+    </ButtonChosenInner>
+  );
+};
+
+export default Button;