Merge pull request #247 from boostcampwm-2024/refactor/front-#241

[FE] 페어프로그래밍

FE/src/components/Header.tsx

@@ -1,8 +1,8 @@
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import useAuthStore from 'store/authStore';
+import useAuthStore from 'store/useAuthStore.ts';
 import useLoginModalStore from 'store/useLoginModalStore';
-import useSearchModalStore from '../store/useSearchModalStore.ts';
-import useSearchInputStore from '../store/useSearchInputStore.ts';
+import useSearchModalStore from 'store/useSearchModalStore.ts';
+import useSearchInputStore from 'store/useSearchInputStore.ts';
 import logoPng from 'assets/logo.png';
 import logoWebp from 'assets/logo.webp';
 import { checkAuth, logout } from 'service/auth.ts';

FE/src/components/Login/index.tsx

@@ -3,7 +3,7 @@ import Input from './Input';
 import { ChatBubbleOvalLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
 import { FormEvent, useEffect, useState } from 'react';
 import { login } from 'service/auth';
-import useAuthStore from 'store/authStore';
+import useAuthStore from 'store/useAuthStore.ts';
 import Overay from '../ModalOveray.tsx';
 
 export default function Login() {
@@ -59,16 +59,16 @@ export default function Login() {
       <Overay onClick={() => toggleModal()} />
       <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'>
         <h2 className='text-3xl font-bold'>JuGa</h2>
-        <p className='h-5 my-3 text-sm font-semibold text-juga-red-60'>
+        <p className='my-3 h-5 text-sm font-semibold text-juga-red-60'>
           {
             {
               '401': '존재하지 않는 사용자입니다.',
               '400': '잘못된 입력형식입니다.',
             }[errorCode]
           }
         </p>
-        <form className='flex flex-col mb-2' onSubmit={handleSubmit}>
-          <div className='flex flex-col gap-2 my-10'>
+        <form className='mb-2 flex flex-col' onSubmit={handleSubmit}>
+          <div className='my-10 flex flex-col gap-2'>
             <Input
               type='text'
               placeholder='아이디'
@@ -84,7 +84,7 @@ export default function Login() {
               autoComplete='current-password'
             />
           </div>
-          <button className='py-2 text-white transition rounded-3xl bg-juga-blue-40 hover:bg-juga-blue-50'>
+          <button className='rounded-3xl bg-juga-blue-40 py-2 text-white transition hover:bg-juga-blue-50'>
             로그인
           </button>
         </form>

FE/src/components/Login/type.ts

@@ -0,0 +1,9 @@
+export type LoginSuccessResponse = {
+  accessToken: string;
+};
+
+export type LoginFailResponse = {
+  error: string;
+  message: string[];
+  statusCode: number;
+};

FE/src/components/Mypage/CancleAlertModal.tsx

@@ -1,5 +1,5 @@
 import Overay from 'components/ModalOveray';
-import useOrderCancelAlertModalStore from 'store/orderCancleAlertModalStore';
+import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
 
 export default function CancleAlertModal() {
   const { close, onSuccess, order } = useOrderCancelAlertModalStore();
@@ -17,7 +17,7 @@ export default function CancleAlertModal() {
         </div>
         <div className='flex justify-center gap-2'>
           <button
-            className='w-24 px-6 py-2 text-white transition rounded-xl bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
+            className='w-24 rounded-xl bg-juga-grayscale-500 px-6 py-2 text-white transition hover:bg-juga-grayscale-black'
             onClick={() => {
               onSuccess();
               close();
@@ -26,7 +26,7 @@ export default function CancleAlertModal() {
             네
           </button>
           <button
-            className='w-24 px-6 py-2 text-gray-800 rounded-xl bg-juga-grayscale-100 hover:bg-juga-grayscale-200'
+            className='w-24 rounded-xl bg-juga-grayscale-100 px-6 py-2 text-gray-800 hover:bg-juga-grayscale-200'
             onClick={close}
           >
             아니오

FE/src/components/Mypage/Nav.tsx

@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { MypageSectionType } from 'types';
+import { MypageSectionType } from './type.ts';
 
 const mapping = {
   account: '보유 자산 현황',
@@ -18,7 +18,7 @@ export default function Nav() {
   };
 
   return (
-    <div className='flex flex-col w-48 rounded-lg h-fit'>
+    <div className='flex h-fit w-48 flex-col rounded-lg'>
       {sections.map((e, idx) => (
         <button
           key={`assetNav${idx}`}

FE/src/components/Mypage/Order.tsx

@@ -1,7 +1,7 @@
 import useOrders from 'hooks/useOrder';
-import useOrderCancelAlertModalStore from 'store/orderCancleAlertModalStore';
-import { parseTimestamp } from 'utils/common';
+import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
 import CancleAlertModal from './CancleAlertModal';
+import { formatTimestamp } from 'utils/format';
 
 export default function Order() {
   const { orderQuery, removeOrder } = useOrders();
@@ -54,7 +54,7 @@ export default function Order() {
               <p className='w-1/4 text-center truncate'>{amount}</p>
               <p className='w-1/4 text-center'>{price.toLocaleString()}원</p>
               <p className='w-1/4 text-right truncate'>
-                {parseTimestamp(created_at)}
+                {formatTimestamp(created_at)}
               </p>
               <p className='w-1/6 text-right'>
                 <button

FE/src/components/Mypage/type.ts

@@ -0,0 +1 @@
+export type MypageSectionType = 'account' | 'order' | 'bookmark' | 'info';

FE/src/components/News/Card.tsx

@@ -1,13 +1,13 @@
-import { NewsDataType } from './NewsDataType.ts';
-import { formatDate } from '../../utils/formatTime.ts';
+import { formatDate } from 'utils/format.ts';
+import { NewsDataType } from './type.ts';
 
 type CardWithImageProps = {
   data: NewsDataType;
 };
 export default function Card({ data }: CardWithImageProps) {
   return (
     <a
-      className='flex cursor-pointer flex-col rounded-lg border p-4 transition-all hover:bg-juga-grayscale-50'
+      className='flex flex-col p-4 transition-all border rounded-lg cursor-pointer hover:bg-juga-grayscale-50'
       href={data.originallink}
       target='_blank'
       rel='noopener noreferrer'
@@ -22,8 +22,8 @@ export default function Card({ data }: CardWithImageProps) {
           {formatDate(data.pubDate)}
         </span>
       </div>
-      <div className='flex w-full items-center justify-between gap-4'>
-        <p className='w-96 truncate text-left text-sm text-juga-grayscale-500'>
+      <div className='flex items-center justify-between w-full gap-4'>
+        <p className='text-sm text-left truncate w-96 text-juga-grayscale-500'>
           {data.description}
         </p>
         <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

@@ -1,7 +1,7 @@
 import Card from './Card.tsx';
 import { useQuery } from '@tanstack/react-query';
-import { getNewsData } from '../../service/getNewsData.ts';
-import { NewsDataType } from './NewsDataType.ts';
+import { getNewsData } from '../../service/news.ts';
+import { NewsDataType } from './type.ts';
 
 export default function News() {
   const { data, isLoading, isError } = useQuery({
@@ -17,7 +17,7 @@ export default function News() {
 
   return (
     <div className='w-full'>
-      <div className='mb-4 flex items-center justify-between'>
+      <div className='flex items-center justify-between mb-4'>
         <h2 className='text-xl font-bold'>주요 뉴스</h2>
       </div>
 

FE/src/components/Rank/RankCard.tsx → FE/src/components/Rank/Card.tsx

@@ -1,11 +1,11 @@
-import { RankingItem } from './RankType.ts';
+import { RankingItem } from './type.ts';
 
 type Props = {
   item: RankingItem;
   type: '수익률순' | '자산순';
 };
 
-export default function RankCard({ item, type }: Props) {
+export default function Card({ item, type }: Props) {
   return (
     <div
       className={

FE/src/components/Rank/RankList.tsx → FE/src/components/Rank/List.tsx

@@ -1,29 +1,25 @@
-import RankCard from './RankCard';
-import useAuthStore from '../../store/authStore.ts';
-import { RankingCategory } from './RankType.ts';
+import Card from './Card.tsx';
+import useAuthStore from '../../store/useAuthStore.ts';
+import { RankingCategory } from './type.ts';
 
 type Props = {
   title: '수익률순' | '자산순';
   data: RankingCategory;
 };
 
-export default function RankList({ title, data }: Props) {
+export default function List({ title, data }: Props) {
   const { topRank, userRank } = data;
   const { isLogin } = useAuthStore();
   return (
     <div className={'flex flex-col gap-5'}>
-      <div className='w-full rounded-lg bg-white p-2 shadow-lg'>
-        <div className='mb-1 border-b pb-1'>
+      <div className='w-full p-2 bg-white rounded-lg shadow-lg'>
+        <div className='pb-1 mb-1 border-b'>
           <h3 className='text-base font-bold text-gray-800'>{title}</h3>
         </div>
 
         <div className='space-y-1'>
           {topRank.map((item, index) => (
-            <RankCard
-              key={`${item.nickname}-${index}`}
-              item={item}
-              type={title}
-            />
+            <Card key={`${item.nickname}-${index}`} item={item} type={title} />
           ))}
         </div>
       </div>
@@ -34,7 +30,7 @@ export default function RankList({ title, data }: Props) {
           </div>
 
           <div className={'space-y-1'}>
-            <RankCard item={userRank} type={title} />
+            <Card item={userRank} type={title} />
           </div>
         </div>
       ) : null}

FE/src/components/Search/SearchCard.tsx

@@ -1,8 +1,8 @@
-import { SearchDataType } from './searchDataType.ts';
 import { useNavigate } from 'react-router-dom';
 import useSearchModalStore from 'store/useSearchModalStore.ts';
 import useSearchInputStore from 'store/useSearchInputStore.ts';
 import { SearchCardHighLight } from './SearchCardHighlight.tsx';
+import { SearchDataType } from './type.ts';
 
 type SearchCardProps = {
   data: SearchDataType;

FE/src/components/Search/SearchCardHighlight.tsx

@@ -1,4 +1,4 @@
-import { formatNoSpecialChar } from '../../utils/formatNoSpecialChar.ts';
+import { formatNoSpecialChar } from 'utils/format.ts';
 
 type SearchCardHighLightProps = {
   text: string;

FE/src/components/Search/SearchHistoryList.tsx

@@ -1,5 +1,5 @@
 import { SearchHistoryItem } from './SearchHistoryItem.tsx';
-import { HistoryType } from './searchDataType.ts';
+import { HistoryType } from './type.ts';
 
 type SearchHistoryListProps = {
   searchHistory: HistoryType[];

FE/src/components/Search/SearchList.tsx

@@ -1,7 +1,7 @@
 import SearchCard from './SearchCard.tsx';
-import { SearchDataType } from './searchDataType.ts';
 import Lottie from 'lottie-react';
 import noResultAnimation from 'assets/noResultAnimation.json';
+import { SearchDataType } from './type.ts';
 
 type SearchListProps = {
   searchData: SearchDataType[];

FE/src/components/Search/index.tsx

@@ -5,13 +5,13 @@ import { SearchInput } from './SearchInput';
 import { SearchHistoryList } from './SearchHistoryList';
 import SearchList from './SearchList.tsx';
 import useSearchInputStore from 'store/useSearchInputStore.ts';
-import { useDebounce } from 'utils/useDebounce.ts';
+import { useDebounce } from 'hooks/useDebounce.ts';
 import { useQuery } from '@tanstack/react-query';
-import { getSearchResults } from 'service/getSearchResults.ts';
 import Lottie from 'lottie-react';
 import searchAnimation from 'assets/searchAnimation.json';
-import { useSearchHistory } from './searchHistoryHook.ts';
-import { formatNoSpecialChar } from '../../utils/formatNoSpecialChar.ts';
+import { useSearchHistory } from 'hooks/useSearchHistoryHook.ts';
+import { getSearchResults } from 'service/search.ts';
+import { formatNoSpecialChar } from 'utils/format.ts';
 
 export default function SearchModal() {
   const { isOpen, toggleSearchModal } = useSearchModalStore();
@@ -36,7 +36,7 @@ export default function SearchModal() {
     if (data && data.length > 0 && debounceValue && !isLoading) {
       addSearchHistory(formatNoSpecialChar(debounceValue));
     }
-  }, [data, debounceValue]);
+  }, [data, debounceValue, addSearchHistory, isLoading]);
 
   if (!isOpen) return null;
 

FE/src/components/StockIndex/Card.tsx

@@ -1,17 +1,16 @@
+import { useEffect, useRef, useState } from 'react';
+import { socket } from 'utils/socket.ts';
+import { drawChart } from 'utils/chart/drawChart.ts';
 import {
   ChartData,
+  MarketType,
   StockIndexData,
   StockIndexValue,
-} from 'components/TopFive/type';
-import { useEffect, useRef, useState } from 'react';
-import { socket } from 'utils/socket.ts';
-import { drawChart } from 'utils/chart/drawChart.ts';
-
-// const X_LENGTH = 79;
+} from './type.ts';
 
 type StockIndexChartProps = {
   name: string;
-  id: 'KOSPI' | 'KOSDAQ' | 'KOSPI200' | 'KSQ150';
+  id: MarketType;
   initialData: StockIndexData;
 };
 

FE/src/components/StockIndex/index.tsx

@@ -1,6 +1,6 @@
+import { getStockIndex } from 'service/stocks.ts';
 import { Card } from './Card.tsx';
 import { useQuery } from '@tanstack/react-query';
-import { getStockIndex } from '../../service/getStockIndex.ts';
 
 export default function StockIndex() {
   const { data, isLoading, isError } = useQuery({
@@ -16,7 +16,7 @@ export default function StockIndex() {
   const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data;
 
   return (
-    <div className='my-2 flex w-full items-center justify-between gap-2'>
+    <div className='flex items-center justify-between w-full gap-2 my-2'>
       <Card name='코스피' id='KOSPI' initialData={KOSPI} />
       <Card name='코스닥' id='KOSDAQ' initialData={KOSDAQ} />
       <Card name='코스피200' id='KOSPI200' initialData={KOSPI200} />

FE/src/components/StockIndex/type.ts

@@ -0,0 +1,15 @@
+export type ChartData = { time: string; value: string; diff: string };
+
+export type StockIndexValue = {
+  curr_value: string;
+  diff: string;
+  diff_rate: string;
+  sign: string;
+};
+
+export type StockIndexData = {
+  chart: ChartData[];
+  value: StockIndexValue;
+};
+
+export type MarketType = 'KOSPI' | 'KOSDAQ' | 'KOSPI200' | 'KSQ150';