Merge pull request #64 from KERT-core/fix/section-pages

fix: Section 재배치 & 반응형 디자인 Apply

src/assets/icons/sns/index.js

@@ -0,0 +1,11 @@
+import Facebook from './facebook.svg';
+import Github from './github.svg';
+import Instagram from './instagram.svg';
+import Youtube from './youtube.svg';
+
+export const SNSIcon = {
+  Facebook,
+  Github,
+  Instagram,
+  Youtube,
+};

src/components/display/HistoryPreview.jsx

@@ -13,19 +13,50 @@ import { useQuery } from 'react-query';
 import { refineHistories } from '@/utils/refineHistory';
 
 const PreviewWrapper = styled.div`
-  width: 500px;
-  height: 300px;
+  width: 600px;
+  height: auto;
+
+  padding: 20px;
+
   display: flex;
-  gap: min(5vw, 80px);
+  flex-direction: row;
+  gap: 50px;
+
+  // 모바일 대응
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
 `;
 
 const YearListWrapper = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 40px;
+  flex-direction: row;
+  gap: 20px;
+  overflow-x: auto;
+
+  @media (min-width: 768px) {
+    flex-direction: column;
+    gap: 40px;
+    overflow-x: visible;
+  }
+
+  // 모바일 대응
+  @media (max-width: 768px) {
+    gap: 30px;
+  }
 `;
 
-const HistoryListWrapper = styled.div``;
+const HistoryListWrapper = styled.div`
+  // 모바일 대응
+  @media (max-width: 768px) {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+`;
 
 const HistoryElementWrapper = styled.div`
   width: 100%;
@@ -41,6 +72,11 @@ const HistoryElementWrapper = styled.div`
   & > span {
     word-break: keep-all;
   }
+
+  // 모바일 대응
+  @media (max-width: 768px) {
+    width: fit-content;
+  }
 `;
 
 const YearWrapper = styled.button`
@@ -67,6 +103,17 @@ const YearWrapper = styled.button`
       rgba(48, 49, 70, 1) 100%
     );
   }
+
+  // 모바일 대응
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &:not(.active) > div {
+      background-color: transparent;
+    }
+  }
 `;
 
 const Year = styled.span`
@@ -76,6 +123,11 @@ const Year = styled.span`
   font-size: clamp(16px, 2vw, 24px);
   text-align: left;
   color: white;
+
+  // 모바일 대응
+  @media (max-width: 768px) {
+    width: fit-content;
+  }
 `;
 
 const Dot = styled.div`
@@ -98,6 +150,17 @@ const Dot = styled.div`
     height: 60px;
     background: #303146;
   }
+
+  // 모바일 대응
+  @media (max-width: 768px) {
+    width: 100%;
+    height: 2px;
+    border-radius: 0px;
+
+    &:after {
+      display: none;
+    }
+  }
 `;
 
 const HistoryElement = ({ history }) => {
@@ -176,13 +239,13 @@ export const HistoryPreview = () => {
           </YearWrapper>
         ))}
       </YearListWrapper>
-      <TransitionGroup>
+      <TransitionGroup style={{ position: 'relative', width: '100%' }}>
         <CSSTransition
           nodeRef={nodeRef}
           key={display_year}
           timeout={500}
           classNames="fade-slide"
-          style={{ position: 'absolute' }}
+          style={{ position: 'absolute', left: '0' }}
         >
           <HistoryListWrapper ref={nodeRef}>
             {isError

src/components/display/dashboard/admin/AdminElement.jsx

@@ -13,9 +13,9 @@ import { ErrorModal } from '@components/display/dashboard/ErrorModal';
 
 import { GENERATION_REGEX } from '@/utils/regex';
 import { API } from '@/utils/api';
-import useAlert from '@/stores/useAlert';
-import useConfirm from '@/stores/useConfirm';
-import useLoading from '@/stores/useLoading';
+import useAlert from '@/hooks/modal/useAlert';
+import useConfirm from '@/hooks/modal/useConfirm';
+import useLoading from '@/hooks/modal/useLoading';
 
 const CardWrapper = styled.div`
   transition: background-color 0.1s ease-in-out;

