Merge pull request #63 from KUSITMS-29th-TEAM-D/develop

v0.3.0

src/apis/programAPI.ts

@@ -0,0 +1,51 @@
+import { authClient, noAuthClient } from '@/apis/client';
+
+export const programAPI = {
+  // 메인 홈 자기이해 프로그램 조회
+  getUnderstanding: async (start: number, end: number, programForm: string) => {
+    const requestInformation = {
+      startPrice: start,
+      endPrice: end === 0 ? null : end,
+      form: programForm.replace('·', ''),
+    };
+
+    const response = await authClient.post(
+      '/api/programs/home/self-understanding',
+      requestInformation
+    );
+    return response.data;
+  },
+  // 메인 홈 브랜딩 프로그램 조회
+  getBranding: async (interest: string[], imageKeywords: string[]) => {
+    const requestInformation: { [key: string]: string[] } = {};
+
+    if (interest.length > 0) {
+      requestInformation.interest = interest;
+    }
+
+    if (imageKeywords.length > 0) {
+      requestInformation.imageKeywords = imageKeywords;
+    }
+
+    const response = await authClient.post('/api/programs/home/branding', requestInformation);
+    return response.data;
+  },
+  // 메인 홈 브랜딩 프로그램 조회 (비로그인)
+  getBrandingNonLogin: async (interest: string[], imageKeywords: string[]) => {
+    const requestInformation: { [key: string]: string[] } = {};
+
+    if (interest.length > 0) {
+      requestInformation.interest = interest;
+    }
+
+    if (imageKeywords.length > 0) {
+      requestInformation.imageKeywords = imageKeywords;
+    }
+
+    const response = await noAuthClient.post(
+      '/api/programs/branding/non-login',
+      requestInformation
+    );
+    return response.data;
+  },
+};

src/apis/userAPI.ts

@@ -12,4 +12,9 @@ export const userAPI = {
     const response = await noAuthClient.get(`/api/users/check-nickname/${nickname}`);
     return response.data;
   },
+  // 로그아웃
+  logout: async () => {
+    const response = await noAuthClient.post('/api/users/logout');
+    return response.data;
+  },
 };

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,73 @@
+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: 930px;
+
+  .title {
+    ${({ theme }) => theme.font.desktop.title2};
+    color: ${({ theme }) => theme.color.gray700};
+
+    .highlight {
+      color: ${({ theme }) => theme.color.primary500};
+    }
+  }
+
+  .brand {
+    // 디자인 시스템에 없는 폰트 스타일
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 48px;
+
+    color: ${({ theme }) => theme.color.gray900};
+    text-align: center;
+    margin-bottom: 32px;
+    word-break: keep-all;
+  }
+`;

src/components/ExperienceDetailPage/BubbleSection.tsx

@@ -0,0 +1,3 @@
+export const BubbleSection = () => {
+  return <div>여긴 버블버블</div>;
+};