diff --git a/app/(afterLogin)/mypage/MypageActivity.tsx b/app/(afterLogin)/mypage/MypageActivity.tsx new file mode 100644 index 0000000..38bd315 --- /dev/null +++ b/app/(afterLogin)/mypage/MypageActivity.tsx @@ -0,0 +1,137 @@ +"use client"; + +import { useRouter, useSearchParams } from "next/navigation"; + +import { + LikedArticleCard, + MyArticleCard, +} from "@/components/mypage/articleCard"; +import { PaginationButton } from "@/components/pagination-button/pagination-button"; +import { toasts } from "@/components/shared/toast"; +import { useLikedPrompts, useUserPrompts } from "@/hooks/use-mypage"; +import { cn } from "@/lib/utils"; + +export default function MypageActivitySection() { + const router = useRouter(); + const searchParams = useSearchParams(); + + // 1. 현재 탭 및 페이지 상태 관리 + const rawSub = searchParams.get("sub"); + const activeSub: "liked" | "posted" = + rawSub === "posted" ? "posted" : "liked"; + const currentPage = Number(searchParams.get("page")) || 0; + const userId = 1; // 실제로는 인증 정보나 프로필 훅에서 가져온 ID 사용 + + const { data: likedData, isLoading: isLikedLoading } = useLikedPrompts( + userId, + currentPage + ); + const { data: postedData, isLoading: isPostedLoading } = useUserPrompts({ + userId, + page: currentPage, + }); + + const handleSubTabChange = (sub: "liked" | "posted") => { + const params = new URLSearchParams(searchParams.toString()); + params.set("sub", sub); + params.set("page", "0"); + router.push(`/mypage?${params.toString()}`, { scroll: false }); + }; + + const handleCopy = async (e: React.MouseEvent, content: string) => { + e.stopPropagation(); + try { + await navigator.clipboard.writeText(content); + toasts.success("프롬프트가 클립보드에 복사되었습니다!"); + } catch { + alert("복사에 실패했습니다."); + } + }; + const handlePageChange = (page: number) => { + const params = new URLSearchParams(searchParams.toString()); + params.set("page", page.toString()); + router.push(`/mypage?${params.toString()}`, { scroll: false }); + }; + + const handleCardClick = (id: number) => { + router.push(`/prompts/${id}`); + }; + + // 현재 활성화된 데이터와 로딩 상태 결정 + const currentData = activeSub === "liked" ? likedData : postedData; + const isLoading = activeSub === "liked" ? isLikedLoading : isPostedLoading; + + return ( +
+ {/* 서브 탭 메뉴 */} +
+ + +
+ + {/* 리스트 영역 */} +
+ {isLoading ? ( +
로딩 중...
+ ) : currentData?.content.length === 0 ? ( +
+ {activeSub === "liked" + ? "좋아요한 프롬프트가 없습니다." + : "게시한 프롬프트가 없습니다."} +
+ ) : ( + currentData?.content.map((prompt) => + activeSub === "liked" ? ( + handleCopy(e, prompt.description)} + onClick={() => handleCardClick(prompt.promptId)} + /> + ) : ( + handleCardClick(prompt.promptId)} + /> + ) + ) + )} +
+ + {/* 단순 페이지네이션 (필요 시 추가) */} + {!isLoading && (currentData?.pageInfo.totalPages ?? 0) > 1 && ( +
+ +
+ )} +
+ ); +} diff --git a/app/(afterLogin)/mypage/MypageLeftSection.tsx b/app/(afterLogin)/mypage/MypageLeftSection.tsx new file mode 100644 index 0000000..b512796 --- /dev/null +++ b/app/(afterLogin)/mypage/MypageLeftSection.tsx @@ -0,0 +1,96 @@ +"use client"; +import { useQueryClient } from "@tanstack/react-query"; +import Cookies from "js-cookie"; +import { useRouter } from "next/navigation"; + +import UserProfile from "@/components/mypage/user-profile"; +import { BaseButton } from "@/components/shared/button"; +import { toasts } from "@/components/shared/toast"; +import { useUserProfile } from "@/hooks/use-mypage"; +import { deleteUserAccount, postLogout } from "@/queries/api/auth"; + +export default function MypageLeftSection() { + const router = useRouter(); + const queryClient = useQueryClient(); + + const { data: userData, isLoading } = useUserProfile(); + + const handleLogout = async () => { + if (confirm("로그아웃 하시겠습니까?")) { + try { + await postLogout(); + + Cookies.remove("accessToken"); + Cookies.remove("refreshToken"); + + queryClient.clear(); + toasts.success("로그아웃 되었습니다."); + router.push("/"); + router.refresh(); + } catch (error) { + Cookies.remove("accessToken"); + Cookies.remove("refreshToken"); + console.error("Logout failed:", error); + //TODO: error 컴포넌트가 생기면 사용자 피드백 주기 + //toasts.error("로그아웃 처리 중 오류가 발생했습니다."); + } + } + }; + + const handleWithdraw = async () => { + const isConfirmed = confirm( + "정말로 탈퇴하시겠습니까?\n탈퇴 시 모든 데이터가 삭제되며 복구할 수 없습니다." + ); + + if (!isConfirmed || !userData) return; + + try { + await deleteUserAccount(userData.basicInfo.uid); + + Cookies.remove("refreshToken"); + Cookies.remove("accessToken"); + queryClient.clear(); + + toasts.success("회원 탈퇴가 완료되었습니다. 이용해 주셔서 감사합니다."); + router.push("/"); + router.refresh(); + } catch (error) { + console.error("Withdrawal failed:", error); + //toasts.error("탈퇴 처리 중 오류가 발생했습니다. 고객센터에 문의해주세요."); + } + }; + + // 로딩 및 에러 처리 + if (isLoading) return
로딩 중...
; + if (!userData) + return
유저 정보가 없습니다.
; + + const { basicInfo } = userData; + + return ( +
+ + + + 로그아웃 + + + +
+ ); +} diff --git a/app/(afterLogin)/mypage/MypageRightSection.tsx b/app/(afterLogin)/mypage/MypageRightSection.tsx new file mode 100644 index 0000000..47d7fbe --- /dev/null +++ b/app/(afterLogin)/mypage/MypageRightSection.tsx @@ -0,0 +1,270 @@ +"use client"; + +import Link from "next/link"; +import { useEffect, useRef, useState } from "react"; + +import { + EDUCATION_OPTIONS, + EducationValue, + JobType, + STATE_VALUES, + transformCareerInfoToState, + transformStateToPayload, +} from "@/app/(beforeLogin)/(auth)/constant"; +import { StatusSelect } from "@/app/(beforeLogin)/(auth)/signup/component/StatusSelect"; +import { TargetJobsSelect } from "@/app/(beforeLogin)/(auth)/signup/component/TargetJobsSelect"; +import { useMypageStore } from "@/app/store/mypageStore"; +import UserExperience from "@/components/mypage/user-experience"; +import UserKeyword from "@/components/mypage/user-keyword"; +import { BaseButton } from "@/components/shared/button"; +import { BaseCheckBox } from "@/components/shared/checkbox"; +import { BaseInput } from "@/components/shared/inputs"; +import { SelectBox } from "@/components/shared/select-box"; +import { useUpdateProfile, useUserProfile } from "@/hooks/use-mypage"; +import { UpdateProfileRequest } from "@/queries/api/mypage"; + +export default function MypageRightSection() { + const { data: profile, isLoading } = useUserProfile(); + const { mutate: updateProfile, isPending } = useUpdateProfile(); + + const [otherInput, setOtherInput] = useState(""); + const [experiences, setExperiences] = useState([]); + const [keywords, setKeywords] = useState([]); + const [marketingAgree, setMarketingAgree] = useState(false); + + const { + targetJobs, + setTargetJobs, + currentState, + career, + educationLevel, + updateField, + reset, + } = useMypageStore(); + + useEffect(() => { + return () => reset(); + }, [reset]); + + //TODO: 약관동의 동의 여부를 조회가능한 API 있는지 확인 + const initialized = useRef(false); + useEffect(() => { + if (profile) { + if (initialized.current) return; + initialized.current = true; + const { careerInfo, selfIntro } = profile; + + const normalized = transformCareerInfoToState(careerInfo); + + setTargetJobs(normalized.targetJobs); + updateField("currentState", normalized.currentState); + updateField("educationLevel", normalized.educationLevel); + updateField("career", normalized.career); + + setExperiences(selfIntro.experiences || []); + setKeywords(selfIntro.keywords || []); + } + }, [profile, setTargetJobs, updateField]); + + if (isLoading) { + return ( +
+ 정보를 불러오는 중... +
+ ); + } + + const handleJobClick = (option: string) => { + const castedOption = option as JobType; + if (targetJobs.includes(castedOption)) { + setTargetJobs(targetJobs.filter((j) => j !== castedOption)); + } else { + setTargetJobs([...targetJobs, castedOption]); + } + }; + + const handleGlobalSave = () => { + if (!profile) return; + + if (currentState === STATE_VALUES.OTHER && !otherInput.trim()) { + alert("기타 상태를 직접 입력해주세요."); + //toasts.error("기타 상태를 직접 입력해주세요."); + return; + } + const careerPayload = transformStateToPayload({ + currentState, + targetJobs, + otherInput, + career, + educationLevel, + }); + + const payload: UpdateProfileRequest = { + basicInfo: { + nickname: profile.basicInfo.nickname, + introduction: profile.basicInfo.introduction || "", + }, + careerInfo: { + ...careerPayload, + major: profile.careerInfo.major || "", + }, + selfIntro: { + experiences, + keywords, + }, + }; + + updateProfile(payload); + }; + + const handleCancel = () => { + if (confirm("변경사항이 저장되지 않을 수 있습니다. 취소하시겠습니까?")) { + window.location.reload(); + } + }; + + return ( +
+ {/* 1. 취업/경력 섹션 */} +
+

취업/경력

+ { + updateField("currentState", val); + if (val !== STATE_VALUES.OTHER) setOtherInput(""); + }} + onOtherChange={setOtherInput} + /> + +
+
+ + + updateField("educationLevel", val as EducationValue) + } + selectOptions={EDUCATION_OPTIONS} + /> +
+
+ + { + const val = e.target.value.replace(/[^0-9]/g, ""); + updateField("career", val === "" ? 0 : Number(val)); + }} + /> +
+
+
+ + 취소 + + + 변경사항 저장 + +
+
+ + {/* 2. 자기소개 프로필 섹션 */} +
+
+

자기소개 프로필

+

+ 자소서 미리보기에 활용될 정보입니다 +

+
+ + +
+ + 취소 + + + 변경사항 저장 + +
+
+ + {/* 3. 개인정보 관리 섹션 */} +
+
+

개인정보 관리

+

+ 현재 적용 중인 개인정보 수집 및 이용 동의 현황입니다. +

+
+
+ setMarketingAgree(!!checked)} + /> + + 보기 + +
+
+ + 취소 + + + 변경사항 저장 + +
+
+
+ ); +} diff --git a/app/(afterLogin)/mypage/MypageTabButtons.tsx b/app/(afterLogin)/mypage/MypageTabButtons.tsx new file mode 100644 index 0000000..38faeb2 --- /dev/null +++ b/app/(afterLogin)/mypage/MypageTabButtons.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { useRouter } from "next/navigation"; + +import { BaseButton } from "@/components/shared/button"; +import { cn } from "@/lib/utils"; + +export default function MypageTabButtons({ activeTab }: { activeTab: string }) { + const router = useRouter(); + + const handleTabChange = (tab: "profile" | "activity") => { + router.push(`/mypage?tab=${tab}`, { scroll: false }); + }; + + return ( +
+ handleTabChange("profile")} + className={cn( + "px-4 py-2.5 min-w-[197px] shadow-sm transition-colors", + activeTab === "profile" + ? "bg-frog-600 text-white" + : "bg-gray-0 text-gray-700 border border-gray-100" + )} + > + 프로필 설정 + + handleTabChange("activity")} + className={cn( + "px-4 py-2.5 min-w-[197px] shadow-sm transition-colors", + activeTab === "activity" + ? "bg-frog-600 text-white" + : "bg-gray-0 text-gray-700 border border-gray-100" + )} + > + 내 활동 + +
+ ); +} diff --git a/app/(afterLogin)/mypage/layout.tsx b/app/(afterLogin)/mypage/layout.tsx new file mode 100644 index 0000000..710287f --- /dev/null +++ b/app/(afterLogin)/mypage/layout.tsx @@ -0,0 +1,14 @@ +import { Header } from "@/components/header/header"; + +export default function DashboardLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( +
+
+
{children}
+
+ ); +} diff --git a/app/(afterLogin)/mypage/page.tsx b/app/(afterLogin)/mypage/page.tsx index 06752e9..bf49d90 100644 --- a/app/(afterLogin)/mypage/page.tsx +++ b/app/(afterLogin)/mypage/page.tsx @@ -1,15 +1,50 @@ -export default function MyPage() { - return
MyPage
; +import { PageTitleGroup } from "@/components/shared/page-title-group"; + +import MypageActivitySection from "./MypageActivity"; +import MypageLeftSection from "./MypageLeftSection"; +import MypageRightSection from "./MypageRightSection"; +import MypageTabButtons from "./MypageTabButtons"; + +interface Props { + searchParams: Promise<{ tab?: string }>; } -/** - * 마이페이지 search params - * - * - tab - * profile - * tab - * - * - sub - * liked - * posted - */ +export default async function MyPage({ searchParams }: Props) { + const { tab } = await searchParams; + const VALID_TABS = ["profile", "activity"] as const; + type ActiveTab = (typeof VALID_TABS)[number]; + const activeTab: ActiveTab = VALID_TABS.includes(tab as ActiveTab) + ? (tab as ActiveTab) + : "profile"; + + return ( +
+
+
+ +
+ + {/* 탭 버튼 영역 */} +
+ +
+
+ +
+ {/* 왼쪽: 유저 프로필 */} + + + {/* 오른쪽: 탭 내용 */} +
+ {activeTab === "profile" ? ( + + ) : ( + + )} +
+
+
+ ); +} diff --git a/app/(beforeLogin)/(auth)/constant.ts b/app/(beforeLogin)/(auth)/constant.ts index eda2c7a..9a6515a 100644 --- a/app/(beforeLogin)/(auth)/constant.ts +++ b/app/(beforeLogin)/(auth)/constant.ts @@ -5,41 +5,98 @@ export enum AuthProvider { NAVER = "naver", } -export const STATE_OPTIONS = [ - "재학중", - "취업준비", - "이직준비", - "기타", -] as const; -export const JOB_OPTIONS = [ - "기획", - "마케팅", - "디자인", - "개발", - "영업", - "기타", -] as const; - export const STATE_VALUES = { - IN_SCHOOL: "재학중", - JOB_SEEKING: "취업준비", + STUDENT: "재학중", + JOB_SEEKER: "취업준비", CHANGING_JOB: "이직준비", OTHER: "기타", } as const; -export type StateType = (typeof STATE_OPTIONS)[number]; -export type JobType = (typeof JOB_OPTIONS)[number]; +export const JOB_DATA = { + PLANNING: "기획", + MARKETING: "마케팅", + DESIGN: "디자인", + DEVELOPMENT: "개발", + SALES: "영업", + PM: "PM", + OTHER: "기타", +} as const; + +export const STATE_MAP = new Map( + Object.entries(STATE_VALUES) as [string, string][] +); +export const JOB_MAP = new Map( + Object.entries(JOB_DATA) as [string, string][] +); +export const REVERSE_STATE_MAP = new Map( + (Object.entries(STATE_VALUES) as [string, string][]).map(([k, v]) => [v, k]) +); +export const REVERSE_JOB_MAP = new Map( + (Object.entries(JOB_DATA) as [string, string][]).map(([k, v]) => [v, k]) +); + +export type StateType = (typeof STATE_VALUES)[keyof typeof STATE_VALUES]; +export type StateKey = keyof typeof STATE_VALUES; +export type JobType = (typeof JOB_DATA)[keyof typeof JOB_DATA]; +export type EducationValue = + | "HIGH_SCHOOL" + | "ASSOCIATE" + | "BACHELOR" + | "MASTER" + | "DOCTOR"; + +export const transformCareerInfoToState = (careerInfo: { + currentStatus: string[]; + targetJob: string[]; + careerYear: string; + education: string; +}) => { + const stateInKorean = STATE_MAP.get(careerInfo.currentStatus[0]) || ""; + const jobsInKorean = careerInfo.targetJob.map( + (code) => JOB_MAP.get(code) || code + ); + const parsed = Number(careerInfo.careerYear); + const careerNumber = + careerInfo.careerYear === "신입" || !Number.isFinite(parsed) ? 0 : parsed; + return { + currentState: stateInKorean as "" | StateType, + targetJobs: jobsInKorean as JobType[], + career: careerNumber, + educationLevel: careerInfo.education as EducationValue, + }; +}; + +export const transformStateToPayload = (state: { + currentState: string; + otherInput?: string; + targetJobs: string[]; + career: number; + educationLevel: string; +}) => { + const isOther = state.currentState === STATE_VALUES.OTHER; + const stateCode = isOther + ? state.otherInput || "OTHER" + : REVERSE_STATE_MAP.get(state.currentState) || state.currentState; + + const jobCodes = state.targetJobs.map( + (label) => REVERSE_JOB_MAP.get(label) || label + ); + + return { + currentStatus: String(stateCode), + targetJob: jobCodes, + careerYear: state.career, + education: state.educationLevel, + }; +}; + +export const STATE_OPTIONS = Object.values(STATE_VALUES); +export const JOB_OPTIONS = Object.values(JOB_DATA); export const EDUCATION_OPTIONS: SelectOption[] = [ { label: "고등학교 졸업", value: "HIGH_SCHOOL" }, { label: "전문대 졸업", value: "ASSOCIATE" }, - { label: "대학교 졸업", value: "BACHELOR_4" }, + { label: "대학교 졸업", value: "BACHELOR" }, { label: "석사 졸업", value: "MASTER" }, { label: "박사 졸업", value: "DOCTOR" }, ]; - -export const FIELD_OPTIONS: SelectOption[] = [ - { label: "인문계열", value: "HUMANITIES" }, - { label: "이공계열", value: "ENGINEERING_SCIENCE" }, - { label: "예체능계열", value: "ARTS_PHYSICAL" }, -]; diff --git a/app/(beforeLogin)/(auth)/signup/component/Detail.tsx b/app/(beforeLogin)/(auth)/signup/component/Detail.tsx index a8dc608..06ff7f6 100644 --- a/app/(beforeLogin)/(auth)/signup/component/Detail.tsx +++ b/app/(beforeLogin)/(auth)/signup/component/Detail.tsx @@ -86,6 +86,7 @@ export default function Detail() { />
{ @@ -95,7 +96,11 @@ export default function Detail() { onOtherChange={setOtherInput} /> - +
diff --git a/app/(beforeLogin)/(auth)/signup/component/StatusSelect.tsx b/app/(beforeLogin)/(auth)/signup/component/StatusSelect.tsx index 8b9409b..c68bc04 100644 --- a/app/(beforeLogin)/(auth)/signup/component/StatusSelect.tsx +++ b/app/(beforeLogin)/(auth)/signup/component/StatusSelect.tsx @@ -3,6 +3,7 @@ import { BaseInput } from "@/components/shared/inputs"; import { STATE_OPTIONS, STATE_VALUES, StateType } from "../../constant"; interface StatusSelectProps { + label: string; value: StateType | ""; otherValue: string; onSelect: (status: StateType) => void; @@ -10,6 +11,7 @@ interface StatusSelectProps { } export const StatusSelect = ({ + label, value, otherValue, onSelect, @@ -17,7 +19,7 @@ export const StatusSelect = ({ }: StatusSelectProps) => { return (
-

현재 상태를 선택해주세요.

+

{label}

{STATE_OPTIONS.map((option) => ( +
+ ))} +
+ + {/* 2. 입력 창 (최대 개수 미달 시에만 노출) */} + {value.length < maxItems && ( +
+ setInputValue(e.target.value.slice(0, 200))} + onKeyDown={(e) => e.key === "Enter" && addItem()} + placeholder={placeholder} + maxLength={200} + viewLength + /> +
+ )} + + {/* 3. 추가하기 버튼 */} + = maxItems} + className="disabled:!bg-gray-100 disabled:!text-gray-400 disabled:!cursor-not-allowed" + > + +

{label} 추가하기

+ + + ); +} diff --git a/components/mypage/user-keyword.tsx b/components/mypage/user-keyword.tsx new file mode 100644 index 0000000..3d6e07b --- /dev/null +++ b/components/mypage/user-keyword.tsx @@ -0,0 +1,125 @@ +"use client"; + +import { X } from "lucide-react"; +import { KeyboardEvent, useEffect, useRef, useState } from "react"; + +import { cn } from "@/lib/utils"; + +interface KeywordInputProps { + value: string[]; + label: string; + onChange: (tags: string[]) => void; + placeholder?: string; + maxTags?: number; +} + +export default function UserKeyword({ + value = [], + label, + onChange, + placeholder = "키워드", + maxTags = 5, //TODO: 최대 몇개까지인지 (추후 정해지는대로 수정) +}: KeywordInputProps) { + const [inputValue, setInputValue] = useState(""); + const [isFocus, setIsFocus] = useState(false); // 클릭 여부 상태 + const inputRef = useRef(null); + const spanRef = useRef(null); + const [inputWidth, setInputWidth] = useState(60); + + // 글자 길이에 따라 인풋 너비 조절 + useEffect(() => { + if (spanRef.current) { + // 텍스트가 있을 때는 텍스트 길이만큼, 없을 때는 placeholder 길이만큼 + const measuredWidth = spanRef.current.offsetWidth; + setInputWidth(Math.max(60, measuredWidth + 36)); + } + }, [inputValue, isFocus]); + + const addTag = () => { + const trimmed = inputValue.trim(); + if (trimmed && !value.includes(trimmed) && value.length < maxTags) { + onChange([...value, trimmed]); + } + setInputValue(""); + }; + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Enter") { + e.preventDefault(); + addTag(); + } else if (e.key === "Backspace" && !inputValue && value.length > 0) { + onChange(value.slice(0, -1)); + } + }; + + return ( +
+

{label}

+ +
inputRef.current?.focus()} + > + {/* 1. 확정된 태그 리스트 */} + {value.map((tag, index) => ( + + {tag} + + + ))} + + {/* 2. 입력 중인 태그 */} + {value.length < maxTags && ( +
+ {/* 너비 계산용 (화면엔 안 보임) */} + + {inputValue || (isFocus ? "" : placeholder)} + + + setIsFocus(true)} + onBlur={() => { + addTag(); + setIsFocus(false); + }} + onChange={(e) => setInputValue(e.target.value)} + onKeyDown={handleKeyDown} + placeholder={!isFocus && value.length === 0 ? placeholder : ""} + className={cn( + "w-full bg-transparent outline-none label-medium text-gray-700", + "placeholder:text-gray-400" + )} + /> +
+ )} +
+
+ ); +} diff --git a/components/mypage/user-profile.tsx b/components/mypage/user-profile.tsx new file mode 100644 index 0000000..fb92fec --- /dev/null +++ b/components/mypage/user-profile.tsx @@ -0,0 +1,95 @@ +import { Mail, User } from "lucide-react"; +import Image from "next/image"; + +import { STATIC_IMAGES } from "@/lib/static-image"; +import { cn } from "@/lib/utils"; + +import { ProfIcon } from "../profile-icon/profile-icon"; + +const CLASSES = { + CONTAINER: + "flex flex-col gap-5 p-6 border border-gray-100 bg-gray-0 rounded-[10px] shadow-md", + AVATAR_WRAPPER: "flex items-center justify-center", + INFO_LIST: "flex flex-col gap-3", + INFO_ITEM: + "flex gap-2 text-gray-500 py-2 px-4 border border-gray-50 rounded-[5px]", + PROVIDER_BADGE: + "flex py-[10px] px-4 gap-2 shadow-md items-center justify-center rounded-[6px]", + PROVIDER_TEXT: "label-medium !font-bold", +} as const; + +interface userProfileProps { + nickname: string; + email: string; + profileImage: string; + provider: "KAKAO" | "NAVER"; + introduction: string; +} + +export default function UserProfile({ + nickname, + profileImage, + email, + provider, + introduction, +}: userProfileProps) { + const getTheme = () => { + switch (provider) { + case "NAVER": + return { + bg: "bg-[#01C73C]", + label: "네이버", + image: STATIC_IMAGES.naver, + }; + case "KAKAO": + default: + return { + bg: "bg-[#F9DB00]", + label: "카카오", + image: STATIC_IMAGES.kakao, + }; + } + }; + const theme = getTheme(); + + return ( +
+ {/* 프로필 이미지 */} +
+ +
+ + {/* 정보 리스트 */} +
+
+ +

{nickname}

+
+
+ +

{email}

+
+
+

{introduction || "등록된 소개글이 없습니다."}

+
+
+ + {/* 계정 연결 정보 배지 */} +
+ {theme.label} +

{theme.label} 계정 연결됨

+
+
+ ); +} diff --git a/hooks/use-mypage.ts b/hooks/use-mypage.ts new file mode 100644 index 0000000..aa4cc15 --- /dev/null +++ b/hooks/use-mypage.ts @@ -0,0 +1,77 @@ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; + +import { toasts } from "@/components/shared/toast"; +import { ApiError } from "@/lib/fetcher"; +import { + getLikedPrompts, + getUserProfile, + getUserPrompts, + UpdateProfileRequest, + updateUserProfile, +} from "@/queries/api/mypage"; + +export const useUserProfile = () => { + return useQuery({ + queryKey: ["user", "profile"], + queryFn: () => getUserProfile(), + select: (response) => response.data, + throwOnError: (error) => error instanceof ApiError && error.status >= 500, + }); +}; + +interface UseUserPromptsProps { + userId: string | number; + page: number; + size?: number; +} + +export const useUserPrompts = ({ + userId, + page, + size = 4, +}: UseUserPromptsProps) => { + return useQuery({ + queryKey: ["user", "prompts", userId, { page, size }], + queryFn: () => getUserPrompts({ userId, page, size }), + placeholderData: (previousData) => previousData, + select: (response) => response.data, + }); +}; +export const useLikedPrompts = (userId: string | number, page: number) => { + return useQuery({ + queryKey: ["user", "likes", userId, { page }], + queryFn: () => getLikedPrompts({ userId, page }), + placeholderData: (previousData) => previousData, + select: (res) => res.data, + }); +}; + +export const useUpdateProfile = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: (data: UpdateProfileRequest) => updateUserProfile(data), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["user", "profile"] }); + toasts.success("프로필 정보가 성공적으로 저장되었습니다."); + }, + onError: (error: Error) => { + if (error instanceof ApiError) { + // 401 권한 없음 (세션 만료) 처리 + if (error.status === 401) { + //toasts.error("세션이 만료되었습니다. 다시 로그인해주세요."); + // router.push('/login'); // 필요시 이동 + return; + } + // 그 외 서버가 보내준 메시지 표시 + //toasts.error(error.message || "오류가 발생했습니다."); + } else { + // 네트워크 단절 등 예상치 못한 일반 에러 + //toasts.error("네트워크 상태를 확인해주세요."); + console.error("네트워크 상태를 확인해주세요."); + } + + console.error(`[${error.name}]`, error.message); + }, + }); +}; diff --git a/lib/utils.ts b/lib/utils.ts index 883f01d..5c1a2a3 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,4 +1,6 @@ import { type ClassValue, clsx } from "clsx"; +import { formatDistanceToNow, parseISO } from "date-fns"; +import { ko } from "date-fns/locale"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { @@ -14,3 +16,8 @@ export function stringToColor(str: string) { const h = Math.abs(hash) % 360; return `hsl(${h}, 70%, 60%)`; } + +export function formatRelativeDate(dateString: string) { + const date = parseISO(dateString); + return formatDistanceToNow(date, { addSuffix: true, locale: ko }); +} diff --git a/mocks/handlers/auth-handlers.ts b/mocks/handlers/auth-handlers.ts index 5e581a5..b52eb84 100644 --- a/mocks/handlers/auth-handlers.ts +++ b/mocks/handlers/auth-handlers.ts @@ -1,6 +1,7 @@ import { http, HttpResponse } from "msw"; -const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_API_URL; +const BASE_URL = + process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8080/api/v1"; export const authHandlers = [ http.post(`${BASE_URL}/auth/social-login`, async ({ request }) => { @@ -49,4 +50,33 @@ export const authHandlers = [ }, }); }), + http.post(`${BASE_URL}/auth/logout`, () => { + return HttpResponse.json( + { + success: true, + code: "200", + data: {}, + timestamp: new Date().toISOString(), + }, + { status: 200 } + ); + }), + http.delete(`${BASE_URL}/users/:uid`, async ({ params }) => { + const { uid } = params; + + return HttpResponse.json( + { + success: true, + code: "200", + message: "회원 탈퇴 및 소셜 연동 해제가 정상적으로 처리되었습니다.", + data: { + uid: uid, + unlinkedProvider: "KAKAO", + terminatedAt: new Date().toISOString(), + }, + timestamp: new Date().toISOString(), + }, + { status: 200 } + ); + }), ]; diff --git a/mocks/handlers/handlers.ts b/mocks/handlers/handlers.ts index 7c5e51a..a063343 100644 --- a/mocks/handlers/handlers.ts +++ b/mocks/handlers/handlers.ts @@ -1,5 +1,6 @@ import { authHandlers } from "./auth-handlers"; import { mswHandlers } from "./msw-test"; +import { mypageHandlers } from "./mypage-handlers"; import { nicknameHandlers } from "./nickname-handlers"; import { onboardingHandlers } from "./onboarding-handlers"; import { promptListHandlers } from "./prompt-list-handlers"; @@ -12,4 +13,5 @@ export const handlers = [ ...authHandlers, ...nicknameHandlers, ...promptListHandlers, + ...mypageHandlers, ]; diff --git a/mocks/handlers/mypage-handlers.ts b/mocks/handlers/mypage-handlers.ts new file mode 100644 index 0000000..eb9bf18 --- /dev/null +++ b/mocks/handlers/mypage-handlers.ts @@ -0,0 +1,134 @@ +import { http, HttpResponse } from "msw"; + +import { UserProfileResponse, UserPromptsResponse } from "@/queries/api/types"; + +const BASE_URL = + process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8080/api/v1"; + +export const mypageHandlers = [ + http.get(`${BASE_URL}/users/me/profile`, ({ request }) => { + const authHeader = request.headers.get("Authorization"); + + if (!authHeader) { + return new HttpResponse(null, { status: 401 }); + } + + return HttpResponse.json({ + success: true, + status: 200, + data: { + basicInfo: { + uid: "user_12345", + nickname: "prog_user", + email: "user@example.com", + provider: "KAKAO", + introduction: "안녕하세요, 기획자를 꿈꾸는 유저입니다.", + }, + careerInfo: { + currentStatus: ["JOB_SEEKER", "STUDENT"], + targetJob: ["PLANNING", "PM"], + careerYear: "신입", + education: "BACHELOR", + major: "산업디자인학과", + }, + selfIntro: { + experiences: [], + keywords: ["서비스 기획", "데이터 분석", "커뮤니케이션"], + }, + }, + }); + }), + http.get(`${BASE_URL}/users/:userId/prompts`, ({ request, params }) => { + const url = new URL(request.url); + const page = Number(url.searchParams.get("page") || "0"); + const size = Number(url.searchParams.get("size") || "4"); + const { userId } = params; + + return HttpResponse.json({ + success: true, + status: 200, + data: { + content: [ + { + promptId: 1024 + page, + title: `${userId}번 유저의 ${page + 1}페이지 프롬프트`, + description: "자소서를 위한 GPT 프롬프트 설명입니다.", + hasPreview: true, + canCopy: true, + createdAt: "2025-12-23T14:00:00", + isLiked: true, + }, + ], + pageInfo: { + currentPage: page, + pageSize: size, + totalElements: 45, + totalPages: Math.ceil(45 / size), + isLast: page >= 11, + }, + }, + }); + }), + http.get(`${BASE_URL}/users/:userId/liked`, ({ request, params }) => { + const url = new URL(request.url); + const page = Number(url.searchParams.get("page") || "0"); + const size = Number(url.searchParams.get("size") || "4"); + const { userId } = params; + + return HttpResponse.json({ + success: true, + status: 200, + data: { + content: [ + { + promptId: 1024 + page, + title: `${userId}번 유저의 ${page + 1}페이지 프롬프트`, + description: "자소서를 위한 GPT 프롬프트 설명입니다.", + hasPreview: true, + canCopy: true, + createdAt: "2025-12-23T14:00:00", + isLiked: true, + }, + ], + pageInfo: { + currentPage: page, + pageSize: size, + totalElements: 45, + totalPages: Math.ceil(45 / size), + isLast: page >= 11, + }, + }, + }); + }), + http.put(`${BASE_URL}/users/me/profile`, async ({ request }) => { + const updateData = await request.json(); + + const isProfanity = JSON.stringify(updateData).includes("바보"); + + if (isProfanity) { + return HttpResponse.json( + { + success: false, + code: "400", + error: { + errorClassName: "PROFANITY_DETECTED", + message: "사용할 수 없는 단어가 포함되어 있습니다: [바보]", + }, + timestamp: new Date().toISOString(), + }, + { status: 400 } + ); + } + return HttpResponse.json( + { + success: true, + code: "200", + data: { + message: "프로필 정보가 성공적으로 저장되었습니다.", + }, + timestamp: new Date().toISOString(), + }, + { status: 200 } + ); + }), +]; diff --git a/mocks/handlers/nickname-handlers.ts b/mocks/handlers/nickname-handlers.ts index 7e1b449..c149f92 100644 --- a/mocks/handlers/nickname-handlers.ts +++ b/mocks/handlers/nickname-handlers.ts @@ -1,6 +1,7 @@ import { http, HttpResponse } from "msw"; -const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_API_URL; +const BASE_URL = + process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8080/api/v1"; export const nicknameHandlers = [ http.get(`${BASE_URL}/users/nickname/availability`, ({ request }) => { diff --git a/mocks/handlers/onboarding-handlers.ts b/mocks/handlers/onboarding-handlers.ts index 0875c83..3a72062 100644 --- a/mocks/handlers/onboarding-handlers.ts +++ b/mocks/handlers/onboarding-handlers.ts @@ -1,6 +1,7 @@ import { http, HttpResponse } from "msw"; -const BASE_URL = "http://localhost:8080"; +const BASE_URL = + process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8080/api/v1"; export const onboardingHandlers = [ http.put(`${BASE_URL}/users/me/onboarding/basic`, async () => { diff --git a/mocks/handlers/prompt-list-handlers.ts b/mocks/handlers/prompt-list-handlers.ts index 0e98415..fa26af2 100644 --- a/mocks/handlers/prompt-list-handlers.ts +++ b/mocks/handlers/prompt-list-handlers.ts @@ -216,11 +216,12 @@ interface ReportRequestBody { reasonDetail: string; } -const BASE_URL = "http://localhost:8080"; +const BASE_URL = + process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8080/api/v1"; export const promptListHandlers = [ //API 명세서 업데이트되면 맞춰서 수정해야함. - http.get(`${BASE_URL}/api/prompts`, ({ request }) => { + http.get(`${BASE_URL}/prompts`, ({ request }) => { const url = new URL(request.url); const category = url.searchParams.get("category"); @@ -249,7 +250,7 @@ export const promptListHandlers = [ isLast: isLast, }); }), - http.post(`${BASE_URL}/api/prompts/like/:promptId`, ({ params }) => { + http.post(`${BASE_URL}/prompts/like/:promptId`, ({ params }) => { const { promptId } = params; return HttpResponse.json( @@ -260,7 +261,7 @@ export const promptListHandlers = [ { status: 200 } ); }), - http.delete(`${BASE_URL}/api/prompts/like/:promptId`, ({ params }) => { + http.delete(`${BASE_URL}/prompts/like/:promptId`, ({ params }) => { const { promptId } = params; console.log(`Prompt ${promptId} 좋아요 취소됨`); @@ -273,7 +274,7 @@ export const promptListHandlers = [ { status: 200 } ); }), - http.post(`${BASE_URL}/api/reports`, async ({ request }) => { + http.post(`${BASE_URL}/reports`, async ({ request }) => { const body = (await request.json()) as ReportRequestBody; const { targetType, targetId, reason, reasonDetail } = body; diff --git a/mocks/handlers/terms-handlers.ts b/mocks/handlers/terms-handlers.ts index ae328a8..8473d74 100644 --- a/mocks/handlers/terms-handlers.ts +++ b/mocks/handlers/terms-handlers.ts @@ -1,6 +1,7 @@ import { http, HttpResponse } from "msw"; -const BASE_URL = "http://localhost:8080"; +const BASE_URL = + process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8080/api/v1"; export const termsHandlers = [ http.get(`${BASE_URL}/terms`, () => { diff --git a/package-lock.json b/package-lock.json index e2e7e8c..49d4de6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,9 @@ "@types/dompurify": "^3.0.5", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "date-fns": "^4.1.0", "dompurify": "^3.3.1", + "js-cookie": "^3.0.5", "jwt-decode": "^4.0.0", "ky": "^1.14.3", "lucide-react": "^0.562.0", @@ -49,6 +51,7 @@ "@storybook/nextjs": "^10.1.11", "@storybook/nextjs-vite": "^10.1.11", "@tailwindcss/postcss": "^4", + "@types/js-cookie": "^3.0.6", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", @@ -158,6 +161,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -5979,6 +5983,7 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.16.tgz", "integrity": "sha512-bpMGOmV4OPmif7TNMteU/Ehf/hoC0Kf98PDc0F4BZkFrEapRMEqI/V6YS0lyzwSV6PQpY1y4xxArUIfBW5LVxQ==", "license": "MIT", + "peer": true, "dependencies": { "@tanstack/query-core": "5.90.16" }, @@ -6013,7 +6018,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -6034,7 +6038,6 @@ "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "dequal": "^2.0.3" } @@ -6096,8 +6099,7 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -6214,6 +6216,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/js-cookie": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz", + "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -6251,6 +6260,7 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -6261,6 +6271,7 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "devOptional": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -6336,6 +6347,7 @@ "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.50.0", "@typescript-eslint/types": "8.50.0", @@ -6835,6 +6847,7 @@ "integrity": "sha512-t4toy8X/YTnjYEPoY0pbDBg3EvDPg1elCDrfc+VupPHwoN/5/FNQ8Z+xBYIaEnOE2vVEyKwqYBzZ9h9rJtZVcg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/mocker": "4.0.16", "@vitest/utils": "4.0.16", @@ -6858,6 +6871,7 @@ "integrity": "sha512-I2Fy/ANdphi1yI46d15o0M1M4M0UJrUiVKkH5oKeRZZCdPg0fw/cfTKZzv9Ge9eobtJYp4BGblMzXdXH0vcl5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/browser": "4.0.16", "@vitest/mocker": "4.0.16", @@ -7113,6 +7127,7 @@ "integrity": "sha512-VWEDm5Wv9xEo80ctjORcTQRJ539EGPB3Pb9ApvVRAY1U/WkHXmmYISqU5E79uCwcW7xYUV38gwZD+RV755fu3Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/utils": "4.0.16", "pathe": "^2.0.3" @@ -7357,6 +7372,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -7422,6 +7438,7 @@ "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -8308,6 +8325,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -9169,6 +9187,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -9306,7 +9334,6 @@ "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6" } @@ -9375,8 +9402,7 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/dom-converter": { "version": "0.2.0", @@ -9829,6 +9855,7 @@ "dev": true, "hasInstallScript": true, "license": "MIT", + "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -9892,6 +9919,7 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -9992,6 +10020,7 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -10093,6 +10122,7 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -12220,6 +12250,15 @@ "url": "https://github.com/sponsors/panva" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "license": "MIT", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -12854,7 +12893,6 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -13120,6 +13158,7 @@ "integrity": "sha512-retd5i3xCZDVWMYjHEVuKTmhqY8lSsxujjVrZiGbbdoxxIBg5S7rCuYy/YQpfrTYIxpd/o0Kyb/3H+1udBMoYg==", "hasInstallScript": true, "license": "MIT", + "peer": true, "dependencies": { "@inquirer/confirm": "^5.0.0", "@mswjs/interceptors": "^0.40.0", @@ -13248,6 +13287,7 @@ "resolved": "https://registry.npmjs.org/next/-/next-16.1.0.tgz", "integrity": "sha512-Y+KbmDbefYtHDDQKLNrmzE/YYzG2msqo2VXhzh5yrJ54tx/6TmGdkR5+kP9ma7i7LwZpZMfoY3m/AoPPPKxtVw==", "license": "MIT", + "peer": true, "dependencies": { "@next/env": "16.1.0", "@swc/helpers": "0.5.15", @@ -14075,6 +14115,7 @@ "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "playwright-core": "1.57.0" }, @@ -14141,6 +14182,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -14311,6 +14353,7 @@ "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -14341,6 +14384,7 @@ "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -14381,7 +14425,6 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -14397,7 +14440,6 @@ "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -14408,7 +14450,6 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -14421,8 +14462,7 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/process": { "version": "0.11.10", @@ -14551,6 +14591,7 @@ "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", "license": "MIT", + "peer": true, "dependencies": { "fast-diff": "^1.3.0", "lodash.clonedeep": "^4.5.0", @@ -14596,6 +14637,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -14650,6 +14692,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -14709,6 +14752,7 @@ "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -15285,6 +15329,7 @@ "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -15517,6 +15562,7 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -15963,6 +16009,7 @@ "integrity": "sha512-pKP5jXJYM4OjvNklGuHKO53wOCAwfx79KvZyOWHoi9zXUH5WVMFUe/ZfWyxXG/GTcj0maRgHGUjq/0I43r0dDQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.0", @@ -16612,6 +16659,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -16850,6 +16898,7 @@ "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", "dev": true, "license": "(MIT OR CC0-1.0)", + "peer": true, "engines": { "node": ">=12.20" }, @@ -16941,6 +16990,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -17287,6 +17337,7 @@ "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -17442,6 +17493,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -17455,6 +17507,7 @@ "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/expect": "4.0.16", "@vitest/mocker": "4.0.16", @@ -17642,6 +17695,7 @@ "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -17720,6 +17774,7 @@ "integrity": "sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-html-community": "0.0.8", "html-entities": "^2.1.0", @@ -18254,6 +18309,7 @@ "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index db18273..9359f25 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,9 @@ "@types/dompurify": "^3.0.5", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "date-fns": "^4.1.0", "dompurify": "^3.3.1", + "js-cookie": "^3.0.5", "jwt-decode": "^4.0.0", "ky": "^1.14.3", "lucide-react": "^0.562.0", @@ -60,6 +62,7 @@ "@storybook/nextjs": "^10.1.11", "@storybook/nextjs-vite": "^10.1.11", "@tailwindcss/postcss": "^4", + "@types/js-cookie": "^3.0.6", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", diff --git a/queries/api/auth.ts b/queries/api/auth.ts index e73689a..0c07574 100644 --- a/queries/api/auth.ts +++ b/queries/api/auth.ts @@ -1,3 +1,5 @@ +import { ApiResponse, fetcher } from "@/lib/fetcher"; + export const postAuth = async ({ provider, authCode, @@ -25,3 +27,24 @@ export const postAuth = async ({ } return response.json(); }; + +export const postLogout = async () => { + return await fetcher.post("auth/logout").json>(); +}; + +export interface WithdrawRequest { + reason?: string; +} + +export const deleteUserAccount = async ( + uid: string | number, + data?: WithdrawRequest +) => { + return await fetcher.delete(`users/${uid}`, { json: data }).json< + ApiResponse<{ + uid: string; + unlinkedProvider: string; + terminatedAt: string; + }> + >(); +}; diff --git a/queries/api/mypage.ts b/queries/api/mypage.ts new file mode 100644 index 0000000..e995293 --- /dev/null +++ b/queries/api/mypage.ts @@ -0,0 +1,66 @@ +import { ApiResponse, fetcher } from "@/lib/fetcher"; + +import { UserProfileData, UserPromptsResponse } from "./types"; + +export const getUserProfile = async () => { + return await fetcher + .get(`users/me/profile`) + .json>(); +}; + +interface GetUserPromptsParams { + userId: string | number; + page?: number; + size?: number; + sort?: string; +} + +export const getUserPrompts = async ({ + userId, + page = 0, + size = 4, + sort = "", +}: GetUserPromptsParams): Promise => { + return await fetcher + .get(`users/${userId}/prompts`, { + searchParams: { page, size, sort }, + }) + .json(); +}; + +export const getLikedPrompts = async ({ + userId, + page = 0, + size = 4, + sort = "", +}: GetUserPromptsParams): Promise => { + return await fetcher + .get(`users/${userId}/liked`, { + searchParams: { page, size, sort }, + }) + .json(); +}; + +export interface UpdateProfileRequest { + basicInfo: { + nickname: string; + introduction: string; + }; + careerInfo: { + currentStatus: string; + targetJob: string[]; + careerYear: number; + education: string; + major: string; + }; + selfIntro: { + experiences: string[]; + keywords: string[]; + }; +} + +export const updateUserProfile = async (data: UpdateProfileRequest) => { + return await fetcher + .put("users/me/profile", { json: data }) + .json>(); +}; diff --git a/queries/api/types.ts b/queries/api/types.ts new file mode 100644 index 0000000..0d25b2b --- /dev/null +++ b/queries/api/types.ts @@ -0,0 +1,64 @@ +import { + EDUCATION_OPTIONS, + STATE_VALUES, +} from "@/app/(beforeLogin)/(auth)/constant"; +import { ApiResponse } from "@/lib/fetcher"; + +// 마이페이지 유저 정보 응답타입 +export type StateKey = keyof typeof STATE_VALUES; +export type EducationValue = (typeof EDUCATION_OPTIONS)[number]["value"]; + +export interface BasicInfo { + uid: string | number; + nickname: string; + email: string; + provider: "KAKAO" | "NAVER"; + introduction: string | null; +} + +export interface CareerInfo { + currentStatus: StateKey[]; + targetJob: string[]; + careerYear: string; + education: EducationValue; + major: string; +} + +export interface SelfIntro { + experiences: string[]; + keywords: string[]; +} + +export interface UserProfileData { + basicInfo: BasicInfo; + careerInfo: CareerInfo; + selfIntro: SelfIntro; +} + +export type UserProfileResponse = ApiResponse; + +// 마이페이지 좋아요한 프롬프트 리스트 응답타입 +export interface PromptItem { + promptId: number; + title: string; + description: string; + hasPreview: boolean; + canCopy: boolean; + createdAt: string; + isLiked: boolean; +} + +export interface PageInfo { + currentPage: number; + pageSize: number; + totalElements: number; + totalPages: number; + isLast: boolean; +} + +export interface UserPromptsData { + content: PromptItem[]; + pageInfo: PageInfo; +} + +export type UserPromptsResponse = ApiResponse; diff --git a/stories/Mypage/UserExperience.stories.tsx b/stories/Mypage/UserExperience.stories.tsx new file mode 100644 index 0000000..6229558 --- /dev/null +++ b/stories/Mypage/UserExperience.stories.tsx @@ -0,0 +1,109 @@ +import type { Meta, StoryObj } from "@storybook/nextjs"; +import { useState } from "react"; + +import UserExperience from "@/components/mypage/user-experience"; + +const meta: Meta = { + title: "Components/Mypage/UserExperience", + component: UserExperience, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + args: { + label: "경험", + placeholder: "경험을 입력해주세요", + onChange: () => {}, + }, + argTypes: { + label: { + control: { type: "text" }, + description: "라벨", + }, + placeholder: { + control: { type: "text" }, + description: "placeholder 텍스트", + }, + maxItems: { + control: { type: "number" }, + description: "입력 가능한 최대 아이템 개수", + }, + value: { + control: "object", + description: "현재 입력된 경험 리스트", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +/** + * 1. 기본 상태 (상태 변화 확인용) + * 실제 입력과 삭제가 동작하도록 useState를 연결한 래퍼입니다. + */ +export const Interactive: Story = { + render: (args) => { + const [value, setValue] = useState(args.value || []); + return ( +
+ +
+ ); + }, + args: { + value: [], + maxItems: 3, + }, +}; + +/** + * 2. 초기 데이터가 있는 상태 + */ +export const DefaultWithData: Story = { + args: { + value: ["Google Software Engineer 인턴", "교내 해커톤 대상 수상"], + maxItems: 3, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +/** + * 3. 최대 개수에 도달한 상태 (입력창이 사라짐) + */ +export const MaxReached: Story = { + args: { + value: ["경험 1", "경험 2", "경험 3"], + maxItems: 3, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +/** + * 4. 많은 개수를 허용할 때 + */ +export const ManyItemsAllowed: Story = { + args: { + value: ["리액트 공부", "타입스크립트 공부"], + maxItems: 10, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; diff --git a/stories/Mypage/UserKeyword.stories.tsx b/stories/Mypage/UserKeyword.stories.tsx new file mode 100644 index 0000000..ec4fcb0 --- /dev/null +++ b/stories/Mypage/UserKeyword.stories.tsx @@ -0,0 +1,109 @@ +import type { Meta, StoryObj } from "@storybook/nextjs"; +import { useState } from "react"; + +import UserKeyword from "@/components/mypage/user-keyword"; + +const meta: Meta = { + title: "Components/Mypage/UserKeyword", + component: UserKeyword, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + args: { + label: "키워드", + }, + argTypes: { + label: { + control: { type: "text" }, + description: "라벨 텍스트", + }, + maxTags: { + control: { type: "number" }, + description: "입력 가능한 최대 태그 개수", + }, + value: { + control: "object", + description: "현재 입력된 키워드 배열", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +/** + * 1. 인터렉티브 상태 (실제 동작 확인) + */ +export const Interactive: Story = { + render: (args) => { + const [value, setValue] = useState(args.value || []); + return ( +
+ +
+ ); + }, + args: { + value: [], + maxTags: 5, + placeholder: "키워드 입력 후 Enter", + }, +}; + +/** + * 2. 태그가 이미 여러 개 있는 상태 + */ +export const WithTags: Story = { + args: { + value: ["React", "Next.js", "TypeScript", "TailwindCSS"], + maxTags: 5, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +/** + * 3. 최대 개수에 도달한 상태 (Disabled) + * 인풋이 비활성화됩니다. + */ +export const MaxTagsReached: Story = { + args: { + value: ["열정맨", "성실함", "소통왕", "문제해결사", "긍정주의자"], + maxTags: 5, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +/** + * 4. 긴 텍스트 태그 테스트 + * 태그가 길어질 때 줄바꿈(flex-wrap)이 잘 일어나는지 확인합니다. + */ +export const LongTagTest: Story = { + args: { + value: [ + "아주아주긴키워드테스트입니다", + "이것또한매우매우매우매우긴키워드", + "짧은키워드", + ], + maxTags: 8, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; diff --git a/stories/Mypage/UserProfile.stories.tsx b/stories/Mypage/UserProfile.stories.tsx new file mode 100644 index 0000000..87181e9 --- /dev/null +++ b/stories/Mypage/UserProfile.stories.tsx @@ -0,0 +1,58 @@ +import type { Meta, StoryObj } from "@storybook/nextjs"; + +import UserProfile from "@/components/mypage/user-profile"; + +const meta: Meta = { + title: "Components/Mypage/UserProfile", + component: UserProfile, + tags: ["autodocs"], + argTypes: { + provider: { + control: "radio", + options: ["KAKAO", "NAVER"], + }, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +/** 1. 카카오 로그인 사용자 케이스 */ +export const KakaoProfile: Story = { + args: { + nickname: "라이언", + email: "ryan@kakao.com", + provider: "KAKAO", + introduction: "안녕하세요, 카카오에서 온 라이언입니다. 즐거운 하루 되세요!", + }, +}; + +/** 2. 네이버 로그인 사용자 케이스 */ +export const NaverProfile: Story = { + args: { + nickname: "그린팩토리", + email: "naver_user@naver.com", + provider: "NAVER", + introduction: "네이버 프로필입니다. 초록색 배경이 특징이에요.", + }, +}; + +/** 3. 긴 소개글 테스트 케이스 */ +export const LongIntroduction: Story = { + args: { + nickname: "글자수테스트", + email: "test@example.com", + provider: "KAKAO", + introduction: + "소개글이 아주 길어질 경우 레이아웃이 어떻게 변하는지 확인하기 위한 케이스입니다. ".repeat( + 3 + ), + }, +};