Skip to content

Commit

Permalink
Merge pull request #2 from MOJAN3543/main
Browse files Browse the repository at this point in the history 
feat: board 게시글 추가
  • Loading branch information
@ArpaAP
ArpaAP authored Aug 6, 2024
2 parents 697ac1b + 1bfc524 commit 06a4f27
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 110 deletions.
149 changes: 39 additions & 110 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,39 @@
# Turborepo starter

This is an official starter turborepo.

## Using this example

Run the following command:

```sh
npx create-turbo@latest -e with-prisma
```

## What's inside?

This turborepo includes the following packages/apps:

### Apps and Packages

- `web`: a [Next.js](https://nextjs.org/) app
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
- `@repo/database`: [Prisma](https://prisma.io/) ORM wrapper to manage & access your database
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo

Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

### Utilities

This turborepo has some additional tools already setup for you:

- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting
- [Prisma](https://prisma.io/) for database ORM
- [Docker Compose](https://docs.docker.com/compose/) for local database

### Database

We use [Prisma](https://prisma.io/) to manage & access our database. As such you will need a database for this project, either locally or hosted in the cloud.

To make this process easier, we offer a [`docker-compose.yml`](https://docs.docker.com/compose/) file to deploy a MySQL server locally with a new database named `turborepo` (To change this update the `MYSQL_DATABASE` environment variable in the `docker-compose.yml` file):

```bash
cd my-turborepo
docker-compose up -d
```

Once deployed you will need to copy the `.env.example` file to `.env` in order for Prisma to have a `DATABASE_URL` environment variable to access.

```bash
cp .env.example .env
```

If you added a custom database name, or use a cloud based database, you will need to update the `DATABASE_URL` in your `.env` accordingly.

Once deployed & up & running, you will need to create & deploy migrations to your database to add the necessary tables. This can be done using [Prisma Migrate](https://www.prisma.io/migrate):

```bash
npx prisma migrate dev
```

If you need to push any existing migrations to the database, you can use either the Prisma db push or the Prisma migrate deploy command(s):

```bash
yarn run db:push

# OR

yarn run db:migrate:deploy
```

There is slight difference between the two commands & [Prisma offers a breakdown on which command is best to use](https://www.prisma.io/docs/concepts/components/prisma-migrate/db-push#choosing-db-push-or-prisma-migrate).

An optional additional step is to seed some initial or fake data to your database using [Prisma's seeding functionality](https://www.prisma.io/docs/guides/database/seed-database).

To do this update check the seed script located in `packages/database/src/seed.ts` & add or update any users you wish to seed to the database.

Once edited run the following command to run tell Prisma to run the seed script defined in the Prisma configuration:

```bash
yarn run db:seed
```

For further more information on migrations, seeding & more, we recommend reading through the [Prisma Documentation](https://www.prisma.io/docs/).

### Build

To build all apps and packages, run the following command:

```bash
yarn run build
```

### Develop

To develop all apps and packages, run the following command:

```bash
yarn run dev
```

## Useful Links

Learn more about the power of Turborepo:

- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
# ✨ 밀로그: Mealog
모두의 건강한 식사를 위한 **AI 기반 영양 분석 및 식단 추천 서비스** Mealog
## 🦁 Team 경대라이온즈
|<img src="https://avatars.githubusercontent.com/u/54466872?v=4" width="150" height="150"/>|<img src="https://avatars.githubusercontent.com/u/98478441?v=4" width="150" height="150"/>|<img src="https://avatars.githubusercontent.com/u/56078563?v=4" width="150" height="150"/>|<img src="https://avatars.githubusercontent.com/u/71973291?v=4" width="150" height="150"/>|
|:-:|:-:|:-:|:-:|
|황부연<br/>[@ArpaAP](https://github.com/ArpaAP)|박규리<br/>[@parkgyul](https://github.com/parkgyul)|박재민<br/>[@jamie2779](https://github.com/jamie2779)|심준성<br/>[@MOJAN3543](https://github.com/MOJAN3543)|

## 🥰 개발 동기
> 2020년 보건복지부에서는 한국인의 대부분이 나트륨의 섭취가 과도하게 높고 칼슘, 비타민 A와 같은 주요 영양소 섭취가 부족하다고 밝혔습니다. 이러한 문제를 해결하고자 사진을 통해 간편하게 음식의 영양 정보를 추적하고, 기록하여 본인의 식습관을 뒤돌아 보고 좀 더 건강한 식사를 할 수 있도록 하는 서비스인 Mealog를 개발하게 되었습니다.
## 🔍 주요 기능
* 사용자가 업로드한 사진을 AI 모델을 통해 식사에 포함된 영양소를 분석
* 사용자가 하루에 섭취한 영양소를 기록하고 점수화
* 음식 사진을 서비스에 공유 · 다른 사람들의 사진들을 탐색
* 부족한 영양 섭취에 도움을 주는 식품 판매

## 📚 기술 스택
### Front-End
* Next.js
* TypeScript
* TailWind CSS
### Back-End
* Next.js
* TypeScript
### AI API
* YOLO v3
* PyTorch
* Flask
### Other
* Docker
* Turborepo
* Prisma
* Github Action

## 🤔 유저 플로우
![UserFlow_Diagram](https://github.com/user-attachments/assets/1396d6c3-84a5-4070-ad3e-23b11389e0d2)

## 🤖 AI 레포지토리
> [mealog-ai](https://github.com/LikeLion-KNU04/mealog-ai)
143 changes: 143 additions & 0 deletions apps/web/src/app/board/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
"use client"

import Comment from "@/components/Comment";
import MainLayout from "@/components/MainLayout";
import Nutrient from "@/components/Nutrient";
import { IconBookmark, IconChevronLeft, IconChevronRight, IconHeart, IconShare } from "@tabler/icons-react";
import Image from "next/image";
import { useState } from "react";

export default function BoardDetailPage(){
const imageLength = 5;
const [index, setIndex] = useState(0);
const moveIndex = (offset: number) => {
if(0 <= (index + offset) && (index + offset) < imageLength)
setIndex(index + offset);
else if(0 > (index + offset))
setIndex(0);
else
setIndex(imageLength-1);
}
return (
<MainLayout>
<div className="flex items-start gap-5 px-32 py-16">
<div className="flex gap-3">
<button
type="button"
onClick={() => {moveIndex(-1)}}
>
<IconChevronLeft/>
</button>
<div className="flex flex-row overflow-hidden" style={{width: 512}}>

<div className="flex"
style={{
transform: `translateX(-${index * 512}px)`,
transition: "ease-in-out 250ms"
}}
>
<Image
src="https://picsum.photos/id/1/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/2/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/3/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/4/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
<Image
src="https://picsum.photos/id/5/512/512"
alt="board Iamge 1"
width={512}
height={512}
/>
</div>

</div>
<button
type="button"
onClick={() => {moveIndex(1)}}
>
<IconChevronRight/>
</button>
</div>
<div className="flex flex-col flex-grow gap-6 p-6 shadow-2xl shadow-black/10">
<div className="flex items-center gap-3">
<Image
className="rounded-full"
alt="profile Image"
src="https://picsum.photos/200/200"
width={32}
height={32}
/>
<div className="text-xl">
username
</div>
<div className="text-base text-gray-500">
1일전
</div>
</div>
<div className="text-base">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
<Nutrient carbs={100} protein={100} fat={100}/>
</div>
<div className="flex flex-row py-5 border rounded-lg justify-evenly ">
<button
type="button"
>
<IconHeart/>
</button>
<button
type="button"
>
<IconBookmark/>
</button>
<button
type="button"
>
<IconShare />
</button>
</div>
<div className="text-xl">
댓글 3개
</div>
<div className="flex flex-col gap-5">
<Comment
profileImage="https://picsum.photos/200/200"
username="username"
content="댓글입니다."
/>
<Comment
profileImage="https://picsum.photos/200/200"
username="username"
content="댓글입니다."
/>
<Comment
profileImage="https://picsum.photos/200/200"
username="username"
content="댓글입니다."
/>

</div>
</div>
</div>
</MainLayout>
)
}

0 comments on commit 06a4f27

Please sign in to comment.