src/components/display/dashboard/admin/EditAdmin.jsx

@@ -13,9 +13,9 @@ import { ErrorModal } from '@components/display/dashboard/ErrorModal';
 
 import { API } from '@/utils/api';
 import { GenerateColorByString } from '@/utils/generateColor';
-import useConfirm from '@/stores/useConfirm';
-import useAlert from '@/stores/useAlert';
-import useLoading from '@/stores/useLoading';
+import useConfirm from '@/hooks/modal/useConfirm';
+import useAlert from '@/hooks/modal/useAlert';
+import useLoading from '@/hooks/modal/useLoading';
 
 const Wrapper = styled.div`
   margin: 40px 0;

src/components/display/dashboard/history/HistoryElement.jsx

@@ -8,9 +8,9 @@ import { UpdatedHistory } from '@components/display/dashboard/history/UpdatedHis
 import { ErrorModal } from '@components/display/dashboard/ErrorModal';
 
 import { API } from '@/utils/api';
-import useConfirm from '@/stores/useConfirm';
-import useAlert from '@/stores/useAlert';
-import useLoading from '@/stores/useLoading';
+import useConfirm from '@/hooks/modal/useConfirm';
+import useAlert from '@/hooks/modal/useAlert';
+import useLoading from '@/hooks/modal/useLoading';
 
 const CardWrapper = styled.div.attrs({
   id: 'dashboard-history-card',

src/components/display/dashboard/user/DetailUser.jsx

@@ -14,9 +14,9 @@ import { ErrorModal } from '@components/display/dashboard/ErrorModal';
 
 import { API } from '@/utils/api';
 import { GenerateColorByString } from '@/utils/generateColor';
-import useConfirm from '@/stores/useConfirm';
-import useAlert from '@/stores/useAlert';
-import useLoading from '@/stores/useLoading';
+import useConfirm from '@/hooks/modal/useConfirm';
+import useAlert from '@/hooks/modal/useAlert';
+import useLoading from '@/hooks/modal/useLoading';
 
 const Wrapper = styled.div`
   margin: 40px 0;

src/components/display/dashboard/user/UserElement.jsx

@@ -6,7 +6,7 @@ import { Text } from '@components/typograph/Text';
 import { GenerateColorByString } from '@/utils/generateColor';
 import { ColorProfile } from '@components/display/ColorProfile';
 
-import useAlert from '@/stores/useAlert';
+import useAlert from '@/hooks/modal/useAlert';
 import { DetailUser } from './DetailUser';
 
 const CardWrapper = styled.div`

src/components/display/section/ContentCard.jsx

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { Span, Text } from '@components/typograph/Text';
+
+const ContentCardWrapper = styled.div`
+  width: 320px;
+  height: 250px;
+
+  padding: 30px;
+  box-sizing: border-box;
+  border-radius: 20px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 30px;
+
+  position: relative;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+
+  // 그라데이션 테두리 적용
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 20px;
+    // padding 값이 클수록 테두리가 두꺼워짐
+    padding: 1px;
+    background: linear-gradient(135deg, #ffffff30, #ffffff16);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+  }
+`;
+
+const Icon = styled.img`
+  width: 50px;
+  height: 50px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Title = styled(Span).attrs({
+  $size: '22px',
+  $weight: 'extrabold',
+})`
+  color: #ffffff;
+`;
+
+const Description = styled(Span).attrs({
+  $size: 's',
+  $weight: 'regular',
+  $color: 'rgba(255, 255, 255, 0.5)',
+})``;
+
+export const ContentCard = ({ title, description, image_url }) => {
+  return (
+    <ContentCardWrapper>
+      <Icon src={image_url} alt={title} />
+      <TitleWrapper>
+        <Title>{title}</Title>
+        <Description>{description}</Description>
+      </TitleWrapper>
+    </ContentCardWrapper>
+  );
+};
+
+ContentCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  image_url: PropTypes.string.isRequired,
+};