2조 과제 제출 (조은상, 주하림, 안태욱, 이용수) #3

ChoEun-Sang · 2023-07-21T13:30:33Z

돈독 (Don-Dok)

'돈독'은 돈 + 讀(읽을 독)의 의미로, 자신의 지출을 기록하고, 손쉽게 지출 패턴을 읽을 수 있게 하는 앱의 목적을 담았습니다.
사용자들은 매일의 소비를 기록하고, 지출을 카테고리별로 분류하며, 날짜별로 추적할 수 있습니다.

개발 기간 : 2023. 07. 05 (수) ~ 2023. 07. 21 (금)
배포 주소 : 'Don-Dok' 소비 기록 앱

개발자 소개

조은상	주하림	안태욱	이용수

달력 - 캘린더 리스트	달력 - 소비 기록 검색창	차트	차트 검색창 스타일

기술 스택

Development

Config

Deployment

Environment

Cowork Tools

주요 기능 및 시연

지출 기록: 원하는 날짜에 카테고리와 금액 입력, 수정, 삭제 가능

기록 목록: 달력과 리스트 형태로 입력한 내역을 표기

검색: 입력된 기록의 카테고리 검색, 검색한 내용을 수정/ 삭제 가능

데이터 시각화: 차트를 통해 날짜별, 카테고리별 지출 패턴을 시각화

GyoHeon

총평

너무 귀여운 프로젝트입니다...
기능상의 문제는 전혀 없고, 완성도를 높일 방법들을 코드에 좀 적어두었습니다.

아쉬운 점

컴포넌트도 하나의 함수이기 때문에, 기능이 적고 가벼운 편이 가독성도 좋고 유지보수에도 좋습니다.
컴포넌트에서 분리할 수 있는 함수나 api들은 최대한 많이 분리해보세요.

또, 스타일에 있어서 styled compoents와 인라인 스타일이 중복되어서 사용되고 있습니다.
기능상의 이점도 중요하지만 가장 중요한 것은 통일성! 이라는 것을 항상 상기해주세요.

GyoHeon · 2023-07-25T13:02:21Z

src/App.js

+  const [activeKey, setActiveKey] = useState('');
+
+  const Components = () => {
+    if (activeKey === '1' || activeKey === '') {
+      return <SubTabs />;
+    } else if (activeKey === '2') {
+      return <Search />;
+    } else if (activeKey === '3') {
+      return <ChartWrpper />;
+    } else if (activeKey === '4') {
+      return <User />;
+    }
+  };


activeKey를 숫자로 설정할거면 string이 아니라 number로 설정하는 것이 더 좋아보입니다.

물론 activeKey 자체를 좀 더 시맨틱한 단어로 설정하는 것도 좋습니다.

GyoHeon · 2023-07-25T13:04:20Z

src/api/requests.js

