diff --git a/eslint.config.mjs b/eslint.config.mjs index cba43aa..06a5005 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -34,6 +34,8 @@ export default defineConfig([ 'react/react-in-jsx-scope': 'off', 'react/jsx-pascal-case': 'error', 'no-useless-catch': 'off', + '@typescript-eslint/no-unused-vars': 'off', + 'no-unused-vars': 'off', }, }, diff --git a/public/check-circle.svg b/public/check-circle.svg new file mode 100644 index 0000000..bd22117 --- /dev/null +++ b/public/check-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/letter-x-circle.svg b/public/letter-x-circle.svg new file mode 100644 index 0000000..2edd993 --- /dev/null +++ b/public/letter-x-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/api/auth.ts b/src/api/auth.ts index df62358..b85185f 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -33,3 +33,11 @@ export const logout = async () => { throw error } } + +export const signout = async () => { + try { + await authApi.post('/auth/withdraw') + } catch (error) { + throw error + } +} diff --git a/src/api/member.ts b/src/api/member/member.ts similarity index 64% rename from src/api/member.ts rename to src/api/member/member.ts index 6b171ff..28a8dbb 100644 --- a/src/api/member.ts +++ b/src/api/member/member.ts @@ -1,7 +1,13 @@ -import { authApi } from './instance/authApi' -import { Profile } from '@/types/_shared/profile' +import { authApi } from '../instance/authApi' +import { + CreateMemberProfileRequest, + FetchMemberProfileResponse, + UpdateMemberProfileRequest, +} from './types' -export const createMemberProfile = async (profile: Profile) => { +export const createMemberProfile = async ( + profile: CreateMemberProfileRequest, +) => { try { await authApi.post('/member/profile', profile) } catch (error) { @@ -9,17 +15,29 @@ export const createMemberProfile = async (profile: Profile) => { } } -export const fetchMemberProfile = async (): Promise => { +export const fetchMemberProfile = async (): Promise< + FetchMemberProfileResponse['profile'] +> => { try { - const response = await authApi.get<{ profile: Profile | null }>( - '/member/profile', - ) + const response = + await authApi.get('/member/profile') return response.data.profile } catch (error) { throw error } } +export const updateMemberProfile = async ( + profile: UpdateMemberProfileRequest, +) => { + try { + await authApi.post('/member/profile', profile) + } catch (error) { + throw error + } +} + +// TODO : 마이페이지 타입 정리 export type fetchMemberMypageResponse = { profile: { profile_image_url: string @@ -42,14 +60,7 @@ export const fetchMemberMypage = async () => { } } -export const updateMemberProfile = async (profile: Profile) => { - try { - await authApi.post('/member/profile', profile) - } catch (error) { - throw error - } -} - +// TODO : 닉네임 체크 응답 타입 정리 export const checkNickname = async (nickname: string) => { try { const response = await authApi.get( diff --git a/src/api/member/types.ts b/src/api/member/types.ts new file mode 100644 index 0000000..6f1a49c --- /dev/null +++ b/src/api/member/types.ts @@ -0,0 +1,55 @@ +export type CreateMemberProfileRequest = { + nickname: string + gender: 'FEMALE' | 'MALE' + age: 'TEN' | 'TWENTY' | 'THIRTY' | 'OVER_FOURTY' + mbtiIe: 'I' | 'E' + mbtiTf: 'T' | 'F' + mbti: + | 'ISTJ' + | 'ISTP' + | 'ISFJ' + | 'ISFP' + | 'INTJ' + | 'INTP' + | 'INFJ' + | 'INFP' + | 'ESTJ' + | 'ESTP' + | 'ESFJ' + | 'ESFP' + | 'ENTJ' + | 'ENTP' + | 'ENFJ' + | 'ENFP' + role: 'USER' | 'ADMIN' +} + +export type FetchMemberProfileResponse = { + profile: { + nickname: string + gender: 'FEMALE' | 'MALE' + age: 'TEN' | 'TWENTY' | 'THIRTY' | 'OVER_FOURTY' + mbtiIe: 'I' | 'E' + mbtiTf: 'T' | 'F' + mbti: + | 'ISTJ' + | 'ISTP' + | 'ISFJ' + | 'ISFP' + | 'INTJ' + | 'INTP' + | 'INFJ' + | 'INFP' + | 'ESTJ' + | 'ESTP' + | 'ESFJ' + | 'ESFP' + | 'ENTJ' + | 'ENTP' + | 'ENFJ' + | 'ENFP' + role: 'USER' | 'ADMIN' + } +} + +export type UpdateMemberProfileRequest = CreateMemberProfileRequest diff --git a/src/api/pages/valanse/trendinVoteApi.ts b/src/api/pages/valanse/trendingVoteApi.ts similarity index 87% rename from src/api/pages/valanse/trendinVoteApi.ts rename to src/api/pages/valanse/trendingVoteApi.ts index c31c685..f0cf477 100644 --- a/src/api/pages/valanse/trendinVoteApi.ts +++ b/src/api/pages/valanse/trendingVoteApi.ts @@ -1,4 +1,5 @@ import { authApi } from '../../instance/authApi' +import { PinType } from '@/types/balanse/vote' export type TrendingVoteResponse = { voteId: number @@ -8,6 +9,7 @@ export type TrendingVoteResponse = { totalParticipants: number createdBy: string createdAt: string + pinType: PinType options: { optionId: number content: string diff --git a/src/api/votes.ts b/src/api/votes.ts index 4521c1e..ebaa213 100644 --- a/src/api/votes.ts +++ b/src/api/votes.ts @@ -1,4 +1,5 @@ import { CreateVoteData, MineVotesResponse } from '@/types/api/votes' +import type { PinType } from '@/types/balanse/vote' import { authApi } from './instance/authApi' import { VoteCategory } from '@/types/_shared/vote' import { isAxiosError } from 'axios' @@ -30,6 +31,7 @@ export interface BestVoteResponse { createdBy: string createdAt: string options: VoteOption[] + pinType: PinType } // 투표 API 응답 타입 @@ -105,3 +107,22 @@ export const fetchMineVotesVoted = async ( throw error } } + +// 투표 삭제 API +export const deleteVote = async (voteId: number) => { + try { + await authApi.delete(`/votes/${voteId}`) + } catch (error) { + throw error + } +} + +// 투표 고정 API +export const pinVote = async (voteId: number, pinType: PinType) => { + try { + const response = await authApi.patch(`/votes/${voteId}/pin`, { pinType }) + return response.data + } catch (error) { + throw error + } +} diff --git a/src/app/(unauth)/privacy/page.tsx b/src/app/(unauth)/privacy/page.tsx new file mode 100644 index 0000000..010086f --- /dev/null +++ b/src/app/(unauth)/privacy/page.tsx @@ -0,0 +1,7 @@ +import { PrivacyPolicyPage } from '../../../components/pages/privacy/privacyPolicyPage' + +function Privacy() { + return +} + +export default Privacy diff --git a/src/app/account-deletion/page.tsx b/src/app/account-deletion/page.tsx new file mode 100644 index 0000000..f918bc8 --- /dev/null +++ b/src/app/account-deletion/page.tsx @@ -0,0 +1,7 @@ +'use client' + +import AccountDeletionPage from '@/components/pages/account-deletion/accountDeletionPage' + +export default function Page() { + return +} diff --git a/src/app/authBootstrap.tsx b/src/app/authBootstrap.tsx new file mode 100644 index 0000000..84db00f --- /dev/null +++ b/src/app/authBootstrap.tsx @@ -0,0 +1,22 @@ +// app/authBootstrap.tsx +'use client' + +import { useEffect } from 'react' +import { useAppDispatch } from '@/hooks/utils/useAppDispatch' +import { fetchProfileThunk } from '@/store/thunks/memberThunks' +import { getAccessToken } from '@/utils/tokenUtils' + +export default function AuthBootstrap() { + const dispatch = useAppDispatch() + + useEffect(() => { + // 새로고침 시 profile 가져오기 + if (getAccessToken()) { + // access token 이 없으면 로그인 페이지로 이동하기 때문에 아무것도 할 필요없음 + // access token 이 있으면 해당 token 으로 profile 조회 시도 + dispatch(fetchProfileThunk()) + } + }, [dispatch]) + + return null +} diff --git a/src/app/poll/[id]/page.tsx b/src/app/poll/[id]/page.tsx index 0361b14..2231442 100644 --- a/src/app/poll/[id]/page.tsx +++ b/src/app/poll/[id]/page.tsx @@ -12,10 +12,16 @@ import { Comment, } from '@/api/comment/commentApi' import VoteChart from '@/components/pages/poll/statistics/statisics' -import { fetchBestVote } from '@/api/votes' +import { deleteVote, fetchBestVote, pinVote } from '@/api/votes' import Header from '@/components/_shared/header' import BottomNavBar from '@/components/_shared/nav/bottomNavBar' import Loading from '@/components/_shared/loading' +import AdminFloatingButton from '@/components/pages/poll/_admin/AdminFloatingButton' +import DeleteConfirmModal from '@/components/ui/modal/deleteConfirmModal' +import { useAppSelector } from '@/hooks/utils/useAppSelector' +import { SectionHeader } from '@/components/pages/poll/sectionHeader' +import { PinType } from '@/types/balanse/vote' +import ConfirmModal from '@/components/ui/modal/confirmModal' interface PollOption { optionId: number @@ -49,9 +55,15 @@ export default function PollDetailPage() { const [showStats, setShowStats] = useState(false) const [isFromHot, setIsFromHot] = useState(false) const router = useRouter() + const [deleteModalOpen, setDeleteModalOpen] = useState(false) + const [showConfirmModal, setShowConfirmModal] = useState(false) + + // 관리자 여부 파악을 위한 profile 조회 + const profile = useAppSelector((state) => state.member.profile) // URL 파라미터에서 출처 확인 const source = searchParams.get('source') + const pin = searchParams.get('pin') as PinType useEffect(() => { if (id === 'hot') { @@ -63,7 +75,9 @@ export default function PollDetailPage() { // fetchBestVote 호출 결과로 불러올 데이터가 없을 경우 404 에러 발생 // -> 404 발생 여부를 반환값이 null 인지 여부로 판정해서 임시로 렌더링 취소하도록 조치함 // 이후 세부 기획이 변경되면 이 부분에서 끌어올린 데이터를 기반으로 렌더링하는 로직을 구현하면 됨 - router.replace(`/poll/${response.voteId}?source=hot`) + router.replace( + `/poll/${response.voteId}?source=hot&pin=${response.pinType}`, + ) } catch (error) { console.error('Failed to fetch best vote:', error) router.replace('/main') @@ -136,6 +150,21 @@ export default function PollDetailPage() { } } + const handlePinButtonClick = () => { + setShowConfirmModal(true) + } + + // 고정 해제 + const handleUnpin = async () => { + try { + await pinVote(Number(id), 'NONE') + router.replace('/poll/hot') + } catch (error) { + console.error('Failed to unpin vote:', error) + alert('고정 해제에 실패했습니다.') + } + } + if (loading) return if (error) return ( @@ -157,6 +186,21 @@ export default function PollDetailPage() { ) if (!data) return null + // 관리자 여부 판단 + if (!profile) return + const isAdmin = profile.role === 'ADMIN' + + const handleDelete = async () => { + try { + await deleteVote(data.voteId) + setDeleteModalOpen(false) + router.push('/balanse') + } catch (error) { + console.error('게시글 삭제 실패:', error) + alert('게시글 삭제에 실패했습니다.') + } + } + return (
+ {/* 관리자 계정이면 섹션 헤더에 고정 버튼 표시 */} + {isAdmin && ( + + )} + + {/* 고정 해제 확인 모달 */} + setShowConfirmModal(false)} + onConfirm={() => { + handleUnpin() + setShowConfirmModal(false) + }} + /> + {data && ( setOpen(false)} + profile={profile} /> )} {data && ( @@ -206,6 +271,14 @@ export default function PollDetailPage() { )}
{(source === 'hot' || isFromHot) && } + {isAdmin && ( + setDeleteModalOpen(true)} /> + )} + setDeleteModalOpen(false)} + onConfirm={handleDelete} + />
) } diff --git a/src/app/providers.tsx b/src/app/providers.tsx index f387121..ca19191 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -1,8 +1,15 @@ 'use client' import { Provider } from 'react-redux' import { store } from '../store/store' +import AuthBootstrap from './authBootstrap' const Providers = ({ children }: { children: React.ReactNode }) => { - return {children} + return ( + + {/* 앱 시작 시 또는 새로고침 시 인증/프로필 복구 로직 */} + + {children} + + ) } export default Providers diff --git a/src/components/pages/account-deletion/accountDeletionPage.tsx b/src/components/pages/account-deletion/accountDeletionPage.tsx new file mode 100644 index 0000000..e4d3790 --- /dev/null +++ b/src/components/pages/account-deletion/accountDeletionPage.tsx @@ -0,0 +1,173 @@ +'use client' + +import { useState } from 'react' +import { useRouter } from 'next/navigation' +import { useAppDispatch } from '@/hooks/utils/useAppDispatch' +import { signoutThunk } from '@/store/thunks/authThunks' +import { Checkbox } from '@/components/ui/checkbox' + +const AccountDeletionPage = () => { + const router = useRouter() + const dispatch = useAppDispatch() + const [isAgreed, setIsAgreed] = useState(false) + const [isDeleting, setIsDeleting] = useState(false) + + const handleDelete = async () => { + if (!isAgreed) { + alert('계정 삭제에 동의해주세요.') + return + } + + if ( + !confirm('정말로 계정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.') + ) { + return + } + + try { + setIsDeleting(true) + await dispatch(signoutThunk()) + alert('계정이 성공적으로 삭제되었습니다.') + router.push('/entry') + } catch (error) { + console.error('계정 삭제 실패:', error) + alert('계정 삭제 중 오류가 발생했습니다. 다시 시도해주세요.') + setIsDeleting(false) + } + } + + return ( +
+ {/* 앱 이름 및 헤더 */} +
+

ValanSe

+

계정 및 데이터 삭제

+
+ + {/* 계정 삭제 단계 안내 */} +
+

+ 계정 삭제를 요청하려면 다음 단계를 따라주세요: +

+
+
+
+ 1 +
+
+

+ 아래의 데이터 삭제 정책을 확인해주세요. +

+
+
+
+
+ 2 +
+
+

+ 계정 삭제에 동의하시면 체크박스를 선택해주세요. +

+
+
+
+
+ 3 +
+
+

+ "계정 삭제하기" 버튼을 클릭하여 삭제를 완료해주세요. +

+
+
+
+
+ + {/* 데이터 삭제 정책 */} +
+

데이터 삭제 정책

+ +
+
+

삭제되는 데이터:

+
    +
  • 프로필 정보 (닉네임, 성별, 나이, MBTI 등)
    • +
  • 작성한 투표 게시글
    • +
  • 작성한 댓글
    • +
  • 투표 기록
    • +
  • 계정 인증 정보
    • +
+
+ +
+

보관되는 데이터:

+
    +
  • + 법적 의무 준수를 위해 필요한 경우, 관련 법령에 따라 일정 기간 + 보관될 수 있습니다. +
    • +
  • + 서비스 이용 중 발생한 분쟁 해결을 위해 필요한 최소한의 정보는 + 보관될 수 있습니다. +
    • +
+
+ +
+

보관 기간:

+

+ 법적 의무에 따라 필요한 경우 최대 5년간 보관될 수 있으며, 이후 + 자동으로 삭제됩니다. +

+
+ +
+

+ * 계정 삭제 후 복구가 불가능합니다. +

+
+
+
+ + {/* 동의 체크박스 */} +
+
+ { + setIsAgreed(checked === true) + }} + className="w-5 h-5 data-[state=checked]:bg-[#839DB7] data-[state=checked]:border-[#839DB7] border-[#C6C6C6]" + /> + +
+
+ + {/* 삭제 버튼 */} +
+ + +
+
+ ) +} + +export default AccountDeletionPage diff --git a/src/components/pages/balanse/balanseList.tsx b/src/components/pages/balanse/balanse-list-section/balanseList.tsx similarity index 74% rename from src/components/pages/balanse/balanseList.tsx rename to src/components/pages/balanse/balanse-list-section/balanseList.tsx index 75d47a7..576cb38 100644 --- a/src/components/pages/balanse/balanseList.tsx +++ b/src/components/pages/balanse/balanse-list-section/balanseList.tsx @@ -2,6 +2,7 @@ import { Card, CardHeader, CardContent } from '@/components/ui/card' import { UserCircle, Share2, MessageCircle } from 'lucide-react' import { Vote } from '@/types/balanse/vote' import Link from 'next/link' +import { PinMenu } from './pinMenu' const categoryMap: Record = { FOOD: '음식', @@ -10,16 +11,24 @@ const categoryMap: Record = { ALL: '전체', } -export default function BalanceList({ data }: { data: Vote }) { +type Props = { + data: Vote + onPinChange?: () => void +} + +export default function BalanceList({ data, onPinChange }: Props) { return ( - - - - {data.nickname} • {data.created_at} - + +
+ + + {data.nickname} • {data.created_at} + +
+

{data.title}

diff --git a/src/components/pages/balanse/balanse-list-section/pinMenu.tsx b/src/components/pages/balanse/balanse-list-section/pinMenu.tsx new file mode 100644 index 0000000..063ec3b --- /dev/null +++ b/src/components/pages/balanse/balanse-list-section/pinMenu.tsx @@ -0,0 +1,101 @@ +import { useState, useEffect, useRef } from 'react' +import { MoreVertical, Flame, TrendingUp, PinOff } from 'lucide-react' +import { pinVote } from '@/api/votes' +import { PinType } from '@/types/balanse/vote' + +type Props = { + onPinChange?: () => void + voteId: number +} + +export const PinMenu = ({ onPinChange, voteId }: Props) => { + const [isOpen, setIsOpen] = useState(false) + const menuRef = useRef(null) + + // 메뉴 바깥 클릭 시 닫기 로직 + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setIsOpen(false) + } + } + + if (isOpen) { + document.addEventListener('mousedown', handleClickOutside) + } + return () => { + document.removeEventListener('mousedown', handleClickOutside) + } + }, [isOpen]) + + // 메뉴 열기/닫기 토글 (이벤트 전파 방지 필수) + const toggleMenu = (e: React.MouseEvent) => { + e.preventDefault() + e.stopPropagation() + setIsOpen(!isOpen) + } + + const handleItemClick = async (e: React.MouseEvent, type: PinType) => { + e.preventDefault() + e.stopPropagation() + + try { + await pinVote(voteId, type) + if (onPinChange) onPinChange() + } catch (error) { + console.error('Failed to pin vote:', error) + return + } + + setIsOpen(false) // 선택 후 닫기 + } + + return ( +
+ {/* 트리거 버튼 */} + + + {/* 드롭다운 메뉴 본체 */} + {isOpen && ( +
    e.stopPropagation()} // 메뉴 내부 클릭 시 부모 Link 작동 방지 + > +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ )} +
+ ) +} diff --git a/src/components/pages/balanse/balansePage.tsx b/src/components/pages/balanse/balansePage.tsx index 332c814..1cdecd8 100644 --- a/src/components/pages/balanse/balansePage.tsx +++ b/src/components/pages/balanse/balansePage.tsx @@ -1,8 +1,8 @@ 'use client' import Header from './header' -import MockPollCard from './mockPollCard' +import MockPollCard from './trending-section/mockPollCard' import FilterTabs from './filtertabs' -import BalanceList from './balanseList' +import BalanceList from './balanse-list-section/balanseList' import { fetchVotes } from '../../../api/pages/valanse/balanseListapi' import { useEffect, useState, Suspense, useCallback, useRef } from 'react' import { Vote } from '@/types/balanse/vote' @@ -10,6 +10,13 @@ import { useRouter, useSearchParams } from 'next/navigation' import BottomNavBar from '@/components/_shared/nav/bottomNavBar' import Loading from '@/components/_shared/loading' import React from 'react' +import { SectionHeader } from './trending-section/sectionHeader' +import { PinButton } from './trending-section/pinButton' +import { fetchTrendingVotes } from '@/api/pages/valanse/trendingVoteApi' +import { TrendingVoteResponse } from '@/api/pages/valanse/trendingVoteApi' +import ConfirmModal from '@/components/ui/modal/confirmModal' +import { pinVote } from '@/api/votes' +import { useAppSelector } from '@/hooks/utils/useAppSelector' const sortOptions = [ { label: '최신순', value: 'latest' }, @@ -20,6 +27,7 @@ function BalancePageContent() { const router = useRouter() const searchParams = useSearchParams() const [votes, setVotes] = useState([]) + const [trendingVote, setTrendingVote] = useState() const [error, setError] = useState(null) const [loading, setLoading] = useState(false) const [hasNextPage, setHasNextPage] = useState(false) @@ -27,6 +35,12 @@ function BalancePageContent() { const [isLoadingMore, setIsLoadingMore] = useState(false) const observerRef = useRef(null) const loadingRef = useRef(null) + const [isRefreshing, setIsRefreshing] = useState(false) + const [showConfirmModal, setShowConfirmModal] = useState(false) + + // 관리자 여부 판단 + const profile = useAppSelector((state) => state.member.profile) + const isAdmin = profile?.role === 'ADMIN' // URL에서 카테고리와 정렬 옵션 가져오기 const category = searchParams.get('category') || 'ALL' @@ -130,17 +144,69 @@ function BalancePageContent() { getVotes() }, [category, sort]) + // 인기 급상승 토픽 불러오기 + useEffect(() => { + const getTrendingVote = async () => { + try { + setLoading(true) + setError(null) + + const data = await fetchTrendingVotes() + setTrendingVote(data) + } catch (_) { + setError('불러오기 실패') + } finally { + setLoading(false) + } + } + getTrendingVote() + setIsRefreshing(false) + }, [isRefreshing]) + // 초기 로딩 중일 때는 전체 화면 로딩 - if (loading && votes.length === 0) { + if (loading || votes.length === 0 || !trendingVote) { return } + if (!profile) return + + // 고정 해제 + const handleUnpin = async () => { + await pinVote(trendingVote.voteId, 'NONE') + } + return (
+ + {/* 인기 급상승 토픽 섹션 */}
- +
+ + {isAdmin && ( + setShowConfirmModal(true)} + /> + )} +
+
+ + {/* 고정 해제 확인 모달 */} + setShowConfirmModal(false)} + onConfirm={() => { + handleUnpin() + setShowConfirmModal(false) + setIsRefreshing(true) + }} + /> + + {/* 투표 목록 섹션 */}
( - + setIsRefreshing(true)} + /> {idx !== votes.length - 1 && (
)} diff --git a/src/components/pages/balanse/header.tsx b/src/components/pages/balanse/header.tsx index e08591f..e2e855a 100644 --- a/src/components/pages/balanse/header.tsx +++ b/src/components/pages/balanse/header.tsx @@ -1,13 +1,7 @@ -import { Flame } from 'lucide-react' - export default function Header() { return (

밸런스 게임

-
- - 인기 급상승 토픽 -
) } diff --git a/src/components/pages/balanse/mockPollCard.tsx b/src/components/pages/balanse/trending-section/mockPollCard.tsx similarity index 59% rename from src/components/pages/balanse/mockPollCard.tsx rename to src/components/pages/balanse/trending-section/mockPollCard.tsx index feb87cc..733f6ea 100644 --- a/src/components/pages/balanse/mockPollCard.tsx +++ b/src/components/pages/balanse/trending-section/mockPollCard.tsx @@ -1,11 +1,6 @@ 'use client' -import { useState, useEffect } from 'react' -import { - fetchTrendingVotes, - type TrendingVoteResponse, -} from '@/api/pages/valanse/trendinVoteApi' +import { type TrendingVoteResponse } from '@/api/pages/valanse/trendingVoteApi' import Link from 'next/link' -import InlineLoading from '@/components/_shared/inlineLoading' const categoryMap: Record = { ETC: '기타', @@ -14,33 +9,11 @@ const categoryMap: Record = { ALL: '전체', } -function MockPollCard() { - const [data, setData] = useState(null) - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) - - useEffect(() => { - const getData = async () => { - try { - setLoading(true) - const res = await fetchTrendingVotes() - setData(res) - } catch { - setError('불러오기 실패') - } finally { - setLoading(false) - } - } - getData() - }, []) +type Props = { + data: TrendingVoteResponse +} - if (loading) - return ( -
- -
- ) - if (error) return
{error}
+function MockPollCard({ data }: Props) { if (!data) return null return ( @@ -49,7 +22,9 @@ function MockPollCard() {
{data.createdBy}
-
{data.title}
+
+
{data.title}
+
{data.options.map((option, idx) => { diff --git a/src/components/pages/balanse/trending-section/pinButton.tsx b/src/components/pages/balanse/trending-section/pinButton.tsx new file mode 100644 index 0000000..0275108 --- /dev/null +++ b/src/components/pages/balanse/trending-section/pinButton.tsx @@ -0,0 +1,35 @@ +import { PinType } from '@/types/balanse/vote' + +type Props = { + pinType: PinType + onClick?: () => void +} + +const PIN_LABELS: Record = { + HOT: '비었음', + TRENDING: '고정됨', + NONE: '비었음', +} + +export const PinButton = ({ pinType, onClick }: Props) => { + if (!pinType) return null + + const isPinned = pinType === 'TRENDING' + + return ( + + ) +} diff --git a/src/components/pages/balanse/trending-section/sectionHeader.tsx b/src/components/pages/balanse/trending-section/sectionHeader.tsx new file mode 100644 index 0000000..3ff93a7 --- /dev/null +++ b/src/components/pages/balanse/trending-section/sectionHeader.tsx @@ -0,0 +1,10 @@ +import { Flame } from 'lucide-react' + +export const SectionHeader = () => { + return ( +
+ + 인기 급상승 토픽 +
+ ) +} diff --git a/src/components/pages/my/accountControlSection.tsx b/src/components/pages/my/accountControlSection.tsx index 689772f..4519de0 100644 --- a/src/components/pages/my/accountControlSection.tsx +++ b/src/components/pages/my/accountControlSection.tsx @@ -1,21 +1,29 @@ import { useAppDispatch } from '@/hooks/utils/useAppDispatch' import { logoutThunk } from '@/store/thunks/authThunks' +import { useRouter } from 'next/navigation' export default function AccountControlSection() { const dispatch = useAppDispatch() + const router = useRouter() const handleLogout = () => { dispatch(logoutThunk()) } + const handleSignout = () => { + router.push('/account-deletion') + } + return (
계정 관리
-
+
-
탈퇴하기
+ +
) diff --git a/src/components/pages/my/edit/editPage.tsx b/src/components/pages/my/edit/editPage.tsx index 05cb2be..4b2b2ee 100644 --- a/src/components/pages/my/edit/editPage.tsx +++ b/src/components/pages/my/edit/editPage.tsx @@ -4,12 +4,11 @@ import { useState, useEffect } from 'react' import MBTIBottomSheet from '@/components/pages/onboarding/mbtiBottomSheet' -import { MBTI, mbtiIe, mbtiTf, Age, Gender } from '@/types/_shared/profile' -import { Profile } from '@/types/_shared/profile' +import { Profile, MBTI, mbtiIe, mbtiTf, Age, Gender } from '@/types/member' import { useRouter } from 'next/navigation' import Image from 'next/image' import { useAppSelector } from '@/hooks/utils/useAppSelector' -import { checkNickname } from '@/api/member' +import { checkNickname } from '@/api/member/member' import { fetchMypageDataThunk, updateProfileThunk, @@ -49,19 +48,24 @@ const genderMap = (label: string) => { const EditPage = () => { const router = useRouter() + const dispatch = useAppDispatch() const myPageData = useAppSelector((state) => state.member.mypageData) - const [nickname, setNickname] = useState(myPageData?.nickname) - const debouncedNickname = useDebounce(nickname || '', 500) + + // 로컬 상태 관리 + const [nickname, setNickname] = useState( + myPageData?.nickname || '', + ) + const [gender, setGender] = useState( + myPageData?.gender as Gender, + ) + const [age, setAge] = useState(myPageData?.age as Age) + const [mbti, setMbti] = useState(myPageData?.mbti as MBTI) + const [isDirty, setIsDirty] = useState(false) - const [nickNameMessage, setNickNameMessage] = useState(null) const [isNicknameEditing, setIsNicknameEditing] = useState(false) - const [gender, setGender] = useState( - myPageData?.gender as string, - ) - const [age, setAge] = useState(myPageData?.age as string) + const [nickNameMessage, setNickNameMessage] = useState(null) const [mbtiBottomSheetOpen, setMbtiBottomSheetOpen] = useState(false) - const [mbti, setMbti] = useState(myPageData?.mbti as MBTI) - const dispatch = useAppDispatch() + const debouncedNickname = useDebounce(nickname || '', 500) useEffect(() => { if (debouncedNickname && debouncedNickname.length > 0) { @@ -90,8 +94,8 @@ const EditPage = () => { console.log('로컬 상태 nickname', nickname) if (myPageData) { setNickname(myPageData.nickname) - setGender(myPageData.gender) - setAge(myPageData.age) + setGender(myPageData.gender as Gender) + setAge(myPageData.age as Age) setMbti(myPageData.mbti as MBTI) } else { dispatch(fetchMypageDataThunk()) @@ -115,6 +119,7 @@ const EditPage = () => { mbtiIe: mbtiIe, mbtiTf: mbtiTf, mbti: mbti, + role: 'USER', } } @@ -166,7 +171,7 @@ const EditPage = () => { <> setNickname(e.target.value)} className="text-md text-[#1D1D1D] flex-1" /> @@ -211,7 +216,7 @@ const EditPage = () => { {genderOptions.map((option) => (
- + {(profile.role === 'ADMIN' || + comment.nickname === profile.nickname) && ( + + )} {openMenus[comment.commentId] && (
+
+ )} + + {/* 플로팅 버튼 */} + +
+ ) +} diff --git a/src/components/pages/poll/pinButton.tsx b/src/components/pages/poll/pinButton.tsx new file mode 100644 index 0000000..06fd57d --- /dev/null +++ b/src/components/pages/poll/pinButton.tsx @@ -0,0 +1,35 @@ +import { PinType } from '@/types/balanse/vote' + +type Props = { + pinType: PinType + onClick?: () => void +} + +const PIN_LABELS: Record = { + HOT: '고정됨', + TRENDING: '비었음', + NONE: '비었음', +} + +export const PinButton = ({ pinType, onClick }: Props) => { + if (!pinType) return null + + const isPinned = pinType === 'HOT' + + return ( + + ) +} diff --git a/src/components/pages/poll/sectionHeader.tsx b/src/components/pages/poll/sectionHeader.tsx new file mode 100644 index 0000000..4edc46c --- /dev/null +++ b/src/components/pages/poll/sectionHeader.tsx @@ -0,0 +1,15 @@ +import { PinType } from '@/types/balanse/vote' +import { PinButton } from './pinButton' + +type Props = { + pinType: PinType + handlePinButtonClick?: () => void +} + +export const SectionHeader = ({ pinType, handlePinButtonClick }: Props) => { + return ( +
+ +
+ ) +} diff --git a/src/components/pages/privacy/privacyPolicyPage.tsx b/src/components/pages/privacy/privacyPolicyPage.tsx new file mode 100644 index 0000000..8576dee --- /dev/null +++ b/src/components/pages/privacy/privacyPolicyPage.tsx @@ -0,0 +1,180 @@ +import type { Metadata } from 'next' + +const APP_NAME = 'Valanse' +const CONTACT_EMAIL = 'valansekr@gmail.com' +const SERVICE_URL = 'https://valanse.kr' +const EFFECTIVE_DATE = '2026-01-23' // 시행일자(필요 시 변경) + +export const metadata: Metadata = { + title: `개인정보 처리방침 | ${APP_NAME}`, + description: `${APP_NAME} 개인정보 처리방침`, + robots: { index: true, follow: true }, +} + +export const PrivacyPolicyPage = () => { + return ( +
+
+

개인정보 처리방침

+

+ {APP_NAME}(이하 “서비스”)는 이용자의 개인정보를 중요하게 생각하며, + 관련 법령을 준수합니다. +

+

+ 시행일자: {EFFECTIVE_DATE} +

+
+ +
+

+ 1. 수집하는 개인정보 항목 +

+

+ 서비스는 카카오 로그인을 통해 회원가입/로그인을 제공하며, 다음 정보를 + 수집할 수 있습니다. +

+
    +
  • + 카카오 계정 식별자 (예: 카카오에서 제공하는 고유 + ID) +
    • +
  • + 프로필 정보 (예: 닉네임, 프로필 이미지) — + 카카오에서 제공되는 범위 내 +
    • +
  • + 서비스 이용 기록 (예: 접속 로그, 이용 내역, 오류 + 로그) +
    • +
  • + 기기/환경 정보 (예: OS, 브라우저 종류, 앱 버전 등 + 서비스 제공을 위한 최소 정보) +
    • +
+

+ ※ 서비스는 원칙적으로 주민등록번호, 금융정보 등 민감정보를 수집하지 + 않습니다. +

+
+ +
+

+ 2. 개인정보 수집 및 이용 목적 +

+
    +
  • 카카오 로그인 기반 회원 식별 및 계정 관리
    • +
  • 서비스 제공 및 기능 운영, 고객 문의 대응
    • +
  • 서비스 안정성 확보(오류 확인/분석) 및 보안/부정 이용 방지
    • +
+
+ +
+

+ 3. 개인정보 보관 및 이용 기간 +

+

+ 서비스는 개인정보의 수집·이용 목적이 달성되면 지체 없이 파기합니다. + 다만, 관련 법령에 따라 일정 기간 보관이 필요한 경우 해당 법령에서 정한 + 기간 동안 보관할 수 있습니다. +

+
    +
  • + 회원 정보: 회원 탈퇴 시까지 (탈퇴 후 지체 없이 + 파기) +
    • +
  • + 이용 기록/로그: 서비스 안정성 및 보안 목적 범위 + 내에서 필요한 기간 보관 후 파기 +
    • +
+
+ +
+

+ 4. 개인정보의 제3자 제공 +

+

+ 서비스는 원칙적으로 이용자의 개인정보를 제3자에게 제공하지 않습니다. + 다만, 법령에 근거가 있거나 이용자의 사전 동의를 받은 경우에 한하여 + 제공할 수 있습니다. +

+
+ +
+

5. 개인정보 처리 위탁

+

+ 서비스 운영을 위해 아래와 같은 외부 서비스를 이용할 수 있으며, 필요한 + 경우 개인정보 처리를 위탁할 수 있습니다. +

+
    +
  • + 카카오(Kakao Corp.): 카카오 로그인(OAuth) 제공 +
    • +
  • + AWS(아마존웹서비스): 서버 인프라 운영(예: EC2 + 환경에서 백엔드(Spring) 운영) +
    • +
+

+ ※ 위탁이 발생하는 경우, 관련 법령에 따라 위탁 계약을 통해 개인정보 + 보호 의무를 준수하도록 관리합니다. +

+
+ +
+

+ 6. 개인정보의 파기 절차 및 방법 +

+

+ 서비스는 개인정보 보관 기간 경과 또는 처리 목적 달성 시 지체 없이 + 파기합니다. +

+
    +
  • 전자적 파일 형태: 복구 불가능한 방법으로 영구 삭제
    • +
  • 출력물 형태: 분쇄 또는 소각
    • +
+
+ +
+

7. 이용자의 권리

+

+ 이용자는 개인정보에 대해 열람, 정정, 삭제, 처리 정지 등을 요청할 수 + 있습니다. 요청은 아래 문의처로 접수해 주세요. +

+
+ +
+

+ 8. 개인정보 보호 문의처 +

+ +
+ +
+

9. 변경 사항 공지

+

+ 본 개인정보 처리방침은 법령, 정책 또는 서비스 변경에 따라 수정될 수 + 있으며, 변경 시 서비스 내 공지 또는 본 페이지를 통해 안내합니다. +

+
+ +
+ © {new Date().getFullYear()} {APP_NAME} +
+
+ ) +} diff --git a/src/components/ui/modal/confirmModal.tsx b/src/components/ui/modal/confirmModal.tsx new file mode 100644 index 0000000..95da488 --- /dev/null +++ b/src/components/ui/modal/confirmModal.tsx @@ -0,0 +1,55 @@ +'use client' + +import { + Modal, + ModalOverlay, + ModalHeader, + ModalTitle, + ModalDescription, + ModalBody, + ModalFooter, + ModalCloseButton, +} from '@/components/ui/modal' +import { Button } from '@/components/ui/button' + +interface ConfirmModalProps { + open: boolean + onClose: () => void + onConfirm: () => void + title?: string + description?: string +} + +export default function ConfirmModal({ + open, + onClose, + onConfirm, + title = '진행하시겠습니까?', + description = '이 작업은 되돌릴 수 없습니다.', +}: ConfirmModalProps) { + if (!open) return null + + return ( + + + + {title} + + + + + {description} + + + + + + + + + ) +} diff --git a/src/components/ui/modal/deleteConfirmModal.tsx b/src/components/ui/modal/deleteConfirmModal.tsx new file mode 100644 index 0000000..6a1afa4 --- /dev/null +++ b/src/components/ui/modal/deleteConfirmModal.tsx @@ -0,0 +1,55 @@ +'use client' + +import { + Modal, + ModalOverlay, + ModalHeader, + ModalTitle, + ModalDescription, + ModalBody, + ModalFooter, + ModalCloseButton, +} from '@/components/ui/modal' +import { Button } from '@/components/ui/button' + +interface DeleteConfirmModalProps { + open: boolean + onClose: () => void + onConfirm: () => void + title?: string + description?: string +} + +export default function DeleteConfirmModal({ + open, + onClose, + onConfirm, + title = '삭제하시겠습니까?', + description = '이 작업은 되돌릴 수 없습니다. 정말 삭제하시겠습니까?', +}: DeleteConfirmModalProps) { + if (!open) return null + + return ( + + + + {title} + + + + + {description} + + + + + + + + + ) +} diff --git a/src/store/slices/memberSlice.ts b/src/store/slices/memberSlice.ts index 113349c..cb629f5 100644 --- a/src/store/slices/memberSlice.ts +++ b/src/store/slices/memberSlice.ts @@ -1,5 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' -import { Profile } from '@/types/_shared/profile' +import { Profile } from '@/types/member' import { MypageData } from '@/types/_shared/mypageData' interface MemberState { @@ -16,7 +16,7 @@ const memberSlice = createSlice({ name: 'member', initialState, reducers: { - setProfile(state, action: PayloadAction) { + setProfile(state, action: PayloadAction) { state.profile = action.payload }, setMypageData(state, action: PayloadAction) { diff --git a/src/store/thunks/authThunks.ts b/src/store/thunks/authThunks.ts index e1f0bbd..9460ae2 100644 --- a/src/store/thunks/authThunks.ts +++ b/src/store/thunks/authThunks.ts @@ -9,7 +9,7 @@ import { AppDispatch } from '../store' import { getRefreshToken } from '@/utils/tokenUtils' import { saveTokens, clearTokens } from '@/utils/tokenUtils' import { reissue } from '@/api/auth' -import { logout as logoutApi } from '@/api/auth' +import { logout as logoutApi, signout as signoutApi } from '@/api/auth' import { login } from '@/api/auth' export const loginThunk = (code: string) => async (dispatch: AppDispatch) => { @@ -53,3 +53,13 @@ export const logoutThunk = () => async (dispatch: AppDispatch) => { throw err } } + +export const signoutThunk = () => async (dispatch: AppDispatch) => { + try { + await signoutApi() + dispatch(logout()) + clearTokens() + } catch (err) { + throw err + } +} diff --git a/src/store/thunks/memberThunks.ts b/src/store/thunks/memberThunks.ts index 2eaf8e0..a3e06fc 100644 --- a/src/store/thunks/memberThunks.ts +++ b/src/store/thunks/memberThunks.ts @@ -2,10 +2,10 @@ import { fetchMemberMypage, fetchMemberProfile, updateMemberProfile, -} from '@/api/member' +} from '@/api/member/member' import { setProfile, setMypageData } from '../slices/memberSlice' import { AppDispatch } from '../store' -import { Profile } from '@/types/_shared/profile' +import { Profile } from '@/types/member' // 프로필을 가져오고 store에 저장 export const fetchProfileThunk = () => async (dispatch: AppDispatch) => { diff --git a/src/types/balanse/vote.ts b/src/types/balanse/vote.ts index f35bac7..9d8a5a0 100644 --- a/src/types/balanse/vote.ts +++ b/src/types/balanse/vote.ts @@ -21,3 +21,5 @@ export interface VoteListResponse { has_next_page: boolean next_cursor: string } + +export type PinType = 'HOT' | 'TRENDING' | 'NONE' diff --git a/src/types/_shared/profile.ts b/src/types/member/index.ts similarity index 90% rename from src/types/_shared/profile.ts rename to src/types/member/index.ts index 207cb06..e7c16a5 100644 --- a/src/types/_shared/profile.ts +++ b/src/types/member/index.ts @@ -5,10 +5,18 @@ export type Profile = { mbtiIe: mbtiIe mbtiTf: mbtiTf mbti: MBTI + role: UserRole } -export type Age = 'TEN' | 'TWENTY' | 'THIRTY' | 'OVER_FOURTY' export type Gender = 'FEMALE' | 'MALE' + +export type Age = 'TEN' | 'TWENTY' | 'THIRTY' | 'OVER_FOURTY' + +export type mbtiIe = 'I' | 'E' +export type mbtiNs = 'N' | 'S' +export type mbtiTf = 'T' | 'F' +export type mbtiPj = 'P' | 'J' + export type MBTI = | 'ISTJ' | 'ISTP' @@ -27,7 +35,4 @@ export type MBTI = | 'ENFJ' | 'ENFP' -export type mbtiIe = 'I' | 'E' -export type mbtiNs = 'N' | 'S' -export type mbtiTf = 'T' | 'F' -export type mbtiPj = 'P' | 'J' +export type UserRole = 'USER' | 'ADMIN' diff --git a/tsconfig.json b/tsconfig.json index c133409..0f0ae73 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,7 @@ "isolatedModules": true, "jsx": "preserve", "incremental": true, + "noUnusedLocals": false, "plugins": [ { "name": "next"