Merge pull request #26 from team-acode/develop

[style] 매칭테스트/홈화면 QA 반영
team-acode · Jan 29, 2024 · fd4c1a0 · fd4c1a0
2 parents 1bcb6d9 + 7283544
commit fd4c1a0
Show file tree

Hide file tree

Showing 30 changed files with 366 additions and 168 deletions.
diff --git a/app/find-taste/page.tsx b/app/find-taste/page.tsx
@@ -5,11 +5,11 @@ import More from '@/components/matchingtest/More';
 
 const Page = () => {
   return (
-    <div className="mx-3">
+    <>
       <Header />
       <Test />
       <More />
-    </div>
+    </>
   );
 };
 

diff --git a/app/find-taste/result/page.tsx b/app/find-taste/result/page.tsx
@@ -2,7 +2,7 @@
 
 import UserStyle from '@/components/matchingtest/UserStyle';
 import Similar from '@/components/matchingtest/Similar';
-import HomeNav from '@/components/home/HomeNav';
+import ResultNav from '@/components/matchingtest/ResultNav';
 import Link from 'next/link';
 import { useState } from 'react';
 import ResultModal from '@/components/matchingtest/ResultModal';
@@ -89,36 +89,28 @@ const Page = ({ searchParams }: ResultPageProps) => {
   };
   return (
     <div>
-      <div>
-        <HomeNav />
-      </div>
-      <div className="mt-16">
-        <UserStyle families={Families} />
-      </div>
-      <div>
-        <Similar fragrance={Fragrance} style={style} />
-      </div>
-
-      <div className="flex flex-row mt-20 justify-center py-3 px-4">
-        <div className="flex mr-2.5">
-          <button
-            type="button"
-            className="rounded-lg bg-acodegray-50 text-black w-[166px] h-[56px] inline-flex items-center justify-center"
-            onClick={handleShareClick}
-          >
-            공유하기
-          </button>
-        </div>
+      <ResultNav />
+      <UserStyle families={Families} />
+      <Similar fragrance={Fragrance} style={style} />
+      <div className="flex flex-row mt-[79px] justify-center mx-4 gap-x-[11px] pb-[28px]">
+        <button
+          type="button"
+          className="h2 rounded bg-acodegray-50 text-black w-[166px] h-[56px] inline-flex items-center justify-center"
+          onClick={handleShareClick}
+        >
+          공유하기
+        </button>
 
         <Link href="/">
           <button
             type="button"
-            className="rounded-lg bg-black text-white w-[166px] h-[56px] inline-flex items-center justify-center"
+            className="h2 rounded bg-black text-white w-[166px] h-[56px] inline-flex items-center justify-center"
           >
             홈으로
           </button>
         </Link>
       </div>
+
       {isModalOpen && <ResultModal onClose={() => setModalOpen(false)} />}
     </div>
   );

diff --git a/app/find-taste/test/page.tsx b/app/find-taste/test/page.tsx
@@ -169,18 +169,14 @@ const Page = () => {
   return isLoading ? (
     <Loading setIsDone={setIsDone} />
   ) : (
-    <div>
-      <div>
-        <SwiperHeader swiperRef={swiperRef} />
-      </div>
-      <div>
-        <Slider
-          slides={slides.map((slide) => slide.component)}
-          keys={slides.map((slide) => slide.name)}
-          swiperRef={swiperRef}
-        />
-      </div>
-    </div>
+    <>
+      <SwiperHeader swiperRef={swiperRef} />
+      <Slider
+        slides={slides.map((slide) => slide.component)}
+        keys={slides.map((slide) => slide.name)}
+        swiperRef={swiperRef}
+      />
+    </>
   );
 };
 

diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
@@ -20,7 +20,7 @@ const page = () => {
         향수에 입문해보아요
       </h3>
       <BigLinkButton
-        to="/matching/test"
+        to="/find-taste/test"
         buttonStyle="absolute bg-acodeblack text-white font-semibold h-[56px] bottom-[67px] text-[18px] left-[50%] -translate-x-2/4"
       >
         나에게 어울리는 향수 추천 받기

diff --git a/components/common/Footer.tsx b/components/common/Footer.tsx
@@ -4,19 +4,29 @@ import Link from 'next/link';
 const Footer = () => {
   return (
     <div className="pt-[25px] pb-10 bg-acodegray-50 pl-4">
-      <Link href="/" className="caption1 font-medium block mb-2.5 ml-[1px]">
-        향수제품추가요청
+      <Link
+        href="https://docs.google.com/forms/d/e/1FAIpQLScViRETa4DlBZZ6HQKKD0PPlEj3zfdYjPaEPS9bs3nbHTOJgQ/viewform?usp=sharing"
+        className="caption1 font-medium block mb-2.5 ml-[1px]"
+        target="_blank"
+      >
+        향수 제품 추가 요청
       </Link>
-      <Link href="/" className="caption1 font-medium block mb-[38px] ml-[1px]">
-        광고제휴문의
+      <Link
+        href="https://docs.google.com/forms/d/e/1FAIpQLScdUKIiEcWXK7DAn7fmf9HxAG4epWDRTfTfQg6EQu0JPf5ScA/viewform?usp=sharing"
+        className="caption1 font-medium block mb-[38px] ml-[1px]"
+        target="_blank"
+      >
+        광고 제휴 및 입점 문의
       </Link>
       <div className="flex mr-[15px] mb-[21px] text-[10px] font-medium text-acodegray-400 leading-[15px]">
         <AcodeLogoGray className="mr-auto" />
-        <Link href="/" className="mr-5 mt-1">
-          이용약관
-        </Link>
-        <Link href="/" className="mt-1">
-          개인정보처리
+        <Link
+          href="https://www.notion.so/b64e9e00aa364583ad9906080210f853?pvs=4"
+          className="mt-1"
+          target="_blank"
+        >
+          <span className="mr-5">이용약관</span>
+          <span className="">개인정보 처리 방침</span>
         </Link>
       </div>
       <div className="text-[10px] font-medium text-acodegray-400 leading-[15px] grid grid-cols-[61px_188px] gap-x-[17px] mb-[25px]">

diff --git a/components/matchingtest/Header.tsx b/components/matchingtest/Header.tsx
@@ -10,9 +10,12 @@ const Header = () => {
     router.back();
   };
   return (
-    <div className="py-2.5">
-      <PreviousIcon onClick={handleClick} />
+    <div className="fixed top-0 flex items-center w-full max-w-[430px] h-[54px] pt-[13px] pl-[10px] pr-[13px] pb-[11px] bg-acodewhite z-30">
+      <button type="button" className="mr-auto" onClick={handleClick}>
+        <PreviousIcon className="" />
+      </button>
     </div>
   );
 };
+
 export default Header;
diff --git a/components/matchingtest/Individuality.tsx b/components/matchingtest/Individuality.tsx
@@ -101,22 +101,22 @@ const Individuality = ({ updateSelection }: IndividualProps) => {
 
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mx-4 mt-[22px]">
       <div className="flex flex-col">
         <div className="h0 mb-[49px]">
-          <div>
+          <div className="flex items-center">
             어떤
-            <span className="bg-black text-white px-3 mx-[12px] rounded-sm">
-              개성적인
+            <span className="h1 h-[34px]  bg-black ml-[8px] mr-[8px] text-white px-[14px] pt-[2px] rounded-sm">
+              개성적인 향
             </span>
-            향을
+            을
           </div>
           <div>원하시나요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*2개 선택 필수</div>
-        <div className="flex flex-wrap h1 gap-x-3 gap-y-2">
+        <div className="text-gray-300 body2 mb-3">*2개 선택 필수</div>
+        <div className="flex flex-wrap h1 gap-x-3 gap-y-[18px]">
           {options.map((option) => (
-            <div key={option.id} className="">
+            <div key={option.id}>
               <input
                 id={option.id}
                 type="checkbox"
@@ -127,14 +127,14 @@ const Individuality = ({ updateSelection }: IndividualProps) => {
               />
               <label
                 htmlFor={option.id}
-                className={`block w-full text-center py-2 px-3.5 ${
+                className={`block h-[34px] w-full text-center justify-center px-[14px] rounded-sm transition ${
                   selectedOptions.includes(option.id)
                     ? 'bg-acodeblack border-acodegray-100 '
                     : 'bg-acodegray-50 border-acodegray-100'
                 } cursor-pointer flex flex-col items-center justify-center`}
               >
                 <div
-                  className={`${
+                  className={`transition ${
                     selectedOptions.includes(option.id)
                       ? 'text-white'
                       : 'text-acodeblack'
@@ -151,7 +151,7 @@ const Individuality = ({ updateSelection }: IndividualProps) => {
         <button
           type="button"
           onClick={() => swiper.slideNext()}
-          className={`px-4 rounded-lg h-[56px] w-full inline-flex items-center justify-center ${
+          className={`h2 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
             selectedOptions.length === 2
               ? 'bg-black text-white'
               : 'bg-acodegray-300 text-white'

diff --git a/components/matchingtest/Loading.tsx b/components/matchingtest/Loading.tsx
@@ -40,16 +40,16 @@ const Loading = ({ setIsDone }: LoadingPageProps) => {
   }, [currentIconIndex, lastIconIndex]);
 
   return (
-    <div className="mx-[17px]">
+    <div>
       <Header />
-      <div className="h0 mt-[51px]">
+      <div className="h0 mt-[54px] mx-4">
         <div>당신에게 딱 어울리는 향을 </div>
         <div>추출하고 있어요!</div>
       </div>
       <div className="flex justify-center items-center mt-[126px] mb-[110px]">
         {icons[currentIconIndex]}
       </div>
-      <div className="border border-acodegray-100 bg-acodegray-100 flex justify-center items-center h-[106px]">
+      <div className="border text-[#909090] text-2xl border-acodegray-100 bg-acodegray-100 flex justify-center items-center h-[106px]">
         광고
       </div>
     </div>

diff --git a/components/matchingtest/Main.tsx b/components/matchingtest/Main.tsx
@@ -53,47 +53,81 @@ const Main = ({ updateSelection }: MainProps) => {
   ];
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mt-[25px]">
       <div className="flex flex-col">
-        <div className="h0 mb-12 ">
+        <div className="h0 mb-12 mx-4">
           <div>어떤 향이 주로 나면</div>
           <div>좋을 것 같나요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*최대 2개 선택 가능</div>
-        <div className="flex flex-wrap gap-x-2.5 gap-y-3 justify-center">
-          {options.map((option) => (
-            <div key={option.id} className="flex flex-col items-center">
-              <input
-                id={option.id}
-                type="checkbox"
-                name="main"
-                value={option.id}
-                checked={selectedOptions.includes(option.id)}
-                onChange={handleCheckboxChange}
-                className="sr-only"
-              />
-              <label
-                htmlFor={option.id}
-                className={`block w-[166px] h-[126px] text-center border ${
-                  selectedOptions.includes(option.id)
-                    ? 'bg-acodegray-50 border-acodegray-100'
-                    : 'bg-white border-acodegray-100'
-                } rounded cursor-pointer p-4 flex flex-col items-center`}
-              >
-                <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
-                  <Image src={option.img} alt={`${option.id} main`} />
+        <div className="text-gray-300 body2 mb-3 mx-4">*최대 2개 선택 가능</div>
+        <div className="w-full">
+          <div className="flex flex-row mx-4 gap-[10px] pb-[12px]">
+            {options.slice(0, 2).map((option) => (
+              <div key={option.id} className="w-1/2">
+                <div className="flex flex-col">
+                  <input
+                    id={option.id}
+                    type="checkbox"
+                    name="main"
+                    value={option.id}
+                    checked={selectedOptions.includes(option.id)}
+                    onChange={handleCheckboxChange}
+                    className="sr-only"
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`text-center border ${
+                      selectedOptions.includes(option.id)
+                        ? 'bg-acodegray-50 border-acodegray-100'
+                        : 'bg-white border-acodegray-100'
+                    } rounded cursor-pointer p-4 flex flex-col items-center`}
+                  >
+                    <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
+                      <Image src={option.img} alt={`${option.id} main`} />
+                    </div>
+                    <div className="text-acodeblack body1">{option.label}</div>
+                  </label>
                 </div>
-                <div className="text-acodeblack body1">{option.label}</div>
-              </label>
-            </div>
-          ))}
+              </div>
+            ))}
+          </div>
+          <div className="flex flex-row mx-4 gap-[10px]">
+            {options.slice(2, 4).map((option) => (
+              <div key={option.id} className="w-1/2">
+                <div className="flex flex-col">
+                  <input
+                    id={option.id}
+                    type="checkbox"
+                    name="main"
+                    value={option.id}
+                    checked={selectedOptions.includes(option.id)}
+                    onChange={handleCheckboxChange}
+                    className="sr-only"
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`text-center border ${
+                      selectedOptions.includes(option.id)
+                        ? 'bg-acodegray-50 border-acodegray-100'
+                        : 'bg-white border-acodegray-100'
+                    } rounded cursor-pointer p-4 flex flex-col items-center`}
+                  >
+                    <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
+                      <Image src={option.img} alt={`${option.id} main`} />
+                    </div>
+                    <div className="text-acodeblack body1">{option.label}</div>
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
-      <div className="mt-[40px] left-0 right-0 flex justify-center">
+      <div className="mt-[40px] flex justify-center mx-4">
         <button
           type="button"
           onClick={() => swiper.slideNext()}
-          className={`px-4 rounded-lg h-[56px] w-[343px] inline-flex items-center justify-center ${
+          className={`px-4 h2 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
             selectedOptions.length > 0
               ? 'bg-black text-white'
               : 'bg-gray-300 text-white'

diff --git a/components/matchingtest/More.tsx b/components/matchingtest/More.tsx
@@ -1,7 +1,7 @@
 const More = () => {
   return (
-    <div className="mt-[35px] bg-acodegray-50 border border-acodegray-50 h-[123px] text-acodegray-200 flex justify-center items-center">
-      <div>추후 추가예정이에요</div>
+    <div className="rounded mt-[35px] ml-[16px] mr-[16px] max-w-[430px] mb-[45px] bg-acodegray-50 border border-acodegray-50 h-[123px] text-acodegray-200 flex justify-center items-center">
+      <div className="body1">추후 추가예정이에요</div>
     </div>
   );
 };

diff --git a/components/matchingtest/Persistence.tsx b/components/matchingtest/Persistence.tsx
@@ -42,13 +42,13 @@ const Persistence = ({ updateSelection }: PersistenceProps) => {
   ];
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mx-4 mt-[25px]">
       <div className="flex flex-col">
         <div className="h0 mb-12 ">
           <div>한 번 뿌릴 때,</div>
           <div>향이 얼마나 지속되면 좋을까요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*최대 2개 선택 가능</div>
+        <div className="text-gray-300 body2 mb-3">*최대 2개 선택 가능</div>
         <div>
           {options.map((option) => (
             <div key={option.id} className="flex items-center mb-5">
@@ -63,7 +63,7 @@ const Persistence = ({ updateSelection }: PersistenceProps) => {
               />
               <label
                 htmlFor={option.id}
-                className={`block w-full text-start border ${
+                className={`block w-full text-start border transition ${
                   selectedOptions.includes(option.id)
                     ? 'bg-acodegray-50 border-acodegray-100'
                     : 'bg-white border-acodegray-100'
@@ -81,7 +81,7 @@ const Persistence = ({ updateSelection }: PersistenceProps) => {
           <button
             type="button"
             onClick={() => swiper.slideNext()}
-            className={`px-4 rounded-lg h-[56px] w-full inline-flex items-center justify-center ${
+            className={`h2 px-4 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
               selectedOptions.length > 0
                 ? 'bg-black text-white'
                 : 'bg-gray-300 text-white'