Skip to content

Commit 73114cd

Browse files
Hys-LeeHys-Lee
authored
Merge pull request #126 from Hys-Lee/memos
Memos 제작 완료 및 portfolios 빈 기능들 채우기
2 parents 1239348 + c188a8d commit 73114cd

File tree

100 files changed

+5450
-444
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+5450
-444
lines changed

‎README.md‎

Lines changed: 13 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,24 @@
1-
# PorTracker
1+
## 개발 유의 사항
22

3-
<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
3+
> 디렉토리 구조 및 import 경로 처리에 대해 - **Mocking**
44
5-
✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨.
5+
- mocks 폴더 내에서 **서로를 참조**할 때는 **상대 경로**만 사용 및 **index.ts(배럴 파일) 참조 금지**
66

7-
[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
7+
- **services** 폴더 내의 **client, server** 구조와 **mocks/services** 폴더 내 구조를 **동일하게** 맞춘다.
88

9-
## Finish your CI setup
9+
- 디렉토리 구조만이 아니라, 함수에 대해서도 같도록 **mocks/services 정의 시 services에서의 interface를 사용한다**.
1010

11-
[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/RBOTOFm77o)
11+
- **services**에서 새로운 queries 및 actions 파일 **생성 시, 배럴 파일에서 export**
1212

13+
- **mocks/services**에서 새로운 queries 및 actions 파일 생성 시, **배럴 파일에서 mockTotalServices에 추가 + named export에 관련 함수들 추가**
1314

14-
## Run tasks
15+
---
1516

16-
To run the dev server for your app, use:
17+
> #### Mocking 관리 상세 정보
1718
18-
```sh
19-
npx nx serve client-vite
20-
```
19+
- Storybook에서의 alias를 활용해 mocking 시스템이 동작
20+
- rsc관련 parameter에 따라 msw 사용 여부 결정됨.
2121

22-
To create a production bundle:
22+
- 이는 storybook rsc관련 플러그인이 msw와 함께 동작할 때 에러가 나는 이슈가 있기 때문.
2323

24-
```sh
25-
npx nx build client-vite
26-
```
27-
28-
To see all available targets to run for a project, run:
29-
30-
```sh
31-
npx nx show project client-vite
32-
```
33-
34-
These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
35-
36-
[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
37-
38-
## Add new projects
39-
40-
While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
41-
42-
Use the plugin's generator to create new projects.
43-
44-
To generate a new application, use:
45-
46-
```sh
47-
npx nx g @nx/react:app demo
48-
```
49-
50-
To generate a new library, use:
51-
52-
```sh
53-
npx nx g @nx/react:lib mylib
54-
```
55-
56-
You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
57-
58-
[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
59-
60-
61-
[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
62-
63-
## Install Nx Console
64-
65-
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
66-
67-
[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
68-
69-
## Useful links
70-
71-
Learn more:
72-
73-
- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects)
74-
- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
75-
- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
76-
- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
77-
78-
And join the Nx community:
79-
- [Discord](https://go.nx.dev/community)
80-
- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
81-
- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
82-
- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
24+
- 시스템 제작하여 위 이슈를 해결.

‎apps/core/.storybook/_template/story.hbs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ const meta: Meta<typeof {{pascalCase name}}> = {
55
component: {{pascalCase name}},
66
// 앱 내부이므로 title에 앱 이름을 고정하거나 생략해도 됩니다.
77
title: 'ProTracker/{{pascalCase name}}',
8+
parameters: {
9+
api: {
10+
// msw vs. Mock Services 직접 사용
11+
directMock: false,
12+
},
13+
},
814
tags: ['autodocs'],
915
argTypes: {},
1016
};

‎apps/core/.storybook/main.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ const config: StorybookConfig = {
3131
staticDirs: ['../public'],
3232

3333
viteFinal: async (config) => {
34+
config.define = {
35+
...config.define,
36+
'process.env.STORYBOOK': JSON.stringify(true),
37+
};
38+
3439
if (config.optimizeDeps) {
3540
config.optimizeDeps.exclude = [
3641
...(config.optimizeDeps.exclude || []),
@@ -61,8 +66,12 @@ const config: StorybookConfig = {
6166
resolve: {
6267
alias: [
6368
{
64-
find: '@core/services',
65-
replacement: path.join(rootDir, './mocks/services'),
69+
find: '@core/services/server',
70+
replacement: path.join(rootDir, './mocks/services/server'),
71+
},
72+
{
73+
find: '@core/services/client',
74+
replacement: path.join(rootDir, './mocks/services/client'),
6675
},
6776
{
6877
// Next.js의 @/ 경로를 apps/core 폴더로 연결

‎apps/core/app/layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { colors } from '@core/tokens/colors.stylex';
99
import Navbar from './_components/Navbar';
1010
import Link from 'next/link';
1111
import { AntdRegistry } from '@ant-design/nextjs-registry';
12+
import TanstackQueryProvider from '@core/libs/tanstack-query/TanstackQueryProvider';
1213

1314
export const metadata: Metadata = {
1415
title: 'My App',
@@ -43,7 +44,7 @@ export default function RootLayout({
4344
</div>
4445
<Navbar />
4546
</header>
46-
{children}
47+
<TanstackQueryProvider>{children}</TanstackQueryProvider>
4748
{/* <script type="module" src="/src/main.tsx"></script> */}
4849
</div>
4950
</AntdRegistry>

‎apps/core/app/memos/page.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import Filter from '@core/components/memos/ORGANISMS/Filter/Filter';
2+
import MemoTable from '@core/components/memos/ORGANISMS/MemoTable/MemoTable';
3+
import Button from '@core/components/shared/ATOMS/Button/Button';
4+
import {
5+
getAssets,
6+
getMemos,
7+
getTransactionTypes,
8+
} from '@core/services/server';
9+
import Link from 'next/link';
10+
import { ComponentProps, Suspense } from 'react';
11+
import * as stylex from '@stylexjs/stylex';
12+
import MemoFormModal from '@core/components/memos/ORGANISMS/MemoFormModal/MemoFormModal';
13+
14+
const MemosPage = async ({
15+
searchParams,
16+
}: {
17+
searchParams: Promise<{ [key: string]: string }>;
18+
}) => {
19+
const params = new URLSearchParams(await searchParams);
20+
const [
21+
// assetsRes,
22+
memosRes,
23+
] = await Promise.all([
24+
// getAssets(),
25+
getMemos(params.toString()),
26+
]);
27+
28+
//test
29+
console.log('memoREs: ', memosRes);
30+
31+
const currencyInfo: ComponentProps<typeof Filter>['currencyInfo'] = [
32+
{ value: 'usd', text: 'USD' },
33+
{ value: 'krw', text: 'KRW' },
34+
];
35+
36+
const modalParam = 'memoModalTarget';
37+
const memoModalTarget = params.get(modalParam);
38+
const modalCase = memoModalTarget === 'new' ? 'add' : 'modify';
39+
const memoModalTargetId =
40+
memoModalTarget && memoModalTarget !== 'new' ? memoModalTarget : undefined;
41+
/** searchParams로 filter초기 데이터 처리 */
42+
43+
const makeHref = (keyValueArr: { key: string; value: string }[]) => {
44+
keyValueArr.forEach(({ key, value }) => {
45+
params.set(key, value);
46+
});
47+
48+
return `?${params.toString()}`;
49+
};
50+
51+
const makeModalCloseHref = () => {
52+
params.delete(modalParam);
53+
// params.delete('modalCase');
54+
return `?${params.toString()}`;
55+
};
56+
return (
57+
<>
58+
<section {...stylex.props(pageStyles.wrapper)}>
59+
<div {...stylex.props(pageStyles.filterLine)}>
60+
<Suspense>
61+
<Filter
62+
// assetInfo={
63+
// assetsRes.data?.map((data) => ({
64+
// text: data.name,
65+
// value: data.id,
66+
// })) ?? []
67+
// }
68+
currencyInfo={currencyInfo}
69+
memoTypeInfo={[
70+
{ text: 'Actual', value: 'actual' },
71+
{ text: 'Target', value: 'target' },
72+
{ text: 'Event', value: 'event' },
73+
]}
74+
// init={}
75+
/>
76+
<Link
77+
href={makeHref([{ key: modalParam, value: 'new' }])}
78+
{...stylex.props(pageStyles.addLink)}
79+
>
80+
<Button
81+
variant="solid"
82+
// variant="outlined"
83+
rounded="normal"
84+
buttonStylex={pageStyles.addBtn}
85+
>
86+
{'+'}
87+
{/* <PlusIcon width={16} height={16} /> */}
88+
{/* {'추가하기'} */}
89+
</Button>
90+
</Link>
91+
</Suspense>
92+
</div>
93+
<Suspense>
94+
<MemoTable
95+
modalParam={modalParam}
96+
memoData={
97+
memosRes.data?.map((data) => ({
98+
content: data.content,
99+
date: data.date,
100+
importance: data.importance,
101+
memoId: data.id,
102+
tags: data.tags,
103+
title: data.title,
104+
type: data.memoType,
105+
})) ?? []
106+
}
107+
/>
108+
</Suspense>
109+
</section>
110+
{memoModalTarget && (
111+
<MemoFormModal
112+
mode={modalCase}
113+
memoId={memoModalTargetId}
114+
// asClose={<Link href={makeModalCloseHref()} scroll={false} replace />}
115+
modalCloseHref={makeModalCloseHref()}
116+
/>
117+
)}
118+
</>
119+
);
120+
};
121+
122+
export default MemosPage;
123+
124+
const pageStyles = stylex.create({
125+
wrapper: {
126+
width: '100%',
127+
paddingTop: '64px',
128+
display: 'flex',
129+
flexDirection: 'column',
130+
gap: '36px',
131+
},
132+
filterLine: {
133+
display: 'flex',
134+
position: 'relative',
135+
alignItems: 'center',
136+
minWidth: '1024px',
137+
},
138+
addBtn: {
139+
position: 'absolute',
140+
display: 'flex',
141+
alignItems: 'center',
142+
justifyContent: 'center',
143+
lineHeight: 1,
144+
gap: '8px',
145+
right: '8px',
146+
fontSize: '24px',
147+
padding: '4px',
148+
width: '40px',
149+
height: '40px',
150+
// width: '100px',
151+
fontWeight: '500',
152+
// color: colors.textPrimary,
153+
},
154+
addLink: {
155+
width: 'auto',
156+
height: 'auto',
157+
display: 'flex',
158+
justifyContent: 'center',
159+
alignItems: 'center',
160+
},
161+
contents: {},
162+
});

‎apps/core/app/portfolios/@type/actual/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
getAllActualPortfolios,
99
getTransactionTypes,
1010
getAssets,
11-
} from '@core/services';
11+
} from '@core/services/server';
1212
import Link from 'next/link';
1313
import ActualTable from '@core/components/portfolios/ORGANISMS/ActualTable/ActualTable';
1414
import { Suspense } from 'react';
@@ -167,7 +167,8 @@ const PortfolioPage = async ({
167167
}
168168
mode={modalCase}
169169
portfolioId={portfolioTargetId}
170-
asClose={<Link href={makeModalCloseHref()} scroll={false} replace />}
170+
modalCloseHref={makeModalCloseHref()}
171+
// asClose={<Link href={makeModalCloseHref()} scroll={false} replace />}
171172
/>
172173
)}
173174
</>

‎apps/core/app/portfolios/_components/MemoReferenceContainer.tsx‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,50 @@
1+
'use client';
2+
13
import MemoReference from '@core/components/portfolios/ORGANISMS/ActualFormModalView/_ingredients/MemoReference/MemoReference';
2-
import { RelatedMemo } from '@core/schemas/portfolios.schema';
3-
import { getRelatedMemoByMemoId } from '@core/services/queries/portfoliosQueries';
4+
import { RelatedMemo } from '@core/schemas/features/portfolios/portfolios.schema';
5+
import { getRelatedMemoByMemoId } from '@core/services/server/queries/portfoliosQueries';
6+
import { linkedMemoInfoAtom } from '@core/stores/portfolios/actualModalStore';
47
import { colors } from '@core/tokens/colors.stylex';
8+
import { useAtomValue } from 'jotai';
59
import { Suspense, use } from 'react';
610

711
interface MemoReferenceContainerProps {
8-
memoDataPromise: ReturnType<typeof getRelatedMemoByMemoId>;
12+
// memoDataPromise: ReturnType<typeof getRelatedMemoByMemoId>;
13+
initPromise?: ReturnType<typeof getRelatedMemoByMemoId>;
914
}
1015

1116
const MemoReferenceContainer = ({
12-
memoDataPromise,
13-
}: MemoReferenceContainerProps) => {
14-
const memoDataRes = use(memoDataPromise);
17+
initPromise,
18+
}: // memoDataPromise,
19+
MemoReferenceContainerProps) => {
20+
// const memoDataRes = use(memoDataPromise);
1521

22+
const linkedMemoInfo = useAtomValue(linkedMemoInfoAtom);
23+
const finalInkedMemoInfo =
24+
linkedMemoInfo !== undefined
25+
? linkedMemoInfo
26+
: initPromise !== undefined
27+
? use(initPromise).data
28+
: undefined;
1629
return (
1730
<>
18-
{memoDataRes.success ? (
31+
{/* {memoDataRes.success ? (
1932
<MemoReference
2033
content={memoDataRes.data?.content || ''}
2134
evaluation={memoDataRes.data?.evaluation || 'soso'}
2235
importance={memoDataRes.data?.importance || 'normal'}
2336
tags={memoDataRes.data?.tags || []}
2437
title={memoDataRes.data?.title || ''}
2538
/>
39+
) : ( */}
40+
{finalInkedMemoInfo ? (
41+
<MemoReference
42+
content={finalInkedMemoInfo?.content || ''}
43+
evaluation={finalInkedMemoInfo?.evaluation || 'soso'}
44+
importance={finalInkedMemoInfo?.importance || 'normal'}
45+
tags={finalInkedMemoInfo?.tags || []}
46+
title={finalInkedMemoInfo?.title || ''}
47+
/>
2648
) : (
2749
// <>여기 만들어야 함</>
2850
<NoLinkedMemo />

‎apps/core/assets/images/svgs/Exchange_Rounded.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)