Merge pull request #644 from depromeet/develop

[v2.4.7] 배포용 PR #643

.github/CODEOWNERS

@@ -1 +1 @@
-* @wooBottle @wade3420 @junoshon @sumi-0011
+* @wooBottle @wade3420 @sumi-0011

src/apis/auth.ts

@@ -18,6 +18,7 @@ interface LoginResponse {
   accessToken: string;
   refreshToken: string;
   memberId?: number;
+  landingStatus?: 'TO_MAIN' | 'TO_ONBOARDING';
 }
 
 interface RegisterRequest {

src/app/auth/kakaoCallback/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useSocialLogin } from '@/apis/auth';
 import Loading from '@/components/Loading';
 import { AUTH_PROVIDER } from '@/constants/common';
+import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
 import { eventLogger } from '@/utils';
 
@@ -32,7 +33,11 @@ export default function KakaoCallbackPage() {
                 if (successData?.memberId) {
                   eventLogger.identify(successData.memberId.toString());
                 }
-
+                if (successData.landingStatus === 'TO_ONBOARDING') {
+                  eventLogger.logEvent(EVENT_LOG_CATEGORY.ONBOARDING, EVENT_LOG_NAME.ONBOARDING.SUCCESS_SIGNUP);
+                  router.push(ROUTER.ONBOARDING.HOME);
+                  return;
+                }
                 router.push(params.get('state') ?? ROUTER.HOME);
               },
             },

src/app/auth/login/page.tsx

@@ -7,6 +7,7 @@ import { useSocialLogin, useUpdateMemberFcmToken } from '@/apis/auth';
 // import Button from '@/components/Button/Button';
 import ButtonSocialLogin from '@/components/ButtonSocialLogin/ButtonSocialLogin';
 import { AUTH_PROVIDER, WINDOW_CUSTOM_EVENT } from '@/constants/common';
+import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { NATIVE_CUSTOM_EVENTS } from '@/constants/nativeCustomEvent';
 import { ROUTER } from '@/constants/router';
 import { eventLogger } from '@/utils';
