Skip to content

Commit ce04401

Browse files
dannysirdannysir
authored
Merge pull request #247 from boostcampwm-2024/refactor/front-#241
[FE] 페어프로그래밍
2 parents 63f1bd7 + f6eeae2 commit ce04401

Some content is hidden

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

75 files changed

+752
-714
lines changed

‎FE/src/components/Header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Link, useLocation, useNavigate } from 'react-router-dom';
2-
import useAuthStore from 'store/authStore';
2+
import useAuthStore from 'store/useAuthStore.ts';
33
import useLoginModalStore from 'store/useLoginModalStore';
4-
import useSearchModalStore from '../store/useSearchModalStore.ts';
5-
import useSearchInputStore from '../store/useSearchInputStore.ts';
4+
import useSearchModalStore from 'store/useSearchModalStore.ts';
5+
import useSearchInputStore from 'store/useSearchInputStore.ts';
66
import logoPng from 'assets/logo.png';
77
import logoWebp from 'assets/logo.webp';
88
import { checkAuth, logout } from 'service/auth.ts';

‎FE/src/components/Login/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Input from './Input';
33
import { ChatBubbleOvalLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
44
import { FormEvent, useEffect, useState } from 'react';
55
import { login } from 'service/auth';
6-
import useAuthStore from 'store/authStore';
6+
import useAuthStore from 'store/useAuthStore.ts';
77
import Overay from '../ModalOveray.tsx';
88

99
export default function Login() {
@@ -59,16 +59,16 @@ export default function Login() {
5959
<Overay onClick={() => toggleModal()} />
6060
<section className='fixed left-1/2 top-1/2 flex w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl bg-white p-20 shadow-lg'>
6161
<h2 className='text-3xl font-bold'>JuGa</h2>
62-
<p className='h-5 my-3 text-sm font-semibold text-juga-red-60'>
62+
<p className='my-3 h-5 text-sm font-semibold text-juga-red-60'>
6363
{
6464
{
6565
'401': '존재하지 않는 사용자입니다.',
6666
'400': '잘못된 입력형식입니다.',
6767
}[errorCode]
6868
}
6969
</p>
70-
<form className='flex flex-col mb-2' onSubmit={handleSubmit}>
71-
<div className='flex flex-col gap-2 my-10'>
70+
<form className='mb-2 flex flex-col' onSubmit={handleSubmit}>
71+
<div className='my-10 flex flex-col gap-2'>
7272
<Input
7373
type='text'
7474
placeholder='아이디'
@@ -84,7 +84,7 @@ export default function Login() {
8484
autoComplete='current-password'
8585
/>
8686
</div>
87-
<button className='py-2 text-white transition rounded-3xl bg-juga-blue-40 hover:bg-juga-blue-50'>
87+
<button className='rounded-3xl bg-juga-blue-40 py-2 text-white transition hover:bg-juga-blue-50'>
8888
로그인
8989
</button>
9090
</form>

‎FE/src/components/Login/type.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export type LoginSuccessResponse = {
2+
accessToken: string;
3+
};
4+
5+
export type LoginFailResponse = {
6+
error: string;
7+
message: string[];
8+
statusCode: number;
9+
};

‎FE/src/components/Mypage/CancleAlertModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Overay from 'components/ModalOveray';
2-
import useOrderCancelAlertModalStore from 'store/orderCancleAlertModalStore';
2+
import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
33

44
export default function CancleAlertModal() {
55
const { close, onSuccess, order } = useOrderCancelAlertModalStore();
@@ -17,7 +17,7 @@ export default function CancleAlertModal() {
1717
</div>
1818
<div className='flex justify-center gap-2'>
1919
<button
20-
className='w-24 px-6 py-2 text-white transition rounded-xl bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
20+
className='w-24 rounded-xl bg-juga-grayscale-500 px-6 py-2 text-white transition hover:bg-juga-grayscale-black'
2121
onClick={() => {
2222
onSuccess();
2323
close();
@@ -26,7 +26,7 @@ export default function CancleAlertModal() {
2626
네
2727
</button>
2828
<button
29-
className='w-24 px-6 py-2 text-gray-800 rounded-xl bg-juga-grayscale-100 hover:bg-juga-grayscale-200'
29+
className='w-24 rounded-xl bg-juga-grayscale-100 px-6 py-2 text-gray-800 hover:bg-juga-grayscale-200'
3030
onClick={close}
3131
>
3232
아니오

‎FE/src/components/Mypage/Nav.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useSearchParams } from 'react-router-dom';
2-
import { MypageSectionType } from 'types';
2+
import { MypageSectionType } from './type.ts';
33

44
const mapping = {
55
account: '보유 자산 현황',
@@ -18,7 +18,7 @@ export default function Nav() {
1818
};
1919

2020
return (
21-
<div className='flex flex-col w-48 rounded-lg h-fit'>
21+
<div className='flex h-fit w-48 flex-col rounded-lg'>
2222
{sections.map((e, idx) => (
2323
<button
2424
key={`assetNav${idx}`}

‎FE/src/components/Mypage/Order.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import useOrders from 'hooks/useOrder';
2-
import useOrderCancelAlertModalStore from 'store/orderCancleAlertModalStore';
3-
import { parseTimestamp } from 'utils/common';
2+
import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
43
import CancleAlertModal from './CancleAlertModal';
4+
import { formatTimestamp } from 'utils/format';
55

66
export default function Order() {
77
const { orderQuery, removeOrder } = useOrders();
@@ -54,7 +54,7 @@ export default function Order() {
5454
<p className='w-1/4 text-center truncate'>{amount}</p>
5555
<p className='w-1/4 text-center'>{price.toLocaleString()}원</p>
5656
<p className='w-1/4 text-right truncate'>
57-
{parseTimestamp(created_at)}
57+
{formatTimestamp(created_at)}
5858
</p>
5959
<p className='w-1/6 text-right'>
6060
<button

‎FE/src/components/Mypage/type.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type MypageSectionType = 'account' | 'order' | 'bookmark' | 'info';

‎FE/src/components/News/Card.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { NewsDataType } from './NewsDataType.ts';
2-
import { formatDate } from '../../utils/formatTime.ts';
1+
import { formatDate } from 'utils/format.ts';
2+
import { NewsDataType } from './type.ts';
33

44
type CardWithImageProps = {
55
data: NewsDataType;
66
};
77
export default function Card({ data }: CardWithImageProps) {
88
return (
99
<a
10-
className='flex cursor-pointer flex-col rounded-lg border p-4 transition-all hover:bg-juga-grayscale-50'
10+
className='flex flex-col p-4 transition-all border rounded-lg cursor-pointer hover:bg-juga-grayscale-50'
1111
href={data.originallink}
1212
target='_blank'
1313
rel='noopener noreferrer'
@@ -22,8 +22,8 @@ export default function Card({ data }: CardWithImageProps) {
2222
{formatDate(data.pubDate)}
2323
</span>
2424
</div>
25-
<div className='flex w-full items-center justify-between gap-4'>
26-
<p className='w-96 truncate text-left text-sm text-juga-grayscale-500'>
25+
<div className='flex items-center justify-between w-full gap-4'>
26+
<p className='text-sm text-left truncate w-96 text-juga-grayscale-500'>
2727
{data.description}
2828
</p>
2929
<span className='rounded-full bg-juga-blue-10 px-2 py-0.5 text-xs text-juga-blue-50'>

‎FE/src/components/News/News.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Card from './Card.tsx';
22
import { useQuery } from '@tanstack/react-query';
3-
import { getNewsData } from '../../service/getNewsData.ts';
4-
import { NewsDataType } from './NewsDataType.ts';
3+
import { getNewsData } from '../../service/news.ts';
4+
import { NewsDataType } from './type.ts';
55

66
export default function News() {
77
const { data, isLoading, isError } = useQuery({
@@ -17,7 +17,7 @@ export default function News() {
1717

1818
return (
1919
<div className='w-full'>
20-
<div className='mb-4 flex items-center justify-between'>
20+
<div className='flex items-center justify-between mb-4'>
2121
<h2 className='text-xl font-bold'>주요 뉴스</h2>
2222
</div>
2323

‎FE/src/components/News/newsMockData.ts

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎FE/src/components/News/NewsDataType.ts renamed to ‎FE/src/components/News/type.ts

File renamed without changes.

‎FE/src/components/Rank/RankCard.tsx renamed to ‎FE/src/components/Rank/Card.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { RankingItem } from './RankType.ts';
1+
import { RankingItem } from './type.ts';
22

33
type Props = {
44
item: RankingItem;
55
type: '수익률순' | '자산순';
66
};
77

8-
export default function RankCard({ item, type }: Props) {
8+
export default function Card({ item, type }: Props) {
99
return (
1010
<div
1111
className={

‎FE/src/components/Rank/RankList.tsx renamed to ‎FE/src/components/Rank/List.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
import RankCard from './RankCard';
2-
import useAuthStore from '../../store/authStore.ts';
3-
import { RankingCategory } from './RankType.ts';
1+
import Card from './Card.tsx';
2+
import useAuthStore from '../../store/useAuthStore.ts';
3+
import { RankingCategory } from './type.ts';
44

55
type Props = {
66
title: '수익률순' | '자산순';
77
data: RankingCategory;
88
};
99

10-
export default function RankList({ title, data }: Props) {
10+
export default function List({ title, data }: Props) {
1111
const { topRank, userRank } = data;
1212
const { isLogin } = useAuthStore();
1313
return (
1414
<div className={'flex flex-col gap-5'}>
15-
<div className='w-full rounded-lg bg-white p-2 shadow-lg'>
16-
<div className='mb-1 border-b pb-1'>
15+
<div className='w-full p-2 bg-white rounded-lg shadow-lg'>
16+
<div className='pb-1 mb-1 border-b'>
1717
<h3 className='text-base font-bold text-gray-800'>{title}</h3>
1818
</div>
1919

2020
<div className='space-y-1'>
2121
{topRank.map((item, index) => (
22-
<RankCard
23-
key={`${item.nickname}-${index}`}
24-
item={item}
25-
type={title}
26-
/>
22+
<Card key={`${item.nickname}-${index}`} item={item} type={title} />
2723
))}
2824
</div>
2925
</div>
@@ -34,7 +30,7 @@ export default function RankList({ title, data }: Props) {
3430
</div>
3531

3632
<div className={'space-y-1'}>
37-
<RankCard item={userRank} type={title} />
33+
<Card item={userRank} type={title} />
3834
</div>
3935
</div>
4036
) : null}

‎FE/src/components/Rank/RankType.ts renamed to ‎FE/src/components/Rank/type.ts

File renamed without changes.

‎FE/src/components/Search/SearchCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { SearchDataType } from './searchDataType.ts';
21
import { useNavigate } from 'react-router-dom';
32
import useSearchModalStore from 'store/useSearchModalStore.ts';
43
import useSearchInputStore from 'store/useSearchInputStore.ts';
54
import { SearchCardHighLight } from './SearchCardHighlight.tsx';
5+
import { SearchDataType } from './type.ts';
66

77
type SearchCardProps = {
88
data: SearchDataType;

‎FE/src/components/Search/SearchCardHighlight.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { formatNoSpecialChar } from '../../utils/formatNoSpecialChar.ts';
1+
import { formatNoSpecialChar } from 'utils/format.ts';
22

33
type SearchCardHighLightProps = {
44
text: string;

‎FE/src/components/Search/SearchHistoryList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { SearchHistoryItem } from './SearchHistoryItem.tsx';
2-
import { HistoryType } from './searchDataType.ts';
2+
import { HistoryType } from './type.ts';
33

44
type SearchHistoryListProps = {
55
searchHistory: HistoryType[];

‎FE/src/components/Search/SearchList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import SearchCard from './SearchCard.tsx';
2-
import { SearchDataType } from './searchDataType.ts';
32
import Lottie from 'lottie-react';
43
import noResultAnimation from 'assets/noResultAnimation.json';
4+
import { SearchDataType } from './type.ts';
55

66
type SearchListProps = {
77
searchData: SearchDataType[];

‎FE/src/components/Search/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import { SearchInput } from './SearchInput';
55
import { SearchHistoryList } from './SearchHistoryList';
66
import SearchList from './SearchList.tsx';
77
import useSearchInputStore from 'store/useSearchInputStore.ts';
8-
import { useDebounce } from 'utils/useDebounce.ts';
8+
import { useDebounce } from 'hooks/useDebounce.ts';
99
import { useQuery } from '@tanstack/react-query';
10-
import { getSearchResults } from 'service/getSearchResults.ts';
1110
import Lottie from 'lottie-react';
1211
import searchAnimation from 'assets/searchAnimation.json';
13-
import { useSearchHistory } from './searchHistoryHook.ts';
14-
import { formatNoSpecialChar } from '../../utils/formatNoSpecialChar.ts';
12+
import { useSearchHistory } from 'hooks/useSearchHistoryHook.ts';
13+
import { getSearchResults } from 'service/search.ts';
14+
import { formatNoSpecialChar } from 'utils/format.ts';
1515

1616
export default function SearchModal() {
1717
const { isOpen, toggleSearchModal } = useSearchModalStore();
@@ -36,7 +36,7 @@ export default function SearchModal() {
3636
if (data && data.length > 0 && debounceValue && !isLoading) {
3737
addSearchHistory(formatNoSpecialChar(debounceValue));
3838
}
39-
}, [data, debounceValue]);
39+
}, [data, debounceValue, addSearchHistory, isLoading]);
4040

4141
if (!isOpen) return null;
4242

‎FE/src/components/Search/searchDataType.ts renamed to ‎FE/src/components/Search/type.ts

File renamed without changes.

‎FE/src/components/StockIndex/Card.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1+
import { useEffect, useRef, useState } from 'react';
2+
import { socket } from 'utils/socket.ts';
3+
import { drawChart } from 'utils/chart/drawChart.ts';
14
import {
25
ChartData,
6+
MarketType,
37
StockIndexData,
48
StockIndexValue,
5-
} from 'components/TopFive/type';
6-
import { useEffect, useRef, useState } from 'react';
7-
import { socket } from 'utils/socket.ts';
8-
import { drawChart } from 'utils/chart/drawChart.ts';
9-
10-
// const X_LENGTH = 79;
9+
} from './type.ts';
1110

1211
type StockIndexChartProps = {
1312
name: string;
14-
id: 'KOSPI' | 'KOSDAQ' | 'KOSPI200' | 'KSQ150';
13+
id: MarketType;
1514
initialData: StockIndexData;
1615
};
1716

‎FE/src/components/StockIndex/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { getStockIndex } from 'service/stocks.ts';
12
import { Card } from './Card.tsx';
23
import { useQuery } from '@tanstack/react-query';
3-
import { getStockIndex } from '../../service/getStockIndex.ts';
44

55
export default function StockIndex() {
66
const { data, isLoading, isError } = useQuery({
@@ -16,7 +16,7 @@ export default function StockIndex() {
1616
const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data;
1717

1818
return (
19-
<div className='my-2 flex w-full items-center justify-between gap-2'>
19+
<div className='flex items-center justify-between w-full gap-2 my-2'>
2020
<Card name='코스피' id='KOSPI' initialData={KOSPI} />
2121
<Card name='코스닥' id='KOSDAQ' initialData={KOSDAQ} />
2222
<Card name='코스피200' id='KOSPI200' initialData={KOSPI200} />

‎FE/src/components/StockIndex/type.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export type ChartData = { time: string; value: string; diff: string };
2+
3+
export type StockIndexValue = {
4+
curr_value: string;
5+
diff: string;
6+
diff_rate: string;
7+
sign: string;
8+
};
9+
10+
export type StockIndexData = {
11+
chart: ChartData[];
12+
value: StockIndexValue;
13+
};
14+
15+
export type MarketType = 'KOSPI' | 'KOSDAQ' | 'KOSPI200' | 'KSQ150';

0 commit comments

Comments
 (0)