Merge pull request #408 from TripInfoWeb/dev

Design: 서비스 소개 페이지 디자인 변경

package.json

@@ -10,44 +10,44 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^3.0.0",
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^3.9.0",
     "@types/uuid": "^10.0.0",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.28",
+    "framer-motion": "^11.11.8",
     "lottie-react": "^2.4.0",
     "next": "14.2.10",
     "node-html-parser": "^6.1.13",
     "quill-image-drop-and-paste": "^2.0.1",
     "quill-image-resize-module-ts": "^3.0.3",
-    "rc-slider": "^11.1.5",
-    "react": "^18",
+    "rc-slider": "^11.1.7",
+    "react": "^18.3.1",
     "react-date-range": "^2.0.1",
-    "react-dom": "^18",
-    "react-easy-crop": "^5.0.8",
-    "react-hook-form": "^7.52.0",
-    "react-icons": "^5.2.1",
+    "react-dom": "^18.3.1",
+    "react-easy-crop": "^5.1.0",
+    "react-hook-form": "^7.53.0",
+    "react-icons": "^5.3.0",
     "react-quill": "^2.0.0",
     "react-spinners": "^0.14.1",
-    "react-toastify": "^10.0.5",
-    "sanitize-html": "^2.13.0",
-    "sharp": "^0.33.4",
-    "use-debounce": "^10.0.1",
+    "react-toastify": "^10.0.6",
+    "sanitize-html": "^2.13.1",
+    "sharp": "^0.33.5",
+    "use-debounce": "^10.0.3",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@types/node": "^20",
+    "@types/node": "^20.16.11",
     "@types/rc-slider": "^9.3.1",
-    "@types/react": "^18",
+    "@types/react": "^18.3.11",
     "@types/react-date-range": "^1.4.9",
-    "@types/react-dom": "^18",
-    "@types/sanitize-html": "^2.11.0",
-    "eslint": "^8",
+    "@types/react-dom": "^18.3.1",
+    "@types/sanitize-html": "^2.13.0",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.3",
-    "postcss": "^8",
-    "prettier-plugin-tailwindcss": "^0.6.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "postcss": "^8.4.47",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.3"
   }
 }

src/app/layout.tsx

@@ -70,7 +70,6 @@ export default function RootLayout({
             {children}
           </div>
         </div>
-
         <Footer />
         <FloatingButtonContainer />
         <div id="modal-root"></div>

src/app/point/layout.tsx

@@ -0,0 +1,20 @@
+import PointCategoryList from "@/components/point/PointCategoryList";
+import PointInfo from "@/components/point/PointInfo";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "포인트",
+  description: "포인트 정보 페이지",
+};
+
+export default function PointLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div className="flex w-full flex-col gap-0">
+      <PointInfo />
+      <PointCategoryList />
+      {children}
+    </div>
+  );
+}

src/app/point/page.tsx

@@ -0,0 +1,5 @@
+import PointHistoryList from "@/components/point/PointHistoryList";
+
+export default function page() {
+  return <PointHistoryList />;
+}

src/app/point/shop/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div className="mt-[3.625rem]">11</div>;
+}

src/app/support/page.tsx

@@ -2,9 +2,7 @@ import SupportSkeleton from "@/components/skeleton/support/SupportSkeleton";
 import SupportHeaderContainer from "@/containers/support/SupportHeaderContainer";
 import { Suspense } from "react";
 
