>;
5 | export default svg;
6 | }
7 |
--------------------------------------------------------------------------------
/src/shared/components/spacing/index.tsx:
--------------------------------------------------------------------------------
1 | export default function Spacing({ height }: { height: number }) {
2 | return ;
3 | }
4 |
--------------------------------------------------------------------------------
/src/shared/components/toast/index.ts:
--------------------------------------------------------------------------------
1 | import { Toast } from './Toast';
2 | import { ToastsContainer } from './ToastContainer';
3 |
4 | export { Toast, ToastsContainer };
5 |
--------------------------------------------------------------------------------
/.husky/prepare-commit-msg:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 |
4 | CURRENT_SCOPE=$(git branch --show-current | cut -d '/' -f 1)
5 | COMMIT_MESSAGE=$(cat "$1")
6 |
7 |
--------------------------------------------------------------------------------
/public/svgs/icon-circle.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/svgs/icon-timer.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/shared/components/loading/index.ts:
--------------------------------------------------------------------------------
1 | import { ComponentLoading } from './ComponentLoading';
2 | import { PageLoading } from './PageLoading';
3 |
4 | export { ComponentLoading, PageLoading };
5 |
--------------------------------------------------------------------------------
/public/svgs/icon-polygon-up.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/src/shared/components/index.ts:
--------------------------------------------------------------------------------
1 | import { BottomSheet } from './bottom-sheet';
2 | import Spacing from './spacing';
3 | import { Tooltip } from './tooltip';
4 |
5 | export { Tooltip, Spacing, BottomSheet };
6 |
--------------------------------------------------------------------------------
/public/svgs/icon-polygon-down.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/shared/hooks/index.ts:
--------------------------------------------------------------------------------
1 | import useIntersectionObserver from './useIntersectionObserver';
2 | import { useScrollToBottom } from './useScrollToBottom';
3 |
4 | export { useIntersectionObserver, useScrollToBottom };
5 |
--------------------------------------------------------------------------------
/src/shared/utils/file.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 확장자를 반환합니다.
3 | * @example
4 | * @param "image/png"
5 | * @return "png"
6 | */
7 | export const getExtension = (type: string) => {
8 | return type.split('/')[1];
9 | };
10 |
--------------------------------------------------------------------------------
/public/svgs/icon-add.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/svgs/icon-add copy.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/pages/jaringobi/index.tsx:
--------------------------------------------------------------------------------
1 | import { BottomNavigation } from '@/shared/components/navigation';
2 |
3 | export default function Jaringobi() {
4 | return (
5 |
6 |
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/features/feed/index.ts:
--------------------------------------------------------------------------------
1 | import { ChallengeRoomFeedList } from './ChallengeRoomFeedList';
2 | import { Feed } from './Feed';
3 | import { MyRoomFeedList } from './MyRoomFeedList';
4 |
5 | export { Feed, MyRoomFeedList, ChallengeRoomFeedList };
6 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | end_of_line = lf
7 | indent_size = 2
8 | indent_style = space
9 | insert_final_newline = true
10 | max_line_length = 80
11 |
--------------------------------------------------------------------------------
/public/svgs/icon-chevron-right.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/mocks/browser.ts:
--------------------------------------------------------------------------------
1 | // src/mocks/browser.js
2 | import { setupWorker } from 'msw';
3 |
4 | import { handlers } from '@/mocks/handlers/handlers';
5 |
6 | // This configures a Service Worker with the given request handlers.
7 | export const worker = setupWorker(...handlers);
8 |
--------------------------------------------------------------------------------
/public/svgs/icon-chevron-up.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/features/spending/queries.ts:
--------------------------------------------------------------------------------
1 | import { useMutation } from '@tanstack/react-query';
2 |
3 | import { addSpending } from '@/service/spending';
4 |
5 | export const useAddSpendingMutation = () => {
6 | return useMutation({
7 | mutationFn: addSpending,
8 | });
9 | };
10 |
--------------------------------------------------------------------------------
/src/mocks/server.ts:
--------------------------------------------------------------------------------
1 | // src/mocks/server.js
2 | import { setupServer } from 'msw/node';
3 |
4 | import { handlers } from '@/mocks/handlers/handlers';
5 |
6 | // This configures a request mocking server with the given request handlers.
7 | export const server = setupServer(...handlers);
8 |
--------------------------------------------------------------------------------
/public/svgs/icon-arrow-right.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/svgs/icon-chevron-down.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/lib/validation/user.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | export const profileSchema = z.object({
4 | nickName: z
5 | .string()
6 | .min(1, {
7 | message: '유저 이름은 1글자 이상이어야 합니다.',
8 | })
9 | .max(16, {
10 | message: '유저 이름은 16글자를 초과할 수 없습니다.',
11 | }),
12 | });
13 |
--------------------------------------------------------------------------------
/src/shared/types/layout.ts:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import { ReactElement, ReactNode } from 'react';
3 |
4 | // eslint-disable-next-line @typescript-eslint/ban-types
5 | export type NextPageWithLayout = NextPage & {
6 | getLayout?: (page: ReactElement) => ReactNode;
7 | };
8 |
--------------------------------------------------------------------------------
/src/shared/utils/emoji.ts:
--------------------------------------------------------------------------------
1 | import { EmojiType } from '@/shared/types/feed';
2 |
3 | export function createEmojiInfo(
4 | type: EmojiType,
5 | count: number,
6 | selected: EmojiType | null,
7 | ) {
8 | return {
9 | type,
10 | count,
11 | selected: selected === type,
12 | };
13 | }
14 |
--------------------------------------------------------------------------------
/src/mocks/index.ts:
--------------------------------------------------------------------------------
1 | async function initMocks() {
2 | if (typeof window === 'undefined') {
3 | const { server } = await import('./server');
4 | server.listen();
5 | } else {
6 | const { worker } = await import('./browser');
7 | worker.start();
8 | }
9 | }
10 |
11 | initMocks();
12 |
13 | export {};
14 |
--------------------------------------------------------------------------------
/public/svgs/icon-cancel.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/shared/components/loading/ComponentLoading.tsx:
--------------------------------------------------------------------------------
1 | import { IconLoading } from '@/public/svgs';
2 |
3 | export const ComponentLoading = () => {
4 | return (
5 |
6 |
7 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/src/shared/types/spending.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | import { spendSchema } from '../components/form/schema';
4 |
5 | import { ChallengeEvaluation } from './challenge';
6 |
7 | export type Spending = {
8 | challengeId: number;
9 | imageUrl?: string;
10 | evaluation?: ChallengeEvaluation;
11 | } & z.infer;
12 |
--------------------------------------------------------------------------------
/src/features/feed/FeedCreationDate.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils';
2 |
3 | type FeedCreationDateProps = { date: string; className?: string };
4 |
5 | export const FeedCreationDate = ({
6 | date,
7 | className,
8 | }: FeedCreationDateProps) => (
9 | {date}
10 | );
11 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 80,
3 | "tabWidth": 2,
4 | "semi": true,
5 | "singleQuote": true,
6 | "trailingComma": "all",
7 | "arrowParens": "always",
8 | "bracketSpacing": true,
9 | "jsxBracketSameLine": false,
10 | "plugins": [
11 | "prettier-plugin-tailwindcss"
12 | ],
13 | "tailwindFunctions": ["cva", "clsx"]
14 | }
15 |
--------------------------------------------------------------------------------
/makefile:
--------------------------------------------------------------------------------
1 | DOCKER_IMAGE_NAME=jaringobi
2 | DOCKER_IMAGE_TAG=latest
3 |
4 | docker-build:
5 | docker build . -t $(DOCKER_IMAGE_NAME):$(DOCKER_IMAGE_TAG)
6 |
7 | docker-rebuild:
8 | docker build . -t $(DOCKER_IMAGE_NAME):$(DOCKER_IMAGE_TAG) --no-cache
9 |
10 | docker-run:
11 | docker run -d -it --rm -p 3000:3000 $(DOCKER_IMAGE_NAME):$(DOCKER_IMAGE_TAG)
12 |
13 |
--------------------------------------------------------------------------------
/src/shared/components/loading/PageLoading.tsx:
--------------------------------------------------------------------------------
1 | import { IconLoading } from '@/public/svgs';
2 |
3 | export const PageLoading = () => {
4 | return (
5 |
6 |
7 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/src/shared/constants/challenge.ts:
--------------------------------------------------------------------------------
1 | import { Category, CategoryKey } from '../types/challenge';
2 |
3 | export const categoryMap: Record = {
4 | ALL: '전체',
5 | FOOD: '식비',
6 | HOBBY_LEISURE: '취미/여가',
7 | FASHION_BEAUTY: '패션/뷰티',
8 | TRANSPORTATION_AUTOMOBILE: '교통/차량',
9 | };
10 |
11 | export const ALL = '전체';
12 |
13 | export const ACTIVE = 'ACTIVE';
14 |
--------------------------------------------------------------------------------
/src/shared/components/toast/ToastContainer.tsx:
--------------------------------------------------------------------------------
1 | import { useToast } from '@/shared/hooks/useToast';
2 |
3 | import { Toast } from './Toast';
4 |
5 | export const ToastsContainer = () => {
6 | const { toastMessage } = useToast();
7 |
8 | return (
9 |
10 | {toastMessage && }
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/react';
2 | import '@/styles/globals.css';
3 |
4 | const preview: Preview = {
5 | parameters: {
6 | actions: { argTypesRegex: '^on[A-Z].*' },
7 | controls: {
8 | matchers: {
9 | color: /(background|color)$/i,
10 | date: /Date$/,
11 | },
12 | },
13 | },
14 | };
15 |
16 | export default preview;
17 |
--------------------------------------------------------------------------------
/src/features/feed/FeedUserImg.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | type FeedUserImgProps = { imgUrl: string };
4 |
5 | export const FeedUserImg = ({ imgUrl }: FeedUserImgProps) => {
6 | return (
7 |
8 |
9 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/src/shared/store/user.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 | import { devtools } from 'zustand/middleware';
3 |
4 | import { UserProfile } from '../types/user';
5 |
6 | type UserState = {
7 | user?: UserProfile;
8 | setUser: (user: UserProfile) => void;
9 | };
10 |
11 | export const useUserStore = create()(
12 | devtools((set) => ({
13 | setUser: (user) => set({ user }),
14 | })),
15 | );
16 |
--------------------------------------------------------------------------------
/public/svgs/icon-arrow-up-fill.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/service/spending.ts:
--------------------------------------------------------------------------------
1 | import { Spending } from '@/shared/types/spending';
2 |
3 | import { httpClient } from '.';
4 |
5 | export const addSpending = async ({
6 | price,
7 | title,
8 | content,
9 | imageUrl,
10 | challengeId,
11 | evaluation,
12 | }: Spending) => {
13 | return httpClient.post(`/record/${challengeId}`, {
14 | price,
15 | title,
16 | content,
17 | evaluation,
18 | imgUrl: imageUrl,
19 | });
20 | };
21 |
--------------------------------------------------------------------------------
/public/svgs/icon-loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/features/challenge/queryKey.ts:
--------------------------------------------------------------------------------
1 | import { ChallengeFilter } from '@/shared/types/challenge';
2 |
3 | export const challengeKeys = {
4 | all: ['challenge'] as const,
5 | lists: () => [...challengeKeys.all, 'list'] as const,
6 | list: (filters: ChallengeFilter) =>
7 | [...challengeKeys.lists(), filters] as const,
8 | details: () => [...challengeKeys.all, 'detail'] as const,
9 | detail: (id: number) => [...challengeKeys.details(), id] as const,
10 | };
11 |
--------------------------------------------------------------------------------
/src/shared/store/room.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 |
3 | import { CHALLENGE_ID_MY_ROOM } from '../constants';
4 |
5 | type State = {
6 | challengeId: number;
7 | };
8 |
9 | type Action = {
10 | setChallengeId: (challengeId: State['challengeId']) => void;
11 | };
12 |
13 | export const useRoom = create((set) => ({
14 | challengeId: CHALLENGE_ID_MY_ROOM,
15 | setChallengeId: (challengeId) => set(() => ({ challengeId })),
16 | }));
17 |
--------------------------------------------------------------------------------
/src/shared/utils/currency.ts:
--------------------------------------------------------------------------------
1 | type ConvertNumberToCurrencyProps = {
2 | value: number;
3 | unitOfCurrency: string;
4 | };
5 | /**
6 | *
7 | * @example
8 | * convertNumberToCurrency({value: 10000, unitOfCurrency: '원'})
9 | * return '10,000 원'
10 | */
11 | export const convertNumberToCurrency = ({
12 | value,
13 | unitOfCurrency,
14 | }: ConvertNumberToCurrencyProps): string => {
15 | return `${new Intl.NumberFormat('en-US').format(value)}${unitOfCurrency}`;
16 | };
17 |
--------------------------------------------------------------------------------
/src/pages/not-found/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import ErrorPageBuilder from '@/shared/components/error-page';
4 |
5 | const NotFound = () => {
6 | return (
7 |
16 | );
17 | };
18 |
19 | export default NotFound;
20 |
--------------------------------------------------------------------------------
/src/shared/hooks/useScrollToBottom.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 |
3 | const useScrollToBottom = ({ earlyReturn }: { earlyReturn?: boolean }) => {
4 | const bottomRef = useRef(null);
5 |
6 | useEffect(() => {
7 | if (!bottomRef.current || earlyReturn) {
8 | return;
9 | }
10 |
11 | bottomRef.current.scrollIntoView();
12 | }, [[bottomRef.current]]);
13 |
14 | return { bottomRef };
15 | };
16 |
17 | export { useScrollToBottom };
18 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .scrollbar-hide::-webkit-scrollbar {
6 | display: none;
7 | }
8 |
9 | input[type='file'] {
10 | display: none;
11 | }
12 |
13 | /* Chrome, Safari, Edge, Opera */
14 | input::-webkit-outer-spin-button,
15 | input::-webkit-inner-spin-button {
16 | -webkit-appearance: none;
17 | margin: 0;
18 | }
19 |
20 | /* Firefox */
21 | input[type='number'] {
22 | -moz-appearance: textfield;
23 | }
24 |
--------------------------------------------------------------------------------
/src/mocks/handlers/handlers.ts:
--------------------------------------------------------------------------------
1 | import { challengeHandlers } from '@/mocks/handlers/challenge';
2 | import { commentHandlers } from '@/mocks/handlers/comment';
3 | import { emojiHandlers } from '@/mocks/handlers/emoji';
4 | import { feedHandlers } from '@/mocks/handlers/feed';
5 | import { userHandlers } from '@/mocks/handlers/user';
6 |
7 | export const handlers = [
8 | ...userHandlers,
9 | ...feedHandlers,
10 | ...emojiHandlers,
11 | ...commentHandlers,
12 | ...challengeHandlers,
13 | ];
14 |
--------------------------------------------------------------------------------
/src/pages/internal-server-error/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import ErrorPageBuilder from '@/shared/components/error-page';
4 |
5 | const InternalServerError = () => {
6 | return (
7 |
16 | );
17 | };
18 |
19 | export default InternalServerError;
20 |
--------------------------------------------------------------------------------
/src/shared/store/toast.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 |
3 | type State = {
4 | toastMessage: string | null;
5 | };
6 |
7 | type Action = {
8 | setToastMessage: (toastMessage: State['toastMessage']) => void;
9 | };
10 |
11 | const initialState = {
12 | toastMessage: null,
13 | };
14 |
15 | export const useToastStore = create((set) => ({
16 | ...initialState,
17 | setToastMessage: (message) =>
18 | set(() => ({
19 | toastMessage: message,
20 | })),
21 | }));
22 |
--------------------------------------------------------------------------------
/src/shared/components/challenge/ChallengeNotFound.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | import { Button } from '../button';
4 |
5 | export default function ChallengeNotFound() {
6 | return (
7 |
8 |
9 | 아직 아무기록이 없어요
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/shared/components/toast/Toast.tsx:
--------------------------------------------------------------------------------
1 | type ToastProps = {
2 | message: string;
3 | };
4 |
5 | export const TOAST_DURATION = 3000;
6 |
7 | export const Toast = ({ message }: ToastProps) => {
8 | return (
9 |
10 | {message}
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/service/auth-refresh.ts:
--------------------------------------------------------------------------------
1 | import { AxiosInstance } from 'axios';
2 |
3 | import { AuthRefreshResponse } from '@/lib/interfaces';
4 |
5 | export const authRefresh = async (
6 | axiosInstance: AxiosInstance,
7 | ): Promise => {
8 | const response = await axiosInstance.post(
9 | 'https://api.jalingobi.com/auth/refresh',
10 | undefined,
11 | {
12 | headers: {
13 | 'Content-Type': 'application/json',
14 | },
15 | },
16 | );
17 | return response.data;
18 | };
19 |
--------------------------------------------------------------------------------
/src/service/image.ts:
--------------------------------------------------------------------------------
1 | import { PresignedUrlResponse } from '@/shared/types/image';
2 | import { getExtension } from '@/shared/utils/file';
3 |
4 | import { httpClient } from './index';
5 |
6 | export const createPresignedUrl = async (
7 | file: File,
8 | type: string,
9 | ): Promise => {
10 | const response = await httpClient.post('/image/presigned', {
11 | imageFileExtension: getExtension(file?.type).toUpperCase(),
12 | type,
13 | });
14 |
15 | return response.data.result;
16 | };
17 |
--------------------------------------------------------------------------------
/src/lib/interfaces/index.ts:
--------------------------------------------------------------------------------
1 | import { operations } from './api.interface';
2 |
3 | export type UpdateChallenge = operations['updateChallenge'];
4 | export type AuthKakao = operations['authKakao'];
5 | export type AuthRefresh = operations['refreshToken'];
6 |
7 | export type AuthKakaoBody =
8 | AuthKakao['requestBody']['content']['application/json'];
9 | export type AuthKakaoResponse = AuthKakao['responses']['200']['content']['*/*'];
10 | export type AuthRefreshResponse =
11 | AuthRefresh['responses']['200']['content']['*/*'];
12 |
--------------------------------------------------------------------------------
/src/shared/components/date-chip/index.tsx:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 |
3 | type DateChipProps = {
4 | date: string | null;
5 | };
6 |
7 | export const DateChip = ({ date }: DateChipProps) => {
8 | const convertedDate = dayjs(date).format('YYYY년 M월 DD일');
9 |
10 | return (
11 |
12 |
13 | {convertedDate}
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/shared/components/layout/BottomNavLayout.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { BottomNavigation } from '../navigation';
4 |
5 | import styles from './BottomNavLayout.module.css';
6 |
7 | type BottomNavLayoutProps = {
8 | children: ReactNode;
9 | };
10 |
11 | export default function BottomNavLayout({ children }: BottomNavLayoutProps) {
12 | return (
13 |
14 |
{children}
15 |
16 |
12 |
13 | {nickname}
14 |
15 |
16 | {convertedCurrentCharge}
17 |
18 |
10 |
11 | 규칙
12 |
13 | {rules?.map((rule, index) => (
14 | -
15 |
16 | {rule}
17 |
18 | ))}
19 |
20 |
21 |
19 | {filteredCategoryList?.map((challenge) => (
20 |
21 | ))}
22 |
23 | );
24 | };
25 |
26 | export default ChallengeList;
27 |
--------------------------------------------------------------------------------
/src/service/emoji.ts:
--------------------------------------------------------------------------------
1 | import { ApiResponse } from '@/shared/types/api';
2 | import { EmojiRequest } from '@/shared/types/emoji';
3 |
4 | import { httpClient } from '.';
5 |
6 | export const updateEmoji = async ({
7 | recordId,
8 | type,
9 | }: // eslint-disable-next-line @typescript-eslint/ban-types
10 | EmojiRequest): Promise> => {
11 | const response = await httpClient.put(`/record/${recordId}/emoji`, {
12 | type,
13 | });
14 |
15 | return response.data;
16 | };
17 |
18 | export const deleteEmoji = async ({
19 | recordId,
20 | type,
21 | }: // eslint-disable-next-line @typescript-eslint/ban-types
22 | EmojiRequest): Promise> => {
23 | const response = await httpClient.delete(`/record/${recordId}/emoji`, {
24 | data: { type },
25 | });
26 |
27 | return response.data;
28 | };
29 |
--------------------------------------------------------------------------------
/src/features/emoji/queries.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from '@tanstack/react-query';
2 | import { v4 as uuid4 } from 'uuid';
3 |
4 | import { deleteEmoji, updateEmoji } from '@/service/emoji';
5 |
6 | export const useUpdateEmoji = () => {
7 | const id = uuid4();
8 | const queryClient = useQueryClient();
9 |
10 | return useMutation({
11 | mutationFn: updateEmoji,
12 | onSuccess: () => {
13 | queryClient.invalidateQueries({ queryKey: ['useUpdateEmoji', id] });
14 | },
15 | });
16 | };
17 |
18 | export const useDeleteEmoji = () => {
19 | const id = uuid4();
20 | const queryClient = useQueryClient();
21 |
22 | return useMutation({
23 | mutationFn: deleteEmoji,
24 | onSuccess: () => {
25 | queryClient.invalidateQueries({ queryKey: ['juseDeleteEmoji', id] });
26 | },
27 | });
28 | };
29 |
--------------------------------------------------------------------------------
/src/shared/components/button/Button.stories.tsx:
--------------------------------------------------------------------------------
1 | // Button.stories.ts|tsx
2 |
3 | import type { Meta, StoryObj } from '@storybook/react';
4 |
5 | import { IconSearch } from '@/public/svgs';
6 | import { Button } from '@/shared/components/button/Button';
7 |
8 | const meta: Meta = {
9 | title: 'ButtonTest',
10 | component: Button,
11 | };
12 |
13 | export default meta;
14 | type Story = StoryObj;
15 |
16 | export const Contained: Story = {
17 | args: {
18 | variant: 'primary',
19 | size: 'md',
20 | children: 'Primary',
21 | },
22 | };
23 |
24 | export const WithIcon: Story = {
25 | args: {
26 | variant: 'primary',
27 | size: 'md',
28 | children: (
29 | <>
30 |
31 | Button Label
32 |
33 | ),
34 | },
35 | };
36 |
--------------------------------------------------------------------------------
/src/shared/components/form/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | import { contentMaxLength, maxPrice } from '@/shared/constants/spending';
4 |
5 | export const spendSchema = z.object({
6 | price: z
7 | .string()
8 | .transform((year) => Number(year))
9 | .pipe(
10 | z
11 | .number()
12 | .positive({
13 | message: '금액은 0원 이상이어야 합니다.',
14 | })
15 | .max(maxPrice, {
16 | message: `${maxPrice}원 이하로 입력해주세요`,
17 | }),
18 | )
19 | .transform((year) => year.toString()),
20 | title: z
21 | .string()
22 | .max(16, {
23 | message: '지출명은 16자 이내로 입력해주세요',
24 | })
25 | .min(1, {
26 | message: '지출명을 입력해주세요',
27 | }),
28 | content: z.string().max(contentMaxLength, {
29 | message: `${contentMaxLength}자 이하로 작성해주세요`,
30 | }),
31 | });
32 |
--------------------------------------------------------------------------------
/src/shared/components/label/Label.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import * as LabelPrimitive from '@radix-ui/react-label';
4 | import { cva, type VariantProps } from 'class-variance-authority';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const labelVariants = cva(
9 | 'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
10 | );
11 |
12 | const Label = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef &
15 | VariantProps
16 | >(({ className, ...props }, ref) => (
17 |
22 | ));
23 | Label.displayName = LabelPrimitive.Root.displayName;
24 |
25 | export { Label };
26 |
--------------------------------------------------------------------------------
/src/shared/components/input/Input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | );
21 | },
22 | );
23 | Input.displayName = 'Input';
24 |
25 | export { Input };
26 |
--------------------------------------------------------------------------------
/src/shared/components/textarea/Textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | );
20 | },
21 | );
22 | Textarea.displayName = 'Textarea';
23 |
24 | export { Textarea };
25 |
--------------------------------------------------------------------------------
/src/shared/components/layout/header/ProfileHeader.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | import { IconChevronLeft } from '@/public/svgs';
4 | import { Button } from '@/shared/components/button';
5 |
6 | type Props = {
7 | hasChanged: boolean;
8 | };
9 |
10 | const ProfileHeader = ({ hasChanged }: Props) => {
11 | return (
12 |
13 |
14 |
15 |
16 | 프로필 수정
17 |
26 |
27 | );
28 | };
29 |
30 | export default ProfileHeader;
31 |
--------------------------------------------------------------------------------
/src/shared/components/progress-bar/index.tsx:
--------------------------------------------------------------------------------
1 | type ProgressBarProps = {
2 | percent: number;
3 | };
4 |
5 | const ProgressBar = ({ percent }: ProgressBarProps) => {
6 | const getBarColor = (percent: number) => {
7 | if (percent > 0 && percent <= 60) {
8 | return 'bg-accent-dark';
9 | }
10 | if (percent > 60 && percent <= 90) {
11 | return 'bg-primary';
12 | }
13 | return 'bg-system-danger';
14 | };
15 |
16 | const getPercent = (percent: number) => {
17 | if (percent >= 100) {
18 | return 100;
19 | }
20 | return percent;
21 | };
22 |
23 | return (
24 |
30 | );
31 | };
32 |
33 | export { ProgressBar };
34 |
--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Head, Html, Main, NextScript } from 'next/document';
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |
11 |
12 |
17 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/features/feed/RecrutingChallenge.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | type ChallengeRoomRecrutingProps = {
4 | title?: string;
5 | participants?: number;
6 | maxParticipants?: number;
7 | };
8 |
9 | export const RecrutingChallenge = ({
10 | title,
11 | participants,
12 | maxParticipants,
13 | }: ChallengeRoomRecrutingProps) => {
14 | return (
15 |
16 |
{title}
17 |
{`참여 인원 ${participants}명 / ${maxParticipants}명`}
18 |
25 |
26 | 곧이어 챌린지가 시작됩니다.
27 |
28 |
17 |
{title}
18 | {subtitle && (
19 |
{subtitle}
20 | )}
21 |
28 |
29 | {description}
30 |
31 |
15 |
이 소비내역, 거지가 아닌 것 같다면 ?
16 |
코멘트로 회초리를 들어줍시다.
17 |
23 | {comments.map((commentInfo) => {
24 | return (
25 |
30 | );
31 | })}
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/public/svgs/icon-search.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/shared/utils/time/time.ts:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 |
3 | export const calculateDaysLeft = (startAt: string): number => {
4 | const startAtDate = dayjs(startAt);
5 | const today = dayjs().startOf('day');
6 |
7 | const diffInDays = startAtDate.diff(today, 'day');
8 | return Math.max(0, diffInDays);
9 | };
10 |
11 | export const isNewChallenge = (challengeDate: string): string => {
12 | const now = new Date();
13 | const challengeDateObject = new Date(challengeDate);
14 | const diffInDays =
15 | (now.getTime() - challengeDateObject.getTime()) / (1000 * 60 * 60 * 24);
16 | return diffInDays < 3 ? 'NEW' : '';
17 | };
18 |
19 | export const isChallengeDueSoon = (deadline?: string): string => {
20 | if (!deadline) return '';
21 | const now = new Date();
22 | const deadlineDateObject = new Date(deadline);
23 | const diffInDays =
24 | (deadlineDateObject.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
25 | return diffInDays < 3 ? 'Due soon' : '';
26 | };
27 |
--------------------------------------------------------------------------------
/src/shared/components/challenge-achievement/ChallengeAchievementContainer.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 |
3 | import { shallow } from 'zustand/shallow';
4 |
5 | import { useChallengeAchievement } from '@/features/feed/queries';
6 | import { useConvertChallengeAcievement } from '@/shared/hooks/useChallengeAchievement';
7 | import { useRoom } from '@/shared/store/room';
8 |
9 | import { ChallengeAchievement } from './ChallengeAchievement';
10 |
11 | export const ChallengeAchievementContainer = () => {
12 | const challengeId = useRoom((state) => state.challengeId, shallow);
13 |
14 | const router = useRouter();
15 |
16 | const { data, isError } = useChallengeAchievement({ challengeId });
17 |
18 | const convertedData = useConvertChallengeAcievement(data ?? null);
19 |
20 | // TODO: react-error-boundary
21 |
22 | if (isError) {
23 | router.push('/not-found');
24 | return null;
25 | }
26 |
27 | return ;
28 | };
29 |
--------------------------------------------------------------------------------
/src/shared/hooks/useToast.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | import { shallow } from 'zustand/shallow';
4 |
5 | import { TOAST_DURATION } from '../components/toast/Toast';
6 | import { useToastStore } from '../store/toast';
7 |
8 | /**
9 | * @example
10 | const { setToastMessage } = useToast();
11 |
12 | const clickToastTrigger = () => {
13 | setToastMessage('최대 20자까지 작성 가능합니다');
14 | };
15 | */
16 | export const useToast = (timeout = TOAST_DURATION) => {
17 | const [toastMessage, setToastMessage] = useToastStore(
18 | (state) => [state.toastMessage, state.setToastMessage],
19 | shallow,
20 | );
21 |
22 | useEffect(() => {
23 | let toastTimeout: NodeJS.Timeout;
24 |
25 | if (toastMessage) {
26 | toastTimeout = setTimeout(() => {
27 | setToastMessage(null);
28 | }, timeout);
29 | }
30 |
31 | return () => clearTimeout(toastTimeout);
32 | }, [toastMessage, timeout]);
33 |
34 | return { toastMessage, setToastMessage };
35 | };
36 |
--------------------------------------------------------------------------------
/src/features/profile/Profile.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import Link from 'next/link';
3 |
4 | import { IconArrowRight } from '@/public/svgs';
5 | import { Profile } from '@/shared/types/user';
6 |
7 | type Props = {
8 | profile?: Profile;
9 | };
10 |
11 | const Profile = ({ profile }: Props) => {
12 | return (
13 |
14 |
15 |
21 |
22 |
26 |
27 | {profile?.nickname}
28 |
29 |
30 |
31 |
32 | );
33 | };
34 |
35 | export default Profile;
36 |
--------------------------------------------------------------------------------
/src/shared/hooks/useKeepScrollPosition.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useMemo, useEffect, DependencyList } from 'react';
2 |
3 | // TODO: 수정이 필요한 훅입니다.
4 | const useKeepScrollPosition = (deps: DependencyList[]) => {
5 | const containerRef = useRef(null);
6 | const previousScrollPosition = useRef(0);
7 |
8 | useMemo(() => {
9 | if (containerRef?.current) {
10 | const container = containerRef?.current;
11 | previousScrollPosition.current =
12 | container.scrollHeight - container.scrollTop;
13 | }
14 | }, [...deps]);
15 |
16 | // TODO: window가 아닌 특정 Ref의 scroll값을 변경시키도록 수정하면 좋을 듯.
17 | useEffect(() => {
18 | if (containerRef?.current) {
19 | const container = containerRef?.current || {};
20 |
21 | window.scrollTo(
22 | 0,
23 | container.scrollHeight - previousScrollPosition.current,
24 | );
25 | }
26 | }, [...deps]);
27 |
28 | return {
29 | containerRef,
30 | };
31 | };
32 |
33 | export default useKeepScrollPosition;
34 |
--------------------------------------------------------------------------------
/src/pages/auth/kakao/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import React, { useEffect } from 'react';
3 |
4 | import { OAuthRequestToKakao, authKakao } from '@/service/auth';
5 | import { PageLoading } from '@/shared/components/loading';
6 |
7 | export interface State {
8 | code: string;
9 | }
10 |
11 | export default function RedirectedKakao() {
12 | const router = useRouter();
13 |
14 | useEffect(() => {
15 | async function getToken() {
16 | const code = new URL(window.location.href).searchParams.get('code');
17 | if (code) {
18 | const kakao = await OAuthRequestToKakao(code);
19 | const login = await authKakao({
20 | idToken: kakao.id_token,
21 | accessToken: kakao.access_token,
22 | });
23 |
24 | if (login) {
25 | router.push('/search');
26 | }
27 | } else {
28 | router.push('/auth/login');
29 | }
30 | }
31 |
32 | getToken();
33 | }, []);
34 |
35 | return ;
36 | }
37 |
--------------------------------------------------------------------------------
/public/svgs/icon-comment-big.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/shared/components/text-input/TextInput.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj } from '@storybook/react';
2 | import { Meta } from '@storybook/react';
3 |
4 | import { IconArrowUpFill } from '@/public/svgs';
5 | import { TextInput } from '@/shared/components/text-input/TextInput';
6 |
7 | type Story = StoryObj;
8 |
9 | const meta: Meta = {
10 | title: 'Input/TextInput',
11 | component: TextInput,
12 | };
13 |
14 | export default meta;
15 |
16 | export const Default: Story = {
17 | args: {
18 | maxLength: 8,
19 | placeholder: '이름을 입력해주세요',
20 | },
21 | };
22 |
23 | export const Price: Story = {
24 | args: {
25 | rightSection: 원,
26 | placeholder: '0',
27 | classNames: {
28 | input: 'text-right',
29 | },
30 | },
31 | };
32 |
33 | export const Comment: Story = {
34 | render: () => (
35 |
38 |
39 |
40 | }
41 | placeholder="댓글을 남겨보세요."
42 | />
43 | ),
44 | };
45 |
--------------------------------------------------------------------------------
/src/shared/components/challenge-achievement/ChallengeAchievement.tsx:
--------------------------------------------------------------------------------
1 | import { ProgressBar } from '@/shared/components/progress-bar';
2 |
3 | type Props = {
4 | goalCharge: string;
5 | currentCharge: string;
6 | percent: number;
7 | dueDay: string;
8 | };
9 |
10 | const ChallengeAchievement = ({
11 | goalCharge,
12 | currentCharge,
13 | percent,
14 | dueDay,
15 | }: Props) => {
16 | return (
17 |
18 |
19 |
20 |
21 |
{currentCharge}
22 |
{`/${goalCharge}`}
23 |
24 |
25 | {dueDay}
26 |
27 |
28 |
29 |
30 |
10 |
11 |
12 |
13 | 거지들의 이야기로 쌓이는 소비습관
14 |
15 |
16 |
17 |
23 |
24 |
25 | 5초안에 시작하고 소비 습관 챙기기🚀
26 |
27 |
28 |
29 |
30 |
31 |
{children}
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/public/svgs/icon-welldone-small.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/public/svgs/icon-regretful-small.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/features/profile/queries.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
2 |
3 | import {
4 | fetchUserProfile,
5 | getUserInfo,
6 | updateUserProfile,
7 | } from '@/service/user';
8 |
9 | const userKeys = {
10 | all: ['user'] as const,
11 | lists: () => [...userKeys.all, 'list'] as const,
12 | list: (filters: string) => [...userKeys.lists(), { filters }] as const,
13 | details: () => [...userKeys.all, 'detail'] as const,
14 | detail: (id: number) => [...userKeys.details(), id] as const,
15 | };
16 |
17 | // TODO: 로그인 구현 시, 로그인 유저 id를 활용하여 key 관리
18 | export const useUserMyPage = () => {
19 | return useQuery({
20 | queryKey: userKeys.all,
21 | queryFn: fetchUserProfile,
22 | });
23 | };
24 |
25 | // TODO: 로그인 구현 시, 로그인 유저 id를 invalidate 시키도록 수정
26 | export const useUpdateUserProfile = () => {
27 | const queryClient = useQueryClient();
28 | return useMutation({
29 | mutationFn: updateUserProfile,
30 | onSuccess: () => {
31 | queryClient.invalidateQueries(userKeys.all);
32 | },
33 | });
34 | };
35 |
36 | export const useUserInfo = () => {
37 | return useQuery({
38 | queryKey: ['userProfile'],
39 | queryFn: getUserInfo,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import type { AppProps } from 'next/app';
2 | import '@/styles/globals.css';
3 |
4 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
5 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
6 | import 'dayjs/locale/ko';
7 | import dayjs from 'dayjs';
8 |
9 | import { GlobalLayout } from '@/shared/components/layout';
10 | import { ToastsContainer } from '@/shared/components/toast';
11 | import { NextPageWithLayout } from '@/shared/types/layout';
12 |
13 | dayjs.locale('ko');
14 |
15 | // if (process.env.NODE_ENV === 'development') {
16 | // await import('../mocks');
17 | // }
18 | const queryClient = new QueryClient();
19 |
20 | type AppPropsWithLayout = AppProps & {
21 | Component: NextPageWithLayout;
22 | };
23 |
24 | export default function App({ Component, pageProps }: AppPropsWithLayout) {
25 | const getLayout = Component.getLayout ?? ((page) => page);
26 |
27 | return getLayout(
28 |
29 |
30 |
31 |
32 |
33 |
34 | ,
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/public/svgs/icon-crazy-small.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import type { StorybookConfig } from '@storybook/nextjs';
2 | import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
3 |
4 | const config: StorybookConfig = {
5 | stories: ['../src/shared/components/**/*.stories.@(js|jsx|ts|tsx)'],
6 | addons: [
7 | '@storybook/addon-links',
8 | '@storybook/addon-essentials',
9 | '@storybook/addon-interactions',
10 | {
11 | name: '@storybook/addon-styling',
12 | options: {
13 | postCss: true,
14 | },
15 | },
16 | ],
17 | framework: {
18 | name: '@storybook/nextjs',
19 | options: {},
20 | },
21 | docs: {
22 | autodocs: 'tag',
23 | },
24 | webpackFinal: async (config) => {
25 | config.resolve.plugins = [new TsconfigPathsPlugin()];
26 |
27 | const imageRule = config.module.rules.find((rule) => {
28 | if (typeof rule !== 'string' && rule.test instanceof RegExp) {
29 | return rule.test.test('.svg');
30 | }
31 | });
32 | if (typeof imageRule !== 'string') {
33 | imageRule.exclude = /\.svg$/;
34 | }
35 |
36 | config.module.rules.push({
37 | test: /\.svg$/,
38 | use: ['@svgr/webpack'],
39 | });
40 |
41 | return config;
42 | },
43 | };
44 | export default config;
45 |
--------------------------------------------------------------------------------
/public/svgs/icon-comment-small.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/shared/components/challenge-category/ChallengeCategory.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | import clsx from 'clsx';
4 |
5 | type ChallengeCategoryProps = {
6 | challengeId: number;
7 | imgUrl: string;
8 | title: string;
9 | selected: boolean;
10 | onClick: (challengeId: number) => void;
11 | };
12 |
13 | export const ChallengeCategory = ({
14 | challengeId,
15 | imgUrl,
16 | title,
17 | selected,
18 | onClick,
19 | }: ChallengeCategoryProps) => {
20 | return (
21 |
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/public/svgs/filter.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/public/svgs/icon-filter.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/styles/tailwind/typography.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // size-28 height-42
3 | '.font-title-medium-lg': {
4 | fontWeight: 500,
5 | fontSize: '1.75rem',
6 | lineHeight: '2.625rem',
7 | },
8 | // size-20, height-30
9 | '.font-title-medium-md': {
10 | fontWeight: 500,
11 | fontSize: '1.25rem',
12 | lineHeight: '1.875rem',
13 | },
14 | // size-18, height-28
15 | '.font-title-medium-sm': {
16 | fontSize: '1.125rem',
17 | lineHeight: '1.75rem',
18 | },
19 |
20 | // Body
21 | '.font-body-regular-lg': {
22 | fontSize: '1rem',
23 | lineHeight: '1.5rem',
24 | },
25 | '.font-body-regular-sm': {
26 | fontSize: '0.875rem',
27 | lineHeight: '1.25rem',
28 | },
29 |
30 | // Button
31 | '.font-button-medium-lg': {
32 | fontSize: '1.25rem',
33 | lineHeight: '1.875rem',
34 | },
35 | '.font-button-medium-sm': {
36 | fontSize: '1rem',
37 | lineHeight: '1.5rem',
38 | },
39 |
40 | // Caption
41 | '.font-caption-medium-lg': {
42 | fontSize: '1rem',
43 | lineHeight: '1.5rem',
44 | },
45 | '.font-caption-medium-md': {
46 | fontSize: '0.75rem',
47 | lineHeight: '1.125rem',
48 | },
49 | '.font-caption-medium-sm': {
50 | fontSize: '0.625rem',
51 | lineHeight: '1rem',
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/dockerfile:
--------------------------------------------------------------------------------
1 | # syntax=docker/dockerfile:1.4
2 | FROM node:18-alpine AS base
3 |
4 | # dependency 설치
5 | FROM base AS deps
6 |
7 | RUN apk add --no-cache libc6-compat
8 |
9 | WORKDIR /usr/src/app
10 |
11 | COPY --link package.json pnpm-lock.yaml ./
12 | ENV HUSKY 0
13 | RUN yarn global add pnpm && pnpm i --frozen-lockfile --prod
14 |
15 | # 프로젝트를 빌드하는 컨테이너입니다.
16 | FROM base AS builder
17 |
18 | WORKDIR /usr/src/app
19 | COPY --from=deps --link /usr/src/app/node_modules ./node_modules
20 | COPY --link next.config.js ./
21 | COPY --link tsconfig.json ./
22 | COPY --link package.json pnpm-lock.yaml ./
23 | COPY --link public ./public
24 | COPY --link src ./src
25 |
26 | RUN yarn global add pnpm && pnpm run build
27 |
28 | # 프로덕션에서 실행되는 이미지입니다. 빌드된 결과물과 public asset을 가지고 와서 next를 실행합니다.
29 | FROM base AS runner
30 |
31 | WORKDIR /usr/src/app
32 |
33 | ENV NODE_ENV production
34 |
35 | RUN \
36 | addgroup --system --gid 1001 nodejs; \
37 | adduser --system --uid 1001 nextjs
38 |
39 | COPY --from=builder --link /usr/src/app/public ./public
40 | COPY --from=builder --chown=nextjs:nodejs /usr/src/app/.next/standalone ./
41 | COPY --from=builder --chown=nextjs:nodejs /usr/src/app/.next/static ./.next/static
42 |
43 | USER nextjs
44 |
45 | EXPOSE 3000
46 |
47 | ENV PORT 3000
48 |
49 | CMD ["node", "server.js"]
50 |
--------------------------------------------------------------------------------
/src/pages/add-spending/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import React from 'react';
3 |
4 | import { IconChevronLeft } from '@/public/svgs';
5 | import SpendingForm from '@/shared/components/form/SpendingForm';
6 | import BottomNavLayout from '@/shared/components/layout/BottomNavLayout';
7 |
8 | export default function CostPage() {
9 | const router = useRouter();
10 | return (
11 |
12 |
13 |
20 | 지출 추가
21 |
22 |
23 |
30 |
31 |
17 | {visibleParticipants?.map((participant, index) => (
18 | -
19 |
20 |
21 |
27 |
28 |
{participant.nickname}
29 |
37 | ))}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/public/svgs/icon-clothes.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/public/svgs/icon-selected-clothes.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/service/challenge.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChallengeFilter,
3 | ChallengeResponse,
4 | ChallengeSearchResponse,
5 | } from '@/shared/types/challenge';
6 | import {
7 | ChallengeDetailRequest,
8 | ChallengeDetailResponse,
9 | } from '@/shared/types/feed';
10 |
11 | import { httpClient } from '.';
12 |
13 | export const getChallengeDetail = async ({
14 | challengeId,
15 | recordId,
16 | }: ChallengeDetailRequest): Promise => {
17 | const response = await httpClient.get(`/record/${challengeId}/${recordId}`);
18 |
19 | return response.data;
20 | };
21 |
22 | export const searchChallengeList = async ({
23 | category,
24 | filter,
25 | sortedType,
26 | }: ChallengeFilter): Promise => {
27 | const { data } = await httpClient.get('/challenge/search', {
28 | params: {
29 | category: category === 'ALL' ? '' : category,
30 | filter,
31 | sortedType: sortedType === '금액 낮은순' ? 'price' : '',
32 | },
33 | });
34 | return data;
35 | };
36 |
37 | export const fetchChallengeById = async (
38 | id: number,
39 | ): Promise => {
40 | const { data } = await httpClient.get(`/challenge/${id}`);
41 | return data;
42 | };
43 |
44 | export const joinChallenge = async (
45 | id?: number,
46 | ): Promise => {
47 | return httpClient.post(`/challenge/join/${id}`);
48 | };
49 |
--------------------------------------------------------------------------------
/.github/workflows/deployToECR.yaml:
--------------------------------------------------------------------------------
1 | name: Deploy to Amazon ECR
2 |
3 | # main에 push 될 때마다
4 | on:
5 | push:
6 | branches:
7 | - main
8 |
9 | env:
10 | AWS_REGION: ap-northeast-2
11 | ECR_REPOSITORY: dpm-front-repo
12 |
13 | jobs:
14 | deploy:
15 | name: Deploy
16 | runs-on: ubuntu-latest
17 | environment: production
18 |
19 | steps:
20 | - name: Checkout
21 | uses: actions/checkout@v3
22 |
23 | - name: Set up Docker Buildx
24 | uses: docker/setup-buildx-action@v2
25 |
26 | - name: Configure AWS credentials
27 | uses: aws-actions/configure-aws-credentials@0e613a0980cbf65ed5b322eb7a1e075d28913a83
28 | with:
29 | aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
30 | aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
31 | aws-region: ${{ env.AWS_REGION }}
32 |
33 | - name: Login to Amazon ECR
34 | id: login-ecr
35 | uses: aws-actions/amazon-ecr-login@62f4f872db3836360b72999f4b87f1ff13310f3a
36 |
37 | - name: Build, tag, and push image to Amazon ECR
38 | id: build-image
39 | env:
40 | ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
41 | run: |
42 | docker buildx build -f dockerfile --push -t $ECR_REGISTRY/$ECR_REPOSITORY .
43 | echo "image=$ECR_REGISTRY/$ECR_REPOSITORY"
44 | echo "docker Image push done"
45 |
--------------------------------------------------------------------------------
/public/svgs/icon-rice.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/features/emoji/Emoji.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 | import {
5 | IconCommentSmall,
6 | IconCrazySmall,
7 | IconRegretfulSmall,
8 | IconWelldoneSmall,
9 | } from '@/public/svgs';
10 | import { EmojiType } from '@/shared/types/feed';
11 |
12 | type Props = {
13 | type: EmojiType;
14 | count: number;
15 | selected: boolean;
16 | onClickEmoji: (type: EmojiType) => void;
17 | };
18 |
19 | const getIcon: Record = {
20 | CRAZY: ,
21 | REGRETFUL: ,
22 | WELLDONE: ,
23 | comment: ,
24 | };
25 |
26 | export const Emoji = ({ type, count, selected, onClickEmoji }: Props) => {
27 | const bgColor = {
28 | CRAZY: 'bg-[#FFD2B5]',
29 | REGRETFUL: 'bg-[#FFEEAF]',
30 | WELLDONE: 'bg-[#BBE0FF]',
31 | comment: 'bg-gray-30',
32 | };
33 |
34 | return (
35 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/public/svgs/icon-selected-rice.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/pages/my-poor-room/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement, Suspense } from 'react';
2 |
3 | import { shallow } from 'zustand/shallow';
4 |
5 | import { ChallengeRoomFeedList, MyRoomFeedList } from '@/features/feed';
6 | import { Spacing } from '@/shared/components';
7 | import { ChallengeAchievementContainer } from '@/shared/components/challenge-achievement/ChallengeAchievementContainer';
8 | import { ChallengeCategories } from '@/shared/components/challenge-category/ChallengeCategories';
9 | import BottomNavLayout from '@/shared/components/layout/BottomNavLayout';
10 | import { PageLoading } from '@/shared/components/loading';
11 | import { useRoom } from '@/shared/store/room';
12 |
13 | export default function MyPoorRoom() {
14 | const challengeId = useRoom((state) => state.challengeId, shallow);
15 |
16 | const isMyRoom = !challengeId;
17 |
18 | return (
19 |
20 |
21 |
22 |
23 | {!isMyRoom && }
24 |
25 | {isMyRoom ?
:
}
26 |
14 | -
15 |
16 | {board?.PROCEEDING}
17 |
18 | 참가중
19 |
20 | -
21 |
22 | {board?.SUCCESS}
23 |
24 | 성공
25 |
26 | -
27 |
28 | {board?.COMPLETED}
29 |
30 | 완료
31 |
32 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Board;
39 |
--------------------------------------------------------------------------------
/src/service/feed.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChallengeAchievementRequest,
3 | ChallengeAchievementResponse,
4 | ChallengeListResponse,
5 | ChallengeRoomFeedListRequest,
6 | ChallengeRoomFeedListResponse,
7 | MyRoomFeedListRequest,
8 | MyRoomFeedListResponse,
9 | } from '@/shared/types/feed';
10 |
11 | import { httpClient } from '.';
12 |
13 | export const getChallengeRoomFeedList = async ({
14 | challengeId,
15 | offsetRecordId,
16 | }: ChallengeRoomFeedListRequest): Promise => {
17 | const response = await httpClient.get(`/challenge/${challengeId}/feed`, {
18 | params: {
19 | offsetRecordId,
20 | },
21 | });
22 | return response.data;
23 | };
24 |
25 | export const getMyRoomFeedList = async ({
26 | offset,
27 | }: MyRoomFeedListRequest): Promise => {
28 | const response = await httpClient.get(`/challenge/my-room/feed`, {
29 | params: {
30 | offset,
31 | },
32 | });
33 | return response.data;
34 | };
35 |
36 | export const getChallengeAchievement = async ({
37 | challengeId,
38 | }: ChallengeAchievementRequest): Promise => {
39 | const response = await httpClient.get(
40 | `/challenge/${challengeId}/proceeding/info`,
41 | );
42 | return response.data;
43 | };
44 |
45 | export const getChallengeList = async (): Promise => {
46 | const response = await httpClient.get('/challenge/my-list');
47 | return response.data;
48 | };
49 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | const plugin = require('tailwindcss/plugin');
3 |
4 | const color = require('./src/styles/tailwind/color');
5 | const typography = require('./src/styles/tailwind/typography');
6 |
7 | /** @type {import('tailwindcss').Config} */
8 | module.exports = {
9 | content: ['./public/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
10 | theme: {
11 | extend: {
12 | spacing: {
13 | 'bottom-nav': '60px',
14 | },
15 | backgroundImage: {
16 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
17 | 'gradient-conic':
18 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
19 | },
20 | fontFamily: {
21 | sans: ['var(--font-pretendard)'],
22 | },
23 | colors: { ...color },
24 | keyframes: {
25 | 'slide-up': {
26 | '0%': {
27 | opacity: '0',
28 | transform: 'translate(-50%, 100%)',
29 | },
30 | '100%': {
31 | opacity: '1',
32 | transform: 'translate(-50%, -50%)',
33 | },
34 | },
35 | },
36 | animation: {
37 | 'slide-up': 'slide-up 0.2s ease-in-out',
38 | },
39 | },
40 | },
41 | plugins: [
42 | require('tailwind-scrollbar-hide'),
43 | require('tailwindcss-animate'),
44 | plugin(({ addComponents }) => {
45 | addComponents({ ...typography });
46 | }),
47 | ],
48 | };
49 |
--------------------------------------------------------------------------------
/src/shared/components/bottom-sheet/RecordBottomSheet.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React, { MouseEvent } from 'react';
3 |
4 | import { Sheet, SheetContent, SheetHeader } from '@/shared/components/sheet';
5 |
6 | type Props = {
7 | isOpen?: boolean;
8 | onOpenChange?: (isOpen: boolean) => void;
9 | openLeaveModal?: (e: MouseEvent) => void;
10 | };
11 |
12 | const RecordBottomSheet = ({ isOpen, onOpenChange, openLeaveModal }: Props) => {
13 | return (
14 |
15 |
16 |
21 |
22 |
23 |
24 |
25 |
26 | 프로필 변경
27 |
28 |
35 |
36 |
37 |
38 |
25 |
30 |
31 |
32 |
39 |
40 |
41 | {statusCode}
42 |
43 | {title}
44 |
45 | {description1}
46 | {description2}
47 | {description3}
48 |
49 |
50 |
51 |
52 | 메인으로 돌아가기
53 |
54 |
55 |
56 | );
57 | };
58 |
59 | export default ErrorPageBuilder;
60 |
--------------------------------------------------------------------------------
/src/features/challenge/queries.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
2 |
3 | import {
4 | fetchChallengeById,
5 | joinChallenge,
6 | searchChallengeList,
7 | } from '@/service/challenge';
8 | import { fetchUserChallengeList, leaveChallenge } from '@/service/user';
9 | import { useUserStore } from '@/shared/store/user';
10 | import { ChallengeFilter } from '@/shared/types/challenge';
11 |
12 | import { challengeKeys } from './queryKey';
13 |
14 | export const useChallengeQuery = (id: number) => {
15 | return useQuery({
16 | queryKey: challengeKeys.detail(id),
17 | queryFn: () => fetchChallengeById(id),
18 | });
19 | };
20 |
21 | export const useJoinChallenge = (id?: number) => {
22 | const queryClient = useQueryClient();
23 | const user = useUserStore((state) => state.user);
24 | return useMutation({
25 | mutationFn: () => joinChallenge(id),
26 | onSuccess: () => {
27 | queryClient.invalidateQueries(challengeKeys.list({ userId: user?.id }));
28 | },
29 | });
30 | };
31 |
32 | export const useLeaveChallenge = () => {
33 | const queryClient = useQueryClient();
34 | const user = useUserStore((state) => state.user);
35 | return useMutation({
36 | mutationFn: leaveChallenge,
37 | onSuccess: () => {
38 | queryClient.invalidateQueries(challengeKeys.list({ userId: user?.id }));
39 | },
40 | });
41 | };
42 |
43 | export const useChallengeSearch = (filters: ChallengeFilter) => {
44 | return useQuery({
45 | queryKey: challengeKeys.list(filters),
46 | queryFn: () => searchChallengeList(filters),
47 | });
48 | };
49 |
50 | export const useUserChallengeList = () => {
51 | const user = useUserStore((state) => state.user);
52 |
53 | return useQuery({
54 | queryKey: challengeKeys.list({
55 | userId: user?.id,
56 | }),
57 | queryFn: fetchUserChallengeList,
58 | });
59 | };
60 |
--------------------------------------------------------------------------------
/public/svgs/icon-settings.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/shared/components/challenge-category/ChallengeCategories.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import { useMemo } from 'react';
3 |
4 | import { shallow } from 'zustand/shallow';
5 |
6 | import { useChallengeList } from '@/features/feed/queries';
7 | import { useRoom } from '@/shared/store/room';
8 |
9 | import { ChallengeCategory } from './ChallengeCategory';
10 |
11 | export const ChallengeCategories = () => {
12 | const router = useRouter();
13 |
14 | const { data, isError } = useChallengeList();
15 |
16 | const categories = useMemo(
17 | () =>
18 | data
19 | ? data.result.participatedChallengeList.flatMap(
20 | ({ challengeId, imgUrl, title }) => ({
21 | challengeId,
22 | imgUrl,
23 | title,
24 | }),
25 | )
26 | : [],
27 | [data],
28 | );
29 |
30 | const [selectedChallengeId, setChallengeId] = useRoom(
31 | (state) => [state.challengeId, state.setChallengeId],
32 | shallow,
33 | );
34 |
35 | const handleClickCategory = (challengeId: number) => {
36 | setChallengeId(challengeId);
37 | };
38 |
39 | // TODO: react-error-boundary
40 |
41 | if (isError) {
42 | router.push('/not-found');
43 | return null;
44 | }
45 |
46 | return (
47 |
48 |
49 | {categories.map(({ challengeId, imgUrl, title }) => {
50 | return (
51 |
59 | );
60 | })}
61 |
62 |
40 |
41 | {label}
42 |
43 |
44 |
26 |
{value?.length}
27 |
/
28 | {maxLength}
29 |
58 |
65 | {props.maxLength && (
66 |
70 | )}
71 | {rightSection && (
72 |
73 | {rightSection}
74 |
75 | )}
76 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
47 |
53 |
54 |
57 |
58 |
59 | -
60 |
70 |
71 | -
72 |
82 |
83 |
84 |
85 |
86 |
42 |
43 |
48 |
49 |
50 |
챌린지 나가기
51 | onOpenChange?.(false)}
53 | className="absolute right-4 top-0 h-4 w-4 stroke-1 text-gray-50"
54 | />
55 |
56 |
57 |
58 |
59 |
챌린지를 나가면
60 |
자린고비 레벨에 변화가 있을 수 있습니다.
61 |
그래도 챌린지를 나가겠습니까?
62 |
63 |
64 |
71 |
78 |
79 |
82 |
23 |
24 |
25 |
32 |
33 |
34 |
{nickname}
35 |
36 | {content}
37 |
38 |
39 | {timeDifference(commentDate, new Date())}
40 |
41 |
42 |
43 | {isMine && (
44 |
45 | )}
46 |
66 |
67 |
68 |
71 |
72 |
77 |
78 |
79 |
80 |
81 |
88 |
89 |
90 |
onClickFeed(recordId, challengeId)}
60 | >
61 |
62 |
{title}
63 |
64 |
{convertedPrice}
65 |
66 |
67 |
68 |
69 | {content}
70 |
71 | {isChallengeExist && (
72 | <>
73 |
74 |
75 |
76 |
82 |
83 |
84 | {challengeTitle}
85 |
86 |
87 |
88 | )}
89 |
17 |
18 | 마이페이지
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {/* - */}
27 | {/* 알림 */}
28 | {/* setIsNotificationOn((prev) => !prev)} */}
32 | {/* /> */}
33 | {/*
*/}
34 | {/* - */}
35 | {/*
*/}
36 | {/*
*/}
37 | {/* 기기의 알림이 꺼져있어요 */}
38 | {/* */}
39 | {/*
*/}
40 | {/* 거지방 반응, 자린고비 성장 등 서비스 관련 소식을 전달드릴게요 */}
41 | {/*
*/}
42 | {/*
*/}
44 | {/*
*/}
45 | {/*
*/}
46 | {/* */}
47 | {/* 알림 설정 */}
48 | {/* */}
49 | {/* */}
50 | {/*
*/}
51 | {/* */}
52 | {/*
*/}
54 |
55 | -
56 |
57 | 서비스 문의/피드백
58 |
59 |
60 |
61 |
62 | -
63 | 버전정보
64 | {version}
65 |
66 |
67 |
37 |
40 |
void}
42 | initialChips={category}
43 | className="my-2.5 mb-4"
44 | >
45 |
46 | 전체
47 |
48 | {chips.map((chip) => (
49 |
50 | {category === chip
51 | ? categoryIconMap[chip].selected
52 | : categoryIconMap[chip].default}
53 | {categoryMap[chip]}
54 |
55 | ))}
56 |
57 |
58 |
59 |
60 | 모집 중인 방만 보기
61 |
62 | setShowOnlyActiveRoom((prev) => !prev)}
65 | />
66 |
67 |
74 |
75 |
80 |
56 | {children}
57 |
58 |
59 | );
60 | }
61 |
62 | const chipVariants = cva(
63 | 'inline-flex items-center justify-center rounded-full px-1 py-2 font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
64 | {
65 | variants: {
66 | variant: {
67 | selected: 'bg-primary text-white',
68 | unSelected: 'bg-gray-20 text-gray-50 hover:bg-primary hover:text-white',
69 | },
70 | size: {
71 | md: 'px-4 py-2',
72 | },
73 | },
74 | defaultVariants: {
75 | variant: 'unSelected',
76 | size: 'md',
77 | },
78 | },
79 | );
80 |
81 | export interface ChipProps
82 | extends React.ButtonHTMLAttributes,
83 | VariantProps {
84 | value: string;
85 | }
86 |
87 | const Chip = React.forwardRef(
88 | ({ className, size, ...props }, ref) => {
89 | const context = useContext(ChipGroupContext);
90 | if (context === undefined) {
91 | throw new Error('Chip must be used within a ChipGroup');
92 | }
93 | const { toggleChip, selectedChip } = context;
94 | const selected = selectedChip === props.value;
95 | return (
96 |