Merge pull request #58 from KUSITMS-29th-TEAM-D/feat/#49/selt-understand

[FEAT] 자기이해 홈 구현

src/components/DefineResultPage/ResultView.tsx

@@ -0,0 +1,124 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { CardSection } from '@/components/DefineResultPage/CardSection';
+import { DescriptionSection } from '@/components/DefineResultPage/DescriptionSection';
+import { PlainButton } from '@/components/common/Button/PlainButton';
+import { DefineResult } from '@/types/test.type';
+
+interface ResultViewProps {
+  result: DefineResult;
+}
+
+export const ResultView = ({ result }: ResultViewProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <StyledInnerContainer>
+      <StyledTitle>
+        <div className="description">정의하기 테스트의 결과에요!</div>
+        <div className="result">
+          <div>{result.comment.split(',')[0]}, </div>
+          <div className="highlight">{result.comment.split(',')[1]}</div>
+        </div>
+      </StyledTitle>
+      <StyledContent>
+        <CardSection result={result} />
+        <DescriptionSection result={result} />
+      </StyledContent>
+      <StyledPlainButton
+        variant="primary2"
+        onClick={() => {
+          navigate('/test/define/1');
+        }}
+      >
+        다시 테스트 하기
+      </StyledPlainButton>
+    </StyledInnerContainer>
+  );
+};
+
+const StyledInnerContainer = styled.div`
+  padding-top: 40px;
+  margin: 0 auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledTitle = styled.div`
+  text-align: center;
+  margin-bottom: 56px;
+
+  .description {
+    ${({ theme }) => theme.font.desktop.body1b};
+    color: ${({ theme }) => theme.color.gray600};
+    margin-bottom: 10px;
+  }
+
+  .result {
+    ${({ theme }) => theme.font.desktop.title1};
+    color: ${({ theme }) => theme.color.gray700};
+
+    .highlight {
+      color: ${({ theme }) => theme.color.primary500};
+    }
+
+    @media ${({ theme }) => theme.device.desktop} {
+      display: flex;
+      gap: 7px;
+    }
+  }
+
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-bottom: 28px;
+    .description {
+      ${({ theme }) => theme.font.mobile.body1b};
+    }
+
+    .result {
+      ${({ theme }) => theme.font.mobile.title1};
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-bottom: 28px;
+    .description {
+      ${({ theme }) => theme.font.mobile.body1b};
+    }
+
+    .result {
+      ${({ theme }) => theme.font.mobile.title1};
+      display: flex;
+      flex-direction: column;
+    }
+  }
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  align-items: center;
+
+  width: 100%;
+  height: auto;
+`;
+
+const StyledPlainButton = styled(PlainButton)`
+  width: 376px;
+  height: 48px;
+  margin-top: 36px;
+
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-top: 28px;
+  }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 100%;
+    margin-top: 28px;
+  }
+`;

src/components/DesignResultPage/ResultView.tsx

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+
+import BackgroundImg from '@/assets/backgrounds/designResultBackground.png';
+import { userService } from '@/services/UserService';
+
+interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  definition: string;
+}
+
+export const ResultView = ({ children, definition, ...props }: ResultViewProps) => {
+  return (
+    <StyledContainer {...props}>
+      <StyledInnerContainer {...props}>
+        <StyledContent>
+          <div className="title">
+            <span className="highlight">{userService.getUserNickname()}</span>님은 이런 브랜드가
+            되고 싶군요!
+          </div>
+          <div className="brand">“{definition}”</div>
+          {children}
+        </StyledContent>
+      </StyledInnerContainer>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  min-width: 100%;
+
+  background-image: url(${BackgroundImg});
+  background-size: cover;
+`;
+
+const StyledInnerContainer = styled.div`
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  width: 830px;
+
+  .title {
+    ${({ theme }) => theme.font.desktop.title2};
+    color: ${({ theme }) => theme.color.gray700};
+
+    .highlight {
+      color: ${({ theme }) => theme.color.primary500};
+    }
+  }
+
+  .brand {
+    ${({ theme }) => theme.font.desktop.h2};
+    color: ${({ theme }) => theme.color.primary600};
+    text-align: center;
+    margin-bottom: 32px;
+    word-break: keep-all;
+  }
+`;

