merge develop to main

Dockerfile.dev

@@ -21,6 +21,7 @@ COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/yarn.lock ./yarn.lock
+COPY --from=builder /app/next.config.ts ./next.config.ts
 
 # 런타임시점에도 .env 파일 복사
 COPY --from=builder /app/.env .env

Dockerfile.prod

@@ -21,6 +21,7 @@ COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/yarn.lock ./yarn.lock
+COPY --from=builder /app/next.config.ts ./next.config.ts
 
 # 런타임시점에도 .env 파일 복사
 COPY --from=builder /app/.env .env

app/(my)/my-study/page.tsx

@@ -1,17 +1,14 @@
+'use client';
+
 import Image from 'next/image';
-import { redirect } from 'next/navigation';
-import { getStudyDashboard } from '@/entities/user/api/get-user-profile';
-import { getLoginUserId } from '@/shared/lib/get-login-user';
+import { useStudyDashboardQuery } from '@/features/my-page/model/use-update-user-profile-mutation';
 import MyStudyCard from '@/widgets/my-study/my-study-card';
 
-export default async function MyStudy() {
-  const memberId = await getLoginUserId();
-
-  if (!memberId) {
-    redirect('/login');
-  }
+export default function MyStudy() {
+  const { data: dashboard, isLoading, isError } = useStudyDashboardQuery();
 
-  //const dashboard = await getStudyDashboard(memberId);
+  if (isLoading) return <div>로딩 중...</div>;
+  if (isError || !dashboard) return <div>에러가 발생했습니다.</div>;
 
   return (
     <div className="flex flex-col gap-400">
@@ -22,14 +19,33 @@ export default async function MyStudy() {
         </div>
 
         <div className="flex gap-200">
-          <MyStudyCard title="총 참여" value="데이터 없음" />
-          <MyStudyCard title="연속 참여" value="8" unit="주" />
-          <MyStudyCard title="완료" value="23" unit="회" />
+          <MyStudyCard
+            title="총 참여"
+            value={dashboard.studyActivity.totalParticipationDays}
+          />
+          <MyStudyCard
+            title="연속 참여"
+            value={dashboard.studyActivity.sequenceParticipationWeeks}
+            unit="주"
+          />
+          <MyStudyCard
+            title="완료"
+            value={dashboard.studyActivity.completedStudyCount}
+            unit="회"
+          />
         </div>
 
         <div className="flex gap-200">
-          <MyStudyCard title="최대 연속 참여" value="8" unit="주" />
-          <MyStudyCard title="실패" value="23" unit="회" />
+          <MyStudyCard
+            title="최대 연속 참여"
+            value={dashboard.studyActivity.maxSequenceParticipationWeeks}
+            unit="주"
+          />
+          <MyStudyCard
+            title="실패"
+            value={dashboard.studyActivity.failureStudyCount}
+            unit="회"
+          />
         </div>
       </div>
 
@@ -42,11 +58,15 @@ export default async function MyStudy() {
         <div className="flex gap-200">
           <MyStudyCard
             title="스터디 완료율"
-            value="173"
-            changeIndicator={{ type: 'increase', value: 8.2 }}
+            value={dashboard.growthMetric.studyCompleteness}
+            unit="%"
           />
           <MyStudyCard title="등급" value="S" unit="등급" />
-          <MyStudyCard title="최대 연속 참여" value="8" unit="주" />
+          <MyStudyCard
+            title="최대 연속 참여"
+            value={dashboard.studyActivity.maxSequenceParticipationWeeks}
+            unit="주"
+          />
         </div>
       </div>
     </div>

src/entities/user/api/get-user-profile.ts

@@ -1,7 +1,6 @@
 import type {
   GetUserProfileResponse,
   PatchAutoMatchingParams,
-  StudyDashboardResponse,
 } from '@/entities/user/api/types';
 import { axiosInstance } from '@/shared/tanstack-query/axios';
 
@@ -21,12 +20,3 @@ export const patchAutoMatching = async ({
     params: { 'auto-matching': autoMatching },
   });
 };
-
-export const getStudyDashboard = async (
-  memberId: number,
-): Promise<StudyDashboardResponse> => {
-  const res = await axiosInstance.get(`/study/dashboard/${memberId}`);
-  console.log('errrrpr' + res.data.content);
-
-  return res.data.content;
-};

src/entities/user/api/types.ts

@@ -84,16 +84,3 @@ export interface PatchAutoMatchingParams {
   memberId: number;
   autoMatching: boolean;
 }
-
-export interface StudyDashboardResponse {
-  tier: string;
-  experience: number;
-  monthAttendance: number;
-  weekAttendance: number;
-  techStack: Record<string, number>;
-  mainStackCount: {
-    FE: number;
-    BE: number;
-    CS: number;
-  };
-}

src/entities/user/model/use-user-profile-query.ts

@@ -1,7 +1,6 @@
 import { sendGTMEvent } from '@next/third-parties/google';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
-  getStudyDashboard,
   getUserProfile,
   patchAutoMatching,
 } from '@/entities/user/api/get-user-profile';
@@ -40,12 +39,3 @@ export const usePatchAutoMatchingMutation = () => {
     },
   });
 };