-interface IPage {}
-
-const Page = (props: IPage) => {
+const Page = () => {
   return (
     <div className={"mb-8 w-full"}>
       <Suspense fallback={<SupportSkeleton />}>

src/components/auth/AddUserInformationForm.tsx

@@ -9,7 +9,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import ModalTemplate from "../common/modal/ModalTemplate";
 
-
 const AddUserInformationForm = (props: IModalComponent) => {
   const authStore = useAuthStore();
   const toastifyStore = useToastifyStore();
@@ -67,12 +66,12 @@ const AddUserInformationForm = (props: IModalComponent) => {
       <p className="mt-[0.625rem] max-w-[15.875rem] text-center text-gray1">
         신뢰할 수 있는 이용 환경을 위해 필요한 정보를 입력해 주세요
       </p>
-      <div className="mt-[1.25rem] flex w-full flex-col gap-y-[2.375rem] rounded-[1.125rem] px-[2.25rem] pb-[1.875rem] pt-[1.5rem] bg-[#F7F7F7]">
+      <div className="mt-[1.25rem] flex w-full flex-col gap-y-[2.375rem] rounded-[1.125rem] bg-[#F7F7F7] px-[2.25rem] pb-[1.875rem] pt-[1.5rem]">
         <article className="flex flex-col">
           <h3 className="text-[1.125rem] font-bold text-black"> 이름 </h3>
           <input
             type={"text"}
-            className="mt-3 h-10 w-full rounded-[1.5rem] px-3 text-center text-main focus:outline-main outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-[#f0f0f0]"
+            className="mt-3 h-10 w-full rounded-[1.5rem] px-3 text-center text-main outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-[#f0f0f0] focus:outline-main"
             placeholder="이름을 입력해주세요"
             maxLength={10}
             {...register("name")}
@@ -82,7 +81,7 @@ const AddUserInformationForm = (props: IModalComponent) => {
           <h3 className="text-[1.125rem] font-bold text-black"> 성별 </h3>
           <div className={"mt-3 flex h-10 w-full gap-x-3"}>
             <button
-              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${getValues("sex") == "male" ? "bg-[#F2FAF7] font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${getValues("sex") == "male" ? "bg-lightGreen font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
               onClick={() => {
                 setValue("sex", "male");
                 trigger();
@@ -91,7 +90,7 @@ const AddUserInformationForm = (props: IModalComponent) => {
               남성
             </button>
             <button
-              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${getValues("sex") == "female" ? "bg-[#F2FAF7] font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${getValues("sex") == "female" ? "bg-lightGreen font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
               onClick={() => {
                 setValue("sex", "female");
                 trigger();
@@ -114,7 +113,7 @@ const AddUserInformationForm = (props: IModalComponent) => {
             onChange={handleInputChange}
             placeholder="YYYY"
             maxLength={4}
-            className="w-full bg-transparent text-center outline-none focus:outline-main mt-3 flex h-10 items-center justify-center rounded-[1.5rem] bg-white py-[0.375rem] text-main outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-[#F0F0F0]"
+            className="mt-3 flex h-10 w-full items-center justify-center rounded-[1.5rem] bg-transparent bg-white py-[0.375rem] text-center text-main outline-none outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-[#F0F0F0] focus:outline-main"
           />
         </article>
       </div>

src/components/auth/AddUserInformationInitForm.tsx

@@ -22,13 +22,13 @@ const AddUserInformationInitForm = ({
     >
       <section
         className={
-          "flex max-h-[calc(100vh-1rem)] max-w-[50rem] w-full pt-2 pb-4 flex-col items-center overflow-y-scroll rounded-[1rem] rounded-b-[1rem] bg-white px-[3.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray2 scrollbar-hide"
+          "scrollbar-hide flex max-h-[calc(100vh-1rem)] w-full max-w-[50rem] flex-col items-center overflow-y-scroll rounded-[1rem] rounded-b-[1rem] bg-white px-[3.5rem] pb-4 pt-2 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray2"
         }
       >
         <div className="flex w-full py-2">
           <button
             className="bg-gray relative z-50 scale-100 transform rounded-[1rem] bg-gray3 p-2 transition-transform duration-300"
-            onClick={()=>handleHomeButtonClick()}
+            onClick={() => handleHomeButtonClick()}
           >
             <Image
               className="aspect-square"
@@ -60,7 +60,7 @@ const AddUserInformationInitForm = ({
             <h3 className="text-[1.125rem] font-bold text-black"> 성별 </h3>
             <div className={"mt-3 flex h-[3rem] w-full gap-x-3"}>
               <button
-                className={`h-full w-full rounded-[1.5rem] py-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${formContext.getValues("sex") == "male" ? "bg-[#F2FAF7] font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+                className={`h-full w-full rounded-[1.5rem] py-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${formContext.getValues("sex") == "male" ? "bg-lightGreen font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
                 onClick={() => {
                   formContext.setValue("sex", "male");
                   formContext.trigger();
@@ -69,7 +69,7 @@ const AddUserInformationInitForm = ({
                 남성
               </button>
               <button
-                className={`h-full w-full rounded-[1.5rem] py-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${formContext.getValues("sex") == "female" ? "bg-[#F2FAF7] font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+                className={`h-full w-full rounded-[1.5rem] py-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${formContext.getValues("sex") == "female" ? "bg-lightGreen font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
                 onClick={() => {
                   formContext.setValue("sex", "female");
                   formContext.trigger();
@@ -83,7 +83,8 @@ const AddUserInformationInitForm = ({
             <h3 className="flex items-center gap-x-2 text-[1.125rem] font-bold text-black">
               연도(나이)
               <span className="flex items-center text-gray2">
-                {new Date().getFullYear() - 58} ~ {new Date().getFullYear() - 19}
+                {new Date().getFullYear() - 58} ~{" "}
+                {new Date().getFullYear() - 19}
               </span>
             </h3>
             <span className="flex items-center text-gray2">

src/components/auth/UserImage.tsx

@@ -10,7 +10,7 @@ interface IUserImage {
 const UserImage = ({
   userImageAddress,
   size,
-  addressStyle = "rounded-[50%] border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7]",
+  addressStyle = "rounded-[50%] border-[0.03125rem] border-[#B8EDD9] bg-lightGreen",
 }: IUserImage) => {
   return (
     <>

src/components/common/FloatingButton.tsx

@@ -13,13 +13,16 @@ interface Props {
 }
 
 const FloatingButton = forwardRef<HTMLDivElement, Props>(
-  ({ visible, animationFlag, onClick, onScrollToTop, createGatheringClick }, ref) => {
+  (
+    { visible, animationFlag, onClick, onScrollToTop, createGatheringClick },
+    ref,
+  ) => {
     return (
       <div className="fixed bottom-8 left-[calc(100vw-12px)] z-40 flex w-24 translate-x-[-100%] flex-col items-center gap-3">
         {visible && (
           <div ref={ref} className="flex flex-col items-center gap-3">
             <div
-              className={`${animationFlag ? "animate-fadeOut" : "animate-fadeIn"} flex flex-col items-center gap-6 rounded-full bg-[#F2FAF7] px-4 py-[1.875rem]`}
+              className={`${animationFlag ? "animate-fadeOut" : "animate-fadeIn"} bg-lightGreen flex flex-col items-center gap-6 rounded-full px-4 py-[1.875rem]`}
             >
               <Link
                 className="flex flex-col items-center text-sm hover:text-main"

src/components/common/GatheringItem.tsx

@@ -39,7 +39,7 @@ const GatheringItem = ({ data, isAccessGathering }: IGatheringItem) => {
   return (
     <Link
       href={`/gathering/${data.gatheringId}`}
-      className={`flex w-full ${data.isFinish || format(new Date(data.deadline), "yyyyMMdd") < format(new Date(), "yyyyMMdd") ? "text-gray2" : "text-black"} h-full max-h-[19.6875rem] flex-col gap-[1.25rem] rounded-2xl border-0 p-5 outline outline-2 outline-offset-[-2px] outline-gray3 duration-300 hover:bg-[#F2FAF7] hover:outline-main`}
+      className={`flex w-full ${data.isFinish || format(new Date(data.deadline), "yyyyMMdd") < format(new Date(), "yyyyMMdd") ? "text-gray2" : "text-black"} hover:bg-lightGreen h-full max-h-[19.6875rem] flex-col gap-[1.25rem] rounded-2xl border-0 p-5 outline outline-2 outline-offset-[-2px] outline-gray3 duration-300 hover:outline-main`}
       onClick={(e) => {
         if (!isAccessGathering) {
           e.preventDefault();

src/components/common/GatheringItemHome.tsx

@@ -26,7 +26,7 @@ const GatheringItemHome = ({ data }: IGatheringItemHome) => {
   return (
     <Link
       href={`/gathering/${data.gatheringId}`}
-      className="flex h-[19.6875rem] flex-col gap-[1.25rem] rounded-2xl border-0 p-6 text-black outline outline-2 outline-gray3 duration-300 hover:bg-[#F2FAF7] hover:outline-main max-[744px]:min-w-[19.183125rem]"
+      className="hover:bg-lightGreen flex h-[19.6875rem] flex-col gap-[1.25rem] rounded-2xl border-0 p-6 text-black outline outline-2 outline-gray3 duration-300 hover:outline-main max-[744px]:min-w-[19.183125rem]"
     >
       <div className="flex flex-col">
         <div className="flex flex-row items-center justify-between">

src/components/diary/list/DiaryCard.tsx

@@ -30,7 +30,7 @@ const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => {
   if (isFlipped) {
     return (
       <div
-        className={`${flag ? "animate-cardFlip" : "animate-cardFlip2"} aspect-[3/4] w-full flex-col overflow-y-hidden rounded-2xl border-[0.0625rem] border-gray3 px-9 py-9 hover:border-main hover:bg-[#F2FAF7] max-[744px]:aspect-auto max-[744px]:h-[29rem]`}
+        className={`${flag ? "animate-cardFlip" : "animate-cardFlip2"} hover:bg-lightGreen aspect-[3/4] w-full flex-col overflow-y-hidden rounded-2xl border-[0.0625rem] border-gray3 px-9 py-9 hover:border-main max-[744px]:aspect-auto max-[744px]:h-[29rem]`}
         onClick={() => {
           if (flag) {
             flip();

src/components/diary/write/DiaryEditor.tsx

@@ -143,7 +143,7 @@ const DiaryEditor = ({
           {["최고", "좋아", "무난", "슬퍼", "화나"].map((value, index) => (
             <button
               key={index + 1}
-              className={`${formContext.getValues("moodLevels") === index + 1 ? "bg-[#F2FAF7] text-main" : "text-gray1"} flex h-[5.75rem] w-[6.5rem] flex-col items-center justify-between py-[0.5625rem] text-[0.9375rem] hover:bg-[#F2FAF7] hover:text-main`}
+              className={`${formContext.getValues("moodLevels") === index + 1 ? "bg-lightGreen text-main" : "text-gray1"} hover:bg-lightGreen flex h-[5.75rem] w-[6.5rem] flex-col items-center justify-between py-[0.5625rem] text-[0.9375rem] hover:text-main`}
               onClick={() => {
                 formContext.setValue("moodLevels", index + 1);
                 formContext.trigger("moodLevels");

src/components/gathering/read/GatheringSearch.tsx

@@ -75,7 +75,7 @@ const GatheringSearch = ({
           }}
         />
         <button
-          className="absolute right-[0.375rem] top-[0.3125rem] flex h-[2.125rem] w-[2.125rem] items-center justify-center rounded-full bg-[#F2FAF7] hover:scale-110"
+          className="bg-lightGreen absolute right-[0.375rem] top-[0.3125rem] flex h-[2.125rem] w-[2.125rem] items-center justify-center rounded-full hover:scale-110"
           onClick={() => searchHandler()}
         >
           <Image

src/components/informations/detail/CommentItem.tsx

@@ -10,7 +10,7 @@ const CommentItem = ({ data }: Props) => {
     <div className="flex flex-col gap-[0.625rem] border-b border-b-gray3">
       <div className="flex flex-row items-center gap-3">
         <Image
-          className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7]"
+          className="bg-lightGreen rounded-full border-[0.03125rem] border-[#B8EDD9]"
           src={data.userImage}
           alt="userImage"
           width={54}

src/components/informations/detail/InformationViewer.tsx

@@ -23,7 +23,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
           <div className="flex flex-row items-end justify-between py-4">
             <div className="flex flex-row items-center gap-3">
               <Image
-                className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7]"
+                className="bg-lightGreen rounded-full border-[0.03125rem] border-[#B8EDD9]"
                 src={`${data.userImage}`}
                 alt="userImage"
                 width={54}
@@ -62,7 +62,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
             <div className="flex flex-row items-end justify-between py-4">
               <div className="flex h-[3.375rem] flex-row items-center gap-3">
                 <Image
-                  className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7]"
+                  className="bg-lightGreen rounded-full border-[0.03125rem] border-[#B8EDD9]"
                   src={`${data.userImage}`}
                   alt="userImage"
                   width={54}

src/components/informations/list/InformationSearch.tsx

@@ -91,7 +91,7 @@ const InformationSearch = ({
           onChange={(e) => onChangeSearchValue(e.target.value)}
         />
         <button
-          className="absolute right-[0.375rem] top-[0.3125rem] flex h-[2.125rem] w-[2.125rem] items-center justify-center rounded-full bg-[#F2FAF7] hover:scale-110"
+          className="bg-lightGreen absolute right-[0.375rem] top-[0.3125rem] flex h-[2.125rem] w-[2.125rem] items-center justify-center rounded-full hover:scale-110"
           type="submit"
         >
           <Image

src/components/mypage/MyPageHeader.tsx

@@ -15,7 +15,7 @@ const MyPageHeader = ({ userInfo }: IMyPageHeader) => {
         <article className={"flex flex-col items-center"}>
           <div
             className={
-              "relative mb-[1rem] aspect-square w-[6.75rem] rounded-[50%] bg-[#F2FAF7] outline outline-[1px] outline-offset-[-1px] outline-[#B8EDD9]"
+              "bg-lightGreen relative mb-[1rem] aspect-square w-[6.75rem] rounded-[50%] outline outline-[1px] outline-offset-[-1px] outline-[#B8EDD9]"
             }
           >
             <UserImage

src/components/mypage/MyPageUserImage.tsx

@@ -10,7 +10,7 @@ interface IMyPageUserImage {
   imageBase64Data: string;
   userImageUrl: string;
   userSex: string | null;
-  modalState: ModalState,
+  modalState: ModalState;
   closeCropModal: () => void;
   onChangeImageUrl: (_: string) => void;
   deleteImage: () => void;
@@ -23,7 +23,7 @@ const MyPageUserImage = (props: IMyPageUserImage) => {
       <div className={"group flex flex-col items-center"}>
         <label
           className={
-            "relative aspect-square w-[6.75rem] cursor-pointer rounded-[50%] bg-[#F2FAF7] outline outline-[1px] outline-offset-[-1px] outline-[#B8EDD9]"
+            "bg-lightGreen relative aspect-square w-[6.75rem] cursor-pointer rounded-[50%] outline outline-[1px] outline-offset-[-1px] outline-[#B8EDD9]"
           }
           htmlFor={"imageUpload"}
           onDragEnter={props.dragAndDrop.onDragEnter}
@@ -71,9 +71,7 @@ const MyPageUserImage = (props: IMyPageUserImage) => {
           />
         </label>
       </div>
-      <Modal
-        modalState={props.modalState}
-      >
+      <Modal modalState={props.modalState}>
         <CropperComponent
           imageBase64Data={props.imageBase64Data}
           closeCropModal={props.closeCropModal}