Skip to content

Commit

Permalink
f
Browse files Browse the repository at this point in the history
  • Loading branch information
@Collection50
Collection50 committed Aug 22, 2024
1 parent bf6222a commit 82359c8
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 153 deletions.
4 changes: 2 additions & 2 deletions src/app/(sidebar)/write/[id]/api/usePostMemo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { http } from '@/apis/http';
import { useMutation } from '@tanstack/react-query';

export const postMemo = (cardId: string, content: string) =>
export const postMemo = (cardId: number, content: string) =>
http.post({
url: `/cards/${cardId}/card-memo`,
data: { content },
});

export const usePostMemo = (cardId: string) =>
export const usePostMemo = (cardId: number) =>
useMutation({
mutationKey: ['post-memo', cardId],
mutationFn: (content: string) => postMemo(cardId, content),
Expand Down
2 changes: 1 addition & 1 deletion src/app/(sidebar)/write/[id]/api/usePutCardContent/usePutCardContent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { http } from '@/apis/http';

const putCardContent = (cardId: number, content: JSONContent) =>
http.put({
url: `/cards/${cardId}/title`,
url: `/cards/${cardId}/content`,
data: content,
});

Expand Down
1 change: 1 addition & 0 deletions src/app/(sidebar)/write/[id]/fetcher/CardTagFetcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { GetCardDetailResponse } from '@/app/(sidebar)/write/[id]/api/useGetCard

const [CardDetailTagsProvider, useCardDetailTagsContext] = generateContext<GetCardDetailResponse>({
name: 'card-detail-tag-fetcher',
defaultValue: { title: '', cardTypeValueList: [], content: {}, tagList: [], updatedDate: ' ' },
});

function CardTagFetcher({ children, cardId }: StrictPropsWithChildren<{ cardId: number }>) {
Expand Down
5 changes: 3 additions & 2 deletions src/app/(sidebar)/write/[id]/fetcher/MemosFetcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import { generateContext } from '@/lib';
import { StrictPropsWithChildren } from '@/types';
import { GetMemosResponse, useGetMemos } from '../api/useGetMemos';

const [MemosProvider, useMemosContext] = generateContext<{ memos: GetMemosResponse; cardId: string }>({
const [MemosProvider, useMemosContext] = generateContext<{ memos: GetMemosResponse; cardId: number }>({
name: 'memos-provider',
defaultValue: { memos: [], cardId: 0 },
});

function MemosFetcher({ cardId, children }: StrictPropsWithChildren<{ cardId: string }>) {
const { data } = useGetMemos(cardId);

return (
<MemosProvider memos={data.data} cardId={cardId}>
<MemosProvider memos={data.data} cardId={Number(cardId)}>
{children}
</MemosProvider>
);
Expand Down
292 changes: 153 additions & 139 deletions src/app/(sidebar)/write/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
DropdownMenuTrigger,
} from '@/system/components/DropdownMenu/DropdownMenu';
import { Icon } from '@/system/components';
import MemoContainer from './components/MemoContainer/MemoContainer';

const EditorProvider = dynamic(
() => import('@/components/Editor/EditorProvider/EditorProvider').then(({ EditorProvider }) => EditorProvider),
Expand All @@ -34,149 +35,162 @@ export default function Page({ params: { id } }: { params: { id: string } }) {
} = useWrite(Number(id));

return (
<section className="px-80 pt-64 w-full h-full">
<EditorProvider cardId={Number(id)}>
<div className="flex justify-between px-80">
<Input
value={title}
onValueChange={handlePutCardTitle}
placeholder="제목을 입력해주세요."
classNames={{ base: 'w-[552px]' }}
className="text-[24px] font-bold px-0 leading-32 tracking-[-0.0345rem] border-none"
/>
<div className="flex gap-8 items-center text-neutral-20">
<p>00.00.00</p>

<DropdownMenu>
<DropdownMenuTrigger>
<Icon name="more" color="black" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem className="flex gap-4 w-176 h-52 pl-16 cursor-pointer">
<Icon name="trash" size={20} color="#FF5C5C" />
<p className="text-[#FF5C5C] text-15">삭제하기</p>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<section className="h-full">
<section className="flex">
<div className="pt-64 w-full">
<EditorProvider cardId={Number(id)}>
<div className="flex justify-between px-80">
<Input
value={title}
onValueChange={handlePutCardTitle}
placeholder="제목을 입력해주세요."
classNames={{ base: 'w-[552px]' }}
className="text-[24px] font-bold px-0 leading-32 tracking-[-0.0345rem] border-none"
/>
<div className="flex gap-8 items-center text-neutral-20">
<p>00.00.00</p>

<Spacing direction="column" size={24} />

<TagSelector>
<TagSelector.Title>분류</TagSelector.Title>

<TagSelector.Trigger>
<If condition={!selectedCategories.length}>카드의 종류를 선택해주세요</If>
<If condition={!!selectedCategories.length}>
<ul className="flex gap-8">
{selectedCategories.map((category) => (
<TagSelector.RemovalbleTag
key={category.name}
className="text-neutral-75 bg-neutral-3 z-[10]"
color="#37383C"
onClick={(event) => {
event.stopPropagation();
handleDeleteCardTag(category, 'category');
}}>
{category.name}
</TagSelector.RemovalbleTag>
))}
</ul>
</If>
</TagSelector.Trigger>

<TagSelector.Content>
<div className="px-16 pt-16 pb-20">
<p className="text-12 font-medium text-neutral-40 pb-16">
어떤 단계를 위한 정보인가요? <span className="text-neutral-30">(중복가능)</span>
</p>
<TagSelector.TagList title="분류">
{categoryTags.map((tag) => (
<TagSelector.Tag
key={tag.name}
className="text-neutral-75 bg-neutral-3"
onClick={() => {
if (selectedCategories.length < 3 && !selectedCategories.find(({ name }) => name === tag.name)) {
handlePostCardTag(tag, 'category');
}
}}>
{tag.name}
</TagSelector.Tag>
))}
</TagSelector.TagList>
</div>
</TagSelector.Content>
</TagSelector>

<TagSelector
disabled={selectedTags.length === 3}
classNames={{ base: 'px-80', content: 'h-264', trigger: 'hover:bg-neutral-1' }}>
<TagSelector.Title>태그</TagSelector.Title>

<TagSelector.Trigger>
<If condition={!selectedTags.length}>태그를 선택해주세요</If>
<If condition={!!selectedTags.length}>
<ul className="flex gap-8 z-[10]">
{selectedTags.map((tag) => (
<TagSelector.RemovalbleTag
key={tag.name}
className={cn(
tag.type === '역량' && 'text-[#418CC3] bg-[#E8F1FF]',
tag.type === '인성' && 'text-[#9C6BB3] bg-[#F1E8FF]',
)}
color={tag.type === '역량' ? '#418CC3' : '#9C6BB3'}
onClick={(event) => {
event.stopPropagation();
handleDeleteCardTag(tag, 'tag');
}}>
{tag.name}
</TagSelector.RemovalbleTag>
))}
</ul>
</If>
</TagSelector.Trigger>

<TagSelector.Content>
<div className="px-16 pt-16 pb-20">
<p className="text-12 font-medium text-neutral-40 pb-16">최대 3개까지 설정 가능해요!</p>
<TagSelector.TagList title="역량 태그">
{abilityTags.map((tag) => (
<TagSelector.Tag
key={tag.name}
className="text-[#418CC3] bg-[#E8F1FF]"
onClick={() => {
if (selectedTags.length < 3 && !selectedTags.find(({ name }) => name === tag.name)) {
handlePostCardTag(tag, 'tag');
}
}}>
{tag.name}
</TagSelector.Tag>
))}
</TagSelector.TagList>

<Spacing direction="column" size={20} />

<TagSelector.TagList title="인성 태그">
{personalityTags.map((tag) => (
<TagSelector.Tag
key={tag.name}
className="text-[#9C6BB3] bg-[#F1E8FF]"
onClick={() => {
if (selectedTags.length < 3 && !selectedTags.find(({ name }) => name === tag.name)) {
handlePostCardTag(tag, 'tag');
}
}}>
{tag.name}
</TagSelector.Tag>
))}
</TagSelector.TagList>
<DropdownMenu>
<DropdownMenuTrigger>
<Icon name="more" color="black" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem className="flex gap-4 w-176 h-52 pl-16 cursor-pointer">
<Icon name="trash" size={20} color="#FF5C5C" />
<p className="text-[#FF5C5C] text-15">삭제하기</p>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</TagSelector.Content>
</TagSelector>

<Spacing direction="column" size={24} />

<TagSelector classNames={{ base: 'px-80', trigger: 'hover:bg-neutral-1' }}>
<TagSelector.Title>분류</TagSelector.Title>

<TagSelector.Trigger>
<If condition={!selectedCategories.length}>카드의 종류를 선택해주세요</If>
<If condition={!!selectedCategories.length}>
<ul className="flex gap-8">
{selectedCategories.map((category) => (
<TagSelector.RemovalbleTag
key={category.name}
className="text-neutral-75 bg-neutral-3 z-[10]"
color="#37383C"
onClick={(event) => {
event.stopPropagation();
handleDeleteCardTag(category, 'category');
}}>
{category.name}
</TagSelector.RemovalbleTag>
))}
</ul>
</If>
</TagSelector.Trigger>

<TagSelector.Content>
<div className="px-16 pt-16 pb-20">
<TagSelector.Notice>
어떤 단계를 위한 정보인가요? <span className="text-neutral-30">(중복가능)</span>
</TagSelector.Notice>

<TagSelector.TagList title="분류">
{categoryTags.map((tag) => (
<TagSelector.Tag
key={tag.name}
className="text-neutral-75 bg-neutral-3"
onClick={() => {
if (
selectedCategories.length < 3 &&
!selectedCategories.find(({ name }) => name === tag.name)
) {
handlePostCardTag(tag, 'category');
}
}}>
{tag.name}
</TagSelector.Tag>
))}
</TagSelector.TagList>
</div>
</TagSelector.Content>
</TagSelector>

<TagSelector
disabled={selectedTags.length === 3}
classNames={{ base: 'px-80', content: 'h-264', trigger: 'hover:bg-neutral-1' }}>
<TagSelector.Title>태그</TagSelector.Title>

<TagSelector.Trigger>
<If condition={!selectedTags.length}>태그를 선택해주세요</If>
<If condition={!!selectedTags.length}>
<ul className="flex gap-8 z-[10]">
{selectedTags.map((tag) => (
<TagSelector.RemovalbleTag
key={tag.name}
className={cn(
tag.type === '역량' && 'text-[#418CC3] bg-[#E8F1FF]',
tag.type === '인성' && 'text-[#9C6BB3] bg-[#F1E8FF]',
)}
color={tag.type === '역량' ? '#418CC3' : '#9C6BB3'}
onClick={(event) => {
event.stopPropagation();
handleDeleteCardTag(tag, 'tag');
}}>
{tag.name}
</TagSelector.RemovalbleTag>
))}
</ul>
</If>
</TagSelector.Trigger>

<TagSelector.Content>
<div className="px-16 pt-16 pb-20">
<TagSelector.Notice>최대 3개까지 설정 가능해요!</TagSelector.Notice>

<TagSelector.TagList title="역량 태그">
{abilityTags.map((tag) => (
<TagSelector.Tag
key={tag.name}
className="text-[#418CC3] bg-[#E8F1FF]"
onClick={() => {
if (selectedTags.length < 3 && !selectedTags.find(({ name }) => name === tag.name)) {
handlePostCardTag(tag, 'tag');
}
}}>
{tag.name}
</TagSelector.Tag>
))}
</TagSelector.TagList>

<Spacing direction="column" size={20} />

<TagSelector.TagList title="인성 태그">
{personalityTags.map((tag) => (
<TagSelector.Tag
key={tag.name}
className="text-[#9C6BB3] bg-[#F1E8FF]"
onClick={() => {
if (selectedTags.length < 3 && !selectedTags.find(({ name }) => name === tag.name)) {
handlePostCardTag(tag, 'tag');
}
}}>
{tag.name}
</TagSelector.Tag>
))}
</TagSelector.TagList>
</div>
</TagSelector.Content>
</TagSelector>

<Spacing direction="column" size={20} />
</EditorProvider>
</div>

<Spacing direction="column" size={20} />
</EditorProvider>

<MemoContainer />
</section>
</section>
);
}
Loading

0 comments on commit 82359c8

Please sign in to comment.