Merge pull request #110 from CAUCSE/design/#109

[DESIGN] 동아리 관련 페이지 웹 반응형 디자인

package.json

@@ -29,6 +29,7 @@
     "react-ga": "^3.3.1",
     "react-hook-form": "^7.12.1",
     "react-quill": "^2.0.0",
+    "react-responsive": "^9.0.2",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^5.2.0",
     "react-simple-image-viewer": "^1.2.1",

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useAuthRedirect';
 export * from './usePageUiStore';
+export * from './useDeviceState';

src/hooks/useDeviceState.tsx

@@ -0,0 +1,8 @@
+import { useMediaQuery } from 'react-responsive';
+
+export const useDeviceState = () => {
+  const isMobile = useMediaQuery({
+    query: '(max-width:550px)',
+  });
+  return [isMobile];
+};

src/pages/circle/home/CircleHomePage.tsx

@@ -6,31 +6,16 @@ import * as Circle from './components';
 import { H2 } from './styled';
 
 import { BodyScreen, GNB, Header, PageBody, PageStoreHOC } from '@/components';
-import { usePageUiStore } from '@/hooks';
-
-const WEB_WIDTH_CONDITION = 550;
-const RESIZE_DELAY = 300;
-let timer: string | number | NodeJS.Timeout | undefined;
+import { usePageUiStore, useDeviceState } from '@/hooks';
 
 const CircleHomePage: React.FC = observer(() => {
   const { fetch, circles, joinedCircles } = usePageUiStore<PageUiStore.CircleHome>();
-  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+  const [isMobile] = useDeviceState();
 
   useEffect(() => {
     fetch();
   }, [fetch]);
 
-  useEffect(() => {
-    const handleWindowResize = () => {
-      clearTimeout(timer);
-      timer = setTimeout(function () {
-        setScreenWidth(window.innerWidth);
-      }, RESIZE_DELAY);
-    };
-    window.addEventListener('resize', handleWindowResize);
-    return () => window.removeEventListener('resize', handleWindowResize);
-  });
-
   return (
     <>
       <Header title="학부 동아리" />
@@ -41,7 +26,7 @@ const CircleHomePage: React.FC = observer(() => {
           <Circle.ListFrame
             items={circles}
             emptyText={'아직 등록된 동아리가 없어요!'}
-            ListComponent={screenWidth > WEB_WIDTH_CONDITION ? Circle.WebSlider : Circle.Slider}
+            ListComponent={isMobile ? Circle.MobileSlider : Circle.WebSlider}
           />
           <H2>내 동아리</H2>
           <Circle.ListFrame

src/pages/circle/home/components/Slider/CircleSlideCard.tsx → src/pages/circle/home/components/MobileSlider/CircleMobileSlideCard.tsx

@@ -1,15 +1,15 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
 import { memo, useState } from 'react';
 import { generatePath, useHistory } from 'react-router';
 
 // import { Icons } from '@/assets';
-import { Article } from '@/assets/icons';
 import { ClearButton } from '@/components';
 import { PAGE_URL } from '@/configs/path';
 import { usePageUiStore } from '@/hooks';
 
-export const CircleSlideCard: React.FC<{ model: Model.Circle }> = memo(
+export const CircleMobileSlideCard: React.FC<{ model: Model.Circle }> = memo(
   ({ model: { id: circleId, mainImage, name, newLineDescription } }) => {
     const { push } = useHistory();
     const [isFlipped, setFlip] = useState(false);
@@ -38,7 +38,7 @@ export const CircleSlideCard: React.FC<{ model: Model.Circle }> = memo(
           <Footer>
             <Name className="text-ellipsis-line">{name}</Name>
             <ClearButton onClick={handleFlip}>
-              <Icon active={isFlipped} />
+              <Icon />
             </ClearButton>
           </Footer>
         </Inner>
@@ -74,10 +74,9 @@ const Body = styled.div`
 
 const Cover = styled.div<{ mainImage: string | null }>`
   top: 6px;
-  left: 6px;
-  width: calc(100% - 12px);
+  left: 10px;
+  width: calc(100% - 20px);
   height: calc(100% - 6px);
-  border-radius: 5px;
 
   ${({ mainImage }) =>
     mainImage
@@ -88,11 +87,12 @@ const Cover = styled.div<{ mainImage: string | null }>`
           background: center / contain no-repeat url('/images/empty.png');
           background-size: 65%;
         `}
-  background-color: #efefef;
+  background-color: white;
+  border-bottom: 1px solid #dadada;
 `;
 
 const Name = styled.h3`
-  margin: 0 35px 0 13px;
+  margin: 2px 35px 0 13px;
   line-height: 36px;
   font-size: 12px;
   font-weight: bold;
@@ -133,8 +133,8 @@ const Footer = styled.div`
   height: 40px;
 `;
 
-const Icon = styled(Article)`
+const Icon = styled(ChangeCircleIcon)`
   position: absolute;
-  top: 9px;
-  right: 5px;
+  top: 7px;
+  right: 12px;
 `;

src/pages/circle/home/components/Slider/CircleSlider.tsx → src/pages/circle/home/components/MobileSlider/CircleMobileSlider.tsx

@@ -4,10 +4,10 @@ import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { Carousel } from 'react-responsive-carousel';
 
-import { CircleSlideCard } from './CircleSlideCard';
+import { CircleMobileSlideCard } from './CircleMobileSlideCard';
 import { ListComponent } from '../CircleListFrame';
 
-export const CircleSlider: ListComponent = observer(({ items }) => {
+export const CircleMobileSlider: ListComponent = observer(({ items }) => {
   const [config] = useState({
     autoPlay: false,
     // XXX: swipe 이후 자동으로 움직이는 버그가 있음
@@ -25,7 +25,7 @@ export const CircleSlider: ListComponent = observer(({ items }) => {
   return (
     <StyledCarousel {...config}>
       {items.map(item => (
-        <CircleSlideCard key={item.id} model={item} />
+        <CircleMobileSlideCard key={item.id} model={item} />
       ))}
     </StyledCarousel>
   );

src/pages/circle/home/components/MobileSlider/index.ts

@@ -0,0 +1 @@
+export { CircleMobileSlider as MobileSlider } from './CircleMobileSlider';

src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx

@@ -1,18 +1,22 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
 import { memo, useState } from 'react';
 import { generatePath, useHistory } from 'react-router';
 
-import { Article } from '@/assets/icons';
 import { ClearButton } from '@/components';
 import { PAGE_URL } from '@/configs/path';
+import { usePageUiStore } from '@/hooks';
 
 export const CircleWebSlideCard: React.FC<{ model: Model.Circle }> = memo(
   ({ model: { id: circleId, mainImage, name, newLineDescription } }) => {
     const { push } = useHistory();
     const [isFlipped, setFlip] = useState(false);
+    const { joinedCircles } = usePageUiStore<PageUiStore.CircleHome>();
     const handleClick = () => {
       if (isFlipped) setFlip(c => !c);
+      else if (joinedCircles?.find(joinedCircle => joinedCircle.id === circleId))
+        push(generatePath(PAGE_URL.CircleMain, { circleId }));
       else push(generatePath(PAGE_URL.CircleJoin, { circleId }));
     };
     const handleFlip = (e: React.MouseEvent<HTMLElement>) => {
@@ -33,7 +37,7 @@ export const CircleWebSlideCard: React.FC<{ model: Model.Circle }> = memo(
           <Footer>
             <Name className="text-ellipsis-line">{name}</Name>
             <ClearButton onClick={handleFlip}>
-              <Icon active={isFlipped} />
+              <Icon />
             </ClearButton>
           </Footer>
         </Inner>
@@ -44,7 +48,7 @@ export const CircleWebSlideCard: React.FC<{ model: Model.Circle }> = memo(
 
 const Card = styled.article`
   box-sizing: border-box;
-  width: 90%;
+  width: 360px;
   min-width: 360px;
   min-height: 500px;
   background: #fff;
@@ -70,10 +74,9 @@ const Body = styled.div`
 
 const Cover = styled.div<{ mainImage: string | null }>`
   top: 6px;
-  left: 6px;
-  width: calc(100% - 12px);
+  left: 10px;
+  width: calc(100% - 20px);
   height: calc(100% - 6px);
-  border-radius: 5px;
 
   ${({ mainImage }) =>
     mainImage
@@ -84,11 +87,12 @@ const Cover = styled.div<{ mainImage: string | null }>`
           background: center / contain no-repeat url('/images/empty.png');
           background-size: 65%;
         `}
-  background-color: #efefef;
+  background-color: white;
+  border-bottom: 1px solid #dadada;
 `;
 
 const Name = styled.h3`
-  margin: 0 35px 0 13px;
+  margin: 2px 35px 0 13px;
   line-height: 36px;
   font-size: 12px;
   font-weight: bold;
@@ -129,8 +133,8 @@ const Footer = styled.div`
   height: 40px;
 `;
 
-const Icon = styled(Article)`
+const Icon = styled(ChangeCircleIcon)`
   position: absolute;
-  top: 9px;
-  right: 5px;
+  top: 7px;
+  right: 12px;
 `;

src/pages/circle/home/components/index.ts

@@ -1,5 +1,5 @@
 export * from './List';
-export * from './Slider';
+export * from './MobileSlider';
 export * from './WebSlider';
 
 export { CircleListFrame as ListFrame } from './CircleListFrame';