src/components/SelfUnderstandPage/DefineResultView.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+import styled from 'styled-components';
+
+import { personaAPI } from '@/apis/personaAPI';
+import { ResultView } from '@/components/DefineResultPage/ResultView';
+import { NoResultSection } from '@/components/SelfUnderstandPage/NoResultTemplate';
+import { userService } from '@/services/UserService';
+import { DefineResult } from '@/types/test.type';
+
+export const DefineResultView = () => {
+  const [defineResult, setDefineResult] = useState<DefineResult | null>(null);
+
+  useEffect(() => {
+    if (userService.getUserState() === 'MEMBER') {
+      personaAPI.getPersonaMember().then((res) => {
+        setDefineResult(res.payload);
+      });
+    }
+  }, []);
+
+  if (defineResult)
+    return (
+      <StyledContainer>
+        <ResultView result={defineResult} />
+      </StyledContainer>
+    );
+
+  return <NoResultSection tab="Define" />;
+};
+
+const StyledContainer = styled.div`
+  background: ${({ theme }) =>
+    `linear-gradient(180deg, ${theme.color.white} 0%, ${theme.color.primary100} 100%)`};
+
+  width: 100%;
+  padding: 0 64px 40px 64px;
+`;

src/components/SelfUnderstandPage/DesignResultView.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+import { personaAPI } from '@/apis/personaAPI';
+import { ResultView } from '@/components/DesignResultPage/ResultView';
+import { NoResultSection } from '@/components/SelfUnderstandPage/NoResultTemplate';
+import { userService } from '@/services/UserService';
+import { DesignResult } from '@/types/test.type';
+
+export const DesignResultView = () => {
+  const [designResult, setDesignResult] = useState<DesignResult | null>(null);
+
+  useEffect(() => {
+    if (userService.getUserState() === 'MEMBER') {
+      personaAPI.getPersonaDesign().then((res) => {
+        setDesignResult(res.payload);
+      });
+    }
+  }, []);
+
+  if (designResult)
+    return <ResultView style={{ height: '644px' }} definition={designResult.definition} />;
+
+  return <NoResultSection tab="Design" />;
+};

src/components/SelfUnderstandPage/DiscoverResultView.tsx

@@ -0,0 +1,6 @@
+import { NoResultSection } from '@/components/SelfUnderstandPage/NoResultTemplate';
+
+export const DiscoverResultView = () => {
+  // API 호출 결과 시, 검사 안했다면
+  return <NoResultSection tab="Discover" />;
+};

src/components/SelfUnderstandPage/NoResultTemplate.tsx

@@ -0,0 +1,66 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { PlainButton } from '@/components/common/Button/PlainButton';
+import { MY_UNDERSTAND_TAB } from '@/constants/navigation';
+
+interface NoResultSectionProps {
+  tab: (typeof MY_UNDERSTAND_TAB)[number]['tab'];
+}
+export const NoResultSection = ({ tab }: NoResultSectionProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <StyledContentContainer>
+      <img src={MY_UNDERSTAND_TAB.find((item) => item.tab === tab)?.icon} alt={tab} />
+      <div className="content-container">
+        <span className="description">아직 테스트 이력이 없어요</span>
+        <span className="title">테스트를 진행해주세요!</span>
+      </div>
+      <div className="button-container">
+        <PlainButton
+          width="352px"
+          height="48px"
+          onClick={() => navigate(MY_UNDERSTAND_TAB.find((item) => item.tab === tab)?.path || '/')}
+        >
+          테스트 시작하기
+        </PlainButton>
+      </div>
+    </StyledContentContainer>
+  );
+};
+
+const StyledContentContainer = styled.div`
+  padding: 97.5px 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  img {
+    width: 247px;
+    height: 247px;
+  }
+
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+
+    .description {
+      ${({ theme }) => theme.font.desktop.body1b};
+      color: ${({ theme }) => theme.color.gray400};
+    }
+
+    .title {
+      ${({ theme }) => theme.font.desktop.title1};
+      color: ${({ theme }) => theme.color.gray800};
+    }
+  }
+
+  .button-container {
+    padding: 10px 0;
+  }
+`;