[DESIGN] 테스트 및 커뮤니티 변경된 디자인 반영 (#133)

dnd-side-project · Feb 20, 2024 · ccc8c64 · ccc8c64
1 parent a32bb48
commit ccc8c64
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 27 deletions.
diff --git a/src/app/test/_components/TestQuestionTemplate.tsx b/src/app/test/_components/TestQuestionTemplate.tsx
@@ -19,7 +19,7 @@ type Props = {
   progress: number;
   badgeStatus: string;
   question: ReactNode;
-  image: string | StaticImport;
+  image?: string | StaticImport;
   answerList: string[];
   onPrevStep?: () => void;
   onDispatchEvent: (value: string) => void;
@@ -54,16 +54,19 @@ const TestQuestionTemplate = ({
           </div>
         }
         body={
-          <div className="absolute right-0">
-            <Image src={image} width={215} height={215} alt="testImage" />
-          </div>
+          <>
+            {image && (
+              <div className="absolute right-0">
+                <Image src={image} width={215} height={215} alt="testImage" />
+              </div>
+            )}
+          </>
         }
         footer={
           <div className=" flex flex-col gap-3xs">
             {answerList.map((answer, index) => {
               return (
                 <Button
-                  variant={'secondary'}
                   width="full"
                   onClick={() => {
                     if (id <= PRE_QUESTIONS_LENGTH) {
@@ -79,7 +82,7 @@ const TestQuestionTemplate = ({
                     }
                   }}
                   key={index}
-                  className="h-md"
+                  className="h-md bg-primary-800 text-white"
                 >
                   {answer}
                 </Button>

diff --git a/src/app/vote/_component/VoteLayout.tsx b/src/app/vote/_component/VoteLayout.tsx
@@ -11,7 +11,7 @@ const VoteLayout = ({ header, contents, footer }: PropsWithChildren<VoteLayoutPr
     <main className="relative flex size-full min-h-screen flex-col pb-10">
       {header}
       <div className="flex w-full flex-1">{contents}</div>
-      <div className="sticky bottom-5xl right-xs z-20 flex flex-col items-end">{footer}</div>
+      <div className="sticky bottom-5xl z-20 flex flex-col items-end pr-3xs">{footer}</div>
     </main>
   );
 };

diff --git a/src/app/vote/page.tsx b/src/app/vote/page.tsx
@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import { Button } from '@/components/common/button';
 import { Input } from '@/components/common/input';
 import { VoteCard, VoteItem } from '@/components/features/vote';
@@ -26,8 +28,8 @@ const VotePage = () => {
                     icon="search"
                     iconSide="left"
                     borderRadius="large"
-                    bgcolor="gray"
-                    className="text-[14px]"
+                    bgcolor="lightGray"
+                    className="text-[14px] placeholder:text-gray-500"
                   />
                 </div>
               </div>
@@ -98,12 +100,14 @@ const VotePage = () => {
       footer={
         <>
           {isVoteExist ? (
-            <Button
-              icon="add"
-              iconOnly
-              className=" h-[56px] w-xl rounded-[100%] bg-primary-500"
-              iconColor="white"
-            />
+            <Link href={'/vote/create'}>
+              <Button
+                icon="pencil"
+                iconOnly
+                className=" h-[56px] w-xl rounded-[100%] bg-primary-800"
+                iconColor="white"
+              />
+            </Link>
           ) : null}
         </>
       }

diff --git a/src/components/common/input/variant.tsx b/src/components/common/input/variant.tsx
@@ -7,6 +7,7 @@ export const inputContainerVariants = cva('flex w-full items-center gap-5xs bord
     },
     bgcolor: {
       white: 'bg-white',
+      lightGray: 'bg-gray-50',
       gray: 'bg-gray-100',
     },
     borderRadius: {

diff --git a/src/constants/test/step.tsx b/src/constants/test/step.tsx
@@ -7,7 +7,7 @@ type Question = {
   type: TestActionType;
   badgeStatus?: string;
   question: ReactNode;
-  image: string;
+  image?: string;
   answerList: string[];
 };
 
@@ -28,7 +28,7 @@ export const QUESTIONS: Question[] = [
         <br /> 성별을 선택해주세요.
       </>
     ),
-    image: `/images/testWorry.png`,
+
     answerList: ['남성', '여성'],
   },
   {
@@ -41,7 +41,6 @@ export const QUESTIONS: Question[] = [
         나이를 선택해주세요.
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['10대', '20대', '30대', '40대'],
   },
@@ -55,7 +54,6 @@ export const QUESTIONS: Question[] = [
       </>
     ),
     image: `/images/testWorry.png`,
-
     answerList: ['예', '아니요'],
   },
   {
@@ -67,7 +65,6 @@ export const QUESTIONS: Question[] = [
         우연히 상대와 마주쳤다면?
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['창피하지만 인사정도 나눌 수 있다.', '조용히 최대한 피한다.'],
   },
@@ -81,7 +78,6 @@ export const QUESTIONS: Question[] = [
         나의 반응은?
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['상대방 결혼식에 참석해 얼굴 비춘다.', '미안하지만 송금으로 마음을 전한다.'],
   },
@@ -93,7 +89,6 @@ export const QUESTIONS: Question[] = [
         나는 상대와 <br /> 단둘이 식사를 할 수 있다.
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['예', '아니오'],
   },
@@ -105,7 +100,6 @@ export const QUESTIONS: Question[] = [
         상대의 생일날 <br /> 나의 반응은?
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['연락해서 축하라도 해줘야겠다.', '알아서 잘 보내겠지라는 생각으로 넘긴다.'],
   },
@@ -118,7 +112,6 @@ export const QUESTIONS: Question[] = [
         <br /> 인사를 시켜준다. <br /> 나의 반응은?
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['예전부터 이상형이 한결 같다.', '왜 나에게 인사를 시켜주는 지 모르겠다.'],
   },
@@ -131,7 +124,6 @@ export const QUESTIONS: Question[] = [
         <br /> 말할 수 있다.
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: ['예', '아니오'],
   },
@@ -143,7 +135,6 @@ export const QUESTIONS: Question[] = [
         상대와 만나기로 약속한 당일 <br /> 갑자기 연락이 없다. <br /> 나의 반응은?
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: [
       '무슨 사정이 있겠지. 연락오기를 기다린다.',
@@ -160,7 +151,6 @@ export const QUESTIONS: Question[] = [
         이때 나는?
       </>
     ),
-    image: `/images/testWorry.png`,
 
     answerList: [
       '어떻게 쓸 지 고민되지만 연락줘서 고맙다.',