[FEAT] Design 테스트 시작 페이지 구현

src/components/DesignStartPage/DesignStartView.tsx

@@ -0,0 +1,97 @@
+import { useNavigate } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import backgroundImg from '@/assets/backgrounds/designStartBackground.png';
+import { PlainButton } from '@/components/common/Button/PlainButton';
+
+export const DesignStartView = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/test/design/2');
+  };
+  return (
+    <div>
+      <ViewContainer>
+        <Styled1Container>
+          <TopContainer>
+            <TitleTextContainer>
+              <TitleContainer>
+                <br />
+                어떤 브랜더가 되고 싶나요?
+              </TitleContainer>
+              <SubTitleContainer>
+                문항은 <span className="highlight">총 3문항</span>으로, 앞으로 만들어 갈 나의 브랜드
+                방향성을 설정하는 첫 걸음이에요.
+                <br />
+                설계하기 테스트를 통해 나의 브랜드 컨셉을 정해보고,{' '}
+                <span className="highlight">브랜딩을 시작해보세요!</span>
+              </SubTitleContainer>
+            </TitleTextContainer>
+            <PlainButton variant="gray" width="376px" height="48px" onClick={handleClick}>
+              시작하기
+            </PlainButton>
+          </TopContainer>
+        </Styled1Container>
+      </ViewContainer>
+    </div>
+  );
+};
+
+const TitleTextContainer = styled.div`
+  align-self: stretch;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  display: flex;
+`;
+
+const TitleContainer = styled.div`
+  width: 100%;
+  color: ${({ theme }) => `${theme.color.gray900}`};
+  ${({ theme }) => theme.font.desktop.h2};
+`;
+
+const SubTitleContainer = styled.div`
+  width: 100%;
+  color: ${({ theme }) => `${theme.color.gray700}`};
+  ${({ theme }) => theme.font.desktop.body1m};
+  word-wrap: break-word;
+
+  .highlight {
+    color: ${({ theme }) => `${theme.color.primary700}`};
+  }
+`;
+
+const TopContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 48px;
+  display: flex;
+`;
+
+const Styled1Container = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 64px;
+  padding-top: 118px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+  display: inline-flex;
+`;
+
+export const ViewContainer = styled.div`
+  height: 100vh;
+
+  background-image: url(${backgroundImg});
+  background-size: cover;
+  background-position: right;
+  display: flex;
+  overflow-x: auto;
+`;

src/components/DesignTest/DesignButtonView.tsx

@@ -65,7 +65,7 @@ export const DesignButtonView1 = ({ warning, warningMessage }: Props) => {
   const [showWarn, setShowWarn] = useState(false);
 
   const handleButtonClick = () => {
-    navigate('/test/design/2');
+    navigate('/test/design/3');
   };
 
   useEffect(() => {
@@ -103,11 +103,11 @@ export const DesignButtonView2 = ({ warning, warningMessage }: Props) => {
   const [showWarn, setShowWarn] = useState(false);
 
   const handleButton1Click = () => {
-    navigate('/test/design/1');
+    navigate('/test/design/2');
   };
 
   const handleButton2Click = () => {
-    navigate('/test/design/3');
+    navigate('/test/design/4');
   };
 
   useEffect(() => {
@@ -150,11 +150,11 @@ export const DesignButtonView3 = ({ warning, warningMessage }: Props) => {
   const [showWarn, setShowWarn] = useState(false);
 
   const handleButton1Click = () => {
-    navigate('/test/design/2');
+    navigate('/test/design/3');
   };
 
   const handleButton2Click = () => {
-    navigate('/test/design/4');
+    navigate('/test/design/5');
   };
 
   useEffect(() => {
@@ -196,11 +196,11 @@ export const DesignButtonView4 = ({ warning, warningMessage }: Props) => {
   const [showWarn, setShowWarn] = useState(false);
 
   const handleButton1Click = () => {
-    navigate('/test/design/3');
+    navigate('/test/design/4');
   };
 
   const handleButton2Click = () => {
-    navigate('/test/design/5');
+    navigate('/test/design/6');
   };
 
   useEffect(() => {
@@ -243,7 +243,7 @@ export const DesignButtonView5 = ({ warning, warningMessage }: Props) => {
   const [showWarn, setShowWarn] = useState(false);
 
   const handleButton1Click = () => {
-    navigate('/test/design/4');
+    navigate('/test/design/5');
   };
 
   const handleButton2Click = async () => {

src/pages/DesignStartPage.tsx

@@ -0,0 +1,5 @@
+import { DesignStartView } from '@/components/DesignStartPage/DesignStartView';
+
+export const DesignStartPage = () => {
+  return <DesignStartView />;
+};

src/routers/router.tsx

@@ -6,6 +6,7 @@ import { DesignLayout } from '@/components/common/Layout/DesignLayout';
 import { DefineResultPage } from '@/pages/DefineResultPage';
 import { DefineStartPage } from '@/pages/DefineStartPage';
 import { DefineTestPage1, DefineTestPage2, DefineTestPage3 } from '@/pages/DefineTestPage';
+import { DesignStartPage } from '@/pages/DesignStartPage';
 import {
   DesignTestPage1,
   DesignTestPage2,
@@ -45,11 +46,12 @@ export const Router = () => {
         </Route>
         <Route path="design" element={<DesignLayout />}>
           <Route index element={<Navigate to="1" replace />}></Route>
-          <Route path="1" element={<DesignTestPage1 />} />
-          <Route path="2" element={<DesignTestPage2 />} />
-          <Route path="3" element={<DesignTestPage3 />} />
-          <Route path="4" element={<DesignTestPage4 />} />
-          <Route path="5" element={<DesignTestPage5 />} />
+          <Route path="1" element={<DesignStartPage />} />
+          <Route path="2" element={<DesignTestPage1 />} />
+          <Route path="3" element={<DesignTestPage2 />} />
+          <Route path="4" element={<DesignTestPage3 />} />
+          <Route path="5" element={<DesignTestPage4 />} />
+          <Route path="6" element={<DesignTestPage5 />} />
         </Route>
       </Route>
       <Route path="/login" element={<RedirectPage />} />