fix:글씨/이미지 교체

SV-Winter-BootCamp-Team-C · Jan 30, 2024 · 8d17c30 · 8d17c30
1 parent 1230c16
commit 8d17c30
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 42 deletions.
diff --git a/frontend/src/assets/macbookBackground.svg b/frontend/src/assets/macbookBackground.svg
diff --git a/frontend/src/assets/newIdea.svg b/frontend/src/assets/newIdea.svg
diff --git a/frontend/src/assets/shareMail.gif b/frontend/src/assets/shareMail.gif
diff --git a/frontend/src/assets/styleSetting.gif b/frontend/src/assets/styleSetting.gif
diff --git a/frontend/src/assets/surveyAnalysis.gif b/frontend/src/assets/surveyAnalysis.gif
diff --git a/frontend/src/assets/teamWork.svg b/frontend/src/assets/teamWork.svg
diff --git a/frontend/src/components/common/CarouselDesOne.tsx b/frontend/src/components/common/CarouselDesOne.tsx
@@ -2,6 +2,7 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import styleSetting from '../../assets/styleSetting.gif';
+import surveyAnalysis from '../../assets/surveyAnalysis.gif';
 import shareMail from '../../assets/shareMail.gif';
 
 interface CustomSliderProps {
@@ -26,7 +27,7 @@ function CarouselDesOne({ setActiveIndex }: CustomSliderProps) {
         <img src={styleSetting} alt="styleSetting" className="w-fit h-fit" />
       </div>
       <div className="w-[12rem] h-[25rem] bg-red-500">
-        <h3>2</h3>
+        <img src={surveyAnalysis} alt="styleSetting" className="w-fit h-fit" />
       </div>
       <div className="w-[12rem] h-[25rem]">
         <img src={shareMail} alt="shareMail" className="w-fit h-fit " />

diff --git a/frontend/src/components/createSurvey/CreateQuestionMenu.tsx b/frontend/src/components/createSurvey/CreateQuestionMenu.tsx
@@ -84,7 +84,7 @@ function CreateQuestionMenu({ onSelect, isOpen, onClose }: CreateQuestionMenuPro
         initial={wrapperVariants.closed}
         variants={wrapperVariants}
         animate={isOpen ? 'open' : 'closed'}
-        className="absolute left-[20%] top-[8%] flex flex-col w-[10rem] h-[12.5rem] bg-white shadow-md rounded-md py-[0.625rem] z-20"
+        className="absolute -left-6 -top-6 flex flex-col w-[10rem] h-[12.5rem] bg-white shadow-md rounded-md py-[0.625rem] z-20"
       >
         {QUESTION_MENU_ITEMS.map((item, index) => (
           <motion.li
@@ -94,7 +94,7 @@ function CreateQuestionMenu({ onSelect, isOpen, onClose }: CreateQuestionMenuPro
             initial={itemVariants.closed}
             variants={itemVariants}
           >
-            <motion.div className="flex items-center h-6 gap-2 px-2 cursor-pointer">
+            <motion.div className="flex  items-center h-6 gap-2 px-2 cursor-pointer">
               <img src={item.icon} alt={item.name} className="min-w-[0.875rem] h-[0.875rem]" />
               <span className="text-base leading-4 text-black">{item.name}</span>
             </motion.div>

diff --git a/frontend/src/pages/Create.tsx b/frontend/src/pages/Create.tsx
@@ -401,9 +401,13 @@ function Create() {
               <div className="flex w-[5.625rem] h-[2.0315rem] mb-[1.01rem]">
                 <span className="text-[2rem] font-semibold">버튼</span>
               </div>
-              <div className="flex flex-row gap-3">
+              <div className="flex flex-row gap-3 ">
                 {BUTTON_ITEMS.map((item) => (
-                  <div key={item.id} className="flex flex-col items-center" onClick={() => changeButtonStyle(item.id)}>
+                  <div
+                    key={item.id}
+                    className="flex flex-col items-center cursor-pointer"
+                    onClick={() => changeButtonStyle(item.id)}
+                  >
                     <div
                       className={`flex justify-center items-center w-[10.5rem] h-[5.5rem] rounded-[1.5rem] border-solid border-[0.188rem] ${
                         createSurvey.buttonStyle === item.id ? `border-purple` : 'border-white'

diff --git a/frontend/src/pages/Start.tsx b/frontend/src/pages/Start.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
-import newIdea from '../assets/newIdea.png';
-import teamWork from '../assets/teamWork.png';
+import newIdea from '../assets/newIdea.svg';
+import teamWork from '../assets/teamWork.svg';
 import star1 from '../assets/star1.svg';
 import star2 from '../assets/star2.svg';
 import star3 from '../assets/star3.svg';
@@ -74,11 +74,6 @@ function Start() {
           <img src={flexLine} alt="flexLine2" className="w-full" />
         </div>
 
-        {/* Circular sector */}
-        {/* <div className="absolute z-10 w-full h-[18rem] top-[37.6rem]">
-          <img src={rectangle} alt="rectangle" className="w-full" />
-        </div> */}
-
         <div className="relative w-[85.5rem] h-[59.5rem] rounded-[1.25rem] bg-[#F9F8FC]">
           {/* star */}
           <div className="absolute z-20 w-4 h-4 top-[40.5rem] left-[4.44rem]">
@@ -105,10 +100,6 @@ function Start() {
             </div>
             <div
               className="flex cursor-pointer items-center justify-center flex-shrink-0  w-[6.5rem] h-[2.875rem] rounded-2xl border-2 border-solid border-black bg-white transition-all duration-300 hover:translate-x-[-4px] hover:translate-y-[-4px] hover:rounded-md hover:shadow-[4px_4px_0px_black] active:translate-x-[0px] active:translate-y-[0px] active:rounded-2xl active:shadow-none"
-              // style={{
-              //   boxShadow:
-              //     '0px 0px 1px 0 rgba(0,0,0,0.3), 0px 1px 4px 0 rgba(0,0,0,0.05), 0px 1px 2px 0.5px rgba(0,0,0,0.1)',
-              // }}
               onClick={() => navigate('/login')}
             >
               <span className="text-base font-medium leading-4 text-center text-black">Login</span>
@@ -118,7 +109,7 @@ function Start() {
           {/* title */}
           <div className="flex relative z-10 flex-col mt-[4.12rem]">
             {/* centerText */}
-            <div className="flex flex-row relative z-30  justify-center items-center w-[31.75rem] h-[4.625rem] mx-[26.88rem] ">
+            <div className="flex flex-row relative z-30  justify-center items-center w-[31.75rem] h-[4.625rem] mx-[25.5rem] ">
               <span className="text-6xl font-semibold text-black ">Create</span>
               <div className="flex items-center justify-center h-screen">
                 <label htmlFor="toggle" className="flex items-center mx-2 mt-2 cursor-pointer">
@@ -131,13 +122,13 @@ function Start() {
                   </div>
                 </label>
               </div>
-              <span className="text-6xl font-semibold text-black">Share</span>
+              <span className="text-[3.65rem] font-semibold text-black">Share</span>
             </div>
             <div className="flex relative z-30 justify-center items-center w-[38rem] h-[5.125rem] mx-[23.75rem]">
-              <span className="text-6xl font-semibold text-black">Form, Analysis easily</span>
+              <span className="text-[3.65rem] font-semibold text-black">Form, Analysis easily</span>
             </div>
             <div className="flex relative z-30 justify-center items-center w-[41.75rem] h-6 mt-1 mx-[21.88rem]">
-              <span className="text-xl font-medium text-black">
+              <span className="text-[1.15rem] font-medium text-black">
                 There are forms you can decorate yourself and various analysis tools.
               </span>
             </div>
@@ -165,7 +156,7 @@ function Start() {
                 </span>
                 <span className="relative invisible">Get Started</span>
               </a>
-              <img src={teamWork} alt="teamWork" className="w-[23.5rem] h-[20.25rem]" />
+              <img src={teamWork} alt="teamWork" className="w-[23.5rem] h-[20.25rem] bg-[#918dCA]" />
             </div>
           </div>
           <div className="flex justify-center">
@@ -178,14 +169,6 @@ function Start() {
         </div>
       </div>
 
-      {/* Analysis */}
-      {/* <div className="flex justify-center bg-#f9f8fc">
-
-      </div> */}
-      {/* <div className="absolute z-20 left-1/2 transform -translate-x-1/2 top-[39.88rem] w-[74.25rem] h-[28.25rem] rounded-[1.875rem] bg-white border-solid border-[0.065rem] border-slate-950">
-        <div />
-      </div> */}
-
       <div className="flex w-[100%] h-[40rem] justify-center bg-[#F9F8FC]">
         <div className="flex flex-col justify-center items-center mt-[11.13rem] ">
           <div className="flex flex-col w-[36rem] h-[5.125rem] justify-center items-center mx-[27rem] mb-16">
@@ -196,45 +179,45 @@ function Start() {
           </div>
           <div className="flex flex-row w-[61rem] h-[13.375rem] justify-center gap-8">
             <div className="bg-white w-[13.75rem] h-[13.375rem] rounded-lg shadow-lg p-6 flex flex-col items-center justify-center hover:shadow-2xl transition-shadow duration-300 ease-in-out">
-              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1.5rem] bg-[#d9d9d9]">
+              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1rem] bg-[#d9d9d9]">
                 <img src={editPencil} alt="editPencil" className="w-10 h-10 mx-5 my-5" />
               </div>
               <div className="flex w-[11rem] h-16 justify-center items-center">
-                <span className="text-[1.4rem] text-center font-semibold leading-normal select-none">
+                <span className="text-[1.3rem] text-center font-semibold leading-normal select-none">
                   Create
                   <br />a Survey Form
                 </span>
               </div>
             </div>
             <div className="bg-white w-[13.75rem] h-[13.375rem] rounded-lg shadow-lg p-6 flex flex-col items-center justify-center hover:shadow-2xl transition-shadow duration-300 ease-in-out">
-              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1.5rem] bg-[#d9d9d9]">
+              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1rem] bg-[#d9d9d9]">
                 <img src={palette1} alt="palette1" className="w-10 h-10 mx-5 my-5" />
               </div>
               <div className="flex w-[10rem] h-16 justify-center items-center">
-                <span className="text-[1.4rem] text-center font-semibold leading-normal select-none">
+                <span className="text-[1.3rem] text-center font-semibold leading-normal select-none">
                   Survey Form
                   <br />
                   Style Settings
                 </span>
               </div>
             </div>
             <div className="bg-white w-[13.75rem] h-[13.375rem] rounded-lg shadow-lg p-6 flex flex-col items-center justify-center hover:shadow-2xl transition-shadow duration-300 ease-in-out">
-              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1.5rem] bg-[#d9d9d9]">
+              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1rem] bg-[#d9d9d9]">
                 <img src={survey} alt="survey" className="w-10 h-10 mx-5 my-5" />
               </div>
               <div className="flex w-[12rem] h-16 justify-center items-center">
-                <span className="text-[1.4rem] text-center font-semibold leading-normal select-none">
+                <span className="text-[1.3rem] text-center font-semibold leading-normal select-none">
                   Responding to
                   <br />a different form
                 </span>
               </div>
             </div>
             <div className="bg-white w-[13.75rem] h-[13.375rem] rounded-lg shadow-lg p-6 flex flex-col items-center justify-center hover:shadow-2xl transition-shadow duration-300 ease-in-out">
-              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1.5rem] bg-[#d9d9d9]">
+              <div className="flex w-20 h-20 justify-center items-center rounded-[1.25rem] mb-[1rem] bg-[#d9d9d9]">
                 <img src={roundShare} alt="roundShare" className="w-10 h-10 mx-5 my-5" />
               </div>
               <div className="flex w-[12rem] h-16 justify-center items-center">
-                <span className="text-[1.4rem] text-center font-semibold leading-normal select-none">
+                <span className="text-[1.3rem] text-center font-semibold leading-normal select-none">
                   Share
                   <br />a survey
                 </span>