@@ -35,9 +36,6 @@ export default function LoginPage() {
   const { mutate: updateMemberFcmTokenMutate } = useUpdateMemberFcmToken();
   const search = useSearchParams();
   const redirectUrl = search.get('redirect') ?? ROUTER.HOME;
-  // const onClickGuest = () => {
-  //   router.push(ROUTER.GUEST.MISSION.NEW);
-  // };
 
   const onClickAppleLogin = () => {
     if (isWebView()) {
@@ -81,6 +79,11 @@ export default function LoginPage() {
             if (data?.memberId) {
               eventLogger.identify(data.memberId.toString());
             }
+            if (data.landingStatus === 'TO_ONBOARDING') {
+              eventLogger.logEvent(EVENT_LOG_CATEGORY.ONBOARDING, EVENT_LOG_NAME.ONBOARDING.SUCCESS_SIGNUP);
+              router.push(ROUTER.ONBOARDING.HOME);
+              return;
+            }
             router.push(redirectUrl);
           },
         },
@@ -103,6 +106,11 @@ export default function LoginPage() {
               updateMemberFcmTokenMutate({ fcmToken: event.detail.data.deviceToken });
             }
             // 지금 당장은 필요없지만 나중을 위해 작동하도록 한다
+            if (data.landingStatus === 'TO_ONBOARDING') {
+              eventLogger.logEvent(EVENT_LOG_CATEGORY.ONBOARDING, EVENT_LOG_NAME.ONBOARDING.SUCCESS_SIGNUP);
+              router.push(ROUTER.ONBOARDING.HOME);
+              return;
+            }
             router.push(redirectUrl);
           },
           onError: () => {

src/app/mission/new/page.tsx

@@ -1,18 +1,114 @@
-import MissionRegistration from '@/app/mission/new/MissionRegistration';
+'use client';
+
+import { useState } from 'react';
+import { type MissionCategory, type MissionVisibility } from '@/apis/schema/mission';
+import useCreateMissionMutation from '@/app/mission/new/useCreateMissionMutation';
 import Header from '@/components/Header/Header';
+import Input from '@/components/Input/Input';
+import { type DropdownValueType } from '@/components/Input/Input.types';
+import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
+import { MISSION_CATEGORY_LIST, PUBLIC_SETTING_LIST } from '@/constants/mission';
+import { flex } from '@/styled-system/patterns';
 import { css } from '@styled-system/css';
 
 export default function MissionNewPage() {
+  const { triggerSnackBar } = useSnackBar();
+
+  const [missionTitleInput, setMissionTitleInput] = useState('');
+  const [missionContentInput, setMissionContentInput] = useState('');
+  const [missionCategory, setMissionCategory] = useState<DropdownValueType<MissionCategory> | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [missionPublicSetting, setMissionPublicSetting] = useState<DropdownValueType<MissionVisibility>>(
+    PUBLIC_SETTING_LIST[1],
+  );
+
+  const isSubmitButtonDisabled = !missionTitleInput || !missionCategory;
+
+  const { mutate } = useCreateMissionMutation();
+  // 미션 명
+  const handleMissionTitleInput = (value: string) => {
+    setMissionTitleInput(value);
+  };
+  // 미션 내용
+  const handleMissionContentInput = (value: string) => {
+    setMissionContentInput(value);
+  };
+
+  const handleSubmit = () => {
+    if (!missionCategory) {
+      triggerSnackBar({
+        message: '미션 제목을 입력해주세요.',
+      });
+      return;
+    }
+
+    mutate({
+      name: missionTitleInput,
+      content: missionContentInput,
+      category: missionCategory.value,
+      visibility: missionPublicSetting.value,
+    });
+  };
   return (
     <main className={mainWrapperCss}>
-      <Header title={'미션 등록'} rightAction="none" />
+      <Header
+        title={'미션 생성'}
+        rightAction="text-button"
+        rightButtonText="등록"
+        rightButtonProps={{ disabled: isSubmitButtonDisabled, onClick: handleSubmit }}
+      />
       <div className={containerCss}>
         <h1 className={mainTitleCss}>
-          하루 <strong>10분</strong>씩 2주 동안
+          하루 <strong>10분씩</strong> 2주 동안
           <br />
           어떤 일에 투자하고 싶은가요?
         </h1>
-        <MissionRegistration />
+        <section className={sectionCss}>
+          <Input
+            type="text"
+            placeholder="미션명 입력"
+            name="미션명"
+            required
+            maxLength={20}
+            value={missionTitleInput}
+            onChange={handleMissionTitleInput}
+          />
+          <Input
+            type="text"
+            placeholder="미션 내용 입력"
+            name="미션내용"
+            maxLength={30}
+            value={missionContentInput}
+            onChange={handleMissionContentInput}
+          />
+
+          {/* 카테고리 */}
+          <Input
+            variant="drop-down"
+            title="카테고리"
+            required
+            list={MISSION_CATEGORY_LIST}
+            placeholder="카테고리 선택"
+            selected={missionCategory}
+            onSelect={(item) => setMissionCategory(item)}
+          />
+          {/* TODO: 이후에 삭제 - 미션 기간, 알림 설정 Input 생기며 리스트 여백 수정 */}
+          <hr
+            className={css({
+              height: '12px',
+              opacity: 0,
+            })}
+          />
+
+          {/* 공개설정 */}
+          <Input
+            variant="drop-down"
+            title="공개설정"
+            list={PUBLIC_SETTING_LIST}
+            selected={missionPublicSetting}
+            onSelect={(item) => setMissionPublicSetting(item)}
+          />
+        </section>
       </div>
     </main>
   );
@@ -46,3 +142,8 @@ const mainTitleCss = css({
     textStyle: 'title2',
   },
 });
+
+const sectionCss = flex({
+  flexDirection: 'column',
+  gap: '12px',
+});

src/app/onboarding/RecommendFollowItem.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import Button from '@/components/Button/Button';
+import Thumbnail from '@/components/Thumbnail/Thumbnail';
+import { css } from '@styled-system/css';
+
+interface RecommendFollowItemProps {
+  id: number;
+  nickname: string;
+  profileImageUrl: string | null;
+  tags: string[];
+  onChangeFollow: (id: number) => void;
+  isFollowing: boolean;
+}
+
+function RecommendFollowItem({
+  profileImageUrl,
+  nickname,
+  tags,
+  onChangeFollow,
+  isFollowing,
+  id,
+}: RecommendFollowItemProps) {
+  const handleFollow = () => {
+    onChangeFollow(id);
+  };
+
+  return (
+    <div className={followItemWrapperCss}>
+      <div className={leftWrapperCss}>
+        <Thumbnail size={'h36'} variant={'filled'} url={profileImageUrl} />
+        <div>
+          <p className={nicknameCss}>{nickname}</p>
+          <ul className={tagListCss}>
+            {tags.map((tag, index) => (
+              <li className={tagCss} key={index}>
+                {tag}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <Button onClick={handleFollow} size={'small'} variant={isFollowing ? 'secondary' : 'primary'}>
+        {isFollowing ? '팔로우' : '팔로잉'}
+      </Button>
+    </div>
+  );
+}
+
+export default React.memo(RecommendFollowItem);
+
+const leftWrapperCss = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+});
+
+const nicknameCss = css({
+  textStyle: 'subtitle4',
+  color: 'text.secondary',
+});
+const tagListCss = css({
+  display: 'flex',
+  gap: '6px',
+});
+
+const tagCss = css({
+  textStyle: 'body6',
+  color: 'text.tertiary',
+});
+
+const followItemWrapperCss = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+
+  width: '100%',
+  padding: '8px',
+});