Merge branch 'dev' of https://github.com/New-Barams/this-year-ajaja-fe …

…into feat/#417/kakao-login-button-refactoring

src/apis/client/postRemindTest.ts

@@ -0,0 +1,14 @@
+import { DOMAIN } from '@/constants/api';
+import { axiosInstanceClient } from '../axiosInstanceClient';
+
+interface PostRemindTestResponse {
+  success: boolean;
+  data: 'EMAIL' | 'KAKAO' | 'BOTH';
+}
+
+export const postRemindTest = async () => {
+  const { data } = await axiosInstanceClient.post<PostRemindTestResponse>(
+    DOMAIN.POST_REMINDS_TEST,
+  );
+  return data;
+};

src/app/(header)/explore/_components/Card/Card.tsx

@@ -1,6 +1,7 @@
 import { AjajaButton, Tag } from '@/components';
 import { planIcons } from '@/constants/planIcons';
 import { CardPlans } from '@/types/apis/plan/GetAllPlans';
+import { checkThisYear } from '@/utils/checkThisYear';
 import classNames from 'classnames';
 import Image from 'next/image';
 import './index.scss';
@@ -32,7 +33,16 @@ export default function Card({ plan }: CardProps) {
           {plan.title}
         </p>
         <p className={classNames('card__contents--nickname', 'font-size-xs')}>
-          {plan.nickname}님의 계획 • {plan.createdAt.slice(0, 4)}년 작성
+          {parseInt(plan.createdAt.slice(0, 4)) === checkThisYear() ? (
+            <div>
+              {plan.nickname}님의 계획 • {plan.createdAt.slice(5, 7)}월{' '}
+              {plan.createdAt.slice(8, 10)}일 작성
+            </div>
+          ) : (
+            <div>
+              {plan.nickname}님의 계획 • {plan.createdAt.slice(0, 4)}년 작성
+            </div>
+          )}
         </p>
         <AjajaButton
           planId={plan.id}

src/app/(header)/explore/_components/Card/index.scss

@@ -45,7 +45,7 @@ $card_image_margin: 1rem;
     }
     &--tags {
       @include ellipsis(2);
-      height: 2.5rem;
+      height: 3rem;
     }
   }
 }

src/app/(header)/plans/edit/[planId]/index.scss

@@ -36,6 +36,13 @@
     display: flex;
     flex-direction: column;
     gap: 0.5em;
