Perfect Care Front

A React-based web application for perfectionism management programs.

📋 Project Overview

Perfect Care is a psychological counseling and testing system designed for users with perfectionist tendencies. Through a program consisting of 5 parts, it analyzes users' perfectionist tendencies and provides management methods.

Key Features

• Part 01: Facing Perfection
• Part 02: The Trap of Harsh Standards
• Part 03: Managing Perfection
• Part 04: Too Afraid of Making Mistakes
• Part 05: When You Let Go of Perfection, You Get Closer to It

🛠 Technology Stack

Frontend

• React 18.1.0 - User interface construction
• Redux Toolkit - State management
• Redux Persist - Session-based state persistence
• React Router DOM - Routing
• Styled Components - CSS-in-JS styling
• Framer Motion - Animations

API & Data

• Apollo Client - GraphQL client
• Axios - REST API client
• GraphQL - Data queries

UI/UX

• Material-UI - UI component library
• React Icons - Icons
• React Lottie - Animations
• React Toastify - Notification system

Development Tools

• React Scripts - Development environment
• Redux Logger - State change logging
• Redux Thunk - Asynchronous action handling

📁 Project Structure

src/
├── app/                    # App configuration and API
│   ├── api.js             # Axios configuration
│   ├── aplClient.js       # Apollo Client configuration
│   ├── store.js           # Redux Store configuration
│   └── queries.js         # GraphQL queries
├── components/            # Reusable components
│   ├── modal/            # Modal-related components
│   ├── card/             # Card-related components
│   └── ...
├── containers/           # Page-specific containers
│   ├── part0/           # Part 0 related containers
│   ├── part1/           # Part 1 related containers
│   └── ...
├── features/            # Redux slices
│   ├── parts/           # Part-specific state management
│   ├── stateSlice.js    # Global state management
│   └── modalSlice.js    # Modal state management
├── hooks/               # Custom hooks
├── pages/               # Page components
├── services/            # Service logic
├── styles/              # Style-related files
├── utils/               # Utility functions
└── assets/              # Images, fonts, and other static resources

🚀 Getting Started

Prerequisites

• Node.js 16.0.0 or higher
• npm or yarn

Installation and Setup

1. Install Dependencies

   npm install

2. Start Development Server

   npm start

3. Build for Production

   npm run build

Environment Configuration

The project runs in the following environments:

• Development: http://localhost:3000

📊 State Management

Redux Store Structure

• state: User information and authentication state
• modal: Modal state management
• page: Page navigation state
• part0~part5: Part-specific state management

🔧 Key Features

1. User Authentication

• Login/Signup
• JWT token-based authentication
• Session-based state persistence

2. Psychological Testing

• 5-part perfectionism test
• Real-time score calculation
• Result visualization

3. Data Management

• Efficient data queries through GraphQL
• CRUD operations through REST API
• State persistence with Redux Persist

4. UI/UX

• Responsive design
• Smooth page transition animations
• Intuitive user interface

📝 Development Guidelines

Component Writing Rules

• Use functional components
• Style with Styled Components
• Prepare for TypeScript (currently using JavaScript)

State Management Rules

• Use Redux Toolkit
• Manage separate slices for each part
• Prevent unnecessary re-renders

API Call Rules

• GraphQL: Use Apollo Client
• REST API: Use Axios
• Error handling required