+// 일별, 주별, 월별 소비 조회
+const lookupByDate = async (period) => {
+  const res = await axios.get(
+    `${BASE_URL}/summary?period=${period}&userId=Team2`,


baseUrl을 default나 interface로 설정하는 것도 좋습니다.

참고: https://axios-http.com/docs/config_defaults

GyoHeon · 2023-07-25T13:13:46Z

src/components/common/TheHeader.jsx

+const TheHeader = () => {
+  return (
+    <Header>
+      <img style={{ width: 60, height: 60 }} src="/assets/dog.gif"></img>


img 에 직접 width, height을 주거나 styled로 스타일을 주는 것이 좋습니다.
리액트의 인라인 스타일을 코드의 가독성을 해치고 성능에도 좋지 않습니다.

참고: https://blog.logrocket.com/why-you-shouldnt-use-inline-styling-in-production-react-apps/

GyoHeon · 2023-07-25T13:18:11Z

src/components/main/calendar/CreateModal.jsx

+  const handleSubmit = async () => {
+    const number = parseInt(amount.replace(/,/g, ''));
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+    const body = {
+      amount: number,
+      userId: 'Team2',
+      category: category,
+      date: dateTime,
+    };
+    try {
+      const res = await axios.post(
+        'https://chickenlecture.xyz/api/expenses',
+        body,
+        { headers: headers },
+      );
+      if (res) {
+        setIsModalOpen(false);
+        props.itemChangedHandler();
+        setDateTime(moment().add(9, 'hours').toISOString());
+        setCategory('');
+        setAmount('');
+      } else {
+        alert('등록실패');
+      }
+    } catch (e) {
+      alert('오류가 발생했습니다.', e);
+    }
+  };


함수가 너무 거대합니다.
api를 보내는 로직은 따로 빼는게 더 좋아보입니다.

GyoHeon · 2023-07-25T13:22:35Z

src/components/main/calendar/CreateModal.jsx

+  const modalStyle = {
+    borderRadius: '10px',
+    padding: 0,
+  };


이런 상수는 컴포넌트 바깥에서 따로 선언해주는 것이 코드가 짧아집니다.

GyoHeon · 2023-07-25T15:13:01Z

src/components/main/list/TheList.jsx

+  const TheDetails = () => {
+    if (selectedDate === 'daily') {
+      return (
+        <Details
+          dateData={daily}
+          isDaily={isDaily}
+          setIsLoading={setIsLoading}
+        />
+      );
+    } else if (selectedDate === 'weekly') {
+      return <Details dateData={weekly} isWeekly={isWeekly} />;
+    } else {
+      return <Details dateData={monthly} />;
+    }
+  };


early return 을 사용하면 더 가독성 높게 처리할 수 있습니다.

Suggested change

const TheDetails = () => {

if (selectedDate === 'daily') {

return (

<Details

dateData={daily}

isDaily={isDaily}

setIsLoading={setIsLoading}

/>

);

} else if (selectedDate === 'weekly') {

return <Details dateData={weekly} isWeekly={isWeekly} />;

} else {

return <Details dateData={monthly} />;

}

};

const TheDetails = () => {

if (selectedDate === 'daily') {

return (

<Details

dateData={daily}

isDaily={isDaily}

setIsLoading={setIsLoading}

/>

);

}

if (selectedDate === 'weekly') {

return <Details dateData={weekly} isWeekly={isWeekly} />;

}

return <Details dateData={monthly} />;

};

GyoHeon · 2023-07-25T15:20:53Z

src/components/stastics/PeriodChart.jsx

+            backgroundColor: [
+              // 'rgba(242,80,34, .3)', // 빨
+              // 'rgba(127,186,0, .3)', // 초
+              // 'rgba(0,164,239, .3)', // 파
+              // 'rgba(255,185,0, .3)', // 노
+              // 'rgba(115,115,115, .3)', // 흑
+              'rgba(255, 154, 60, .7)', // #ff9a3c
+              'rgba(21, 82, 99, .7)', // #155263
+              'rgba(189, 195, 198, .7)', // #bdc3c6
+              'rgba(44, 54, 93, .7)', // #2c365d
+              'rgba(255, 111, 60, .7)', // #ff6f3c
+              'rgba(255, 201, 60, .7)', // #ffc93c
+            ],


상수로 변환해서 사용하면 깔끔해질 것 같습니다.

GyoHeon · 2023-07-25T15:25:48Z

src/components/stastics/TotalAmountChart.jsx

+      // UTC 변경 함수
+      const convertToKoreanTime = (date) => {
+        const utcTime = date.getTime();
+        const koreanTime = utcTime - 9 * 60 * 60 * 1000; // 9시간(밀리초 단위)을 뺀 한국 시간
+        return new Date(koreanTime);
+      };
+
+      // 일자 가시성 변경 함수
+      const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        const koreanTime = convertToKoreanTime(date);
+        const year = koreanTime.getFullYear();
+        const month = ('0' + (koreanTime.getMonth() + 1)).slice(-2);
+        const day = ('0' + koreanTime.getDate()).slice(-2);
+        return `${month}월 ${day}일`;
+        // return `${year}년 ${month}월 ${day}일`;
+      };


util 함수로 컴포넌트 밖에서 선언하는 것이 좋아보입니다.

GyoHeon · 2023-07-25T15:26:29Z

src/components/stastics/TotalAmountChart.jsx

+        <Select id="year" value={year} onChange={handleChangeYear}>
+          <Option value={currentYear - 3}>{currentYear - 3}년</Option>
+          <Option value={currentYear - 2}>{currentYear - 2}년</Option>
+          <Option value={currentYear - 1}>{currentYear - 1}년</Option>
+          <Option value={currentYear}>{currentYear}년</Option>
+          <Option value={currentYear + 1}>{currentYear + 1}년</Option>
+          <Option value={currentYear + 2}>{currentYear + 2}년</Option>
+          <Option value={currentYear + 3}>{currentYear + 3}년</Option>
+        </Select>
+        <label htmlFor="month"> </label>
+        <Select id="month" value={month} onChange={handleChangeMonth}>
+          <Option value={1} className="num1">
+            1월
+          </Option>
+          <Option value={2}>2월</Option>
+          <Option value={3}>3월</Option>
+          <Option value={4}>4월</Option>
+          <Option value={5}>5월</Option>
+          <Option value={6}>6월</Option>
+          <Option value={7}>7월</Option>
+          <Option value={8}>8월</Option>
+          <Option value={9}>9월</Option>
+          <Option value={10}>10월</Option>
+          <Option value={11}>11월</Option>
+          <Option value={12}>12월</Option>


반복 되는 컴포넌트는 반복문을 이용하고 하드코딩을 줄여주세요!

GyoHeon · 2023-07-25T15:27:23Z

src/components/stastics/chartOption/chartOption.js

@@ -0,0 +1,163 @@
+// 일 지출 내역별
+export const lineOptions_amount = {


상수는 대문자로 적어주세요!

Feat(fe): 프로젝트 생성

972e053

ChoEun-Sang closed this Jul 21, 2023

ChoEun-Sang changed the title ~~Feat(fe): 프로젝트 생성~~ 2조 과제 제출 (조은상, 주하림, 안태욱, 이용수) Jul 22, 2023

ChoEun-Sang reopened this Jul 22, 2023

GyoHeon reviewed Jul 25, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2조 과제 제출 (조은상, 주하림, 안태욱, 이용수) #3

2조 과제 제출 (조은상, 주하림, 안태욱, 이용수) #3

ChoEun-Sang commented Jul 21, 2023 •

edited

Loading

GyoHeon left a comment

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

GyoHeon Jul 25, 2023

		@@ -0,0 +1,163 @@
		// 일 지출 내역별
		export const lineOptions_amount = {

2조 과제 제출 (조은상, 주하림, 안태욱, 이용수) #3

Are you sure you want to change the base?

2조 과제 제출 (조은상, 주하림, 안태욱, 이용수) #3

Conversation

ChoEun-Sang commented Jul 21, 2023 • edited Loading

돈독 (Don-Dok)

개발자 소개

기술 스택

Development

Config

Deployment

Environment

Cowork Tools

주요 기능 및 시연

GyoHeon left a comment

Choose a reason for hiding this comment

총평

아쉬운 점

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChoEun-Sang commented Jul 21, 2023 •

edited

Loading