+    &--input {
+      & .counter {
+        margin-left: 0.5rem;
+        vertical-align: bottom;
+      }
+    }
+
     &--tags {
       display: flex;
       gap: 0.5rem;

src/app/(header)/plans/edit/[planId]/page.tsx

@@ -3,14 +3,14 @@
 import {
   AjajaButton,
   Button,
+  DeletableTag,
   IconSwitchButton,
-  InputTag,
   Modal,
   ModalSelectIcon,
   PlanInput,
-  Tag,
 } from '@/components';
 import HelpButton from '@/components/HelpButton/HelpButton';
+import TagInput from '@/components/TagInput/TagInput';
 import { ajajaToast } from '@/components/Toaster/customToast';
 import { planIcons } from '@/constants/planIcons';
 import { useEditPlanMutation } from '@/hooks/apis/useEditPlanMutation';
@@ -113,16 +113,29 @@ export default function EditPage({ params }: { params: { planId: string } }) {
         </div>
 
         <div className={classNames('edit-plan-content__tag')}>
-          <InputTag onSubmit={handleAddTag} />
+          <div className="edit-plan-content__tag--input">
+            <TagInput
+              disabled={planContent.tags.length === 5}
+              onSubmit={handleAddTag}
+              placeholder="태그를 입력해주세요"
+            />
+            <span
+              className={classNames(
+                'counter',
+                'font-size-xs',
+                planContent.tags.length === 5 && 'color-origin-primary',
+              )}>{`(${planContent.tags.length}/5)`}</span>
+          </div>
+
           <div className="edit-plan-content__tag--tags">
             {planContent.tags.map((tag, index) => (
-              <Tag
+              <DeletableTag
                 key={index}
                 onClick={() => {
                   handleRemoveTag(tag);
                 }}>
                 {tag}
-              </Tag>
+              </DeletableTag>
             ))}
           </div>
           <AjajaButton

src/app/(headerless)/login/index.scss

@@ -37,6 +37,7 @@
       width: 100%;
       height: 100%;
       gap: 1rem;
+
       &--image {
         width: 100%;
         height: 257px;

src/app/(headerless)/notice/error.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { BasicError } from '@/components';
+
+export default function ErrorPage({
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return <BasicError reset={reset} />;
+}

src/app/(headerless)/notice/index.scss

@@ -0,0 +1,31 @@
+.notice-page {
+  &__wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+  }
+
+  &__title {
+    align-self: center;
+    margin-top: 2.5rem;
+  }
+
+  &__content{
+    overflow-y: scroll;
+    margin-left: var(--scroll-margin-left);
+
+    &__title {
+      margin-top: 2rem;
+    }
+
+    &__date {
+      margin-top: 0.25rem;
+    }
+
+    &__description {
+      margin-top: 1rem;
+      line-height: 1.5rem;
+    }
+  }
+}

src/app/(headerless)/notice/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useScroll } from '@/hooks/useScroll';
+import Link from 'next/link';
+import React from 'react';
+import './index.scss';
+
+export default function NoticePage() {
+  const { handleScroll, scrollableRef } = useScroll();
+
+  return (
+    <div className="notice-page__wrapper">
+      <h1 className="notice-page__title font-size-xl">공지사항</h1>
+
+      <div
+        className="notice-page__content"
+        ref={scrollableRef}
+        onScroll={handleScroll}>
+        <p className="notice-page__content__title font-size-lg">
+          개인정보 처리방침 도입 안내
+        </p>
+
+        <p className="notice-page__content__date font-size-base color-origin-secondary">
+          2024.01.19
+        </p>
+
+        <p className="notice-page__content__description">
+          <p>
+            안녕하세요! 모든 사람들의 갓생을 꿈꾸는 뉴바람스입니다. 이용약관 및
+            개인정보 처리방침이 도입되어서 안내 드리고자 공지사항 남깁니다.
+          </p>
+          <br />
+
+          <p>
+            주요 변경 사항은 다음과 같습니다.
+            <br />
+            - 회원가입 시 전화번호 수집 <br />- 목적: 카카오톡으로 계획 리마인드
+            발송을 위함{' '}
+          </p>
+          <br />
+
+          <p>
+            자세한 내용은 다음 페이지를 통해서 확인할 수 있습니다. <br />
+            <Link href="https://sites.google.com/view/ajaja-policy-privacy">
+              - 개인정보 처리방침
+            </Link>
+            <br />
+            <Link href="https://sites.google.com/view/ajaja-policy-term">
+              - 이용약관
+            </Link>
+          </p>
+          <br />
+
+          <p>
+            이용약관과 개인정보 처리방침은 24년 1월 12일부터 시행되었습니다.
+            감사합니다! 올해도 아좌좌 🔥
+          </p>
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/_components/Navigation/Navigation.tsx

@@ -25,6 +25,8 @@ export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
   const isEdit = /^\/plans\/edit\/\d+/;
   const isPlan = /^\/plans\/\d+/;
   const isRemind = /^\/reminds\/.*$/;
+  const isFeedback = /^\/feedback\/\d+/;
+  const isFeedbackEvaluate = /^\/feedback\/evaluate/;
 
   if (!hasCookie('auth')) {
     setTimeout(() => {
@@ -49,12 +51,7 @@ export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
   }, [setCanMakeNewPlan]);
   return (
     <div className={classNames('navigation')}>
-      <Link
-        href="/home"
-        className={classNames('navigation-icon', {
-          'color-origin-primary': pathName === '/home',
-          'color-origin-text-300': pathName !== '/home',
-        })}>
+      <Link href="/home" className={classNames('navigation-icon')}>
         <Icon
           name="HOME"
           isFilled={true}
@@ -63,22 +60,37 @@ export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
             pathName === '/home' ||
             isRemind.test(pathName) ||
             (isMyPlan && isPlan.test(pathName)) ||
-            isEdit.test(pathName)
+            isEdit.test(pathName) ||
+            isFeedback.test(pathName) ||
+            isFeedbackEvaluate.test(pathName)
               ? 'primary'
               : 'text-300'
           }
         />
-        <p className={classNames('font-size-xs')}>홈</p>
+        <p
+          className={classNames(
+            'font-size-xs',
+            pathName === '/home' ||
+              isRemind.test(pathName) ||
+              (isMyPlan && isPlan.test(pathName)) ||
+              isEdit.test(pathName) ||
+              isFeedback.test(pathName) ||
+              isFeedbackEvaluate.test(pathName)
+              ? 'color-origin-primary'
+              : 'color-origin-text-300',
+          )}>
+          홈
+        </p>
       </Link>
       <Link
-        href={canMakeNewPlan ? '/create' : ''}
+        href={canMakeNewPlan ? '/create' : '/fee'}
         onClick={handleCreate}
         className={classNames('navigation-icon', {
           'color-origin-primary': pathName === '/create',
           'color-origin-text-300': pathName !== '/create',
         })}>
         <Icon
-          name="CREATE_NEW_PLAN"
+          name={checkIsSeason() ? 'CREATE_NEW_PLAN' : 'FEEDBACK'}
           isFilled={true}
           size="xl"
           color={pathName === '/create' ? 'primary' : 'text-300'}
@@ -87,12 +99,7 @@ export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
           {checkIsSeason() ? '계획 작성' : '피드백하기'}
         </p>
       </Link>
-      <Link
-        href="/explore"
-        className={classNames('navigation-icon', {
-          'color-origin-primary': pathName === '/explore',
-          'color-origin-text-300': pathName !== '/explore',
-        })}>
+      <Link href="/explore" className={classNames('navigation-icon')}>
         <Icon
           name="OTHER_PLAN"
           isFilled={true}
@@ -103,7 +110,15 @@ export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
               : 'text-300'
           }
         />
-        <p className={classNames('font-size-xs')}>둘러보기</p>
+        <p
+          className={classNames(
+            'font-size-xs',
+            pathName === '/explore' || (!isMyPlan && isPlan.test(pathName))
+              ? 'color-origin-primary'
+              : 'color-origin-text-300',
+          )}>
+          둘러보기
+        </p>
       </Link>
       <Link
         href={isLogin ? '/my' : '/login'}

src/components/CreatePlanContent/CreatePlanContent.tsx

@@ -5,7 +5,7 @@ import { useScroll } from '@/hooks/useScroll';
 import { PlanContentType } from '@/types/Plan';
 import classNames from 'classnames';
 import { useEffect, useRef } from 'react';
-import { IconSwitchButton, InputTag, PlanInput, Tag } from '..';
+import { DeletableTag, IconSwitchButton, PlanInput, TagInput } from '..';
 import HelpButton from '../HelpButton/HelpButton';
 import { useSessionStorage } from './../../hooks/useSessionStorage';
 import './index.scss';
@@ -63,7 +63,11 @@ export default function CreatePlanContent({
 
   const handleAddTag = (text: string) => {
     const trimedTags = text.trim();
-    if (planContent.tags.includes(trimedTags) || planContent.tags.length >= 5) {
+    if (
+      planContent.tags.includes(trimedTags) ||
+      planContent.tags.length >= 5 ||
+      trimedTags.length === 0
+    ) {
       return;
     }
     const newTagList = [...planContent.tags, trimedTags];
@@ -106,16 +110,28 @@ export default function CreatePlanContent({
       />
 
       <div className={classNames('create-plan-content__tag')}>
-        <InputTag onSubmit={handleAddTag} />
+        <div className="create-plan-content__tag--input">
+          <TagInput
+            disabled={planContent.tags.length === 5}
+            onSubmit={handleAddTag}
+            placeholder="태그를 입력해주세요"
+          />
+          <span
+            className={classNames(
+              'counter',
+              'font-size-xs',
+              planContent.tags.length === 5 && 'color-origin-primary',
+            )}>{`(${planContent.tags.length}/5)`}</span>
+        </div>
         <div className="create-plan-content__tag--tags">
           {planContent.tags.map((tag, index) => (
-            <Tag
+            <DeletableTag
               key={index}
               onClick={() => {
                 handleRemoveTag(tag);
               }}>
               {tag}
-            </Tag>
+            </DeletableTag>
           ))}
         </div>
       </div>

src/components/CreatePlanContent/index.scss

@@ -21,6 +21,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    &--input {
+      & .counter {
+        margin-left: 0.5rem;
+        vertical-align: bottom;
+      }
+    }
 
     &--tags {
       display: flex;