-
-export const useStudyDashboardQuery = (memberId: number) => {
-  return useQuery({
-    queryKey: ['studyDashboard', memberId],
-    queryFn: () => getStudyDashboard(memberId),
-    enabled: !!memberId,
-    staleTime: 60 * 1000,
-  });
-};

src/features/auth/ui/sign-up-image-selector.tsx

@@ -20,7 +20,6 @@ export default function SignupImageSelector({
     <div className="relative">
       <div className="relative h-[112px] w-[112px] overflow-hidden rounded-full">
         <Image src={image} alt="프로필" fill className="object-cover" />
-        <img src={image} alt="next최적화안쓴프로필" className="object-covoer" />
       </div>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>

src/features/my-page/api/types.ts

@@ -1,6 +1,7 @@
 export interface UpdateUserProfileRequest {
   name: string;
   tel: string;
+  birthDate?: string;
   githubLink?: string;
   blogOrSnsLink?: string;
   simpleIntroduction?: string;
@@ -62,3 +63,20 @@ export interface TechStackResponse {
   parentId: number | undefined;
   level: number;
 }
+
+export interface StudyActivity {
+  totalParticipationDays: number;
+  sequenceParticipationWeeks: number;
+  maxSequenceParticipationWeeks: number;
+  completedStudyCount: number;
+  failureStudyCount: number;
+}
+
+export interface GrowthMetric {
+  studyCompleteness: number;
+}
+
+export interface StudyDashboardResponse {
+  studyActivity: StudyActivity;
+  growthMetric: GrowthMetric;
+}

src/features/my-page/api/update-user-profile.ts

@@ -1,5 +1,6 @@
 import type {
   AvailableStudyTimeResponse,
+  StudyDashboardResponse,
   StudySubjectResponse,
   TechStackResponse,
   UpdateUserProfileInfoRequest,
@@ -49,3 +50,9 @@ export const getTechStacks = async (): Promise<TechStackResponse[]> => {
 
   return res.data.content;
 };
+
+export const getStudyDashboard = async (): Promise<StudyDashboardResponse> => {
+  const res = await axiosInstance.get('/study/dashboard');
+
+  return res.data.content;
+};

src/features/my-page/model/use-update-user-profile-mutation.ts

@@ -6,6 +6,7 @@ import {
 } from '../api/types';
 import {
   getAvailableStudyTimes,
+  getStudyDashboard,
   getStudySubjects,
   getTechStacks,
   updateUserProfile,
@@ -59,3 +60,11 @@ export const useTechStacksQuery = () => {
     queryFn: getTechStacks,
   });
 };
+
+export const useStudyDashboardQuery = () => {
+  return useQuery({
+    queryKey: ['studyDashboard'],
+    queryFn: () => getStudyDashboard(),
+    staleTime: 60 * 1000,
+  });
+};

src/features/my-page/ui/profile-edit-modal.tsx

@@ -24,6 +24,30 @@ interface Props {
 
 export type MbtiValue = (typeof MBTI_OPTIONS)[number]['value'];
 
+const formValidations = {
+  regex: {
+    // 이름 유효성 검사: 2~10자, 한글 또는 영문만 허용
+    username: /^[가-힣a-zA-Z]{2,10}$/,
+    // 연락처 유효성 검사: "(2~3자리 지역번호)-(3~4자리 번호)-(4자리 번호)" 형식
+    telephone: /^\d{2,3}-\d{3,4}-\d{4}$/,
+    // 생년월일 텍스트 패턴 유효성 검사 : ^(4자리 년도).(2자리 월).(2자리 일)
+    birthDate: /^\d{4}.([0][1-9]|[1][0-2]).([0][1-9]|[1-2][0-9]|[3][0-1])/,
+  },
+  checker: {
+    // year 는 최소 1900년 이상 현재 년도 이하이어야 한다.
+    // month 와 date 의 유효성은 생성자로 검사됨
+    birthDate: (value: string) => {
+      const birthDate = new Date(value);
+      const now = new Date();
+      if (birthDate.toString() === 'Invalid Date') return false;
+      const year = birthDate.getFullYear();
+      if (year < 1900 || year > now.getFullYear()) return false;
+
+      return true;
+    },
+  },
+};
+
 export default function ProfileEditModal({ memberProfile, memberId }: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -66,6 +90,7 @@ function ProfileEditForm({
   const [profileForm, setProfileForm] = useState<UpdateUserProfileRequest>({
     name: memberProfile.memberName ?? '',
     tel: memberProfile.tel ?? '',
+    birthDate: memberProfile.birthDate ?? '',
     githubLink: memberProfile.githubLink?.url ?? '',
     blogOrSnsLink: memberProfile.blogOrSnsLink?.url ?? '',
     mbti: memberProfile.mbti ?? '',
@@ -78,12 +103,14 @@ function ProfileEditForm({
       DEFAULT_PROFILE_IMAGE_URL,
   );
 
-  // 이름 유효성 검사: 2~10자, 한글 또는 영문만 허용
-  const isNameValid = /^[가-힣a-zA-Z]{2,10}$/.test(profileForm.name);
-  // 연락처 유효성 검사: "(2~3자리 지역번호)-(3~4자리 번호)-(4자리 번호)" 형식
-  const isTelValid =
-    profileForm.tel.length === 0 ||
-    /^\d{2,3}-\d{3,4}-\d{4}$/.test(profileForm.tel);
+  const isNameValid = formValidations.regex.username.test(profileForm.name);
+  const isTelValid = formValidations.regex.telephone.test(profileForm.tel);
+  const isBirthDateValid =
+    profileForm.birthDate.length === 0 ||
+    (formValidations.regex.birthDate.test(profileForm.birthDate) &&
+      formValidations.checker.birthDate(profileForm.birthDate));
+
+  const isReadyToSubmit = isNameValid && isTelValid && isBirthDateValid;
 
   const queryClient = useQueryClient();
   const { mutateAsync: updateProfile } = useUpdateUserProfileMutation(memberId);
@@ -104,6 +131,7 @@ function ProfileEditForm({
     const rawFormData: UpdateUserProfileRequest = {
       name: profileForm.name,
       tel: profileForm.tel,
+      birthDate: profileForm.birthDate.replace(/\./g, '-'),
       githubLink: profileForm.githubLink,
       blogOrSnsLink: profileForm.blogOrSnsLink,
       simpleIntroduction: profileForm.simpleIntroduction.trim() || undefined,
@@ -191,12 +219,13 @@ function ProfileEditForm({
           <FormField
             label="연락처"
             type="text"
-            error={!isTelValid}
+            error={!(isTelValid || profileForm.tel === '')}
             description={
-              isTelValid
+              isTelValid || profileForm.tel === ''
                 ? '스터디 진행을 위한 연락 가능한 정보를 입력해 주세요.'
                 : '연락처는 숫자와 하이픈(-)을 포함한 형식으로 입력해주세요.'
             }
+            placeholder="010-1234-5678"
             value={profileForm.tel}
             onChange={(value) => {
               // 숫자와 하이픈(-)만 입력 허용
@@ -205,10 +234,29 @@ function ProfileEditForm({
             }}
             required
           />
+          <FormField
+            label="생년월일"
+            type="text"
+            description={
+              !isBirthDateValid
+                ? '잘못된 형식입니다.'
+                : '생년월일을 입력해 주세요.'
+            }
+            error={!isBirthDateValid}
+            placeholder="2000.00.00"
+            value={profileForm.birthDate}
+            onChange={(value) => {
+              setProfileForm({
+                ...profileForm,
+                birthDate: value,
+              });
+            }}
+          />
           <FormField
             label="Github"
             type="text"
             description="본인의 활동을 확인할 수 있는 GitHub 링크를 입력해 주세요."
+            placeholder="https://github.com/username"
             value={profileForm.githubLink}
             onChange={(value) =>
               setProfileForm({
@@ -270,7 +318,7 @@ function ProfileEditForm({
               await handleSubmit(); // 여기서 이미지 업로드 포함
               onClose();
             }}
-            disabled={!isNameValid || !isTelValid}
+            disabled={!isReadyToSubmit}
           >
             수정 완료
           </Button>